GitHub Copilot CLI للتصميم.

ما هو GitHub Copilot CLI فعليًا

GitHub Copilot CLI هو الوكيل البرمجي من GitHub العامل داخل الطرفية. يقرأ مستودعك، ويعدّل الملفات، وينفّذ أوامر الصدفة، ويعمل مباشرةً مع سياق GitHub لديك — المشكلات وطلبات السحب والمستودعات — موثَّقًا بحساب GitHub الموجود لديك. وهو مدعوم بنفس البنية العاملة التي تشغّل وكيل Copilot البرمجي من GitHub، فيخطط للمهام المعقّدة ويكرّر العمل بدلًا من إكمال أسطر فحسب. وقد وصل إلى التوفّر العام في فبراير 2026 بعد معاينة عامة فُتحت في سبتمبر 2025.

في أعمال التصميم، تبرز خاصيتان. إنه يقرأ ملفات التعليمات المخصصة — قواعد على مستوى المستودع في ‎.github/copilot-instructions.md إضافةً إلى AGENTS.md — فتُضمَّن اصطلاحات تصميمك تلقائيًا في كل تشغيلة. ويدعم مزوّدي نماذج أساس متعددين، فيمكنك تبديل النموذج لكل مهمة باستخدام الأمر /model إلى أيّ نموذج يستدل بأفضل صورة حول واجهة معينة.

• ملفات التعليمات: يقرأ Copilot CLI تعليمات المستودع في ‎.github/copilot-instructions.md، والملفات الخاصة بالمسارات تحت ‎.github/instructions، وAGENTS.md — وهو المكان الطبيعي لترميز اصطلاحات تصميمك وtokens وقوائم المراجعة.
• أدوات مدمجة + MCP: يأتي مزوّدًا بخادم MCP من GitHub مدمجًا ويشغّل أدوات الملفات والصدفة، ويمكنك إضافة خوادم MCP مخصصة عبر ‎/mcp add (تُخزَّن في mcp-config.json تحت ‎~/.copilot) للحصول على سياق خارجي مثل ملف Figma حيّ.
• اختيار النموذج: استخدم الأمر /model للاختيار من بين نماذج رائدة من Anthropic وOpenAI وGoogle — مع التبديل لكل مهمة، كل ذلك على اشتراك Copilot الموجود لديك.

• المزوّد: GitHub
• بيانات الاعتماد: اشتراك GitHub Copilot فعّال (Pro أو Pro+ أو Business أو Enterprise)
• التثبيت: npm install -g @github/copilot، ثم شغّل copilot

لماذا تلائم تعليمات المستودع واختيار النموذج التصميم

تأتي ميزة Copilot CLI في التصميم من خاصيتين — لكن، كما في كل وكيل، يبقى الذوق أمرًا يجب توفيره.

• اصطلاحات تنتقل مع المستودع: بما أن Copilot CLI يقرأ ‎.github/copilot-instructions.md وAGENTS.md تلقائيًا، تكون tokens والعناصر الأساسية وقواعد المراجعة في السياق في كل تشغيلة — فيعمل الوكيل وفق علامة تجارية بدلًا من مظهر افتراضي.
• انتقِ النموذج المناسب لكل مهمة: اختيار النموذج عبر Anthropic وOpenAI وGoogle يعني أنه يمكنك اللجوء إلى النموذج الأفضل في الاستدلال حول تخطيط معين، ثم التبديل للمهمة التالية — دون تغيير سير عملك.
• مواصفات حقيقية عبر MCP: يوجّه خادم MCP المدمج من GitHub إضافةً إلى خادم MCP الخاص بـ Figma الوكيلَ نحو tokens ومكوّناتك ومواصفاتك الحقيقية، فيبني من المصدر بدلًا من التقريب.

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

إعداد Copilot CLI لأعمال التصميم، من الصفر

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

# 1. Install Copilot CLI (Node.js required)
npm install -g @github/copilot

# 2. Start it in your project and authenticate on first run
cd your-project
copilot           # run /login and follow the prompts to sign in

# 3. Choose a model for the task
#    inside the session:
/model            # pick a frontier model from Anthropic, OpenAI, or Google

# 4. Add custom instructions and the Figma MCP server (optional)
#    write .github/copilot-instructions.md or AGENTS.md
/mcp add          # add the Figma MCP server for design handoff

