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

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

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

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

الموقع · التنزيل · Open Design Cloud · Discord · تابع ‎@OpenDesignHQ

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

---

ما هو Open Design

🎨 البديل مفتوح المصدر القائم على الجهاز المحلي أولًا لـ Claude Design.  🖥️ تطبيق سطح مكتب أصلي لنظامي macOS وWindows.  ⚡ أكثر من 100 مهارة وظيفية + كتالوج منفصل لقوالب التصيير · ✨ 151 حزمة نظام تصميم · 📦 277 إضافة جاهزة للاستخدام.  🖼️ يولّد نماذج أولية للويب · سطح المكتب · الجوال، ولوحات معلومات / مخرجات حية، وعروضًا تقديمية، وصورًا، وفيديو، إضافة إلى رسوميات حركية بـ HyperFrames. 🔒 معاينة iframe معزولة · تصدير بصيغ HTML / PDF / PPTX / MP4.  🤖 يعمل على 25 ملف CLI تنفيذيًا محليًا متميزًا، أو أي نقطة نهاية متوافقة مع OpenAI عبر BYOK.

‏Open Design يحوّل الحلقة إلى نظام ملفات من المهارات الوظيفية وقوالب التصيير وأنظمة التصميم والإضافات يستطيع الوكلاء قراءته والكتابة عليه وإعادة مزجه.

كما أنه بديل 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
DeepSeek Reasonix	✅ مدعوم	od mcp install reasonix
Raven	✅ مدعوم	od mcp install raven
Cursor	✅ مدعوم	od mcp install cursor
VS Code + GitHub Copilot	✅ مدعوم	od mcp install copilot
GitHub Copilot CLI	✅ مدعوم	od mcp install copilot
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
Kiro	✅ مدعوم	od mcp install kiro
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.

توجد تعريفات runtime في apps/daemon/src/runtimes/defs/ وتُسجّل في runtimes/registry.ts. لا يلزم parser جديد إلا عند إضافة wire format جديد — راجع 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 من الحزمة النشطة بوصفه عقد العلامة الأساسي. يُشحَن مع المستودع 151 حزمة نظام تصميم؛ قد تقتصر الحزم القديمة على DESIGN.md، بينما يمكن للأحدث إضافة manifest.json وtokens.css والمكوّنات والأصول وبيانات المصدر. أسقِط مجلدًا، فيعثر عليه المُنتقي.
• 🖥️ محلي أولًا، 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 + Docker
أصيل للوكلاء (يعمل في واجهة CLI لديك)	Anthropic فقط	❌	وكيل سحابي فقط	✅ 25 واجهة CLI + BYOK
DESIGN.md بجودة العلامة التجارية	احتكاري	Theme JSON	رموز محدودة	✅ 151 نظامًا مشحونًا
المهارات / الإضافات / القوالب	مغلقة	متجر إضافات	مغلقة	✅ أكثر من 100 مهارة وظيفية · كتالوج منفصل لقوالب التصيير · 277 إضافة
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 مهارة وظيفية وكتالوج قوالب التصيير المنفصل و151 حزمة نظام تصميم، ويتيح لك كتابة موجز في واجهة الدخول.

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

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

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity
#         | pi | vibe | hermes | cline | kimi | kiro | trae | opencode

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

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

في تشغيل CLI محلي مدعوم بنظام الملفات، يركّب الوكيل المهارة الوظيفية أو قالب التصميم المختار مع DESIGN.md ويكتب ملفات المشروع الأساسية ليعاينها Open Design. أما تشغيل BYOK/API بلا أدوات ملفات فيُرجع كتلة <artifact> كاملة واحدة.

🐳 التشغيل باستخدام 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

🚀 النشر على Sealos

يشغّل قالب Sealos App Store صورة Docker المنشورة لـ Open Design مع تخزين دائم لمساحة العمل وBasic Auth على الوكيل العام. لعمليات نشر Docker العامة أو المشتركة المخصصة، اتبع إرشادات الوكيل العكسي وOPEN_DESIGN_ALLOWED_ORIGINS في deploy/README.md.

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

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

افتح الرابط الذي يطبعه tools-dev؛ تُخصَّص منافذ التطوير ديناميكيًا ما لم تمرر أعلام منافذ صريحة.

‏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. ينشئ الوكيل أول تسليم. تشغيلات CLI ذات نظام الملفات تكتب الملفات الأساسية؛ وتشغيلات BYOK/API بلا أدوات ملفات تُرجع كتلة <artifact> كاملة.
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):
od mcp install <agent>

# Then the agent can:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json

لماذا 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/ تقدم سلوكًا أو مراجع أو أدوات قابلة لإعادة الاستخدام. توجد بدايات التصيير منفصلة في design-templates/ وتظهر في كتالوج القوالب لا في سجل المهارات الوظيفية.

