1
افتح Stitch واشرح فكرة الموقع Stitch
افتح الأداة من الرابط التالي، ثم اكتب فكرة موقعك بالتفصيل. كلما زاد التفصيل، قلّ التخمين.
https://stitch.withgoogle.com
حدّد في الوصف
- نوع الموقع والمجال
- الستايل العام والألوان
- الصفحات المطلوبة بالاسم
مثال
موقع تأجير سيارات فاخرة، ستايل سينمائي وخلفية داكنة، صفحة رئيسية + صفحة الأسطول + صفحة الحجز
↓
2
أرفق صور مرجعية Pinterest Dribbble
لا تترك الستايل للتخمين. أرفق صور مرجعية من Pinterest أو Dribbble تمثّل الشكل الذي تريده.
الصورة المرجعية تحدّد الهوية البصرية بدقة أعلى من أي وصف نصي. هذه الخطوة هي الفرق بين تصميم عام وتصميم مميز.
↓
3
راجع الهوية والشاشات
يولّد Stitch هوية كاملة: الألوان، الخطوط، المكوّنات، وكل الشاشات المطلوبة. راجعها وعدّل ما تحتاجه قبل التصدير.
↓
4
اضغط Export واختر MCP الخطوة المهمة
من أعلى يمين الصفحة اضغط Export. تفتح قائمة Format، اختر منها MCP، ثم اضغط Setup MCP أسفل القائمة.
باقي الخيارات (Figma، Netlify، zip.) تعطيك ملفات ثابتة. MCP وحده يفتح قناة مباشرة بين Stitch وClaude، فيقرأ Claude التصميم بنفسه.
↓
5
اختر Claude Code وأنشئ مفتاح API
من قائمة Client اختر Claude Code، ثم اضغط Create API key. يظهر بعدها أمر الإعداد في خانة Configuration.
شكل الأمر
claude mcp add stitch \
--transport http \
--header "X-Goog-Api-Key: YOUR_API_KEY" \
https://stitch.googleapis.com/mcp
اضغط Copy داخل اللوحة لنسخ الأمر بمفتاحك أنت. المفتاح خاص بحسابك: لا تشاركه، ولا تظهره في صورة أو فيديو. إذا انكشف، احذفه وأنشئ غيره.
↓
6
شغّل الأمر في الترمنال Claude Code
افتح الترمنال داخل مجلد المشروع، الصق الأمر، ثم نفّذه. للتأكد من نجاح الربط شغّل:
claude mcp list
يجب أن يظهر stitch في القائمة بحالة متصل.
↓
7
اطلب من Claude يبني الموقع
بعد الربط يستطيع Claude رؤية التصميم الذي أنشأته. اطلب منه البناء مباشرة:
الطلب
اربط لي الشاشات وابنِ لي الموقع
الفرق الجوهري: بدون MCP يبني Claude من وصف نصي فيخرج شيء قريب. مع MCP يبني من التصميم نفسه، فتأتي النتيجة مطابقة.
