nexu-io-open-design/docs/i18n/README.ar.md

Open Design: البديل مفتوح المصدر لـ Claude Design

🔥 ‏Open Design 0.10.0 وصل: مساحة عمل التصميم الوكيلة الكل-في-واحد. الحِرفة كلها تعيش الآن في نافذة واحدة — من فكرة غامضة إلى اكتشاف المراجع، وجمع المواد، والتحرير التفاعلي، ووضع التعليقات في قائمة الانتظار، وصقل الحركة، وتسليم النتيجة إلى محرر أو Code Agent — دون مغادرة التطبيق. ومع الجلسات المتوازية، لم يعد يبدو كمساعد واحد، بل كفريق تصميم محلي كامل يعمل من أجلك. حمّل 0.10.0 · انضم إلى النقاش

⚡ ‏Open Design AMR (Agentic Model Router) — خدمة النماذج الرسمية. شحنة واحدة لاستخدام GPT وClaude وGemini وDeepSeek داخل Open Design: أكثر من 20 نموذجًا رائدًا، بدون أي إعداد، وفوترة حسب الاستخدام الفعلي للرموز. جرّب AMR

🏅 برنامج Open Design Fellow مفتوح الآن. إن كنت تؤمن أنت أيضًا بأن التصميم يجب أن يكون مفتوحًا — كُن Open Design Fellow، وشارك في تشكيل المنتج جنبًا إلى جنب مع الفريق الأساسي، وساعد المزيد من الناس على المشاركة في تحديد مستقبل التصميم. التفاصيل ← MAINTAINERS.md وDiscord.

الموقع · التنزيل · Model Router · Discord · تابع ‎@nexudotio

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe

---

ما هو Open Design

🎨 البديل مفتوح المصدر القائم على الجهاز المحلي أولًا لـ Claude Design.  🖥️ تطبيق سطح مكتب أصلي لنظامي macOS وWindows.  ⚡ أكثر من 100 مهارة · ✨ 150 نظام DESIGN.md بجودة العلامة التجارية · 📦 261 إضافة جاهزة للاستخدام.  🖼️ يولّد نماذج أولية للويب · سطح المكتب · الجوال، ولوحات معلومات / مخرجات حية، وعروضًا تقديمية، وصورًا، وفيديو، إضافة إلى رسوميات حركية بـ HyperFrames. 🔒 معاينة iframe معزولة · تصدير بصيغ HTML / PDF / PPTX / MP4.  🤖 يعمل على Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity و21 واجهة CLI محلية، أو أي نقطة نهاية متوافقة مع OpenAI عبر BYOK.

‏Open Design هو ما تحصل عليه حين تتوقف الحلقة الأصيلة للوكلاء (agent-native) التي أطلقتها Anthropic مع Claude Design — اكتشاف الموجز، تثبيت الاتجاه، بثّ المخرَج، النقد، التسليم — عن كونها مغلقة وتتحول إلى نظام ملفات من المهارات وأنظمة التصميم والإضافات يستطيع وكلاء البرمجة الموجودون أصلًا على حاسوبك المحمول قراءته والكتابة عليه وإعادة مزجه. تصبح واجهة CLI لديك محرك التصميم، ويصبح حاسوبك المحمول هو الاستوديو، ويصبح ملف DESIGN.md الخاص بفريقك هو عقد العلامة التجارية.

كما أنه بديل Figma لعصر الوكلاء — فبدلًا من تحريك البكسلات على لوحة رسم، يسلّم مخرجات من صفحة واحدة بـ CSS حقيقي وخطوط حقيقية ومكونات حقيقية، تُصدَّر مباشرة إلى HTML / PDF / PPTX / MP4 — مصاغة مسبقًا وفق نظام التصميم لديك، وقابلة للتشغيل مباشرة داخل الوكيل الذي تستخدمه كل يوم.

---

جولة في المنتج

نظرة سريعة على ماهية Open Design وما يفعله. ابدأ من الصفحة الرئيسية، ونسّق سير العمل المتكرر عبر الأتمتة، واستخلص عقد علامة تجارية في نظام التصميم، ووسّع الإمكانات عبر الإضافات وعمليات التكامل؛ وداخل الاستوديو الخاص بأي مشروع، يبثّ نظام التصميم نفسه نماذج أولية ومخرجات حية وHyperFrames وعروضًا تقديمية وصورًا.

الصفحات الأساسية

الصفحة الرئيسية — نقطة الدخول للنظرة العامة. اختر مهارة ونظام تصميم، واكتب الموجز، وانطلق بكل شيء من مكان واحد.

الأتمتة — حوّل سير عمل التصميم المتكرر إلى أتمتة قابلة لإعادة الاستخدام والجدولة.	نظام التصميم — استخلص ملف DESIGN.md الخاص بفريقك إلى عقد علامة تجارية يشكّل كل مخرَج.
الإضافة — تصفّح وثبّت ووزّع إضافات سير العمل لتوسيع التوليد عند الطلب.	عمليات التكامل — اربط الأنظمة الخارجية وأدوات MCP، واستخدم Open Design من أي بيئة تطوير أو سكربت أو أتمتة.

الاستوديو — أنواع مخرجات متعددة في مشروع واحد

داخل استوديو المشروع، يبثّ نظام التصميم نفسه أنواعًا متعددة من المخرجات:

