OpenCode للتصميم.

ما هو OpenCode فعلًا

‏OpenCode هو وكيل برمجة بالذكاء الاصطناعي مفتوح المصدر مبني للطرفية، يصونه الفريق وراء SST (Anomaly Innovations). يقرأ مستودعك، ويشغّل الأوامر، ويحرّر الملفات، ويتحدّث إلى نموذج لغوي كبير — لكنه، بخلاف الوكلاء المرتبطين بمزوّد، لا يأتي بنموذجه الخاص. توجّهه نحو أي مزوّد ونموذج تريده وتُحضر مفتاحك الخاص.

يعمل بواجهة طرفية نصية (TUI)، مع تطبيق سطح مكتب وإضافات بيئات تطوير فوق المحرك نفسه. وتحت الغطاء يستخدم بنية عميل/خادم، فيكون الوكيل الذي ينجز العمل منفصلًا عن الواجهة التي تقوده منها. ويتبدّل وكيلان مدمجان — build وplan — بمفتاح Tab.

• محايد للنماذج: تأتي النماذج والمزوّدون من models.dev، وهو كتالوج مفتوح. تهيّئهم في opencode.json بسلسلة provider/model-id ويمكنك تعطيل المزوّدين الذين لا تريد تحميلهم — فيعمل سير عمل التصميم نفسه على Anthropic وOpenAI وGoogle وOpenRouter والنماذج المحلية والمزيد.
• ملف التعليمات: يقرأ OpenCode ملف AGENTS.md في مشروعك (المعيار متعدد الأدوات، المتوافق أيضًا مع CLAUDE.md) لقواعد المشروع — المكان الطبيعي لترميز أعراف التصميم لديك. شغّل /init لتوليد واحد.
• قابل للتوسيع: يدعم تكامل LSP وخوادم MCP والثيمات واختصارات المفاتيح والأوامر المخصّصة، إضافةً إلى روابط جلسات قابلة للمشاركة للتعاون.

• الصائن: SST / Anomaly Innovations (مشروع مفتوح المصدر)
• بيانات الاعتماد: مفاتيح API الخاصة بمزوّد نماذجك — مبدأ BYOK، بلا ارتباط بمزوّد
• الرخصة: MIT، مفتوحة المصدر

لماذا يلائم وكيل مفتوح متعدد النماذج عمل التصميم

لا يملك OpenCode «نموذج تصميم» واحدًا كما يملك وكيل مرتبط بمزوّد — وهذا هو المغزى. ولأنه محايد للنماذج ومفتوح، يمكنك تشغيل سير عمل التصميم نفسه على أي نموذج أفضل حاليًا في الواجهة الأمامية، أو تبديله لاحقًا، أو الرجوع إلى نموذج محلي، كل ذلك دون تغيير إعدادك.

لكن اختيار النموذج وحده لا يشتري ذوقًا. وكأي وكيل برمجة، ينتج OpenCode واجهة عامة ما لم تمنحه قيودًا. ومخرجات التصميم الجيدة تأتي من ثلاثة مدخلات تقدّمها أنت.

• نظام تصميم: tokens وعناصر أولية وأعراف حقيقية يعيد الوكيل استخدامها، كي تطابق المخرجات هوية علامة بدلًا من العودة إلى مظهر عام.
• skill جمالي: skill منسّق يفرض ذوقًا حقيقيًا — حركة مقيّدة، هرمية تقدّم العلامة، خطّان كحد أقصى ولون توكيد واحد — ويجعل الوكيل يلتزم باتجاه قبل البناء.
• مراجع ملموسة: صور مرجعية فعلية وحالات متعددة (سطح المكتب والجوال، التحويم، الفارغ، التحميل)، لا لقطة بطل واحدة.

الدرس: يمنحك OpenCode حرية النماذج، لكن الذوق ما زال يأتي من سياق تصميم منسّق. ويجمع Open Design تلك المدخلات بالضبط، ولهذا يتلاءم الاثنان معًا — كلاهما مفتوح المصدر ومحلي أولًا (المزيد أدناه).

إعداد OpenCode لعمل التصميم، من الصفر

هذا هو المسار الكامل من جهاز نظيف إلى OpenCode قادر على بناء الواجهة والتحقق منها.

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• رمّز قواعد التصميم لديك: ضع tokens وعناصرك الأولية وأعرافك في AGENTS.md (أو في DESIGN.md مُشار إليه منه) كي تطابق المخرجات هوية علامة بدلًا من العودة إلى مظهر عام. ويمكن لخيار instructions في opencode.json أن يشير إلى ملفات قواعد إضافية عبر الأنماط.
• اختر نموذجًا قادرًا: لأن OpenCode محايد للنماذج، اختر المزوّد/النموذج الأقوى حاليًا في الواجهة الأمامية لتمريرة التصميم — وأبقِ بقية سير عملك دون تغيير.

سير عمل من لقطة الشاشة إلى الواجهة

أعلى حلقات التصميم رافعةً مع أي وكيل هي تحويل صورة مرجعية إلى واجهة عاملة ومتجاوبة والتكرار حتى تطابق. وينطبق الشكل نفسه من خمس خطوات في OpenCode.

