Open Design

מה זה Open Design

Open Design (open-design.ai) היא חלופת קוד-פתוח, local-first, ל-Claude Design של Anthropic. ה-repo הוא nexu-io/open-design, תחת רישיון Apache-2.0. הגרסה היציבה הנוכחית היא 0.11.0 ("The Bazaar"), ששוחררה ב-17 ביוני 2026 (גרסה 0.9.0, "Design for everyone", שוחררה ב-2 ביוני 2026). אין שרת ענן של Open Design ואין מנוי — הכל רץ אצלך כאפליקציית דסקטופ נייטיב סביב Node daemon.

הרעיון המכונן פשוט: אתה כבר משלם עבור coding agent — Claude Code, Codex, Cursor, Gemini או דומיהם. במקום להחזיק כלי עיצוב נפרד, Open Design הופך את אותו agent למנוע עיצוב. הוא מייצר web prototypes, מסכי desktop ו-mobile, דשבורדים, דקים, עמודים עריכתיים בסגנון מגזין, וגם תמונות, וידאו ואודיו. הפלט נכתב כקבצים אמיתיים לדיסק, מוצג בתצוגה מקדימה בתוך iframe מבודד (sandboxed), ומיוצא ל-HTML / PDF / PPTX / MP4 / ZIP / Markdown. דף הנחיתה הרשמי מציג מעל מאה skills מודולריים ו-מעל מאה מערכות עיצוב DESIGN.md (המספר המדויק משתנה כמעט בכל release — בדוק את דף הנחיתה), ותמיכה ב-Claude Code / OpenClaw / Codex / Cursor / OpenCode / Qwen / Copilot / Hermes / Kimi ובמגוון רחב של CLIs נוספים. המספרים האלו זזים בקצב מהיר מגרסה לגרסה, אז התייחס אליהם כסדר-גודל ולא כקבוע.

איך זה עובד — ארכיטקטורה

בניגוד לכלי SaaS שמריץ מודל בענן שלו, Open Design הוא מעטפת מסביב ל-agent שכבר מותקן אצלך. בפועל זה stack בן שלוש שכבות:

• Frontend — אפליקציית Next.js 16 + React 18 שמריצה את ה-UI של ה-Studio: שיחת ה-prompt, התצוגה המקדימה, ולוח ה-Settings (model picker, BYOK, MCP).
• Daemon — תהליך רקע של Node 24 מבוסס Express, עם אחסון ב-SQLite דרך better-sqlite3. הוא סורק את $PATH בעת האתחול, מזהה אילו CLIs של coding-agents מותקנים, ומחשף את ה-skills ומערכות העיצוב לכל agent שתבחר.
• CLI layer — ה-daemon לא "מדבר" עם מודל ישירות אלא מריץ (spawn) את ה-agent שבחרת ומנהל אותו. כך אותה לוגיקת עיצוב עובדת מעל Claude Code, Codex, Cursor או Gemini בלי לכתוב מחדש דבר.

ה-primitives שמרכיבים את הקטלוג ניידים בכוונה: כל skill הוא בנדל קבצים מבוסס SKILL.md, וכל מערכת עיצוב היא קובץ DESIGN.md בודד שמתאר צבע, טיפוגרפיה, מרווחים, layout, רכיבים, motion וקול-מותג. הוסף קובץ לתיקייה הנכונה, הפעל מחדש, וה-daemon כבר רואה אותו — אין registry סגור או build step. בגרסה 0.9.0 ה-skills עברו פורמליזציה ל-"Plugins": הם מופיעים ב-drawer, ניתנים לרישום מה-CLI, ואינדקסים באתר.

זרימת העבודה: Detect → Discover → Direct → Deliver

הליבה הקונספטואלית היא לולאה בת ארבעה שלבים שמחליפה את ה"prompt-and-pray". התיעוד מנסח אותה כ-"discover the brief, lock the direction, stream the artifact, critique, deliver":

