Files
1343f374c6 docs: align README positioning and clarify service disclosures (#8718)
* docs: align README positioning and clarify service disclosures

* docs: restore shipped migration and import contracts

* docs: list task-kind values in condensed translations

---------

Co-authored-by: Joey <236967869+joeylee12629-star@users.noreply.github.com>
2026-10-13 12:00:42 +00:00

59 KiB
Raw Permalink Blame History

OpenDesign: أول مساحة عمل تعاونية لوكلاء التصميم بالذكاء الاصطناعي

✨ نحتفل بـ 100 ألف نجمة على GitHub مع OpenDesign Go — ضاعفنا رصيد Go: 8 دولارات أمريكية للشهر الأول، مع رصيد شهري يصل إلى 120 دولارًا أمريكيًا لنماذج Design Plan المؤهلة. استخدمه مع أكثر من 10 نماذج، منها GPT-6 Luna وDeepSeek V4.1 Flash وGLM-5.3 Flash-X وMiMo V2.6 Flash. تشمل جميع الخطط الفردية الوصول إلى واجهة API لاستخدامها مع Codex وClaude Code وDSH وOpenCode وغيرها.

OpenDesign: أول مساحة عمل تعاونية لوكلاء التصميم بالذكاء الاصطناعي

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

release license discord quickstart

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


ما هو OpenDesign

OpenDesign أول مساحة عمل تعاونية لوكلاء التصميم بالذكاء الاصطناعي. ابدأ بوصف موجز، ثم استخدم وكيل البرمجة الذي تعرفه أو OpenDesign Cloud لإنشاء نموذج أولي متوافق مع نظام التصميم لديك. شاركه مع فريقك، واجمع الملاحظات، ودع الوكيل يحسّنه داخل المشروع نفسه.

سير العمل هذا مفتوح وقابل للتوسعة. يتوفر OpenDesign بترخيص Apache 2.0، ويتيح للفرق فحص المهارات وقوالب التصميم وأنظمة التصميم والإضافات وتكييفها مع طريقة عملها.


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

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

Home — ابدأ بوصف موجز أو مثال.
Home — ابدأ بوصف موجز أو مثال.
All projects — عُد إلى أنظمة التصميم والوسائط والنماذج الأولية.
All projects — عُد إلى أنظمة التصميم والوسائط والنماذج الأولية.
Design Systems — افحص أصول العلامة التجارية وحسّنها بمساعدة وكيل.
Design Systems — افحص أصول العلامة التجارية وحسّنها بمساعدة وكيل.
Plugins — اعثر على المهارات وشغّلها عبر Try it.
Plugins — اعثر على المهارات وشغّلها عبر Try it.

Studio — الإنشاء والتحسين في مشروع واحد

Prototype — أنشئ تجارب ويب تفاعلية وحسّنها مع وكيلك وشاهد معاينة مباشرة.
Prototype — أنشئ تجارب ويب تفاعلية وحسّنها مع وكيلك وشاهد معاينة مباشرة.
Slides — أنشئ عروضًا تقديمية وراجع الشرائح وملاحظات المتحدث، ثم صدّرها.
Slides — أنشئ عروضًا تقديمية وراجع الشرائح وملاحظات المتحدث، ثم صدّرها.
Image — أنشئ عناصر مرئية من المحادثة وراجع النتيجة، ثم نزّلها أو افتحها.
Image — أنشئ عناصر مرئية من المحادثة وراجع النتيجة، ثم نزّلها أو افتحها.
HyperFrames — أنشئ رسومات متحركة مع وكيلك وصدّرها بصيغة MP4.
HyperFrames — أنشئ رسومات متحركة مع وكيلك وصدّرها بصيغة MP4. شاهد الفيديو.

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

يُشحَن OpenDesign على هيئة مهارات وواجهة 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.

The 25 coding-agent CLIs OpenDesign supports — Claude Code · Codex · OpenCode · Hermes · Antigravity · Vela · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Amp · CodeBuddy · Mimo · AtomCode · Devin · Trae

لا توجد واجهة 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 معزول.

Web prototype dating-web
نموذج أولي للويب — لوحة معلومات تحريرية بأشرطة تمرير ومؤشرات أداء رئيسية ومخططات. مُصيَّرة مباشرة من design-templates/dating-web/.
Gamified app
نموذج أولي لتطبيق جوال — تدفق مُلعَّب بثلاث شاشات مع أشرطة XP وتفاصيل المهام. سلّمه مباشرة إلى Cursor / Codex / Claude Code لتحويله إلى React/Next/Vue.

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

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

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

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

Magazine deck (guizang-ppt)
وضع العرض التقديمي (guizang-ppt) — تخطيطات بأسلوب المجلات، عنصر WebGL رئيسي، قوائم تحقق P0/P1/P2. مُجمَّع حرفيًا من op7418/guizang-ppt-skill مع الحفاظ على ترخيصه الأصلي.
Swiss deck
عرض تقديمي بأسلوب Swiss International — مرتكز على الشبكة، بلمسات أحادية اللون. واحد من 15 قالب عرض تقديمي و36 سمة ضمن design-templates/html-ppt-*/.

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

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

Illustrated city food map
خريطة طعام مدينة مرسومة
ملصق سفر تحريري مرسوم باليد
Cinematic elevator scene
مشهد مصعد سينمائي
لقطة تحريرية ساكنة بإطار واحد
Cyberpunk anime portrait
بورتريه سايبربانك
صورة رمزية — وجه بنص نيون
3D stone staircase evolution
درج حجري ثلاثي الأبعاد
إنفوجرافيك من حجر منحوت
Glamorous portrait
بورتريه فاخر
لقطة استوديو تحريرية

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

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

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

SaaS promo
عرض ترويجي لمنتج SaaS مدته 30 ثانية · 16:9 · كشوفات واجهة ثلاثية الأبعاد
TikTok karaoke
وجه متحدث بكاريوكي TikTok · 9:16 · TTS + تسميات توضيحية متزامنة مع الكلمات
Brand sizzle reel
مقطع ترويجي للعلامة التجارية مدته 30 ثانية · 16:9 · خط حركي يتفاعل مع الصوت
Bar chart race
سباق المخططات الشريطية · 16:9 · إنفوجرافيك بيانات بأسلوب NYT
Flight map
خريطة رحلة طيران · 16:9 · كشف مسار بأسلوب Apple
Logo outro
خاتمة شعار سينمائية مدتها 4 ثوانٍ · 16:9 · تجميع قطعة قطعة + توهّج
Money counter
عدّاد أموال من $0 إلى $10K · 9:16 · حماس بأسلوب Apple
Website to video
من موقع ويب إلى فيديو · 16:9 · يلتقط الموقع عند 3 منافذ عرض

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


لماذا OpenDesign

  • 🤖 أصيل للوكلاء، محايد تجاه النموذج. نحن لا نشحن وكيلًا. أدوات 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 إلى الوكيل، فيعيد هيكلة مكوناتك الحقيقية وفق مواصفة العلامة التجارية.
  • 🔒 الخصوصية عن قناعة. يمكن تشغيل المشاريع محليًا أو في بيئة النشر الخاصة بك. تُرسل طلبات النماذج السحابية وOpenDesign Cloud إلى الخدمات المعنية. يتضمن وكيل BYOK حماية ضد SSRF.

البدء السريع

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

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

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

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

يمكنك استخدام OpenDesign دون فتح الواجهة الرسومية أبدًا — استدعِه كمهارة أو إضافة أو خادم 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 ويكتب ملفات المشروع الأساسية ليعاينها OpenDesign. أما تشغيل 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

Deploy on Sealos

يشغّل قالب Sealos App Store صورة Docker المنشورة لـ OpenDesign مع تخزين دائم لمساحة العمل و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. البدء السريع الكامل، ومتغيرات البيئة، وسير بناء الحزمة ← QUICKSTART.md.

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

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

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

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

يشحن OpenDesign خادم MCP عبر stdio وسكربتات تثبيت لكل وكيل. يستطيع أي وكيل متوافق مع MCP في مستودع آخر قراءة الملفات من مشاريع OpenDesign المحلية لديك مباشرة — رموز 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 · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · sanity · mintlify · composio · opencode-ai · voltagent

الإنتاجية — notion · 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-default        # 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 إلى الأتمتة.

بناء إضافة

تتطلب إضافة OpenDesign ملف 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 (new-generation / figma-migration / code-migration / tune-collab) و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/ (الإضافات الخارجية)، أو — لشحنها مجمَّعة مع OpenDesign — في المستوى المطابق ضمن 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 — OpenDesign 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 هما أسهل طريق للدخول.


المساهمة

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

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

تريد أن تشحن… كيف أين
مهارة جديدة أسقِط مجلدًا يحوي 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).

