تحويل التصميم إلى رمز برمجي باستخدام Antigravity وStitch MCP

1- مقدمة

في هذا الدرس التطبيقي حول الترميز، ستنشئون موقعًا إلكترونيًا جاهزًا للإنتاج من خلال الربط بين تصميم مستند إلى الذكاء الاصطناعي وبيئة تطوير تعتمد على الوكلاء أولاً. ستستخدمون Google Stitch لإنشاء واجهة مستخدم عالية الدقة، ثم تربطونها بـ Antigravity IDE من خلال بروتوكول سياق النموذج (MCP). أخيرًا، ستستخدمون وكيلاً مستقلاً لجلب "التصميم الأساسي" وتنفيذ تطبيق React دقيق تمامًا.

المهام التي ستنفّذونها

• إنشاء واجهة المستخدم في Stitch: ستستخدمون لغة طبيعية لإنشاء تصميم ويب كامل في Google Stitch.
• الربط باستخدام بروتوكول سياق النموذج (MCP): ستربطون Antigravity بمشروع Stitch باستخدام بروتوكول سياق النموذج.
• التنفيذ المستقل: ستستخدمون "علامة تبويب الوكيل" في Antigravity لجلب رموز التصميم وإنشاء مشروع React/Tailwind.
• التحقّق والتحسين: ستستخدمون المتصفّح المدمج لإجراء "فحص سريع" للرمز البرمجي مقارنةً بالتصميم الأصلي.

المفاهيم التي ستتعرّفون عليها

• كيفية استخدام Google Stitch لإنشاء نماذج أولية سريعة لتصاميم واجهة مستخدم عالية الدقة
• كيفية ضبط خوادم بروتوكول سياق النموذج (MCP) ضمن Antigravity IDE
• كيفية استخدام الوكلاء المستقلين لترجمة البيانات الوصفية للتصميم المرئي إلى رمز معياري

المتطلبات

• متصفّح الويب Chrome
• تثبيت Antigravity IDE
• حساب على Google Stitch
• مفتاح واجهة برمجة التطبيقات Stitch API Key
• Node.js (الإصدار 18 أو أحدث) مثبت محليًا

قبل البدء

1. في Google Cloud Console، في صفحة اختيار المشروع، اختاروا مشروعًا على Google Cloud أو أنشئوا مشروعًا على Google Cloud project.
2. تأكّدوا من تفعيل الفوترة لمشروعكم على السحابة الإلكترونية. تعرّف على كيفية التحقّق مما إذا كانت الفوترة مفعّلة في مشروع
3. انتقِلوا إلى stitch.withgoogle.com وتأكّدوا من إمكانية تسجيل الدخول.
4. تأكّدوا من تثبيت Antigravity IDE (متاح على antigravity.google).

2- إنشاء التصميم في Google Stitch

يحتاج الوكيل إلى "مصدر موثوق" مرئي لاتباعه. قبل كتابة الرمز البرمجي، يجب تحديد المظهر.

1. الوصول إلى المنصة: انتقِلوا إلى stitch.withgoogle.com.
2. اختيار نوع المشروع: في لوحة البيانات الرئيسية، ابحثوا عن مفتاح التبديل بدء تصميم جديد. انقروا على الويب للتأكّد من تحسين تصميمكم للتنسيقات المستندة إلى المتصفّح.
3. اختيار النموذج: انقروا على القائمة المنسدلة للنموذج (التي تعرض حاليًا 3.0 Flash) داخل مربّع الطلب. تأكّدوا من اختيار Gemini 3 للحصول على أكثر إمكانات الاستدلال المتقدّم وتوليد التنسيقات تقدّمًا.
4. وصف رؤيتكم: في مساحة النص التي تحمل العنوان "صفوا تصميمكم"، أدخلوا طلبكم:

"أريد تصميم صفحة مقصودة حديثة لبرمجية SaaS لشركة ناشئة في مجال تكنولوجيا الفضاء تُسمّى LaunchPad. استخدِموا لوحة ألوان باللونين الأزرق الداكن والأرجواني النيون. ضمِّنوا قسمًا رئيسيًا يتضمّن زر "البدء"، وشبكة ميزات من 3 أعمدة، وجدول أسعار بتصميم زجاجي." 5- التوليد: انقروا على رمز السهم (بجانب أداة اختيار النموذج) لبدء عملية التوليد. 6- التحسين والتسمية: بعد إنشاء واجهة المستخدم، امنحوا مشروعكم اسمًا في العنوان العلوي. سمّوه LaunchPad. يمكنكم استخدام الشريط الجانبي للمحادثة لتحسين أي عناصر معيّنة قبل الانتقال إلى بيئة التطوير المتكاملة.

[!TIP] يمكنكم أيضًا الاختيار من

"جرِّبوا هذه الطلبات"

في القسم إذا كنتم تريدون البدء بسرعة..

3- ضبط بروتوكول سياق النموذج (MCP) في Antigravity

للسماح لوكيل Antigravity "بقراءة" تصميمكم، يجب إنشاء مفتاح واجهة برمجة تطبيقات آمن وإضافة خادم بروتوكول سياق النموذج (MCP) في Stitch.

إنشاء مفتاح واجهة برمجة التطبيقات Stitch API Key

1. في Google Stitch، انقروا على صورة ملفكم الشخصي في أعلى يسار الصفحة.
2. اختاروا إعدادات Stitch من القائمة المنسدلة.
3. انتقِلوا إلى قسم مفتاح واجهة برمجة التطبيقات.
4. انقروا على الزر إنشاء مفتاح.
5. نسخ المفتاح: انسخوا المفتاح الذي تم إنشاؤه على الفور وخزِّنوه بأمان. ستحتاجون إليه في الخطوة التالية.

