Grok Build للتصميم.

ما هو Grok Build فعليًا

Grok Build هو الوكيل البرمجي من xAI العامل داخل الطرفية، المشحون باسم Grok Build. يقرأ مستودعك، ويعدّل الملفات، وينفّذ أوامر الصدفة، ويخطط لعمل هندسي متعدد الخطوات انطلاقًا من مهام باللغة الطبيعية بدلًا من إكمال أسطر فحسب. وهو مبني حول نماذج Grok من xAI — المتاحة على xAI API بوصفها عائلة نماذج grok-build — ويصادِق عبر حساب xAI لديك، فيأتي الوكيل والنماذج من المزوّد نفسه.

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

• ملفات السياق: يقرأ Grok Build ملف AGENTS.md للحصول على سياق مشروع دائم — وهو المكان الطبيعي لترميز اصطلاحات تصميمك وtokens وقوائم المراجعة. ويتّبع اصطلاح AGENTS.md المفتوح نفسه الذي يستخدمه Codex ووكلاء آخرون.
• أدوات وMCP + وكلاء فرعيون: يعدّل الملفات، وينفّذ أوامر الصدفة، ويدعم خوادم MCP لإضافة سياق خارجي مثل ملف Figma حيّ؛ وللمهام الأكبر يمكنه التفويض إلى وكلاء فرعيين متوازين يبحثون ويبنون ويراجعون دفعةً واحدة.
• سجّل الدخول بحسابك: تصادِق بتسجيل الدخول عبر متصفحك باشتراك SuperGrok أو X Premium+؛ ويمكنك أيضًا إحضار مفتاح xAI API للاستخدام بلا واجهة وفي التكامل المستمر.

• المزوّد: xAI
• بيانات الاعتماد: xAI SuperGrok OAuth (`grok login`)، أو مفتاح xAI API («أحضر مفتاحك الخاص») للاستخدام بلا واجهة
• النماذج: نماذج xAI Grok ‏(عائلة grok-build على xAI API)، مع مدخلات صورية

لماذا يلائم وضع التخطيط والنماذج الواعية بالصور التصميم

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

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

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

إعداد Grok Build لأعمال التصميم، من الصفر

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

# 1. Install Grok Build (Grok Build) on macOS/Linux
curl -fsSL https://x.ai/cli/install.sh | bash

# 2. Start it in your project and authenticate on first run
cd your-project
grok login   # opens your browser; sign in with SuperGrok / X Premium+
#   or, for headless / CI use, set an xAI API key:
#   export XAI_API_KEY=xai-...

# 3. Add project context
#    create an AGENTS.md at the repo root with your design conventions

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it to your MCP server configuration

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

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

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

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

أرفق صورك المرجعية وامنح قيودًا ملموسة:

grok
# in the prompt (attach reference-desktop.png and 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.
  Show me the plan first, then render it in the browser and iterate
  until it matches the references across breakpoints.

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

AGENTS.md وMCP والوكلاء الفرعيون

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

• سياق AGENTS.md: تعيش قواعد المشروع في ملف AGENTS.md في جذر المستودع. وهو الموطن الدائم لاصطلاحات تصميمك، يُقرأ في كل تشغيلة — وهو الصيغة المفتوحة نفسها التي يفهمها وكلاء آخرون، فتنتقل القواعد معك.
• خوادم MCP: هيّئ خوادم MCP لجلب سياق التصميم والأدوات الخارجية، وأبرزها خادم MCP الخاص بـ Figma — وهي الطريقة المحمولة لتغذية المواصفات الحقيقية في الشيفرة، التي تعمل عبر الوكلاء، لا مع Grok فقط.
• الوكلاء الفرعيون والأدوات المدمجة: يستطيع Grok Build إطلاق وكلاء فرعيين متوازين للبحث والبناء والمراجعة دفعةً واحدة، وتتيح أدواته للملفات والصدفة والبحث جمعَ المراجع وتشغيل حلقة التحقق دون مغادرة الطرفية.

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

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

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

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

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

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

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

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

التصميم باستخدام Grok Build داخل Open Design

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

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

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

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

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

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

2. 02 كيف أصادِق على Grok Build؟ +

   تسجّل الدخول عبر متصفحك باشتراك SuperGrok أو X Premium+ ‏(`grok login`)، فلا يوجد مفتاح API لإدارته. وللاستخدام بلا واجهة أو في التكامل المستمر يمكنك إحضار مفتاح xAI API بدلًا من ذلك. وOpen Design لا يمرّر بيانات اعتمادك على أي حال.

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

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

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

   كلاهما قوي. يُعرف Claude Code بقرارات تصميم محددة وواعية بقاعدة الشيفرة؛ وميزة Grok Build هي مراجعة وضع التخطيط ونماذج xAI الواعية بالصور. تستخدم فِرق كثيرة كليهما — ويتيح لك Open Design تبديل الوكلاء دون تغيير سير عمل تصميمك.

5. 05 كيف أربط Grok Build بـ Figma؟ +

   أضف خادم MCP الخاص بـ Figma إلى تهيئة MCP لديك. عندها يستطيع Grok سحب سياق تصميم حقيقي — مكوّنات ومتغيّرات وبيانات تخطيط — فتطابق الشيفرة المُولَّدة المصدرَ بدلًا من تقريبه.

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

   لا. Grok Build منتج من xAI؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بوصفه محوّلًا أصيلًا. Grok علامة تجارية لـ xAI.

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

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