🏅 برنامج OpenDesign Fellow

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


المشرفون

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

@Nagendhra-web
@Nagendhra-web

مشرف
@Sid-Qin
@Sid-Qin

مشرف

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

المساهمون

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

OpenDesign contributors

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

OpenDesign — repository metrics

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


امنحنا نجمة

Star OpenDesign on GitHub — github.com/nexu-io/open-design

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

OpenDesign star history

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

المشروع الدور
alchaincyf/huashu-design بوصلة فلسفة التصميم — سير عمل المصمم المبتدئ، بروتوكول أصول العلامة التجارية، قائمة تحقق ضد الركاكة بالذكاء الاصطناعي، نقد بخمسة أبعاد.
op7418/guizang-ppt-skill مهارة عرض الويب بأسلوب المجلات، مجمَّعة حرفيًا ضمن design-templates/guizang-ppt/. افتراضية لوضع العرض التقديمي.
lewislulu/html-ppt-skill عائلة HTML PPT Studio — 15 قالب عرض تقديمي، 36 سمة، 31 تخطيط صفحة، وقت تشغيل للحركة، وضع عرض ببطاقات مغناطيسية.
OpenCoworkAI/open-codesign أنماط تجربة الاستخدام التي نستعيرها (حلقة بثّ المخرجات، 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 من الدرجة الأولى في OpenDesign.
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).