النموذج الأولي — مخرجات HTML من صفحة واحدة تقرأ نظام التصميم لديك وتُعرَض في iframe معزول، قابلة للمعاينة فورًا وللتنزيل كمصدر.	HyperFrame — حركة ورسوميات متحركة برمجية، تُصيَّر إلى ملف MP4 حقيقي (مثل 1920×1080 · 30fps).
العرض التقديمي — عروض تقديمية يمكنك تصفّحها صفحة صفحة، والتنقل فيها بلوحة المفاتيح، وتصديرها إلى PPTX / PDF.	الصورة — صور وأصول بصرية بجودة العلامة التجارية، مع توليد عالي الدقة وتنزيل.

---

توافق المنصات

يُشحَن Open Design على هيئة مهارات وواجهة CLI وخادم MCP تستهلكها وكلاء البرمجة السائدة بشكل أصلي. بمجرد تثبيت OD، يربط أمر واحد od mcp install <agent> خادم MCP في إعدادات ذلك الوكيل، فتستدعي الأدوات نفسها من داخل أي وكيل.

وكيل البرمجة / المنصة	الحالة	تثبيت خادم MCP بأمر واحد
Claude Code	✅ مدعوم	od mcp install claude
Codex CLI	✅ مدعوم	od mcp install codex
Cursor	✅ مدعوم	od mcp install cursor
VS Code + GitHub Copilot	✅ مدعوم	od mcp install copilot
GitHub Copilot CLI	✅ مدعوم	od mcp install copilot
Gemini CLI	✅ مدعوم	od mcp install gemini
OpenCode	✅ مدعوم	od mcp install opencode
OpenClaw	✅ مدعوم	od mcp install openclaw
Antigravity	✅ مدعوم	od mcp install antigravity
Cline	✅ مدعوم	od mcp install cline
Trae	✅ مدعوم	od mcp install trae
Kimi CLI	✅ مدعوم	od mcp install kimi
Pi Agent	✅ مدعوم	od mcp install pi
Mistral Vibe CLI	✅ مدعوم	od mcp install vibe
Hermes Agent	✅ مدعوم	od mcp install hermes

od mcp install <agent> --print لمعاينة تجريبية دون تنفيذ · --uninstall للإزالة · القائمة الكاملة عبر od mcp install --help.

لا توجد واجهة CLI مثبَّتة؟ يمنحك وكيل BYOK على POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream الحلقة نفسها (دون إنشاء عملية) — الصق baseUrl + apiKey + model، مع دعم OpenAI وAnthropic وAzure OpenAI وGoogle Gemini وOllama وLM Studio وvLLM، أو أي نقطة نهاية متوافقة مع OpenAI. تمنع حماية SSRF لكل هدف عناوين IP الداخلية / link-local / CGNAT عند حافة الـ daemon.

يقيم عقد المحوّل ومحلّلات البثّ في apps/daemon/src/agents.ts. إضافة واجهة CLI جديدة تتطلب مدخلًا واحدًا — راجع docs/agent-adapters.md.

---

عرض توضيحي

أربع فئات أساسية للمنتج، كلها مُصيَّرة بواسطة وكيل برمجة يعمل على حاسوبك المحمول. انقر على صورة مصغّرة لرؤية المثال الحقيقي.

1 · النماذج الأولية — الويب · سطح المكتب · الجوال

سطح المخرجات الافتراضي. مخرجات HTML من صفحة واحدة تقرأ ملف DESIGN.md لديك وتُعرَض في iframe معزول.

واجهة الدخول — اختر مهارة، اختر نظام تصميم، اكتب الموجز. سطح واحد للنماذج الأولية ولوحات المعلومات والعروض التقديمية وتطبيقات الجوال وصفحات المجلات.	نموذج أولي للجوال — هيكل iPhone 15 Pro دقيق بالبكسل، وتدفقات متعددة الشاشات. لا يعيد الوكيل أبدًا رسم إطار الهاتف؛ إذ تقيم إطارات الأجهزة المشتركة في assets/frames/.
نموذج أولي للويب — لوحة معلومات تحريرية بأشرطة تمرير ومؤشرات أداء رئيسية ومخططات. مُصيَّرة مباشرة من design-templates/dating-web/.	نموذج أولي لتطبيق جوال — تدفق مُلعَّب بثلاث شاشات مع أشرطة XP وتفاصيل المهام. سلّمه مباشرة إلى Cursor / Codex / Claude Code لتحويله إلى React/Next/Vue.

2 · المخرجات الحية ولوحات المعلومات

لوحات معلومات حية، وغرف اتخاذ القرار، وجدران مؤشرات الأداء — مخرجات من صفحة واحدة تسحب البيانات عبر لوحة تعديلات وتبقى قابلة للتحرير في مكانها.

لوحة معلومات حية — جدار مؤشرات أداء قابل للتحرير تُظهِر لوحة تعديلاته المعاملات الجديرة بالضبط. يصدر الوكيل بيان manifest، ويُعاد عرض iframe دون إعادة تحميل.	غرفة اتخاذ القرار — مخرَج إحاطة متعدد المصادر لاجتماعات المنتج / البحث / العمليات.
لوحة معلومات بأسلوب GitHub — مقاييس المستودع معروضة كمخرَج حي.	قالب لوحة معلومات حية من Flow — قالب مؤشرات أداء خاص بمجال محدد، مُعلَّم وفق DESIGN.md النشِط.

