<div dir="rtl">

<h1 align="center">Open Design: البديل مفتوح المصدر لـ Claude Design</h1>

> 🔥 **‏Open Design 0.9.0 وصل: أنشئ دون أي إعداد.** [Model Router الرسمي](https://open-design.ai/amr) مدمج مباشرة في التطبيق — لا إعدادات إضافية، ولا CLI لتثبيته، ولا مفتاح API لتجهيزه. ما عليك سوى فتح التطبيق وتسجيل الدخول والبدء فورًا في التصميم والإنشاء. [حمّل 0.9.0](https://github.com/nexu-io/open-design/releases) · [انضم إلى النقاش](https://github.com/nexu-io/open-design/discussions/3524)
>
> 🏅 **برنامج Open Design Fellow مفتوح الآن.** إن كنت تؤمن أنت أيضًا بأن التصميم يجب أن يكون مفتوحًا — كُن Open Design Fellow، وشارك في تشكيل المنتج جنبًا إلى جنب مع الفريق الأساسي، وساعد المزيد من الناس على المشاركة في تحديد مستقبل التصميم. التفاصيل ← [`MAINTAINERS.md`](../../MAINTAINERS.md) و[Discord](https://discord.gg/qhbcCH8Am4).

<p align="center">
  <img src="https://repo-assets.open-design.ai/resources/images/hero.png" alt="Open Design — The open-source Claude Design alternative · 150 Design Systems · 261 Plugins · 21 Coding Agents · 14 Media Providers" width="100%" />
</p>

<p align="center">
  <a href="https://open-design.ai/">الموقع</a> ·
  <a href="https://open-design.ai/">التنزيل</a> ·
  <a href="https://discord.gg/qhbcCH8Am4">Discord</a> ·
  <a href="https://x.com/nexudotio">تابع ‎@nexudotio</a>
</p>

<p align="center">
  <a href="https://github.com/nexu-io/open-design/releases"><img alt="release" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat&color=blueviolet&label=release&include_prereleases&display_name=tag" /></a>
  <a href="../../LICENSE"><img alt="license" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" /></a>
  <a href="https://discord.gg/qhbcCH8Am4"><img alt="discord" src="https://img.shields.io/discord/1479002485040480266?style=flat&logo=discord&logoColor=white&label=discord&color=5865F2&cacheSeconds=3600" /></a>
  <a href="../../QUICKSTART.md"><img alt="quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat" /></a>
</p>

<p align="center"><a href="../../README.md">English</a> · <a href="README.es.md">Español</a> · <a href="README.pt-BR.md">Português</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · <b>العربية</b> · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a> · <a href="README.tr.md">Türkçe</a></p>

---

## ما هو Open Design

🎨 **البديل مفتوح المصدر القائم على الجهاز المحلي أولًا لـ [Claude Design][cd].** &nbsp;🖥️ **تطبيق سطح مكتب أصلي لنظامي macOS وWindows.** &nbsp;⚡ **أكثر من 100 مهارة** · ✨ **150 نظام `DESIGN.md` بجودة العلامة التجارية** · 📦 **261 إضافة جاهزة للاستخدام.** &nbsp;🖼️ يولّد **نماذج أولية للويب · سطح المكتب · الجوال**، و**لوحات معلومات / مخرجات حية**، و**عروضًا تقديمية**، و**صورًا**، و**فيديو**، إضافة إلى رسوميات حركية بـ **HyperFrames**. 🔒 معاينة iframe معزولة · تصدير بصيغ HTML / PDF / PPTX / MP4. &nbsp;🤖 **يعمل على 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 — مصاغة مسبقًا وفق نظام التصميم لديك، وقابلة للتشغيل مباشرة داخل الوكيل الذي تستخدمه كل يوم.

[cd]: https://x.com/claudeai/status/2045156267690213649

---

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

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

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

<table>
<tr>
<td valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/home.png" alt="Home page" /><br/>
<sub><b>الصفحة الرئيسية</b> — نقطة الدخول للنظرة العامة. اختر مهارة ونظام تصميم، واكتب الموجز، وانطلق بكل شيء من مكان واحد.</sub>
</td>
</tr>
</table>

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/automation.png" alt="Automation page" /><br/>
<sub><b>الأتمتة</b> — حوّل سير عمل التصميم المتكرر إلى أتمتة قابلة لإعادة الاستخدام والجدولة.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/design-system.png" alt="Design System page" /><br/>
<sub><b>نظام التصميم</b> — استخلص ملف <code>DESIGN.md</code> الخاص بفريقك إلى عقد علامة تجارية يشكّل كل مخرَج.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/plugin.png" alt="Plugin page" /><br/>
<sub><b>الإضافة</b> — تصفّح وثبّت ووزّع إضافات سير العمل لتوسيع التوليد عند الطلب.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/integrations.png" alt="Integrations page" /><br/>
<sub><b>عمليات التكامل</b> — اربط الأنظمة الخارجية وأدوات MCP، واستخدم Open Design من أي بيئة تطوير أو سكربت أو أتمتة.</sub>
</td>
</tr>
</table>

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

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

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-prototype.png" alt="Prototype" /><br/>
<sub><b>النموذج الأولي</b> — مخرجات HTML من صفحة واحدة تقرأ نظام التصميم لديك وتُعرَض في iframe معزول، قابلة للمعاينة فورًا وللتنزيل كمصدر.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-hyperframe.png" alt="HyperFrame" /><br/>
<sub><b>HyperFrame</b> — حركة ورسوميات متحركة برمجية، تُصيَّر إلى ملف MP4 حقيقي (مثل 1920×1080 · 30fps).</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-ppt.png" alt="Deck" /><br/>
<sub><b>العرض التقديمي</b> — عروض تقديمية يمكنك تصفّحها صفحة صفحة، والتنقل فيها بلوحة المفاتيح، وتصديرها إلى PPTX / PDF.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-image.png" alt="Image" /><br/>
<sub><b>الصورة</b> — صور وأصول بصرية بجودة العلامة التجارية، مع توليد عالي الدقة وتنزيل.</sub>
</td>
</tr>
</table>

---

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

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

| وكيل البرمجة / المنصة &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | الحالة &nbsp;&nbsp; | تثبيت خادم MCP بأمر واحد &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |
|---|:---:|---|
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ مدعوم | `od mcp install claude` |
| [Codex CLI](https://github.com/openai/codex) | ✅ مدعوم | `od mcp install codex` |
| [Cursor](https://www.cursor.com/cli) | ✅ مدعوم | `od mcp install cursor` |
| [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ مدعوم | `od mcp install copilot` |
| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ مدعوم | `od mcp install copilot` |
| Gemini CLI | ✅ مدعوم | `od mcp install gemini` |
| [OpenCode](https://opencode.ai/) | ✅ مدعوم | `od mcp install opencode` |
| [OpenClaw](https://github.com/openclaw/openclaw) | ✅ مدعوم | `od mcp install openclaw` |
| [Antigravity](https://antigravity.google) | ✅ مدعوم | `od mcp install antigravity` |
| [Cline](https://github.com/cline/cline) | ✅ مدعوم | `od mcp install cline` |
| [Trae](https://www.trae.ai/) | ✅ مدعوم | `od mcp install trae` |
| Kimi CLI | ✅ مدعوم | `od mcp install kimi` |
| [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ مدعوم | `od mcp install pi` |
| [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ مدعوم | `od mcp install vibe` |
| [Hermes Agent](https://github.com/nousresearch/hermes-agent) | ✅ مدعوم | `od mcp install hermes` |

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

<p align="center">
  <img src="https://repo-assets.open-design.ai/resources/images/coding-agents.png" alt="The 21 coding-agent CLIs Open Design supports — Claude Code · Codex · OpenCode · Hermes · Antigravity · Gemini · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Devin · Trae" width="100%" />
</p>

**لا توجد واجهة 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`](../../apps/daemon/src/agents.ts). إضافة واجهة CLI جديدة تتطلب مدخلًا واحدًا — راجع [`docs/agent-adapters.md`](../../docs/agent-adapters.md).

---

## عرض توضيحي

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

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

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

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/01-entry-view.png" alt="Entry view" /><br/>
<sub><b>واجهة الدخول</b> — اختر مهارة، اختر نظام تصميم، اكتب الموجز. سطح واحد للنماذج الأولية ولوحات المعلومات والعروض التقديمية وتطبيقات الجوال وصفحات المجلات.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/mobile-onboarding.png" alt="Mobile onboarding" /><br/>
<sub><b>نموذج أولي للجوال</b> — هيكل iPhone 15 Pro دقيق بالبكسل، وتدفقات متعددة الشاشات. لا يعيد الوكيل أبدًا رسم إطار الهاتف؛ إذ تقيم إطارات الأجهزة المشتركة في <code>assets/frames/</code>.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/dating-web.png" alt="Web prototype dating-web" /><br/>
<sub><b>نموذج أولي للويب</b> — لوحة معلومات تحريرية بأشرطة تمرير ومؤشرات أداء رئيسية ومخططات. مُصيَّرة مباشرة من <code>design-templates/dating-web/</code>.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/gamified-app.png" alt="Gamified app" /><br/>
<sub><b>نموذج أولي لتطبيق جوال</b> — تدفق مُلعَّب بثلاث شاشات مع أشرطة XP وتفاصيل المهام. سلّمه مباشرة إلى Cursor / Codex / Claude Code لتحويله إلى React/Next/Vue.</sub>
</td>
</tr>
</table>

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

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

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/live-dashboard.png" alt="Live dashboard" /><br/>
<sub><b>لوحة معلومات حية</b> — جدار مؤشرات أداء قابل للتحرير تُظهِر لوحة تعديلاته المعاملات الجديرة بالضبط. يصدر الوكيل بيان manifest، ويُعاد عرض iframe دون إعادة تحميل.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/research-decision-room.png" alt="Decision room" /><br/>
<sub><b>غرفة اتخاذ القرار</b> — مخرَج إحاطة متعدد المصادر لاجتماعات المنتج / البحث / العمليات.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/github-dashboard.png" alt="GitHub dashboard" /><br/>
<sub><b>لوحة معلومات بأسلوب GitHub</b> — مقاييس المستودع معروضة كمخرَج حي.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/flowai-live-dashboard-template.png" alt="Flow live dashboard" /><br/>
<sub><b>قالب لوحة معلومات حية من Flow</b> — قالب مؤشرات أداء خاص بمجال محدد، مُعلَّم وفق <code>DESIGN.md</code> النشِط.</sub>
</td>
</tr>
</table>

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

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/07-magazine-deck.png" alt="Magazine deck (guizang-ppt)" /><br/>
<sub><b>وضع العرض التقديمي (guizang-ppt)</b> — تخطيطات بأسلوب المجلات، عنصر WebGL رئيسي، قوائم تحقق P0/P1/P2. مُجمَّع حرفيًا من <a href="https://github.com/op7418/guizang-ppt-skill"><code>op7418/guizang-ppt-skill</code></a> مع الحفاظ على ترخيصه الأصلي.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/deck-swiss-international.png" alt="Swiss deck" /><br/>
<sub><b>عرض تقديمي بأسلوب Swiss International</b> — مرتكز على الشبكة، بلمسات أحادية اللون. واحد من <b>15 قالب عرض تقديمي</b> و<b>36 سمة</b> ضمن <code>design-templates/html-ppt-*/</code>.</sub>
</td>
</tr>
</table>

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

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

<table>
<tr>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776662673014_nf0taw_HGRMNDybsAAGG88.jpg" alt="Illustrated city food map" /><br/><sub><b>خريطة طعام مدينة مرسومة</b><br/>ملصق سفر تحريري مرسوم باليد</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453149026_gd2k50_HHCSvymboAAVscc.jpg" alt="Cinematic elevator scene" /><br/><sub><b>مشهد مصعد سينمائي</b><br/>لقطة تحريرية ساكنة بإطار واحد</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453164993_mt5b69_HHDoWfeaUAEA6Vt.jpg" alt="Cyberpunk anime portrait" /><br/><sub><b>بورتريه سايبربانك</b><br/>صورة رمزية — وجه بنص نيون</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776661968404_8a5flm_HGQc_KOaMAA2vt0.jpg" alt="3D stone staircase evolution" /><br/><sub><b>درج حجري ثلاثي الأبعاد</b><br/>إنفوجرافيك من حجر منحوت</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453184257_vb9hvl_HG9tAkOa4AAuRrn.jpg" alt="Glamorous portrait" /><br/><sub><b>بورتريه فاخر</b><br/>لقطة استوديو تحريرية</sub></td>
</tr>
</table>

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

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

**[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** لطبقة الصوت.

<table>
<tr>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-saas-product-promo-30s.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" alt="SaaS promo" /></a><br/><sub><b>عرض ترويجي لمنتج SaaS مدته 30 ثانية</b> · 16:9 · كشوفات واجهة ثلاثية الأبعاد</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-tiktok-karaoke-talking-head.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" alt="TikTok karaoke" /></a><br/><sub><b>وجه متحدث بكاريوكي TikTok</b> · 9:16 · TTS + تسميات توضيحية متزامنة مع الكلمات</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-brand-sizzle-reel.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Brand sizzle reel" /></a><br/><sub><b>مقطع ترويجي للعلامة التجارية مدته 30 ثانية</b> · 16:9 · خط حركي يتفاعل مع الصوت</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-data-bar-chart-race.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" alt="Bar chart race" /></a><br/><sub><b>سباق المخططات الشريطية</b> · 16:9 · إنفوجرافيك بيانات بأسلوب NYT</sub></td>
</tr>
<tr>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-flight-map-route.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" alt="Flight map" /></a><br/><sub><b>خريطة رحلة طيران</b> · 16:9 · كشف مسار بأسلوب Apple</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-logo-outro-cinematic.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Logo outro" /></a><br/><sub><b>خاتمة شعار سينمائية مدتها 4 ثوانٍ</b> · 16:9 · تجميع قطعة قطعة + توهّج</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-money-counter-hype.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" alt="Money counter" /></a><br/><sub><b>عدّاد أموال من $0 إلى $10K</b> · 9:16 · حماس بأسلوب Apple</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-website-to-video-promo.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" alt="Website to video" /></a><br/><sub><b>من موقع ويب إلى فيديو</b> · 16:9 · يلتقط الموقع عند 3 منافذ عرض</sub></td>
</tr>
</table>

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

[hyperframes]: https://github.com/heygen-com/hyperframes

---

## لماذا Open Design

> **في أبريل 2026، أطلقت Anthropic [Claude Design][cd] — وهي المرة الأولى التي يتوقف فيها نموذج لغوي كبير عن كتابة النثر ويبدأ في تسليم مخرجات تصميم مباشرة.** انتشر بسرعة كبيرة. لكنه ظل مغلق المصدر، مدفوعًا فقط، سحابيًا فقط، مقيَّدًا بنموذج 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 في كل طبقة.** تطبيقات سطح مكتب أصلية لـ macOS (Apple Silicon + Intel) وWindows (x64). Linux AppImage على مسار الإصدار الاختياري. SQLite في `.od/app.sqlite`، والملفات في `.od/projects/<id>/`، بلا قياس عن بُعد، بلا ذهاب وإياب سحابي.
- 🌍 **قابل للتركيب على ثلاثة مستويات.** **الإضافات** تحمل سير عمل قابلًا للتشغيل · **المهارات** تحمل ذوق الوكيل التصميمي · **أنظمة التصميم** تحمل العلامة التجارية. وكلها ملفات عادية يمكن لأي شخص تأليفها وإصدارها ونشرها.
- 🔁 **حدِّث قاعدة شفرة موجودة.** سلّم مستودع `git` + ملف `DESIGN.md` إلى الوكيل، فيعيد هيكلة مكوناتك الحقيقية وفق مواصفة العلامة التجارية. تنقل إضافات مخصّصة سير عمل Figma / Pencil إلى شفرة React / Next.js / Vue.
- 🔒 **الخصوصية عن قناعة.** كل شيء يعمل حيث تقيم بياناتك — حاسوبك المحمول، أو خادم فريقك، أو مشروع Vercel الخاص بك. وعند الحاجة إلى الشبكة، يكون وكيل BYOK محميًا ضد SSRF.

### مقارنة

| | [Claude Design][cd] | 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**](https://open-design.ai/) أو [إصدارات GitHub](https://github.com/nexu-io/open-design/releases)
- **Windows** (x64) ← [**open-design.ai**](https://open-design.ai/) أو [إصدارات GitHub](https://github.com/nexu-io/open-design/releases)
- **Linux** (AppImage، مسار اختياري) ← [إصدارات GitHub](https://github.com/nexu-io/open-design/releases)

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

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

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

```bash
# 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

```bash
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
```

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

```bash
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`](../../docs/windows-troubleshooting.md). البدء السريع الكامل، ومتغيرات البيئة، وNix flake، وسير بناء الحزمة ← [`QUICKSTART.md`](../../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 مهيكلة قابلة للاستعلام بالاسم. يرى الوكيل دائمًا الملف الحي، لا تصديرًا قديمًا.

```bash
# 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`](../../docs/agent-adapters.md).

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

---

## المهارات

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

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

---

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

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

<details>
<summary><b>الكتالوج الكامل (انقر للتوسيع)</b></summary>

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

</details>

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

[acd2]: https://github.com/VoltAgent/awesome-design-md

---

## الإضافات

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

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

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

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

- 🤖 **التشغيل في أي وكيل برمجة** — [Claude Code](../../docs/agent-adapters.md) وCodex وCursor وCopilot و[OpenClaw](https://github.com/openclaw/openclaw) و[Antigravity](https://antigravity.google) وHermes وKimi… عبر بروتوكول المهارات نفسه الذي يعرفه الوكيل أصلًا.
- 🔁 **نقل سير عمل Figma / Pencil** ← شفرة React أو Next.js أو Vue. راجع [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/).
- 🛠️ **تحديث قاعدة شفرة موجودة وفق مواصفة علامة تجارية** — وجّه إضافة نحو مستودع `git` + ملف `DESIGN.md`، واحصل على PR. راجع [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/).
- 💾 **الاحتفاظ بسير عمل مخصّص** — تجلس قوالب فريقك القابلة لإعادة الاستخدام بجوار القوالب المشحونة.

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

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

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

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

```bash
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[]` (معاملات وقت التطبيق).

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

```bash
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/SPEC.md)؛ تطوير إضافة بوكيل برمجة ← [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md)؛ قوالب دنيا جاهزة للصق ← [`plugins/spec/examples/`](../../plugins/spec/examples/).

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

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

نقطة نهاية سجل الإضافات: `GET /api/plugins`. نظرة عامة على الدليل ← [`plugins/README.md`](../../plugins/README.md) ([简体中文](../../plugins/README.zh-CN.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: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  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` |
| التخزين | الملفات في `.od/projects/<id>/` + SQLite في `.od/app.sqlite` + `media-config.json` (مستبعَد من git، يُنشَأ تلقائيًا). يعيد `OD_DATA_DIR` تحديد موقع كل شيء. |
| المعاينة | 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/architecture.md). بروتوكول المهارات ← [`docs/skills-protocol.md`](../../docs/skills-protocol.md). عقد محوّل الوكلاء ← [`docs/agent-adapters.md`](../../docs/agent-adapters.md).

---

## خارطة الطريق

- [x] الـ Daemon + 21 محوّل واجهة CLI لوكلاء البرمجة + سجل المهارات + كتالوج أنظمة التصميم
- [x] تطبيق ويب + دردشة + نموذج أسئلة + مُنتقي 5 اتجاهات + تقدّم قائمة المهام + معاينة معزولة
- [x] أكثر من 100 مهارة · 150 نظام تصميم · 5 اتجاهات بصرية · 5 إطارات أجهزة
- [x] مشاريع مدعومة بـ SQLite · محادثات · رسائل · علامات تبويب · قوالب
- [x] وكيل BYOK متعدد المزوّدين (`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`) + حماية SSRF
- [x] استيراد ZIP من Claude Design (`/api/import/claude-design`)
- [x] بروتوكول جانبي + سطح مكتب Electron + أتمتة IPC
- [x] واجهة API لفحص المخرجات + بوابة نقد ذاتي بخمسة أبعاد قبل الإصدار
- [x] **0.8.0** — بنية تحتية لسوق الإضافات (261 إضافة رسمية، مواصفة البيان، سكربتات تثبيت لكل وكيل)
- [x] **0.9.0** — Open Design AMR (Model Router الرسمي مدمج في التطبيق: بلا إعداد، تسجيل دخول بنقرة واحدة)
- [x] إصدارات 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`](../../docs/roadmap.md).

---

## المجتمع

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

- 💬 **Discord** — دردشة يومية، مشاركة الإضافات، أسئلة ← [**discord.gg/qhbcCH8Am4**](https://discord.gg/qhbcCH8Am4)
- 🐦 **X / Twitter** — ملاحظات الإصدارات، المعالم، ما وراء الكواليس ← [**@nexudotio**](https://x.com/nexudotio)
- 🗣️ **GitHub Discussions** — أسئلة وأجوبة معمّقة، RFCs، "اعرض عملك" ← [**Discussions**](https://github.com/nexu-io/open-design/discussions)
- 🐛 **GitHub Issues** — تقارير الأخطاء، طلبات الميزات ← [**Issues**](https://github.com/nexu-io/open-design/issues)

تصنيفا [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) و[`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) هما أسهل طريق للدخول.

---

## المساهمة

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

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

| تريد أن تشحن… | كيف | أين |
|---|---|---|
| **مهارة** جديدة | أسقِط مجلدًا يحوي `SKILL.md` + `assets/` + `references/` | [`skills/`](../../skills/) · المواصفة في [`docs/skills-protocol.md`](../../docs/skills-protocol.md) |
| **نظام تصميم** جديد | أسقِط ملف `DESIGN.md` باستخدام مخطط الأقسام التسعة | [`design-systems/<brand>/`](../../design-systems/) |
| **إضافة** جديدة | أسقِط `open-design.json` + بيانًا ضمن مجلد فئة | [`plugins/community/`](../../plugins/community/) · المواصفة في [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md) · دليل تطوير الوكيل في [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md) |
| دعم **واجهة CLI** جديدة لوكيل برمجة | مدخل محوّل واحد + محلّل بثّ | [`apps/daemon/src/agents.ts`](../../apps/daemon/src/agents.ts) |
| إصلاح خطأ أو تحسين الواجهة | تصفّح تصنيف [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) | [Issues ←](https://github.com/nexu-io/open-design/issues) |
| ترجمة الوثائق | حدّث ملفات `README.<lang>.md` | [`TRANSLATIONS.md`](../../TRANSLATIONS.md) |

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

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

```bash
# 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`](../../CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md) · [日本語](CONTRIBUTING.ja-JP.md) · [Português](CONTRIBUTING.pt-BR.md)).

### 🏅 برنامج Open Design Fellow

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

---

## المشرفون

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

<table>
  <tr>
    <td align="center" valign="top" width="200">
      <a href="https://github.com/Nagendhra-web">
        <img src="https://github.com/Nagendhra-web.png" width="96" alt="@Nagendhra-web" /><br/>
        <sub><b>@Nagendhra-web</b></sub>
      </a><br/>
      <sub>مشرف</sub>
    </td>
    <td align="center" valign="top" width="200">
      <a href="https://github.com/Sid-Qin">
        <img src="https://github.com/Sid-Qin.png" width="96" alt="@Sid-Qin" /><br/>
        <sub><b>@Sid-Qin</b></sub>
      </a><br/>
      <sub>مشرف</sub>
    </td>
  </tr>
</table>

قواعد المشرفين، ومعايير الترقية، وبروتوكول الخروج ← [`MAINTAINERS.md`](../../MAINTAINERS.md) (كذلك [Deutsch](MAINTAINERS.de.md) · [Français](MAINTAINERS.fr.md) · [简体中文](MAINTAINERS.zh-CN.md) · [日本語](MAINTAINERS.ja-JP.md) · [Português](MAINTAINERS.pt-BR.md)).

## المساهمون

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

<a href="https://github.com/nexu-io/open-design/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=nexu-io/open-design&max=500&columns=20&anon=1&cache_bust=2026-05-30" alt="Open Design contributors" />
</a>

---

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

<picture>
  <img alt="Open Design — repository metrics" src="https://repo-assets.open-design.ai/resources/images/github-metrics.svg" />
</picture>

يُعاد توليد ملف SVG أعلاه يوميًا بواسطة [`.github/workflows/metrics.yml`](../../.github/workflows/metrics.yml) باستخدام [`lowlighter/metrics`](https://github.com/lowlighter/metrics).

---

## امنحنا نجمة

<p align="center">
  <a href="https://github.com/nexu-io/open-design"><img src="https://repo-assets.open-design.ai/resources/images/star-us.png" alt="Star Open Design on GitHub — github.com/nexu-io/open-design" width="100%" /></a>
</p>

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

<a href="https://star-history.com/#nexu-io/open-design&Date">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&theme=dark&cache_bust=2026-05-28" />
    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-05-28" />
    <img alt="Open Design star history" src="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-05-28" />
  </picture>
</a>

---

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

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

النَّسَب التفصيلي ← [`docs/references.md`](../../docs/references.md).

[skill]: https://docs.anthropic.com/en/docs/claude-code/skills

## الترخيص

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

</div>