• رمّز قواعد تصميمك: ضع tokens والعناصر الأساسية والاصطلاحات في ‎.github/copilot-instructions.md أو AGENTS.md، لتطابق المخرجات علامة تجارية بدلًا من الرجوع إلى مظهر عام.
• أضف التحقق في المتصفح: اربط Playwright أو خادم MCP للمتصفح حتى يعرض Copilot في متصفح حقيقي ويفحص مخرجاته عبر نقاط التوقف بدلًا من مجرد تأكيد نجاح البناء.

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

أعلى حلقات التصميم رافعةً مع Copilot CLI هي تحويل صورة مرجعية إلى واجهة مستخدم عاملة ومتجاوبة والتكرار حتى تتطابق — بالاعتماد على نموذج متعدد الوسائط قوي لمقارنة المخرجات بالمرجع.

1. ابدأ من أوضح المراجع البصرية المتاحة لديك — وأدرج حالات متعددة (سطح المكتب والجوال، والتمرير فوق العنصر، والحالة الفارغة، وحالة التحميل)، لا لقطة بطولية واحدة فحسب.
2. كن محددًا في المطالبة؛ المطالبات الغامضة تنتج واجهة مستخدم عامة حتى مع نموذج قوي.
3. احتفظ بنظام تصميمك واصطلاحاتك في ‎.github/copilot-instructions.md أو AGENTS.md، وأخبر Copilot بمكان tokens والعناصر الأساسية المعتمدة.
4. شغّل خادم تطوير واجعل Copilot يعرض في متصفح حقيقي، مع تغيير الحجم إلى نقاط التوقف لفحص النتيجة.
5. كرّر العمل بجعل Copilot يقارن تنفيذه بلقطات الشاشة — لا مجرد تأكيد أنه يُبنى.

وجّه Copilot نحو صورك المرجعية وامنحه قيودًا ملموسة؛ فهو يعرض كل تعديل ملف أو أمر للموافقة قبل تشغيله:

copilot
# in the prompt:
> Implement the design in reference-desktop.png and reference-mobile.png
  in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens described in
  .github/copilot-instructions.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

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

التعليمات المخصصة وMCP والامتدادات

ثلاث نقاط امتداد تجعل Copilot CLI عمليًا لأعمال التصميم المستمرة، وكلها تنطبق بسلاسة على سير عمل تصميمي مفتوح.

• التعليمات المخصصة: تعيش قواعد المستودع في ‎.github/copilot-instructions.md (مع ملفات خاصة بالمسارات تحت ‎.github/instructions وAGENTS.md). وهي الموطن الدائم لاصطلاحات تصميمك، مُضمَّنة تلقائيًا في كل تشغيلة.
• خوادم MCP: يأتي Copilot CLI مزوّدًا بخادم MCP من GitHub مدمجًا ويتيح لك إضافة خوادم مخصصة عبر ‎/mcp add (تُخزَّن في mcp-config.json تحت ‎~/.copilot) — وهي الطريقة المحمولة لجلب سياق التصميم، وأبرزها خادم MCP الخاص بـ Figma، التي تعمل عبر الوكلاء، لا مع Copilot فقط.
• وكلاء متخصصون وأدوات مدمجة: أوضاع Copilot CLI المتخصصة — لاستكشاف قاعدة الشيفرة، وتشغيل البناء والاختبارات، ومراجعة التغييرات، والتخطيط — إضافةً إلى أدوات الملفات والصدفة لديه، تتيح له جمع المراجع وتشغيل حلقة التحقق دون مغادرة الطرفية.

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

Copilot CLI مقابل Codex وClaude Code وCursor وGemini CLI للتصميم

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

الحكم المتكرر للمجتمع هو أن الذوق يأتي من البشر: جميعها يرجع إلى جمالية عامة بلا مهارات ومراجع وقيود. تلك هي المشكلة الحقيقية التي يجب حلّها — وهي على هيئة أداة تصميم، لا على هيئة نموذج.

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

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

• أضف مهارة جمالية: مهارة تصميم منسّقة تُلزم الوكيل بالالتزام باتجاه حقيقي بدلًا من المظهر الافتراضي.
• تحقّق في متصفح حقيقي: اعرض وافحص ذاتيًا عبر نقاط التوقف باستخدام خادم MCP للمتصفح حتى لا تنكسر التخطيطات بصمت على الجوال.
• وفّر tokens والمراجع: tokens التصميم الحقيقية ولقطات الشاشة المرجعية هما أكبر رافعة منفردة لجودة المخرجات.
• رمّز القواعد في التعليمات المخصصة: ضع قواعد بأسلوب «لا بطاقات بطولية، حدّ أقصى خطّان، تسلسل هرمي يقدّم العلامة التجارية» في ‎.github/copilot-instructions.md أو AGENTS.md، حيث يقرأها الوكيل في كل تشغيلة.

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