3 · العروض التقديمية — عروض بأسلوب المجلات، تحديثات أسبوعية، عروض ترويجية

وضع العرض التقديمي (guizang-ppt) — تخطيطات بأسلوب المجلات، عنصر WebGL رئيسي، قوائم تحقق P0/P1/P2. مُجمَّع حرفيًا من op7418/guizang-ppt-skill مع الحفاظ على ترخيصه الأصلي.

عرض تقديمي بأسلوب Swiss International — مرتكز على الشبكة، بلمسات أحادية اللون. واحد من 15 قالب عرض تقديمي و36 سمة ضمن design-templates/html-ppt-*/.

يُصدَّر كل عرض تقديمي إلى HTML (ملف واحد بأصول مضمَّنة)، وPDF (طباعة المتصفح، مدركة للعرض التقديمي)، وPPTX (مهارة يقودها الوكيل)، وZIP (أرشيف)، أو Markdown.

4 · الصور — gpt-image-2 وImageRouter وAPI مخصّص

خريطة طعام مدينة مرسومة ملصق سفر تحريري مرسوم باليد

مشهد مصعد سينمائي لقطة تحريرية ساكنة بإطار واحد

بورتريه سايبربانك صورة رمزية — وجه بنص نيون

درج حجري ثلاثي الأبعاد إنفوجرافيك من حجر منحوت

بورتريه فاخر لقطة استوديو تحريرية

93 موجّهًا جاهزًا لإعادة الإنتاج تقيم في prompt-templates/ — صور مصغّرة للمعاينة، ونصّ الموجّه الكامل، والنموذج المستهدف، ونسبة الأبعاد، وإسناد المصدر. نقرة واحدة تُسقِط موجزًا في أداة الإنشاء.

5 · الفيديو وHyperFrames — رسوميات حركية أصيلة للوكلاء

HyperFrames هو إطار عمل الفيديو مفتوح المصدر والأصيل للوكلاء من HeyGen، مدمج كمواطن من الدرجة الأولى في Open Design. يكتب الوكيل HTML + CSS + GSAP، وتصيّره HyperFrames إلى ملف MP4 حتمي عبر Chrome بدون واجهة + FFmpeg. اقرنه بـ Seedance 2.0 لتحويل النص إلى فيديو / الصورة إلى فيديو السينمائي، وVeo 3 / Sora 2 / Kling 2 للنماذج المُوجَّهة المتنوعة، وSuno v5 / Lyria 2 لطبقة الصوت.

عرض ترويجي لمنتج SaaS مدته 30 ثانية · 16:9 · كشوفات واجهة ثلاثية الأبعاد	وجه متحدث بكاريوكي TikTok · 9:16 · TTS + تسميات توضيحية متزامنة مع الكلمات	مقطع ترويجي للعلامة التجارية مدته 30 ثانية · 16:9 · خط حركي يتفاعل مع الصوت	سباق المخططات الشريطية · 16:9 · إنفوجرافيك بيانات بأسلوب NYT
خريطة رحلة طيران · 16:9 · كشف مسار بأسلوب Apple	خاتمة شعار سينمائية مدتها 4 ثوانٍ · 16:9 · تجميع قطعة قطعة + توهّج	عدّاد أموال من $0 إلى $10K · 9:16 · حماس بأسلوب Apple	من موقع ويب إلى فيديو · 16:9 · يلتقط الموقع عند 3 منافذ عرض

يُشحَن مع المستودع 11 قالب HyperFrames + 39 موجّه Seedance. الصور المصغّرة للكتالوج © HeyGen؛ والإطار مرخَّص بـ Apache-2.0. سير عمل التصيير الخاص بـ OD (تخزين التركيب المؤقت، حل sandbox-exec البديل، MP4-as-chip) موضَّح بالتفصيل في design-templates/hyperframes/.

---

لماذا Open Design

في أبريل 2026، أطلقت Anthropic Claude Design — وهي المرة الأولى التي يتوقف فيها نموذج لغوي كبير عن كتابة النثر ويبدأ في تسليم مخرجات تصميم مباشرة. انتشر بسرعة كبيرة. لكنه ظل مغلق المصدر، مدفوعًا فقط، سحابيًا فقط، مقيَّدًا بنموذج Anthropic ومهارات Anthropic وسطح Anthropic. لا دفع، ولا استضافة ذاتية، ولا نشر على Vercel، ولا إمكانية تبديل بوكيلك الخاص.

‏Open Design (OD) هو البديل مفتوح المصدر. الحلقة نفسها، والنموذج الذهني نفسه القائم على المخرجات أولًا، دون أي تقييد:

• 🤖 أصيل للوكلاء، محايد تجاه النموذج. نحن لا نشحن وكيلًا. أدوات claude / codex / cursor-agent / copilot / hermes / kimi الموجودة أصلًا في PATH لديك هي محرك التصميم. بدّلها بنقرة واحدة.
• 🧠 بجودة العلامة التجارية افتراضيًا. كل عملية تصيير تقرأ ملف DESIGN.md النشِط — وهو مخطط من 9 أقسام يغطي لوحة الألوان والخطوط والمباعدة والحركة والنبرة والأنماط المضادة. يُشحَن مع المستودع 150 نظامًا (Linear وStripe وVercel وAirbnb وApple وTesla وNotion وAnthropic وCursor وSupabase وFigma…). أسقِط مجلدًا، فيعثر عليه المُنتقي.
• 🖥️ محلي أولًا، BYOK في كل طبقة. تظل تطبيقات سطح المكتب الأصلية محلية أولًا بلا ذهاب وإياب إلى السحابة. قبل وصف مسارات بيانات الـ daemon، يجب قراءة AGENTS.md في جذر المستودع، قسم Daemon data directory contract.
• 🌍 قابل للتركيب على ثلاثة مستويات. الإضافات تحمل سير عمل قابلًا للتشغيل · المهارات تحمل ذوق الوكيل التصميمي · أنظمة التصميم تحمل العلامة التجارية. وكلها ملفات عادية يمكن لأي شخص تأليفها وإصدارها ونشرها.
• 🔁 حدِّث قاعدة شفرة موجودة. سلّم مستودع git + ملف DESIGN.md إلى الوكيل، فيعيد هيكلة مكوناتك الحقيقية وفق مواصفة العلامة التجارية. تنقل إضافات مخصّصة سير عمل Figma / Pencil إلى شفرة React / Next.js / Vue.
• 🔒 الخصوصية عن قناعة. كل شيء يعمل حيث تقيم بياناتك — حاسوبك المحمول، أو خادم فريقك، أو مشروع Vercel الخاص بك. وعند الحاجة إلى الشبكة، يكون وكيل BYOK محميًا ضد SSRF.

مقارنة

	Claude Design	Figma	Lovable / v0 / Bolt	Open Design
مفتوح المصدر	❌	❌	❌	✅ Apache-2.0
استضافة ذاتية / سطح مكتب	❌	❌	❌	✅ macOS + Windows + Vercel
أصيل للوكلاء (يعمل في واجهة CLI لديك)	Anthropic فقط	❌	وكيل سحابي فقط	✅ 21 واجهة CLI + BYOK
DESIGN.md بجودة العلامة التجارية	احتكاري	Theme JSON	رموز محدودة	✅ 150 نظامًا مشحونًا
المهارات / الإضافات / القوالب	مغلقة	متجر إضافات	مغلقة	✅ أكثر من 100 مهارة · 261 إضافة
HyperFrames (HTML→MP4)	❌	❌	❌	✅ من الدرجة الأولى
تحديث مستودع موجود وفق العلامة التجارية	❌	❌	❌	✅ عبر الوكيل + DESIGN.md
الحد الأدنى للفوترة	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · أي نقطة نهاية متوافقة

---

البدء السريع

🖥️ تنزيل تطبيق سطح المكتب (موصى به — بلا إعداد)

أسرع طريقة لاستخدام Open Design. لا Node، ولا pnpm، ولا استنساخ.

• macOS (Apple Silicon · Intel x64) ← open-design.ai أو إصدارات GitHub
• Windows (x64) ← open-design.ai أو إصدارات GitHub
• Linux (AppImage، مسار اختياري) ← إصدارات GitHub

بعد التثبيت: يكتشف التطبيق تلقائيًا كل واجهة CLI لوكلاء البرمجة في PATH لديك، ويحمّل أكثر من 100 مهارة و150 نظام تصميم، ويتيح لك كتابة موجز في واجهة الدخول.

🤖 التثبيت داخل وكيل البرمجة لديك (دون واجهة مستخدم)

يمكنك استخدام Open Design دون فتح الواجهة الرسومية أبدًا — استدعِه كمهارة أو إضافة أو خادم MCP داخل Claude Code وCodex وCursor وCopilot وOpenClaw وAntigravity وHermes وKimi والمزيد.

# One-line install into the agent you're using:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
#         | pi | vibe | hermes | cline | kimi | trae | opencode

ثم، داخل الوكيل:

> Use open-design to generate a landing page with the Linear design system

يقرأ الوكيل skills/، ويختار SKILL.md المناسب، ويربط ملف DESIGN.md الذي سمّيته، ويصدر <artifact> قابلًا للمعاينة على http://localhost:7456.

🐳 التشغيل باستخدام Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456

🧑‍💻 التشغيل من المصدر

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

‏Node ~24، وpnpm 10.33.x. مستخدمو Windows، راجعوا docs/windows-troubleshooting.md. البدء السريع الكامل، ومتغيرات البيئة، وNix flake، وسير بناء الحزمة ← QUICKSTART.md.

سير عمل كامل — من الموجز إلى المخرَج

brief → plugin → direction → design system → artifact → handoff → memory

1. يقدّم مدير منتج موجزًا. يعرض مُنتقي الإضافات صفحة هبوط · عرضًا ترويجيًا · لوحة معلومات · منشورًا اجتماعيًا · مواصفة منتج · بطاقة نتائج OKR…
2. يثبّت مصمم (أو الوكيل) الاتجاه. لا علامة تجارية؟ اختر من 5 اتجاهات منسّقة. لديك علامة تجارية؟ أسقِط لقطة شاشة / رابطًا ← يربط الوكيل GitHub، ويستورد Figma، ويصوغ ملف DESIGN.md قابلًا لإعادة الاستخدام.
3. يصدر الوكيل أول <artifact>. الإضافة + المهارة + DESIGN.md مربوطة. يبثّ داخل iframe معزول، قابل للتحرير في مكانه — لا "إعادة توليد من الصفر".
4. سلّم إلى الهندسة. المخرَج هو HTML/CSS حقيقي — أسقِطه في Cursor أو Codex أو Claude Code لمواصلة البناء كشفرة. أو صدّر PPTX / PDF / MP4 مباشرة إلى التسويق.
5. يصبح Open Design أذكى كلما استخدمته. تتراكم لقطات شاشتك وخطوطك ولوحات ألوانك ومخرجاتك المؤكَّدة كقيم افتراضية للجلسة التالية. عمل معاد أقل، وانحراف أقل.