1. ابدأ من أوضح المراجع البصرية لديك — وضمّن حالات متعددة (سطح المكتب والجوال، التحويم، الفارغ، التحميل)، لا لقطة بطل واحدة فقط.
2. كن محددًا في المطالبة؛ فالمطالبات الغامضة تنتج واجهة عامة.
3. جهّز نظام تصميم وأخبر OpenCode بمكان الـ tokens والعناصر الأولية المرجعية (في AGENTS.md).
4. شغّل خادم تطوير واجعل الوكيل يعرض في متصفح حقيقي، مغيّرًا الحجم إلى نقاط التوقف لفحص النتيجة.
5. كرّر بجعل OpenCode يقارن تنفيذه بلقطات الشاشة — لا أن يكتفي بتأكيد البناء.

أشِر إلى الملفات بـ @ في الواجهة الطرفية لبحث ضبابي في مجلد عملك، وشغّل أوامر الصدفة مضمّنةً ببادئة !، وقُد الإجراءات بأوامر /. ثم أرسِل مطالبة بقيود ملموسة:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

أبقِ المطالبات صغيرة ومركّزة، وثبّت التكرارات الجيدة وأرجِع السيئة (مع إخبار OpenCode حين تُرجِع)، كي تبني كل تمريرة على قاعدة نظيفة.

AGENTS.md وMCP والجلسات القابلة للمشاركة

ثلاث نقاط توسيع تجعل OpenCode عمليًا لعمل التصميم المستمر، وتنطبق الثلاث جميعًا بسلاسة على سير عمل تصميم مفتوح.

• قواعد AGENTS.md: تعيش قواعد المشروع في AGENTS.md في جذر المستودع (أو قواعد عامة في ~/.config/opencode/AGENTS.md). إنه المنزل الدائم لأعراف التصميم لديك، يُقرأ في كل تشغيل، وهو متوافق مع ملفات CLAUDE.md التي تستخدمها وكلاء أخرى.
• خوادم MCP: يدعم OpenCode خوادم MCP المحلية (أمر) والبعيدة (URL)، المهيّأة تحت مفتاح mcp — الطريقة المحمولة لجلب سياق التصميم والأدوات الخارجية التي تعمل عبر الوكلاء، لا OpenCode فقط.
• جلسات قابلة للمشاركة: ينشئ الأمر /share رابطًا عامًا لمحادثة للتعاون أو المراجعة، ويلغيه /unshare — مفيد للحصول على ملاحظات على تمريرة تصميم.

هذه قدرات محمولة متعددة الوكلاء — تمامًا نوع الشيء الذي بُني Open Design لتنسيقه، بدلًا من إعادة بنائه لكل مشروع.

‏OpenCode مقابل Codex مقابل Claude Code مقابل Cursor للتصميم

لا يوجد فائز واحد في عمل التصميم — فلكل وكيل قوة مختلفة، والفرق المتمرّسة تجمع بينها. وإليك خلاصة منصفة:

الحكم المتكرر في المجتمع أن الذوق يأتي من البشر: فجميعها تتجه افتراضيًا إلى مظهر عام دون skills ومراجع وقيود. تلك هي المشكلة الحقيقية التي ينبغي حلّها — وهي بشكل أداة تصميم، لا بشكل نموذج، وهذا بالضبط سبب تلاؤم وكيل مفتوح مثل OpenCode تلاؤمًا جيدًا مع طبقة تصميم مفتوحة.

المزالق، وكيف تتجنّب مظهر «فوضى الذكاء الاصطناعي»

أكثر شكوى شيوعًا عن التصميم المولَّد بالذكاء الاصطناعي أنه يبدو عامًا — تدرّجات ناعمة، لوحات عائمة، زوايا دائرية مفرطة الحجم، ظلال دراميّة، أجواء Inter-والبنفسجي «تصرخ بأن ذكاءً اصطناعيًا صنع هذا.» وتشمل المشكلات الأخرى المبلَّغ عنها انكسار تخطيطات الجوال وتسرّب التعليمات إلى نصوص الواجهة. وليست أيٌّ منها خاصةً بـ OpenCode؛ بل هي ما يحدث حين يعمل أي وكيل دون سياق تصميم منسّق.

• أضف skill جماليًا: skill تصميم منسّق يجبر الوكيل على الالتزام باتجاه حقيقي بدلًا من المظهر الافتراضي.
• تحقق في متصفح حقيقي: اعرض وتحقق ذاتيًا عبر نقاط التوقف كي لا تنكسر التخطيطات بصمت على الجوال.
• زوّده بالـ tokens والمراجع: tokens التصميم الحقيقية ولقطات الشاشة المرجعية هي أكبر رافعة منفردة على جودة المخرجات.
• رمّز القواعد في AGENTS.md: ضع قواعد بأسلوب «لا بطاقات بطل، خطّان كحد أقصى، هرمية تقدّم العلامة» حيث يقرؤها الوكيل في كل تشغيل.