• Detect — ה-daemon סורק את $PATH, מדליק את ה-agents שכבר מותקנים, וטוען אוטומטית את ה-skills ומערכות העיצוב. אתה לא מגדיר ידנית "באיזה מודל להשתמש" אם לא רוצה.
• Discover — הסיבוב הראשון אינו צ'אט פתוח אלא טופס מובנה: משטח (web / mobile / deck / poster), קהל יעד, טון, סקאלה והקשר מותגי. זה חוסך את לולאת "ספר לי עוד" ומקבע brief לפני שמודל בכלל רץ.
• Direct — הסיבוב השני מחזיר חמישה כיוונים ויזואליים, כל אחד עם palette, font stack ותיאור אווירה. אתה נועל כיוון אחד לפני שנכתב קוד — כך ה-agent לא מבזבז סיבוב על אסתטיקה שלא רצית.
• Deliver — ה-agent כותב קבצים לדיסק תוך כדי הזרמת todo card, ואז מגיעה תצוגה מקדימה חיה, אפשרות critique, וייצוא.

התקנה והגדרה

אפשרות A — אפליקציית דסקטופ (מומלצת לרוב). קבצי binary מוכנים מראש בדף ה-releases. שמות ה-assets של 0.9.0 מצביעים על הפלטפורמות הנתמכות:

# macOS (Apple Silicon / Intel)
open-design-0.9.0-mac-arm64.dmg
open-design-0.9.0-mac-x64.dmg

# Windows
open-design-0.9.0-win-x64-setup.exe
open-design-0.9.0-win-x64-portable.zip

# Linux
docker / podman compose

אפשרות B — מקוד המקור. דורש Node ~24 ו-pnpm 10.33.x דרך corepack:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

אפשרות C — Docker (לפריסה headless / שרת). דרך Compose, נגיש על פורט 7456:

docker compose up -d
# now reachable at http://localhost:7456

בפריסת שרת מאובטחים את הגישה ל-daemon דרך משתנה הסביבה OD_DATA_TOKEN — זה ה-token שמגן על ה-API, לא מפתח של ספק מודל.

הפעלה ושליטה מהטרמינל

אם אתה מריץ מהמקור, את ה-daemon מנהלים דרך עוטף ה-tools-dev. ה-foreground מריץ עם לוגים לקבצים, וניתן לקבע פורטים כדי להריץ כמה instances במקביל:

pnpm tools-dev run web        # foreground, logs to files
pnpm tools-dev status         # check running processes
pnpm tools-dev logs           # tail recent logs
pnpm tools-dev stop           # stop all sidecars
pnpm tools-dev restart        # full restart

חיבור הכלי שלך לקטלוג ה-skills כ-MCP נעשה בפקודה אחת — אין עריכת JSON ידנית של config:

od mcp install <agent>
# claude · codex · cursor · copilot · openclaw · antigravity · gemini · ...

BYOK בכל שכבה

גרסה 0.9.0 מוסיפה AMR (Model Router מובנה): נכנסים פעם אחת, בוחרים מודל, ומתחילים — בלי טקס הגדרת מפתחות API. אבל הפילוסופיה נשארת "BYOK at every layer": אתה יכול להביא מפתח משלך לכל שכבה, וכל endpoint תואם OpenAI מתחבר כ-custom provider. זה פותח את הדלת ל-DeepSeek, Groq, OpenRouter או vLLM מאוחסן עצמאית. כל הקריאות עוברות דרך proxy מקומי עם הגנת SSRF:

POST /api/proxy/anthropic/stream
POST /api/proxy/openai/stream
POST /api/proxy/azure/stream
POST /api/proxy/google/stream
POST /api/proxy/ollama/stream

במילים אחרות, אין נקודה יחידה שבה Open Design "רואה" את התעבורה שלך: ה-prompt עובר ישירות מהמכונה שלך לספק שבחרת.

יכולות מרכזיות בגרסה 0.9.0