---

استخدام Open Design من وكيل البرمجة لديك

يشحن Open Design خادم MCP عبر stdio وسكربتات تثبيت لكل وكيل. يستطيع أي وكيل متوافق مع MCP في مستودع آخر قراءة الملفات من مشاريع Open Design المحلية لديك مباشرة — رموز CSS، ومكونات JSX، وHTML الدخول — كواجهة API مهيكلة قابلة للاستعلام بالاسم. يرى الوكيل دائمًا الملف الحي، لا تصديرًا قديمًا.

# One-line install (16+ CLIs supported):
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

# Then the agent can:
od search-files "primary button"      # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # latest rendered artifact
od plugin run web-prototype --brief "..."
od skill list --scenario marketing

لماذا MCP؟ تصدير ملف مضغوط وإعادة إرفاقه في كل دورة يكسر الانسياب. يكشف MCP مصدر التصميم مباشرة — فيرى الوكيل دائمًا الملف الحي.

بالنسبة لوكيل يبدأ من الصفر، يضع المثبِّت ~/.config/<agent>/open-design.json (أو ما يكافئه على المنصة) إضافة إلى مقتطف MCP جاهز للصق. يحصل Cursor على رابط عميق بنقرة واحدة؛ ويحصل Claude Code على سطر claude mcp add-json واحد؛ ويحصل كل وكيل آخر على JSON بالمخطط الذي تتوقعه إعداداته. سير العمل الكامل لكل وكيل ← Settings → MCP server في تطبيق سطح المكتب، أو docs/agent-adapters.md.

نموذج الأمان. للقراءة فقط افتراضيًا، ويرتبط الـ daemon بـ 127.0.0.1، ويُمنع SSRF عند حافة الوكيل. يتطلب الكشف على الشبكة المحلية تعيين OD_BIND_HOST صريح إضافة إلى OD_ALLOWED_ORIGINS. تبقى بيانات اعتماد الموصِّلات ومسارات معاينة المخرجات الحية على loopback فقط أيًا كان.

---

المهارات

أكثر من 100 مهارة تُشحَن جاهزة — كل منها مجلد ضمن skills/ يتبع اصطلاح SKILL.md الخاص بـ Claude Code، موسَّعًا بترويسة od: (mode وplatform وscenario وpreview.type وdesign_system.requires وdefault_for وfidelity وexample_prompt). أسقِط مجلدًا، وأعِد تشغيل الـ daemon، فيظهر في المُنتقي.

يرسي وضعان أساس الكتالوج: prototype (مخرجات من صفحة واحدة للويب/الجوال/سطح المكتب) وdeck (عروض تقديمية بالسحب الأفقي). إضافة إلى أوضاع image وvideo وaudio وtemplate وdesign-system وutility. ويجمّعها حقل scenario حسب الجمهور: design · marketing · operation · engineering · product · finance · hr · sale · personal.

المهارة	الوضع	السيناريو	ما تنتجه
web-prototype	prototype	design	صفحة هبوط / عنصر رئيسي افتراضي
saas-landing	prototype	marketing	عنصر رئيسي / ميزات / تسعير / دعوة لاتخاذ إجراء
dashboard	prototype	operation	إدارة / تحليلات (مع شريط جانبي)
mobile-app	prototype	design	تطبيق مؤطَّر بـ iPhone 15 Pro / Pixel
mobile-onboarding	prototype	design	تدفق شاشة بداية · عرض القيمة · تسجيل دخول
social-carousel	prototype	marketing	عرض دوّار من 3 بطاقات 1080×1080
email-marketing	prototype	marketing	بريد علامة تجارية آمن مع بديل جدولي
magazine-poster	prototype	marketing	تخطيط مجلة من صفحة واحدة
motion-frames	prototype	marketing	عنصر رئيسي بحركة CSS متكررة
sprite-animation	prototype	marketing	شرح متحرك ببكسل 8-bit
pm-spec	prototype	product	مستند مواصفة منتج (مع جدول محتويات + سجل قرارات)
team-okrs	prototype	product	بطاقة نتائج OKR
eng-runbook	prototype	engineering	دليل إجراءات الحوادث
finance-report	prototype	finance	ملخّص مالي تنفيذي
hr-onboarding	prototype	hr	خطة إعداد دور وظيفي
guizang-ppt	deck	marketing	عرض ويب بأسلوب المجلات (افتراضي لوضع العرض التقديمي)
html-ppt-*	deck	marketing	15 قالب عرض تقديمي × 36 سمة (القالب الرئيسي في design-templates/html-ppt/)
hyperframes	video	marketing	رسوميات حركية HTML → MP4 (إطار HeyGen مفتوح المصدر)
critique	utility	design	ورقة نقد ذاتي بخمسة أبعاد
tweaks	utility	design	بيان لوحة تعديلات يصدره الذكاء الاصطناعي

بروتوكول المهارات الكامل ← docs/skills-protocol.md. نقطة نهاية سجل المهارات: GET /api/skills.

