Gemini CLI للتصميم.

ما هو Gemini CLI فعلًا

Gemini CLI هو وكيل ذكاء اصطناعي مفتوح المصدر (Apache-2.0) تصدره Google للعمل في الطرفية. يقرأ مستودعك، ويحرّر الملفات، وينفّذ أوامر الصدفة، ويجلب محتوى الويب، ويمكنه إسناد الإجابات إلى Google Search — مخطِّطًا للعمل ومتحققًا منه انطلاقًا من مهام باللغة الطبيعية بدلًا من مجرد إكمال الأسطر. والمحرك ذاته يشغّل أيضًا وكيل Gemini Code Assist داخل VS Code.

في أعمال التصميم، تبرز خاصيتان. نماذجه متعددة الوسائط أصلًا، فيمكنك أن تسلّمه لقطة شاشة فيستنتج التخطيط الفعلي. ونافذة سياقه تصل إلى مليون توكن، وهو حجم كافٍ لاستيعاب نظام تصميمك كاملًا، ومكتبة مكوّناتك، ومجموعة مراجعك دفعة واحدة بدلًا من تلخيصها واختزالها.

• ملفات السياق: يقرأ Gemini CLI ملف GEMINI.md للحصول على سياق دائم للمشروع — وهو المكان الطبيعي لترميز أعراف تصميمك، وtokens، وقوائم مراجعة التدقيق. وتُضاف فوقه إعدادات الفرد والفريق.
• أدوات مدمجة + MCP: يأتي مزوّدًا بأدوات للملفات والصدفة وجلب الويب و Google Search جاهزة، ويدعم خوادم MCP (المُعدَّة في ~/.gemini/settings.json) لإضافة سياق خارجي مثل ملف Figma حيّ.
• البدء مجانًا: يمنحك تسجيل الدخول بحساب Google شخصي طبقة مجانية سخية من طلبات Gemini؛ ويمكنك أيضًا إحضار مفتاح Gemini API أو استخدام Vertex AI.

• المزوّد: Google
• بيانات الاعتماد: حساب Google (الطبقة المجانية) أو مفتاح Gemini API من AI Studio (BYOK) أو Vertex AI
• الترخيص: Apache-2.0، مفتوح المصدر

لماذا تلائم النماذج متعددة الوسائط والسياق الضخم التصميم

يأتي تفوّق Gemini CLI في التصميم من خاصيتين في النموذج — لكن، كما هو الحال مع كل وكيل، يبقى الذوق أمرًا يجب أن تزوّده به.

• فهم قوي متعدد الوسائط: لأن نماذج Gemini متعددة الوسائط أصلًا، يقرأ الوكيل لقطات الشاشة المرجعية بجودة عالية — مقارنًا مخرجاته المعروضة بالصورة بدلًا من التخمين انطلاقًا من وصف نصّي.
• نافذة سياق بمليون توكن: السياق الكبير يعني أن نظام التصميم بأكمله، وtokens، والكثير من الحالات المرجعية تتسع دفعة واحدة، فيعيد الوكيل استخدام عناصرك الأولية الحقيقية بدلًا من اختراع أنماط لمرة واحدة.
• الأعراف في GEMINI.md: يوجّه ملف GEMINI.md (إضافةً إلى خادم Figma MCP) الوكيلَ إلى tokens ومكوّناتك ومواصفاتك الحقيقية، فيعمل وفق هوية علامتك التجارية بدلًا من مظهر افتراضي.

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

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

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

# 1. Install Gemini CLI (Node 20+)
npm install -g @google/gemini-cli
# or run without installing: npx https://github.com/google-gemini/gemini-cli

# 2. Start it in your project and authenticate on first run
cd your-project
gemini            # sign in with your Google account, or set GEMINI_API_KEY

# 3. Generate project context
/init             # scaffolds a GEMINI.md for this project

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it under "mcpServers" in ~/.gemini/settings.json

• رمّز قواعد تصميمك: ضع tokens وعناصرك الأولية وأعرافك في GEMINI.md ووجّه Gemini إليها، كي تطابق المخرجات هوية علامة تجارية بدلًا من الرجوع إلى مظهر نمطي.
• أضف التحقق عبر المتصفح: اربط خادم Playwright أو متصفح MCP كي يعرض Gemini في متصفح حقيقي ويتحقق من مخرجاته عبر نقاط الانكسار بدلًا من مجرد تأكيد نجاح عملية البناء.

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

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

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

أشِر إلى صورة بـ @ لإرفاقها بالموجّه، ثم أعطِ قيودًا ملموسة:

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

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

GEMINI.md وبروتوكول MCP والإضافات

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

• سياق GEMINI.md: تعيش قواعد المشروع في ملف GEMINI.md عند جذر المستودع (مع طبقتين عامة وفريقية). وهو الموطن الدائم لأعراف تصميمك، يُقرأ في كل تشغيل.
• خوادم MCP: هيّئ خوادم MCP ضمن ~/.gemini/settings.json — الطريقة المحمولة لإحضار سياق التصميم والأدوات الخارجية، وأكثرها صلةً خادم Figma MCP، وهي تعمل عبر الوكلاء جميعًا، لا مع Gemini وحده.
• الإضافات والأدوات المدمجة: تتيح إضافات Gemini CLI وأدواته المدمجة Google Search والملفات والصدفة وجلب الويب جمعَ المراجع وتشغيل حلقة التحقق دون مغادرة الطرفية.

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 01 هل يستطيع Gemini CLI القيام بأعمال التصميم فعلًا؟ +

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

2. 02 هل أحتاج إلى الدفع للتصميم باستخدام Gemini CLI؟ +

   لا — يمنحك تسجيل الدخول بحساب Google طبقة مجانية سخية، ويمكنك أيضًا إحضار مفتاح Gemini API (BYOK) أو استخدام Vertex AI. ولا يمرّر Open Design بيانات اعتمادك في كلتا الحالتين أبدًا.

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

   أمران: نماذجه متعددة الوسائط بقوة، فيقرأ لقطات الشاشة المرجعية بجودة عالية، وسياقه البالغ مليون توكن قادر على استيعاب نظام تصميم كامل ومجموعة مراجع دفعة واحدة. وكلاهما يساعد — لكن الذوق يبقى آتيًا من نظام التصميم والمهارة والمراجع التي تزوّده بها.

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

   كلاهما قوي. يُعرف Claude Code بقرارات تصميم محددة وواعية بقاعدة الشيفرة؛ وتفوّق Gemini CLI هو الفهم متعدد الوسائط إضافةً إلى سياق ضخم وطبقة مجانية. وتستخدم فرق كثيرة كليهما — ويتيح لك Open Design تبديل الوكلاء من دون تغيير سير عمل تصميمك.

5. 05 كيف أصل Gemini CLI بـ Figma؟ +

   أضف خادم Figma MCP ضمن mcpServers في ~/.gemini/settings.json. عندها يستطيع Gemini سحب سياق التصميم الحقيقي — المكوّنات والمتغيرات وبيانات التخطيط — كي تطابق الشيفرة المولَّدة المصدرَ بدلًا من تقريبه.

6. 06 هل Open Design تابع لـ Google؟ +

   لا. Gemini CLI منتج من Google؛ أما Open Design فمشروع مستقل مفتوح المصدر يدعمه كمحوّل أصيل. و Gemini علامة تجارية مسجّلة لـ Google.

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

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