لاحظ أن كل إجراء تخفيف يتمحور حول منح الوكيل سياق تصميم منسّقًا — بمعزل عن النموذج الذي تشغّله. والحفاظ على ذلك السياق يدويًا، لكل مشروع، هو الكدّ الذي يزيله Open Design.

التصميم بـ OpenCode داخل Open Design

‏Open Design هو طبقة التصميم مفتوحة المصدر التي يطلبها سير العمل أعلاه باستمرار. يعامل OpenCode بصفته محوّلًا أصيلًا ويغلّفه بمكتبة منسّقة من الـ skills وأنظمة التصميم، وخط معالجة عرض منظّم، وواجهة سطح مكتب محلية — كي يكون سياق التصميم الذي يجعل أي وكيل جيدًا حاضرًا من أول تشغيل، لا مُجمَّعًا يدويًا في كل مرة. وكلا المشروعين مفتوحا المصدر ومحليان أولًا، ما يجعل الاقتران ملائمًا بطبيعته.

1. ثبّت Open Design واختر OpenCode وكيلًا لك.
2. صادِق بمفتاح API الخاص بمزوّد نماذجك (مبدأ BYOK) — تبقى بيانات الاعتماد على جهازك ولا تُمرَّر عبرنا أبدًا.
3. اختر أي مزوّد ونموذج، إضافةً إلى نظام تصميم وskill، ثم ولّد العروض والنماذج الأولية وصفحات الهبوط بذوق متّسق.
4. كل أثر وكل ملف DESIGN.md يعيش في مستودعك الخاص، لا في سحابة مستضافة.

وكيل OpenCode نفسه، حرية النماذج نفسها — إضافةً إلى سير عمل تصميمي حقيقي ومحمول ومفتوح المصدر يحيط به. إنه محلي أولًا وبرخصة Apache-2.0، فلا شيء عن عملك أو بيانات اعتمادك يغادر جهازك.

الأسئلة الشائعة

1. 01 هل يستطيع OpenCode فعلًا أداء عمل التصميم؟ +

   نعم — مع skill جمالي ونظام تصميم وصور مرجعية حقيقية في السياق، ينتج OpenCode واجهة بجودة إنتاجية ومتجاوبة ويمكنه التحقق منها في متصفح. ولأنه محايد للنماذج، تشغّل النموذج الأفضل حاليًا في الواجهة الأمامية. وبدون ذلك السياق المنسّق يميل إلى مظهر عام، وهي الفجوة التي يسدّها Open Design.

2. 02 أي نموذج ينبغي أن أستخدم مع OpenCode للتصميم؟ +

   أيًّا أحببت — OpenCode محايد للمزوّدين عبر models.dev، فيمكنك تشغيل Anthropic أو OpenAI أو Google أو OpenRouter أو نماذج محلية خلف سير العمل نفسه والتبديل في أي وقت. وتعتمد جودة مخرجات التصميم على skill ونظام تصميمك ومراجعك أكثر بكثير من النموذج وحده.

3. 03 هل صنع Open Design فريق OpenCode (SST)؟ +

   لا. Open Design مشروع مستقل مفتوح المصدر يدمج OpenCode بصفته وكيلًا. وهو يكمّل OpenCode بمكتبة skills وأنظمة تصميم مفتوحة ومحلية أولًا.

4. 04 هل أحتاج إلى اشتراك خاص للتصميم بـ OpenCode؟ +

   لا — OpenCode يقوم على مبدأ BYOK. تُحضر مفتاح API الخاص بمزوّد نماذجك، ولا يمرّر Open Design بيانات اعتمادك أبدًا. ولا يوجد ارتباط بمزوّد.

5. 05 ‏OpenCode أم Codex أم Claude Code لتصميم الواجهة الأمامية؟ +

   جميعها قوية، وفرق كثيرة تجمع بينها. ميزة OpenCode أنه مفتوح المصدر بالكامل ومحايد للنماذج؛ ويتفوّق Codex في عمليات البناء المفوّضة المعزولة؛ ويُعرَف Claude Code بقرارات تصميم محددة وواعية بقاعدة الشيفرة. ويتيح لك Open Design تبديل الوكلاء دون تغيير سير عمل التصميم.

6. 06 كيف أوسّع OpenCode من أجل سياق التصميم؟ +

   رمّز القواعد في AGENTS.md، وأضِف خوادم MCP تحت مفتاح mcp للأدوات المحمولة وسياق التصميم، واستخدم الجلسات القابلة للمشاركة للمراجعة. ويقدّم Open Design مكتبة منسّقة من الـ skills وأنظمة التصميم كي تتخطّى الإعداد لكل مشروع.

7. 07 هل Open Design تابع لـ OpenCode أو SST؟ +

   لا. OpenCode مشروع مفتوح المصدر يصونه SST (Anomaly Innovations)؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بصفته محوّلًا أصيلًا.

8. 08 هل ملفاتي وبيانات اعتمادي آمنة؟ +

   نعم — Open Design محلي أولًا. تبقى ملفاتك وآثارك وملف DESIGN.md في مستودعك الخاص، وتُستخدَم بيانات اعتماد مزوّد نماذجك مباشرةً بواسطة وكيلك، ولا تُمرَّر عبر خوادم Open Design أبدًا.