---

أنظمة التصميم

150 نظام DESIGN.md بجودة العلامة التجارية تُشحَن مع المستودع — كل منها ملف Markdown واحد بمخطط من 9 أقسام (الألوان، الطباعة، المباعدة، التخطيط، المكونات، الحركة، النبرة، العلامة التجارية، الأنماط المضادة)، من VoltAgent/awesome-design-md. بدّل نظامًا ← يستخدم التصيير التالي الرموز الجديدة. بلا Theme JSON.

الكتالوج الكامل (انقر للتوسيع)

الذكاء الاصطناعي ونماذج اللغة الكبيرة — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

أدوات المطورين — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

الإنتاجية — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

التقنية المالية — stripe · coinbase · binance · kraken · mastercard · revolut · wise

التجارة الإلكترونية — shopify · airbnb · uber · nike · starbucks · pinterest

الإعلام — spotify · playstation · wired · theverge · meta

السيارات — tesla · bmw · ferrari · lamborghini · bugatti · renault

أخرى — apple · ibm · nvidia · vodafone · resend · spacex

نقاط البداية — default (Neutral Modern) · warm-editorial

أعِد استيراد المكتبة عبر scripts/sync-design-systems.ts. أضف علامتك التجارية الخاصة ← أسقِط ملف DESIGN.md في design-systems/<brand>/. الدليل الكامل ← design-systems/README.md.

---

الإضافات

261 إضافة رسمية تقيم في plugins/_official/. كل إضافة هي مجلد مهارة-وكيل قابل للنقل — ملف SKILL.md (قابل للقراءة من أي وكيل يدعم Agent Skills)، إضافة إلى بيان open-design.json اختياري يمنح Open Design بيانات وصفية للسوق، ومدخلات، ومعاينات، وخطوط أنابيب، وتصريحات قدرات. انتقل مباشرة إلى فئة:

الفئة	العدد	المحتويات
scenarios/	11	سيناريوهات تصميم كاملة — od-default، od-design-refine، od-figma-migration، od-code-migration، od-react-export، od-nextjs-export، od-vue-export، od-media-generation، od-new-generation، od-tune-collab، od-plugin-authoring
image-templates/	45	موجّهات صور بلقطة واحدة — تحريرية، سينمائية، منتجات، بورتريه
video-templates/	50	قوالب حركة HyperFrames / Seedance / Veo
design-systems/	142	ملفات DESIGN.md للعلامات التجارية مغلَّفة كإضافات
atoms/	13	أجزاء واجهة قابلة لإعادة الاستخدام (أزرار، عناصر رئيسية، بطاقات مؤشرات أداء)
examples/	140	مخرجات مرجعية قابلة لإعادة المزج

كذلك plugins/community/ لإضافات المجتمع وplugins/registry/ لسير النشر.

ما يمكن للإضافات فعله

• 🤖 التشغيل في أي وكيل برمجة — Claude Code وCodex وCursor وCopilot وOpenClaw وAntigravity وHermes وKimi… عبر بروتوكول المهارات نفسه الذي يعرفه الوكيل أصلًا.
• 🔁 نقل سير عمل Figma / Pencil ← شفرة React أو Next.js أو Vue. راجع od-figma-migration.
• 🛠️ تحديث قاعدة شفرة موجودة وفق مواصفة علامة تجارية — وجّه إضافة نحو مستودع git + ملف DESIGN.md، واحصل على PR. راجع od-code-migration.
• 💾 الاحتفاظ بسير عمل مخصّص — تجلس قوالب فريقك القابلة لإعادة الاستخدام بجوار القوالب المشحونة.

استخدام الإضافات

الإضافات على تكافؤ تام عبر واجهة الويب وواجهة od CLI — نقاط نهاية /api/plugins نفسها، اختر ما يناسبك.

في تطبيق سطح المكتب / الويب: افتح صفحة الإضافة لتصفّح السوق وانقر تثبيت؛ وداخل استوديو المشروع، تظهر الإضافات كأشرطة في أداة الإنشاء تنقر عليها لتطبيقها (مع المدخلات التي تصرّح بها).

على سطر الأوامر (يعمل دون واجهة مستخدم — هذا هو المسار الذي تستخدمه الوكلاء الخارجية):

od plugin list                       # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page"      # search by keyword
od plugin info od-default            # inspect a plugin's metadata, inputs, capabilities
od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default         # upgrade
od plugin uninstall od-default       # uninstall

يدعم كل أمر --json، فتستطيع تمريره عبر jq / xargs إلى الأتمتة.

بناء إضافة

تحتاج الإضافة إلى ملف SKILL.md كحد أدنى فقط؛ ولإدراجها في سوق Open Design، أضف ملف open-design.json:

my-plugin/
├── SKILL.md            ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json    ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

حقول open-design.json الأساسية: specVersion (حاليًا 1.0.0)، وname (معرّف ثابت)، وversion (semver)، وcompat.agentSkills[].path (يشير إلى ./SKILL.md)، وod.kind (skill / scenario / atom / bundle)، وod.taskKind (new-generation / figma-migration / code-migration / tune-collab)، وod.mode (سطح المخرجات، مثل prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario)، وod.capabilities[] (صرّح بالحد الأدنى — التثبيت المقيَّد يمنح فقط prompt:inject افتراضيًا)، وod.inputs[] (معاملات وقت التطبيق).