يرسي وضعان أساس كتالوج القوالب: prototype وdeck؛ وتغطي قوالب أخرى image وvideo وaudio وأسطح utility.

قالب التصميم	الوضع	السيناريو	ما ينتجه
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 للمهارات الوظيفية وGET /api/design-templates للقوالب.

---

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

151 حزمة نظام تصميم تتمحور حول DESIGN.md تُشحَن مع المستودع. قد تحتوي الحزم القديمة على عقد Markdown فقط؛ ويمكن للحزم الأحدث أيضًا حمل manifest.json وtokens.css المجمّع وأمثلة المكونات والأصول وأدلة المصدر. يجمع الكتالوج مشتقات upstream وإضافات المشروع؛ يوثق design-systems/README.md الشكل والمصدر.

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

الذكاء الاصطناعي ونماذج اللغة الكبيرة — 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.

---

الإضافات

277 إضافة رسمية و183 مثالًا قابلًا لإعادة المزج في plugins/_official/. كل إدخال مجلد قابل للنقل يرتكز على open-design.json وحمولة نوعه: SKILL.md لسير العمل، أو template.json لقوالب الوسائط، أو DESIGN.md لأنظمة التصميم.

الفئة	العدد	المحتويات
scenarios/	13	سيناريوهات تصميم كاملة — 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, od-share-to-community, od-web-effect-extractor
image-templates/	45	موجّهات صور بلقطة واحدة — تحريرية، سينمائية، منتجات، بورتريه
video-templates/	63	قوالب حركة HyperFrames / Seedance / Veo
design-systems/	143	ملفات DESIGN.md للعلامات التجارية مغلَّفة كإضافات
atoms/	13	أجزاء واجهة قابلة لإعادة الاستخدام (أزرار، عناصر رئيسية، بطاقات مؤشرات أداء)
examples/	183	مخرجات مرجعية قابلة لإعادة المزج

كذلك 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 إلى الأتمتة.

بناء إضافة

تتطلب إضافة Open Design ملف open-design.json وحمولة نوعها. تتضمن المهارات والسيناريوهات أيضًا SKILL.md؛ وتستخدم الأنواع الأخرى حمولتها الخاصة:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omit for other plugin types
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

الحقول الأساسية هي specVersion وname وversion، وcompat.agentSkills[].path الاختياري عند عرض Agent Skill، إضافة إلى od.kind وod.taskKind وod.mode وod.capabilities[] و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/design-templates    /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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Base registry: 26 runtime definitions (including byok-opencode),       │
   │  backed by 25 distinct local CLI executables because byok-opencode      │
   │  shares the OpenCode executable.                                        │
   │  Composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

الطبقة	المكدّس
الواجهة الأمامية	Next.js 16 App Router + React 18 + TypeScript
الـ Daemon	Node 24 · Express · بثّ SSE · better-sqlite3
التخزين	قبل تغيير أو توثيق مسارات تخزين الـ daemon، يجب قراءة AGENTS.md في جذر المستودع، قسم Daemon data directory contract. يجب ألا يعيد هذا README صياغته.
المعاينة	تشغيلات filesystem تعرض الملفات الأساسية؛ وتشغيلات BYOK/API تحلل كتلة <artifact> كاملة في iframe srcdoc معزول
التصدير	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 + 26 تعريف runtime فوق 25 ملف CLI تنفيذيًا متميزًا + سجلي المهارات/القوالب + كتالوج الأنظمة
• تطبيق ويب + دردشة + نموذج أسئلة + مُنتقي 5 اتجاهات + تقدّم قائمة المهام + معاينة معزولة
• أكثر من 100 مهارة وظيفية · كتالوج قوالب منفصل · 151 حزمة نظام تصميم · 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 Cloud (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/mHAjSMV6gz
• 🐦 X / Twitter — ملاحظات الإصدارات، المعالم، ما وراء الكواليس ← @OpenDesignHQ
• 🗣️ 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، وأضف manifest.json أو tokens.css أو المكوّنات أو الأصول أو بيانات المصدر عند الحاجة	design-systems/<brand>/
إضافة جديدة	أسقِط open-design.json + حمولة النوع ضمن مجلد فئة	plugins/community/ · المواصفة في plugins/spec/SPEC.md · دليل تطوير الوكيل في plugins/spec/AGENT-DEVELOPMENT.md
دعم واجهة CLI جديدة لوكيل برمجة	تعريف runtime + تسجيل؛ parser فقط لتنسيق جديد	apps/daemon/src/runtimes/defs/
إصلاح خطأ أو تحسين الواجهة	تصفّح تصنيف 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).