التصميم باستخدام Copilot CLI داخل Open Design

Open Design هو طبقة التصميم مفتوحة المصدر التي يطلبها سير العمل أعلاه باستمرار. يعامل GitHub Copilot CLI بوصفه محوّلًا أصيلًا ويغلّفه بمكتبة منسّقة من المهارات وأنظمة التصميم، وخط عرض منظَّم، وواجهة سطح مكتب محلية — فيكون سياق التصميم الذي يجعل Copilot جيدًا حاضرًا من التشغيلة الأولى، لا مجمَّعًا يدويًا في كل مرة. وOpen Design مستقل ومفتوح المصدر (Apache-2.0) ومحلي أولاً، ولهذا يتلاءم الاقتران: الوكيل يؤدي العمل، وتبقى ملفاتك وبيانات اعتمادك ملكك.

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

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

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

1. 01 هل يستطيع GitHub Copilot CLI أن يؤدي أعمال التصميم فعلًا؟ +

   نعم — مع مهارة جمالية، ونظام تصميم، وصور مرجعية حقيقية في السياق، ينتج Copilot CLI واجهة مستخدم بجودة الإنتاج ومتجاوبة، ويمكنك انتقاء النموذج الذي يتحقق من المخرجات بأفضل صورة مقابل المراجع. ودون ذلك السياق يميل إلى الرجوع إلى مظهر عام، وهي الفجوة التي يملؤها Open Design.

2. 02 هل أحتاج إلى اشتراك للتصميم باستخدام Copilot CLI؟ +

   نعم — يعمل Copilot CLI على اشتراك GitHub Copilot فعّال (Pro أو Pro+ أو Business أو Enterprise)؛ وهو ليس بنظام «أحضر مفتاحك الخاص». تصادِق بحساب GitHub لديك. وOpen Design لا يمرّر بيانات اعتمادك أبدًا — يُستخدم اشتراكك مباشرةً من قِبل وكيلك.

3. 03 ما الذي يجعل Copilot CLI جيدًا للتصميم تحديدًا؟ +

   أمران: يقرأ تعليمات المستودع وAGENTS.md تلقائيًا، فتنتقل اصطلاحات تصميمك مع المستودع؛ ويتيح لك التبديل بين نماذج رائدة من Anthropic وOpenAI وGoogle لكل مهمة. كلاهما يساعد — لكن الذوق يأتي مع ذلك من نظام التصميم والمهارة والمراجع التي توفّرها.

4. 04 Copilot CLI أم Claude Code لتصميم الواجهة الأمامية؟ +

   كلاهما قوي. يُعرف Claude Code بقرارات تصميم محددة وواعية بقاعدة الشيفرة؛ وميزة Copilot CLI هي حرية اختيار النموذج عبر المزوّدين والتكامل العميق مع GitHub على اشتراك قد تملكه أصلًا. تستخدم فِرق كثيرة كليهما — ويتيح لك Open Design تبديل الوكلاء دون تغيير سير عمل تصميمك.

5. 05 كيف أربط Copilot CLI بـ Figma؟ +

   أضف خادم MCP الخاص بـ Figma بالأمر ‎/mcp add؛ تُخزَّن الإعدادات في mcp-config.json تحت ‎~/.copilot. عندها يستطيع Copilot سحب سياق تصميم حقيقي — مكوّنات ومتغيّرات وبيانات تخطيط — فتطابق الشيفرة المُولَّدة المصدرَ بدلًا من تقريبه.

6. 06 هل Open Design تابع لـ GitHub أو Microsoft؟ +

   لا. GitHub Copilot CLI منتج من GitHub؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بوصفه محوّلًا أصيلًا. GitHub Copilot علامة تجارية لـ GitHub, Inc. وMicrosoft.

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

   نعم — Open Design محلي أولاً وApache-2.0. تبقى ملفاتك ومخرجاتك وDESIGN.md في مستودعك الخاص، وتُستخدم بيانات اعتماد GitHub Copilot الخاصة بك مباشرةً من قِبل وكيلك، ولا تُوجَّه عبر خوادم Open Design أبدًا.