1. مقدمة
في هذا الدرس التطبيقي حول الترميز، ستنشئ موقعًا إلكترونيًا جاهزًا للإنتاج من خلال الجمع بين التصميم المستند إلى الذكاء الاصطناعي وبيئة تطوير تعتمد على الوكيل أولاً. ستستخدم Google Stitch لإنشاء واجهة مستخدم عالية الدقة، ثم تربطها بـ بيئة تطوير Antigravity المتكاملة من خلال بروتوكول Model Context Protocol (MCP). أخيرًا، ستستخدم وكيلاً مستقلاً لجلب "تصميم الحمض النووي" وتنفيذ تطبيق React مثالي.
المهام التي ستنفذها
- إنشاء واجهة مستخدم في Stitch: استخدِم اللغة الطبيعية لإنشاء تصميم ويب كامل النطاق في Google Stitch.
- الربط باستخدام بروتوكول Model Context Protocol: يمكنك ربط Antigravity بمشروع Stitch باستخدام بروتوكول Model Context Protocol.
- التنفيذ الذاتي: استخدِم "علامة تبويب الوكيل" في Antigravity لجلب رموز التصميم وإنشاء مشروع React/Tailwind.
- التحقّق من الصحة والتحسين: استخدِم المتصفّح المدمج لإجراء "اختبار" للرمز البرمجي مقارنةً بالتصميم الأصلي.
ما ستتعلمه
- كيفية استخدام Google Stitch لإنشاء نماذج أولية بسرعة لتصاميم واجهة المستخدم العالية الدقة
- كيفية ضبط خوادم MCP ضِمن بيئة التطوير المتكاملة Antigravity
- كيفية استخدام الوكلاء المستقلين لترجمة البيانات الوصفية للتصميم المرئي إلى رمز معياري
المتطلبات
- متصفّح الويب Chrome
- تثبيت بيئة تطوير متكاملة (IDE) من Antigravity
- حساب على Google Stitch
- مفتاح Stitch API
- تثبيت Node.js (الإصدار 18 أو إصدار أحدث) على الجهاز
قبل البدء
- في Google Cloud Console، ضمن صفحة اختيار المشروع، اختَر مشروعًا على Google Cloud أو أنشِئه.
- تأكَّد من تفعيل الفوترة لمشروعك على السحابة الإلكترونية. تعرَّف على كيفية التحقّق مما إذا كانت الفوترة مفعَّلة في مشروع .
بالنسبة إلى أرصدة Google Cloud: لمساعدتك في استخدام Antigravity مع مشاريع Google Cloud، يمكنك تحصيل قيمة أرصدة Google Cloud المجانية باستخدام هذا الرابط. يمكنك اتّباع التعليمات هنا لتفعيل الرصيد وإنشاء مشروع جديد.
- انتقِل إلى stitch.withgoogle.com وتأكَّد من إمكانية تسجيل الدخول.
- تأكَّد من تثبيت بيئة التطوير المتكاملة Antigravity (متوفّرة على antigravity.google).
2. إنشاء التصميم في Google Stitch
يحتاج الوكيل إلى "مصدر موثوق" مرئي يمكنه اتّباعه. قبل كتابة التعليمات البرمجية، يجب تحديد الجانب الجمالي.
- الوصول إلى المنصة: انتقِل إلى stitch.withgoogle.com.
- اختيار نوع المشروع: في لوحة البيانات الرئيسية، ابحث عن مفتاح التبديل بدء تصميم جديد. انقر على الويب للتأكّد من تحسين تصميمك ليتوافق مع التنسيقات المستندة إلى المتصفّح.
- اختيار النموذج: انقر على القائمة المنسدلة للنماذج (تعرض حاليًا 3.0 Flash) داخل مربّع الطلب. تأكَّد من اختيار Gemini 3 للاستفادة من إمكانات الاستدلال المتقدّمة وإنشاء التنسيقات.
- وصف فكرتك: في مساحة النص التي تحمل التصنيف "وصف تصميمك"، أدخِل طلبك:
"صمِّم صفحة مقصودة حديثة لشركة ناشئة في مجال تكنولوجيا الفضاء تُعرف باسم LaunchPad. استخدِم لوحة ألوان من الأزرق الداكن والأرجواني النيون. ضمِّن قسمًا رئيسيًا مع زرّ "البدء"، وشبكة ميزات من 3 أعمدة، وجدول أسعار بتصميم زجاجي." 5- إنشاء: انقر على رمز السهم (بجانب أداة اختيار النموذج) لبدء عملية الإنشاء. 6. التحسين والتسمية: بعد إنشاء واجهة المستخدم، أدخِل اسمًا لمشروعك في العنوان في أعلى الصفحة. سمِّها LaunchPad. يمكنك استخدام الشريط الجانبي للدردشة لتحسين أي عناصر محدّدة قبل الانتقال إلى بيئة التطوير المتكاملة.
[!TIP] يمكنك أيضًا الاختيار من
"تجربة هذه الطلبات"
إذا كنت تريد البدء بسرعة.
3- ضبط Antigravity MCP
للسماح لـ "وكيل مكافحة الجاذبية" بـ "قراءة" تصميمك، عليك إنشاء مفتاح واجهة برمجة تطبيقات آمن وإضافة خادم Stitch MCP.
إنشاء مفتاح واجهة برمجة التطبيقات في Stitch
- في Google Stitch، انقر على صورة الملف الشخصي في أعلى يسار الصفحة.
- اختَر إعدادات الدمج من القائمة المنسدلة.
- انتقِل إلى قسم مفتاح واجهة برمجة التطبيقات.
- انقر على الزر إنشاء مفتاح.
- نسخ المفتاح: انسخ المفتاح الذي تم إنشاؤه على الفور وخزِّنه بأمان. ستحتاج إليه لتنفيذ الخطوة التالية.
ضبط منصّة MCP من Stitch في Antigravity
- افتح Antigravity IDE.
- فتح مدير الوكلاء
في أي وقت، يمكنك التبديل بين "إدارة العملاء" (Agent Manager) والمحرّر من خلال الضغط على CMD+E (في أجهزة Mac) أو CTRL+E (في أجهزة Windows)، أو من خلال الزرّين "فتح المحرّر" (Open Editor) و"فتح إدارة العملاء" (Open Agent Manager) في أعلى يسار شريط القوائم. .
- انقر على + فتح مساحة عمل.
لبدء محادثة جديدة في مساحة عمل، اختَر مساحة العمل المطلوبة من علامة التبويب "بدء محادثة" أو انقر على زر علامة الجمع بجانب اسم مساحة العمل في الشريط الجانبي.
- انقر على "فتح مساحة عمل جديدة" (Open New Workspace) وأدخِل اسمًا لمساحة العمل
LaunchPad-Projectواختَر دليلًا محليًا. يضمن ذلك توفّر مجلد جذر محدّد لدى "الوكيل" لإنشاء ملفات بدون إحداث فوضى في المشاريع الأخرى.
ضبط منصة MCP في Stitch
- ضمن مساحة العمل الجديدة، ارجع إلى إدارة الوكلاء (CMD+E في أجهزة Mac أو CTRL+E في أجهزة Windows) واختَر خوادم MCP.
افتح متجر MCP من خلال القائمة المنسدلة "..." في أعلى لوحة وكيل المحرّر.
تتوافق Antigravity مع بروتوكول سياق النموذج (MCP)، وهو معيار يتيح للمحرّر الاتصال بأمان بأدواتك وقواعد البيانات والخدمات الخارجية المحلية. يوفّر هذا التكامل للذكاء الاصطناعي سياقًا في الوقت الفعلي يتجاوز الملفات المفتوحة في المحرّر.
تعمل حزمة MCP كجسر بين Antigravity وGoogle Stitch. بدلاً من تصدير رموز التصميم أو نسخ رموز الألوان السداسية عشرية وبيانات التنسيق الوصفية يدويًا إلى المحرّر، تتيح منصة MCP لـ Antigravity استرداد "حمض التصميم النووي" مباشرةً من مشروع Stitch عند الحاجة.
- ابحث عن Stitch وانقر على تثبيت (Install).
- عندما يُطلب منك ذلك، ألصِق مفتاح Stitch API في حقل الإعدادات.
- التحقّق: في "محادثة الوكيل"، اكتب:
List my Stitch projects.إذا ظهرت لك النتيجةLaunchPad، تكون قد انتهيت.
- التحقّق: في نافذة محادثة الوكيل، اكتب:
List my Stitch projects.إذا عرض الوكيلLaunchPad، يعني ذلك أنّه تم إعداد الجسر بنجاح.
4. استرداد سياق التصميم
يحتاج الوكيل الآن إلى استيعاب البيانات الوصفية للتصميم لضمان دقة الرمز.
- في محادثة Antigravity، اكتب: "Use the Stitch MCP to fetch the ‘LaunchPad' project. استخرِج لوحة الألوان وأسلوب الخط، ثم أنشِئ ملف
DESIGN.mdفي الدليل الجذر". - المراجعة: افتح
DESIGN.mdالذي تم إنشاؤه حديثًا للاطّلاع على رموز الألوان السداسية وقواعد التنسيق التي استخرجها الوكيل.
5- التنفيذ (عملية الإنشاء)
استخدِم الوكيل لترجمة التصميم إلى تطبيق React يعمل.
- قدِّم طلب "البناء":
أريد إنشاء هذا الموقع الإلكتروني الكامل الآن. استخدِم React وTailwind CSS. تأكَّد من أنّ المكوّنات معيارية. بعد الانتهاء، شغِّل خادم التطوير واعرضه لي في المتصفّح المدمج." 2. مراقبة الوكيل: سيُنشئ الوكيل بنية المشروع في النافذة الطرفية، ويكتب المكوّنات في المحرّر، ويفتح المعاينة في المتصفّح المدمج.
6. المراجعة والتحسين
تحقَّق من الناتج واستخدِم الوكيل لإصلاح أي اختلافات مرئية.
- قارِن بين ناتج "المتصفّح المدمج" وتصميم Stitch الأصلي.
- إذا لم يتطابق أي عنصر (مثل مساحة الحشو في الزر أو وزن الخط)، اطلب من الوكيل: "مساحة الحشو في الزر "البدء" غير صحيحة قليلاً. يُرجى الرجوع إلى تصميم Stitch وتعديل فئات Tailwind".
- سيعيد الوكيل جلب سياق التصميم ويطبّق الإصلاح على الفور.
7. الملخّص والخطوات التالية
تهانينا! لقد نجحت في سدّ الفجوة بين التصميم عالي الدقة وقاعدة الرموز الوظيفية باستخدام Antigravity وStitch MCP.
ملخّص الإجراءات التي اتّخذتها:
- تم تصميم واجهة مستخدم في Stitch باستخدام Gemini 3.
- تم إنشاء مفتاح واجهة برمجة تطبيقات آمن وإعداد Antigravity MCP.
- استخدام وكيل مستقل لإنشاء موقع إلكتروني والتحقّق منه باستخدام React + Tailwind