التهيئة والتحقق محليًا:

od plugin scaffold --id my-plugin --title "My Plugin"   # generate the skeleton
od plugin validate ./my-plugin                          # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

مجموعة الحقول الكاملة وعقد وقت التشغيل ← plugins/spec/SPEC.md؛ تطوير إضافة بوكيل برمجة ← plugins/spec/AGENT-DEVELOPMENT.md؛ قوالب دنيا جاهزة للصق ← plugins/spec/examples/.

المساهمة بإضافة

1. أسقِط مجلد الإضافة في plugins/community/ (الإضافات الخارجية)، أو — لشحنها مجمَّعة مع Open Design — في المستوى المطابق ضمن plugins/_official/.
2. اجتز التحقق: od plugin validate وpnpm guard وpnpm --filter @open-design/plugin-runtime typecheck.
3. املأ الـ PR باستخدام القالب في plugins/spec/CONTRIBUTING.md (المعرّف، الإصدار، المسار، الوضع، القدرات، أمثلة التشغيل؛ أرفِق لقطة شاشة / معاينة للإضافات البصرية).
4. للنشر على سجل خارجي (skills.sh / ClawHub / GitHub مستقل) ← plugins/spec/PUBLISHING-REGISTRIES.md.

نقطة نهاية سجل الإضافات: GET /api/plugins. نظرة عامة على الدليل ← plugins/README.md (简体中文).

---

البنية المعمارية

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│  chat · file workspace · iframe preview · settings · import · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·    │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk             │
   └──────────────────────────────────────────────────────────────────┘