• קטלוג skills גדול — לפי דף הנחיתה הרשמי, עשרות skills פרוסים על פני prototype, deck, template, design-system, image, video ו-audio. דוגמאות אמיתיות מתיקיית skills/: frontend-dev, figma-generate-design, brand-guidelines, design-review, copywriting, color-expert, סדרת ה-decks (deck-swiss-international, html-ppt-retro-quarterly-review), אנימציה (gsap-core, gsap-scrolltrigger), ויזואליזציית נתונים (d3-visualization, frame-data-chart-nyt) ויצירת מדיה (fal-generate, fal-video-edit).
• מערכות DESIGN.md ניידות — קובץ markdown אחד לכל מותג, שעובר בין כל agent בלי הנדסה מחדש.
• מתאמי agent רבים — Claude Code, Codex, Cursor, OpenCode, Qwen, Copilot, Hermes, Kimi ו-OpenClaw, ובגרסה 0.9.0 נוספו Aider כ-adapter ראשון-במעלה, Trae CLI מעל ACP, מתאם Antigravity, תמיכת DeepSeek Reasonix CLI דרך ACP, וזיהוי CodeWhale כ-fallback של DeepSeek TUI. (דף הנחיתה עצמו נוקב במספרים שונים לרשימה הזו, לכן עדיף להתייחס אליה איכותית.)
• ייצוא רב-פורמטי — HTML עם assets מוטמעים, PDF דרך הדפסת דפדפן (מודע-לדקים), PPTX מונע-agent, MP4 דרך HyperFrames, ZIP ו-Markdown.
• שיפורי 0.9.0 — queue chat שמאפשר לשלוח הודעה תוך כדי ריצה פעילה בלי לחכות, חיפוש ב-model picker שחותך רשימות מודלים ארוכות, וקטלוגי BYOK משותפים בין ה-Settings וה-switcher המוטבע.

מבנה ריצה ראשונה על הדיסק

ה-daemon כותב תיקיית .od/ בשורש ה-repo. שם נשמרים גם בסיס הנתונים וגם ספריות העבודה של הפרויקטים — וזה בדיוק מה שהופך את הכלי ל-local-first בפועל, לא רק בשיווק:

.od/
├── app.sqlite        # projects, conversations, messages
└── projects/<id>/    # per-project working dir (the agent's cwd)

ה-MCP server המובנה הוא החצי השני של הסיפור המקומי. לאחר od mcp install, כלי כמו Claude Code או Cursor יכול לקרוא קבצים ישירות מהפרויקט הפעיל ב-Open Design ללא העלאה מחדש. כלומר artifact שנכתב על-ידי Codex בתוך Open Design זמין מיידית ל-Claude Code בטרמינל אחר — מקור האמת הוא הקובץ על הדיסק, לא מסמך ענן.

מתי להשתמש בזה (וגם מגבלות)

שתי סיבות הופכות את זה למהלך קטגוריאלי ולא רק לשכפול. ראשית, local-first אמיתי: קבצי העיצוב, ה-prompts והקשר המותגי נשארים על המכונה שלך — אין שלב העלאה, אין סעיף "אנו עשויים להשתמש בזה לאימון", אין מנוי. שנית, DESIGN.md נייד הוא ה-primitive הנכון: קובץ markdown יחיד שמתאר את Linear, Stripe או את המותג שלך עובר בין Claude, Cursor, Codex ו-Gemini בלי הנדסה מחדש. זה החלק ש-Figma מתקשה להעתיק.

בשימוש יומיומי המנוף הגדול הוא prototyping מהיר במצב מותג: בוחרים מערכת, עוברים Discover ו-Direct, ומקבלים תצוגה מקדימה של HTML סטטי תוך דקות במקום שעות. נתיב הדקים מחליף חלק נכבד מהעבודה שהיתה הולכת לכלי מצגות מסורתי, ו-skill מסוג magazine/editorial מייצר כמה וריאנטים של פריסה מהר יותר מבחירה ידנית של תבנית. מניסיון, השלב ששווה הכי הרבה הוא דווקא Direct — נעילת כיוון ויזואלי לפני שנכתב קוד חוסכת את רוב הסיבובים המבוזבזים.

אבל כדאי להבין את הגבולות. הכלי טוב ככל שה-agent שמאחוריו: אם המודל שבחרת חלש בקוד, גם הפלט יהיה חלש. ה-DESIGN.md מתאר מערכת — לא תחליף לדיירקטור אמנותי שמרגיש מתי לשבור את הכללים. הפלט הוא קוד front-end ו-assets, לא קובץ Figma חי עם רכיבים שאפשר לערוך בכלי עיצוב; מי שצריך handoff לצוות עיצוב ימשיך דרך ה-skill של figma-code-connect או ייצוא. ולבסוף, המספרים (skills, מערכות, adapters) משתנים כמעט בכל release — תמיד עדיף לאמת מול דף ה-releases לפני שמסתמכים על פיצ'ר ספציפי.

מקורות

• open-design.ai — דף הנחיתה ותיעוד
• github.com/nexu-io/open-design — ה-repo, README והגדרות
• Release 0.9.0 — פירוט הגרסה וקבצי ה-binary
• skills/ — קטלוג ה-skills במאגר