نموذج الأسئلة أولاً
Surface · audience · tone · brand · scale. ثلاثون ثانية من radios أفضل من ثلاثين دقيقة من إعادة التوجيه.
مفتوح المصدر · محلي أولاً · BYOK
البديل مفتوح المصدر لـ Claude Design.
يعمل عبر CLI لـ coding-agent تستخدمه أصلاً — Claude Code, Codex, Cursor, Gemini, OpenCode، وأحد عشر آخرون. 110 Skills · 141 Design Systems · خمسة اتجاهات بصرية · Apache-2.0.
Apache-2.0 · بدون تسجيل · CLI خاصتك، مفاتيحك
لماذا أُنشئ هذا
Claude Design من Anthropic (Opus 4.7، أبريل 2026) كشف ما يحدث حين يكفّ LLM عن كتابة النثر ويبدأ بإنتاج artifacts للتصميم. انتشر — وبقي مغلق المصدر، مدفوعاً فقط، سحابياً فقط، مربوطاً بنموذج Anthropic و skills الخاصة بها. Open Design هو البديل مفتوح المصدر. نفس الـ loop. نفس عقلية «الـ artifact أولاً». بلا أي قيد.
مغلق ← مفتوح
كل skill ملف. كل design system ملف Markdown. كل prompt هو module من نوع TypeScript يمكنك قراءته وتعديله.
Agent مرفق ← خاصتك
16 CLI لـ coding-agent يُكتشف تلقائياً في PATH. لا CLI لديك؟ ألصق أي baseUrl + apiKey متوافق مع OpenAI.
Cloud ← محلي
pnpm tools-dev للتشغيل المحلي. SQLite في .od/. نشر Vercel اختياري. بياناتك، نظام ملفاتك، قرارك.
كيف يصبح الـ prompt artifact
OD لا يترك للنموذج بكسلاً واحداً يرتجل فيه. كل brief يُثبَّت قبل أن يبدأ الرسم.
Surface · audience · tone · brand · scale. ثلاثون ثانية من radios أفضل من ثلاثين دقيقة من إعادة التوجيه.
لا brand spec؟ اختر من خمسة اتجاهات بصرية مُعدّة — كل اتجاه palette من نوع OKLch وstack خطوط حتمي.
خطة الـ agent تُبثّ كبطاقة حية. التحديثات in_progress ← completed تصلك في الوقت الحقيقي. تستطيع تغيير الاتجاه بكلفة بسيطة، أثناء التشغيل.
معاينة iframe في sandbox. قابلة للتحرير في مكانها. يمكن تنزيلها HTML أو PDF أو PPTX أو ZIP.
ما الذي يأتي في الصندوق
كل Skill مجلد. كل Design System ملف Markdown من 9 أقسام. أفلِت مجلداً، أعِد تشغيل daemon، يظهر في picker. بدّل النظام، الـ render التالي يستخدم tokens جديدة.
ضوء على المهارة · html-ppt
الـ html-ppt skill المرفق يأتي بكل primitive يحتاجه deck agent: presenter mode، مكتبة layouts، مجموعة animation حركية، و14 template جاهز للتشعّب. أفلِت المجلد، أعِد تشغيل daemon، يصبح عندك محرّك PPT داخل المتصفح.
متغيرات مُثبَّتة الذوق
html-ppt-taste-brutalist و html-ppt-taste-editorial يأتيان مستقلَّين كـ wrappers «مُثبَّتة الذوق» — نفس الـ skill، جمالية مختلفة hard-coded. ثلاثة أخرى لـ web prototypes: web-prototype-taste-{brutalist,editorial,soft}.
أحضر agent الخاص بك
أيٌّ منها مثبّتة لديك تصبح مرشحات لمحرّك التصميم. بدّل بنقرة واحدة من model picker.
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
لا CLI مثبّت؟ POST /api/proxy/stream يقبل أي baseUrl + apiKey + model متوافق مع OpenAI أو Azure أو Google. shim من نوع Anthropic-via-OpenAI، DeepSeek، Groq، OpenRouter، Azure OpenAI، Google Vertex، vLLM المُستضاف ذاتياً عندك — كلها نفس الـ loop. محمي ضد SSRF تجاه loopback / link-local / RFC1918 على حافة daemon.
ست أفكار حاملة
01
الـ daemon يفحص PATH بحثاً عن 16 CLI لـ coding-agent معروفة. أيٌّ منها يجدها تصبح مرشحات لمحرّك التصميم، تُشغَّل عبر stdio بـ adapter واحد لكل CLI.
02
كل skill عبارة عن SKILL.md + assets/ + references/. أفلِت مجلداً تحت skills/، أعِد تشغيل daemon، يظهر في picker. الـ magazine-web-ppt المُرفق commit حرفي مع الترخيص محفوظاً.
03
مخطط DESIGN.md من 9 أقسام — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. كل artifact يقرأ من النظام النشط. بدّل النظام ← الـ render التالي يستخدم tokens جديدة.
04
الجولة 1 هي <question-form> فقط — بلا تفكير، بلا أدوات، بلا سرد. Surface · audience · tone · brand · scale. كلفة الاتجاه الخاطئ جولة دردشة واحدة، لا deck مكتمل.
05
الـ daemon يُولّد الـ CLI مع cwd مضبوطة على مجلد artifact مشروعك. الـ agent يحصل على Read و Write و Bash و WebFetch — أدوات حقيقية على نظام ملفات حقيقي. SQLite يحفظ المشاريع والمحادثات والرسائل والـ tabs.
06
Discovery directives + identity charter + DESIGN.md النشط + SKILL.md النشط + project metadata + skill side files. كل طبقة قابلة للتركيب. كل طبقة ملف يمكنك تحريره.
07
`od mcp` يكشف المشروع كـ stdio MCP server. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — أي شيء يفهم MCP — يستطيع قراءة artifacts والملفات والـ metadata مباشرة. read-only على الحافة: قراءة ملفات، بحث، metadata. لا surface كتابة، لا استدعاءات خارجية.
الـ prompt stack
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
كل طبقة قابلة للتركيب. كل طبقة ملف يمكنك تحريره.
مقارنة
منتج cloud مغلق، نظير desktop مفتوح، web app مفتوح. نستعير بسخاء من open-codesign ونذكره في /about — شكل مختلف، prompt-stack مختلف، نفس النجم القُطبي.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| الترخيص والتكلفة | |||
| الترخيص | مغلق | MIT | Apache-2.0 |
| الحد الأدنى للفوترة | Pro / Max / Team | BYOK | BYOK — ألصق أي URL متوافق مع OpenAI |
| الشكل | |||
| الشكل | Web (claude.ai) | Desktop (Electron) | Web app + daemon محلي |
| قابل للنشر على Vercel | — | — | نعم |
| Runtime AI والتدفق | |||
| Runtime لـ agent | مرفق (Opus 4.7) | مرفق (pi-ai) | الـ CLI الذي عندك |
| مرونة المزود | Anthropic فقط | +7 عبر pi-ai | 16 CLI + proxy BYOK |
| نموذج الأسئلة (الجولة 1) | — | — | قاعدة صارمة |
| خمسة اتجاهات بصرية | — | — | نعم |
| نقد ذاتي خماسي الأبعاد | — | — | بوابة قبل الإطلاق |
| Skills والأنظمة والهجرة | |||
| Skills | ملكية مغلقة | 12 module من نوع TS | 110 bundle قابل للسحب من SKILL.md |
| Design systems | ملكية مغلقة | DESIGN.md (v0.2) | 141 نظام مُطلق |
| استيراد ZIP من Claude Design | غير متاح | — | نعم — أكمل التحرير من حيث توقفت Anthropic |
Claude Design علامة تجارية لـ Anthropic. Open Design غير منتسب لـ Anthropic ولا مُعتمد منها.
ما بعد الدردشة
الدردشة التي تُنتج <artifact> HTML تُشغّل أيضاً توليد الصور والفيديو والصوت. كل render يصل ملف .png أو .mp4 حقيقياً في workspace مشروعك. 95 prompt جاهز للتكرار تحت prompt-templates/.
Posters · avatars · خرائط مرسومة · infographics · social cards بأسلوب مجلة · UI ألعاب · stills سرد ألعاب
وسّع gpt-image-2
تطور درج حجري ثلاثي الأبعاد
وسّع gpt-image-2
خريطة طعام مدينة مرسومة
وسّع gpt-image-2
مشهد مصعد سينمائي
وسّع gpt-image-2
بورتريه أنيمي cyberpunk
وسّع gpt-image-2
بورتريه استوديو فاخر
وسّع gpt-image-2
لعبة قتال أنيمي — Captain Ryuuga ضد Kaze Renshin
وسّع gpt-image-2
الممالك الثلاث — Guanyu يقتل Yanliang
وسّع gpt-image-2
الممالك الثلاث — رماية Lyubu Yuanmen
وسّع gpt-image-2
الممالك الثلاث — هروب Zhaoyun بالمهد
وسّع gpt-image-2
HUD لعبة MMO عالم مفتوح من الصين القديمة
وسّع gpt-image-2
رسم طفل بأقلام شمعية ← إعادة فوتوريالية
وسّع gpt-image-2
تفصيل كوريوغرافيا رقص أوتاكو — 16 لوحة
وسّع gpt-image-2
Storyboard رقص فتاة مثيرة — 8 لقطات
t2v + i2v سينمائي 15 ثانية مع صوت · شورتات سردية · أفلام منتجات
Seedance 2.0
Podcast موسيقى وغيتار
Seedance 2.0
لقطة وجه عاطفية مقربة
Seedance 2.0
Supercar فاخرة سينمائية
Seedance 2.0
هجاء قطة المدينة المحرمة
Seedance 2.0
شورت رومانسي ياباني
Seedance 2.0
طيران تنين سينمائي
Seedance 2.0
مطاردة في مصنع أرض قاحلة
Seedance 2.0
تريلر لعبة cyberpunk
Seedance 2.0
خيال علمي أفق قرمزي
Seedance 2.0
Storyboard أكاديمية سحرية
Seedance 2.0
قتال زقاق مصاصي دماء
Seedance 2.0
جمالية wuxia هونغ كونغية ريترو
Seedance 2.0
الممالك الثلاث — Guanyu يقتل Yanliang
Seedance 2.0
الممالك الثلاث — رماية Lyubu Yuanmen
Seedance 2.0
الممالك الثلاث — هروب Zhaoyun بالمهد
Seedance 2.0
ولد بناء Lego ثلاثي الأبعاد
Seedance 2.0
إنقاذ تنين الحارس القديم
Seedance 2.0
مملكة هندية قديمة — FPV
Seedance 2.0
Motion graphics تقديم شخصية
Seedance 2.0
رقص يدي امرأة شرق آسيوية
Seedance 2.0
استكشاف عالم بحري
Seedance 2.0
سباق شوارع سينمائي
Seedance 2.0
صاروخ المحمصة المرعب
Seedance 2.0
تمساح قرصان Disney كلاسيكي
Seedance 2.0
خيال haute couture هوليوودي
HTML→MP4 motion graphics · كشف منتجات · طباعة حركية · charts بيانات
وسّع HyperFrames
Logo Outro سينمائي
وسّع HyperFrames
عرض تطبيق على ثلاثة هواتف
وسّع HyperFrames
كاريوكي TikTok
وسّع HyperFrames
سباق المخططات الشريطية
وسّع HyperFrames
خريطة مسار طيران
وسّع HyperFrames
عدّاد مال Hype
وسّع HyperFrames
Stack overlay سوشيال
وسّع HyperFrames
كشف UI ثلاثي الأبعاد
البدء السريع
Node ~24، pnpm 10.33.x. يعمل على macOS و Windows و Linux (build من نوع AppImage عبر `pnpm tools-pack linux build --to appimage`). الـ daemon ينشئ مجلداً محلياً .od/ لـ SQLite ولـ artifacts كل مشروع. لا توجد خطوة init.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run web ما الجديد · v0.5.0
v0.5.0 يحوّل loop الـ artifact من «render مرة واحدة» إلى «كرّر إلى الأبد» — Inspect mode للضبط على مستوى العنصر، dashboards مباشرة كصنف بيانات من الدرجة الأولى، rubric أحدّ لـ Design Jury. الـ `od mcp` من v0.4.0 ما زال يصل كل ذلك إلى كل coding agent آخر على لابتوبك.
ضبط على مستوى العنصر
حوّم وانقر واضبط الأنماط المحسوبة لأي عنصر — لون، مسافات، نوع — بلا ذهاب وإياب عبر الـ agent. الـ artifact يتحدث في مكانه. حين ترضى، التغييرات تتدفق إلى ملفات المصدر.
v0.5.0 · PR #362
صنف من الدرجة الأولى
ثلاث skills dashboards جديدة (`live-dashboard`، template `clinic-console`، `flowai-live-dashboard-template`) إضافة إلى prompt template من نوع dashboard فريق Notion، تربط الـ artifacts بـ Composio connectors حقيقية. لوحة المعاينة تعرض بيانات حية، لا mocks مجمدة.
v0.5.0 · PR #778 + #795 + #801 + #799
بوابة جودة · Phase 5
rubric تقييم كل panelist يسكن الآن في prompt template على مستوى لوحة موصول عبر system composer المشترك. التقييمات تبقى متماسكة عبر الـ runs. Persistence و transcript و orchestrator من Phase 4 تُحمل معه.
v0.5.0 · PR #524
بروتوكول
شغّل `od mcp` وأي coding agent يفهم MCP (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) يقرأ ملفات مشروعك و search index و metadata مباشرة. read-only على الحافة. المشروع المفتوح في تطبيق OD هو ما يراه كل agent آخر الآن.
v0.4.0 · PR #399
نَسَب Open Design
alchaincyf
بوصلة فلسفة التصميم
Workflow من نوع Junior-Designer، بروتوكول brand-asset من 5 خطوات، قائمة مكافحة AI-slop، نقد ذاتي خماسي الأبعاد، و«5 مدارس × 20 فلسفة تصميم» التي تقف خلف direction picker لـ Open Design.
op7418
وضع Deck
مرفق حرفياً تحت skills/guizang-ppt/ مع الترخيص الأصلي محفوظاً. Layouts بأسلوب مجلة، hero من نوع WebGL، وثقافة قائمة P0/P1/P2 المُستعارة لكل skill آخر في Open Design.
OpenCoworkAI
أقرب نظير · نجم UX القُطبي
Loop streaming-artifact، معاينة iframe في sandbox، panel agent مباشر (todos + tool calls + قابل للمقاطعة)، تصدير بخمسة أشكال، تعليقات في وضع المعاينة. الشكل يختلف عمداً — open-codesign يُطلق Electron + pi-ai، Open Design يُطلق web + daemon محلي + الـ CLI خاصتك.
multica-ai
بنية الـ daemon
اكتشاف agent بفحص PATH، الـ daemon المحلي كعملية الوحيدة المميزة، رؤية agent-as-teammate. Open Design يتبنى النموذج المعماري؛ كود multica نفسه ليس مرفقاً.
نجّمنا
النجوم لا تدفع الإيجار، لكنها تخبر المصمم والـ agent والـ contributor القادم أن هذه التجربة تستحق الانتباه.
Apache-2.0
مفتوح المصدر
110
مهارة
141
نظام تصميم
16 + BYOK
أدوات CLI
الأسئلة الشائعة
Open Design هو البديل مفتوح المصدر لـ Claude Design من Anthropic. يعمل محلياً عبر pnpm tools-dev، يُنشر على Vercel، ويستخدم الـ CLI لـ coding-agent الذي عندك أصلاً (Claude Code, Codex, Cursor, Gemini, OpenCode، +11 آخرون) كمحرّك تصميم. مرخص Apache-2.0.
Claude Design مغلق المصدر، مدفوع (Pro/Max/Team)، سحابي فقط، ومربوط بنماذج Anthropic و skills الخاصة بها. Open Design مفتوح المصدر، BYOK، محلي أولاً، ويتيح لك تبديل النماذج بحرية عبر 16 CLI adapter أو أي endpoint متوافق مع OpenAI / Azure / Google.
إن احتجت self-hosting أو مرونة في النماذج أو skills مخصصة، نعم. الـ loop المغلق (اكتشاف agent ← اختيار skill + design system ← دردشة ← تحليل <artifact> ← معاينة ← حفظ) يعمل من البداية للنهاية. v0.4.x أضاف Critique Theater (تقييم Design Jury قبل الإطلاق) و Tweaks mode (element-picker + chat attachments) و Manual edit mode و live artifacts تجلب البيانات من Composio connectors.
لا. Open Design يستخدم الـ CLI لـ coding-agent الذي عندك في PATH، أو أي API key متوافق مع OpenAI عبر proxy BYOK. أحضر مفاتيحك لأي مزود تفضّله.
16 جاهزة: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Devin for Terminal, Hermes, Kimi CLI, Kiro CLI, Kilo, Mistral Vibe, DeepSeek TUI، و Pi. تُكتشف تلقائياً في PATH عند إقلاع daemon.
أفلِت ZIP المُصدَّر من Claude Design على dialog الترحيب. POST /api/import/claude-design يستخرجه إلى مجلد .od/projects/<id>/ حقيقي، يفتح ملف الدخول كـ tab، ويُجهّز continue prompt للـ agent المحلي عندك ليُكمل من حيث توقفت Anthropic.
نعم. طبقة الويب هي Next.js 16 + React 18 + TypeScript، قابلة للنشر على Vercel. الـ daemon المحلي يبقى على لابتوبك. Topology B (Vercel + tunnel) في خارطة الطريق للإعدادات البعيدة بالكامل.
أفلِت ملف DESIGN.md في design-systems/<your-brand>/ مع اتباع مخطط 9 الأقسام (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns). أعِد تشغيل daemon يظهر في picker.
Apache-2.0. الـ skills/guizang-ppt/ و skills/html-ppt/ المرفقة تحتفظ بترخيصها MIT الأصلي مع حفظ الإسناد. لا توجد طبقة مدفوعة. لا حدود استخدام. الكلفة الوحيدة هي ما يفرضه مزود الـ LLM الذي تختاره.
نموذج أسئلة في الجولة 1 يثبّت الـ brief قبل أن يبدأ النموذج بالرسم. picker بخمسة اتجاهات يوفر palettes حتمية حين لا يوجد brand spec. نقد ذاتي خماسي الأبعاد يقيّم الـ output قبل الإطلاق. كل skill يأتي مع قائمة P0/P1/P2 مفروضة عبر pre-flight side-file injection. التدرجات الأرجوانية الفاقعة وأيقونات emoji العامة و Inter كخط display ممنوعة صراحة في prompt stack.
نعم. POST /api/proxy/stream يُمرّر chunks من نوع SSE إلى أي endpoint متوافق مع OpenAI أو Azure أو Google. ألصق baseUrl و apiKey و model — DeepSeek و Groq و OpenRouter و MiMo و Azure OpenAI و Google Vertex و vLLM المُستضاف ذاتياً عندك و shim من نوع Anthropic-via-OpenAI، كلها تعمل. محمي SSRF ضد loopback والشبكات الخاصة.
Settings → Execution فيه زر Connection test (v0.5.0، PR #507). ألصق baseUrl + apiKey + model واضغط Test — Open Design يُطلق handshake مبسطاً على المزود ويُظهر الاستجابة أو إطار الخطأ بالضبط. يعمل لـ Anthropic و OpenAI-compat و Azure و Google. يوفّر عليك جولة دردشة-ثم-تتبع-الفشل حين يكون المفتاح خاطئاً أو اسم النموذج مكتوباً غلط أو الـ gateway يحجبك.
فقط إن اخترت نموذج Anthropic (Claude Code أو عبر proxy BYOK بمفتاح Anthropic). Open Design نفسه يخزّن كل شيء في SQLite محلي في .od/app.sqlite وملفات لكل مشروع تحت .od/projects/. لا شيء يُرفع إلى servers لـ Open Design — لا توجد servers لـ Open Design أصلاً.
نعم. شغّل `od mcp` و Open Design يكشف stdio MCP server. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — أي أداة تفهم MCP — يستطيع قراءة ملفات مشروعك وتشغيل search وفحص metadata. الواجهة read-only على الحافة: قراءة ملفات، بحث، metadata. لا surface كتابة، لا استدعاءات خارجية. أُطلق في v0.4.0.
Design Jury من 5 panelists يُقيّم كل artifact قبل إطلاقه — accessibility و brand fit و craft و content و structure. Persistence و transcript و orchestrator مكتملة من البداية للنهاية اعتباراً من Phase 4 في v0.4.0. تحت العتبة المُهيّأة يُراجع الـ agent ويُعيد التقييم؛ فوقها، الـ artifact يُطلق.
Live artifacts تجلب بيانات حية إلى لوحة المعاينة عبر كتالوج Composio connectors — GitHub و Linear و Notion و Gmail والمزيد. الـ skills المرفقة orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion و social-media-dashboard تُظهر التوصيل من البداية للنهاية. أُطلق في v0.4.0 (PR #381).
أطلق
Clone للـ repo. شغّل ثلاثة أوامر. اكتب prompt. شاهد نموذج الأسئلة يصل، املأه، شاهد بطاقة todo تُبثّ، شاهد الـ artifact يُرسم.