الطبقة	المكدّس
الواجهة الأمامية	Next.js 16 App Router + React 18 + TypeScript
الـ Daemon	Node 24 · Express · بثّ SSE · better-sqlite3
التخزين	قبل تغيير أو توثيق مسارات تخزين الـ daemon، يجب قراءة AGENTS.md في جذر المستودع، قسم Daemon data directory contract. يجب ألا يعيد هذا README صياغته.
المعاينة	iframe معزول بـ srcdoc + محلّل <artifact> يعمل بالبثّ
التصدير	HTML (مضمَّن) · PDF (طباعة المتصفح) · PPTX (يقوده الوكيل) · ZIP · Markdown · MP4 (HyperFrames)
سطح المكتب	غلاف Electron + مُصيِّر معزول + IPC جانبي (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
دورة الحياة	نقطة دخول واحدة: pnpm tools-dev (start / stop / run / status / logs / inspect / check)

البنية المعمارية الكاملة ← docs/architecture.md. بروتوكول المهارات ← docs/skills-protocol.md. عقد محوّل الوكلاء ← docs/agent-adapters.md.

---

خارطة الطريق

• الـ Daemon + 21 محوّل واجهة CLI لوكلاء البرمجة + سجل المهارات + كتالوج أنظمة التصميم
• تطبيق ويب + دردشة + نموذج أسئلة + مُنتقي 5 اتجاهات + تقدّم قائمة المهام + معاينة معزولة
• أكثر من 100 مهارة · 150 نظام تصميم · 5 اتجاهات بصرية · 5 إطارات أجهزة
• مشاريع مدعومة بـ SQLite · محادثات · رسائل · علامات تبويب · قوالب
• وكيل BYOK متعدد المزوّدين (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + حماية SSRF
• استيراد ZIP من Claude Design (/api/import/claude-design)
• بروتوكول جانبي + سطح مكتب Electron + أتمتة IPC
• واجهة API لفحص المخرجات + بوابة نقد ذاتي بخمسة أبعاد قبل الإصدار
• 0.8.0 — بنية تحتية لسوق الإضافات (261 إضافة رسمية، مواصفة البيان، سكربتات تثبيت لكل وكيل)
• 0.9.0 — Open Design AMR (Model Router الرسمي مدمج في التطبيق: بلا إعداد، تسجيل دخول بنقرة واحدة)
• إصدارات Electron مجمَّعة — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (مسار اختياري)
• تعديلات جراحية في وضع التعليق — مشحونة جزئيًا؛ الترقيع المستهدف الموثوق قيد التنفيذ
• تجربة استخدام لوحة تعديلات يصدرها الذكاء الاصطناعي — لم تُنفَّذ بعد
• npx od init لتهيئة مشروع بملف DESIGN.md
• SDK للإضافات + واجهة od plugin {add,list,remove,test,publish} CLI
• إضافات نقل Figma / Pencil ← React / Next / Vue (ألفا)
• إضافة تحديث قاعدة شفرة موجودة (وجّهها نحو مستودع git + ملف DESIGN.md)

التسليم المرحلي ← docs/roadmap.md.

---

المجتمع

أناس حقيقيون خلف كل قناة.

• 💬 Discord — دردشة يومية، مشاركة الإضافات، أسئلة ← discord.gg/qhbcCH8Am4
• 🐦 X / Twitter — ملاحظات الإصدارات، المعالم، ما وراء الكواليس ← @nexudotio
• 🗣️ GitHub Discussions — أسئلة وأجوبة معمّقة، RFCs، "اعرض عملك" ← Discussions
• 🐛 GitHub Issues — تقارير الأخطاء، طلبات الميزات ← Issues

تصنيفا good-first-issue وhelp-wanted هما أسهل طريق للدخول.

---

المساهمة

يظل Open Design يتحرك لأن المساهمين — مصممين ومهندسين ومؤلفي موجّهات — يواصلون الحضور. الكثير من أكثر المهارات وأنظمة التصميم والإضافات استخدامًا كتبها أشخاص خارج الفريق الأساسي.

🎯 من أين تبدأ (أقصى أثر، أقل تغيير)

تريد أن تشحن…	كيف	أين
مهارة جديدة	أسقِط مجلدًا يحوي SKILL.md + assets/ + references/	skills/ · المواصفة في docs/skills-protocol.md
نظام تصميم جديد	أسقِط ملف DESIGN.md باستخدام مخطط الأقسام التسعة	design-systems/<brand>/
إضافة جديدة	أسقِط open-design.json + بيانًا ضمن مجلد فئة	plugins/community/ · المواصفة في plugins/spec/SPEC.md · دليل تطوير الوكيل في plugins/spec/AGENT-DEVELOPMENT.md
دعم واجهة CLI جديدة لوكيل برمجة	مدخل محوّل واحد + محلّل بثّ	apps/daemon/src/agents.ts
إصلاح خطأ أو تحسين الواجهة	تصفّح تصنيف good-first-issue	Issues ←
ترجمة الوثائق	حدّث ملفات README.<lang>.md	TRANSLATIONS.md

🤖 المساهمة بصفتك وكيلًا

إن كنت أنت الوكيل الذي يقرأ هذا، فأسرع طريق هو:

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

# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # create a branch and worktree

# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. Open the PR
gh pr create --fill

سير المساهمة الكامل الصديق للوكلاء، وأسلوب الشفرة، ومستوى الـ PR ← CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · Português).

🏅 برنامج Open Design Fellow

نوظّف Open Design Fellows حول العالم — يشكّل الزملاء المنتج جنبًا إلى جنب مع الفريق الأساسي، ويمثّلون Open Design رسميًا في منطقتهم، وينمّون المجتمع محليًا، مدعومين بدعم مموَّل ($1,000 / MR)، ورصيد LLM مجاني، ومسار مراجعة مباشر. التفاصيل ← MAINTAINERS.md والإعلان على Discord.

---

المشرفون

يحملون قدرًا كبيرًا من العبء — الصيانة اليومية، والمراجعة، ودعم المجتمع.

@Nagendhra-web مشرف

@Sid-Qin مشرف

قواعد المشرفين، ومعايير الترقية، وبروتوكول الخروج ← MAINTAINERS.md (كذلك Deutsch · Français · 简体中文 · 日本語 · Português).

المساهمون

شكرًا لكل من شارك — شفرة، وثائق، ملاحظات، مشكلة دقيقة، مهارة جديدة، نظام تصميم جديد.

---

نشاط المستودع

يُعاد توليد ملف SVG أعلاه يوميًا بواسطة .github/workflows/metrics.yml باستخدام lowlighter/metrics.

---

امنحنا نجمة

إن وفّر عليك هذا ثلاثين دقيقة، فامنحه ★. النجوم لا تدفع الإيجار — لكنها تخبر المصمم والوكيل والمساهم التالي بأن هذه التجربة تستحق اهتمامهم. نقرة واحدة، وثلاث ثوانٍ، وإشارة حقيقية.

---

المراجع والنَّسَب

المشروع	الدور
Claude Design	المنتج مغلق المصدر الذي يُعدّ هذا المستودع البديل مفتوح المصدر له.
alchaincyf/huashu-design	بوصلة فلسفة التصميم — سير عمل المصمم المبتدئ، بروتوكول أصول العلامة التجارية، قائمة تحقق ضد الركاكة بالذكاء الاصطناعي، نقد بخمسة أبعاد.
op7418/guizang-ppt-skill	مهارة عرض الويب بأسلوب المجلات، مجمَّعة حرفيًا ضمن design-templates/guizang-ppt/. افتراضية لوضع العرض التقديمي.
lewislulu/html-ppt-skill	عائلة HTML PPT Studio — 15 قالب عرض تقديمي، 36 سمة، 31 تخطيط صفحة، وقت تشغيل للحركة، وضع عرض ببطاقات مغناطيسية.
OpenCoworkAI/open-codesign	أول بديل مفتوح المصدر لـ Claude Design؛ أنماط تجربة الاستخدام التي نستعيرها (حلقة بثّ المخرجات، iframe المعزول، لوحة الوكيل الحية).
multica-ai/multica	بنية الـ daemon + المحوّل — اكتشاف الوكلاء بمسح PATH، الـ daemon المحلي بصفته العملية المميَّزة الوحيدة.
VoltAgent/awesome-design-md	مصدر مخطط DESIGN.md ذي الأقسام التسعة و70 نظام منتج.
bergside/awesome-design-skills	مصدر مهارات التصميم الـ 57 المضافة ضمن design-systems/.
heygen-com/hyperframes	إطار الرسوميات الحركية HTML→MP4، مدمج بصفته hyperframes-html من الدرجة الأولى في Open Design.
Claude Code skills	اصطلاح SKILL.md الذي نعتمده حرفيًا.

النَّسَب التفصيلي ← docs/references.md.

الترخيص

‏Apache-2.0. يحتفظ المجمَّع design-templates/guizang-ppt/ بترخيصه الأصلي LICENSE (MIT، @op7418). ويحتفظ المجمَّع design-templates/html-ppt/ بترخيصه الأصلي LICENSE (MIT، @lewislulu).