ضبط بروتوكول سياق النموذج (MCP) في Stitch ضمن Antigravity

1. افتحوا Antigravity IDE.
2. افتحوا مدير الوكلاء

في أي وقت، يمكنكم التبديل بين "مدير الوكلاء" والمحرّر من خلال الضغط على CMD+E (في أجهزة Mac) أو CTRL+E (في أجهزة Windows)، أو من خلال الزرَين "فتح المحرّر" و"فتح مدير الوكلاء" في أعلى يسار شريط القوائم. .

3. انقروا على + فتح مساحة عمل.

لبدء محادثة جديدة ضمن مساحة عمل، اختاروا مساحة العمل المطلوبة من علامة التبويب "بدء محادثة" أو انقروا على الزر "إضافة" بجانب اسم مساحة العمل في الشريط الجانبي.

4. انقروا على "فتح مساحة عمل جديدة" وسمّوا مساحة العمل LaunchPad-Project واختاروا دليلًا محليًا. يضمن ذلك حصول الوكيل على مجلد جذر معيّن لإنشاء الملفات بدون إحداث فوضى في المشاريع الأخرى.

ضبط بروتوكول سياق النموذج (MCP) في Stitch

1. ضمن مساحة العمل الجديدة، ارجعوا إلى مدير الوكلاء (CMD+E في أجهزة Mac أو CTRL+E في أجهزة Windows) واختاروا خوادم بروتوكول سياق النموذج (MCP).

افتحوا متجر بروتوكول سياق النموذج (MCP) من خلال القائمة المنسدلة "..." في أعلى لوحة الوكيل في المحرّر.

تتوافق منصة Antigravity مع بروتوكول سياق النموذج (MCP)، وهو معيار يسمح للمحرّر بالاتصال بأمان بأدواتكم المحلية وقواعد البيانات والخدمات الخارجية. يوفر هذا التكامل للذكاء الاصطناعي سياقًا في الوقت الفعلي يتجاوز الملفات المفتوحة في المحرّر.

يعمل بروتوكول سياق النموذج (MCP) كجسر يربط بين Antigravity وGoogle Stitch. بدلاً من تصدير رموز التصميم يدويًا أو نسخ الرموز السداسية العشرية والبيانات الوصفية للتنسيق ولصقها في المحرّر، يسمح بروتوكول سياق النموذج (MCP) لمنصة Antigravity بجلب التصميم الأساسي مباشرةً من مشروعكم على Stitch عند الحاجة.

2. ابحثوا عن "Stitch" وانقروا على تثبيت.
3. عند المطالبة بذلك، الصقوا مفتاح واجهة برمجة التطبيقات Stitch API Key في حقل الإعدادات.
4. التحقّق: في محادثة الوكيل، اكتبوا: List my Stitch projects. إذا ظهرت النتيجة LaunchPad، يعني ذلك أنّكم جاهزون.

5. التحقّق: في محادثة الوكيل، اكتبوا: List my Stitch projects. إذا عرض الوكيل LaunchPad، يعني ذلك أنّه تم ضبط الجسر بنجاح.

4- جلب سياق التصميم

يحتاج الوكيل الآن إلى استيعاب البيانات الوصفية للتصميم لضمان دقة الرمز البرمجي.

1. في محادثة Antigravity، اكتبوا: "Use the Stitch MCP to fetch the ‘LaunchPad' project. Extract the color palette and typography, then generate a DESIGN.md file in my root directory."
2. المراجعة: افتحوا الملف DESIGN.md الذي تم إنشاؤه حديثًا للاطّلاع على الرموز السداسية العشرية وقواعد التنسيق التي استخرجها الوكيل.

5- التنفيذ (الإنشاء)

استخدِموا الوكيل لترجمة التصميم إلى تطبيق React فعّال.

1. أدخِلوا طلب "الإنشاء":

"I want to build this full website now. Use React and Tailwind CSS. Ensure the components are modular. Once finished, run the dev server and show it to me in the integrated browser." 2- مراقبة الوكيل: سينشئ الوكيل بنية المشروع في الوحدة الطرفية، ويكتب المكوّنات في المحرّر، ويفتح المعاينة في المتصفّح المدمج.

6- المراجعة والتحسين

تحقّقوا من الناتج واستخدِموا الوكيل لإصلاح أي اختلافات مرئية.

1. قارنوا الناتج في المتصفّح المدمج بتصميمكم الأصلي على Stitch.
2. إذا كان أي عنصر (مثل مساحة توسيع الزر أو وزن الخط) لا يتطابق، اطلبوا من الوكيل: "The ‘Get Started' button padding is slightly off. Refer back to the Stitch design and update the Tailwind classes."
3. سيُعيد الوكيل جلب سياق التصميم ويطبّق الإصلاح على الفور.

7- الملخّص والخطوات التالية

تهانينا! لقد نجحتم في سدّ الفجوة بين تصميم عالي الدقة وقاعدة رموز برمجية فعّالة باستخدام Antigravity وبروتوكول سياق النموذج (MCP) في Stitch.

ملخّص المهام التي نفّذتموها:

• تصميم واجهة مستخدم في Stitch باستخدام Gemini 3
• إنشاء مفتاح واجهة برمجة تطبيقات آمن وضبط بروتوكول سياق النموذج (MCP) في Antigravity
• استخدام وكيل مستقل لإنشاء موقع React + Tailwind والتحقّق منه