Claude Code + Google Stitch = design احترافي (الدليل الكامل + الـ prompt)

ما هذا

قالب مجاني خطوة بخطوة من ريلز طه — الأدوات والـ prompts والروابط بالضبط، مرتّبة لتتابع معها وتُطلق تطبيقك. علّق بالكلمة المفتاحية على الريل ويصلك أيضًا في رسائلك الخاصة.

مرحبًا! 👋 إليك ما وعدتك به:

Claude Code يكتب code جيدًا، لكن الـ UI والـ design عنده ناقصان. الحل: صمّم في Google Stitch (مجاني بحساب Google)، ثم سلّم الـ design إلى Claude Code عبر MCP ليبني بالضبط ما تراه بدل التخمين.

🔗Google Stitchhttps://stitch.withgoogle.com 🔗إعداد Stitch MCP (الـ docs الرسمية)https://stitch.withgoogle.com/docs/mcp/setup

الـ workflow

افتح Stitch وصِف الـ app أو الموقع بكلام عادي. أضف screenshots أعجبتك من Pinterest أو Dribbble كـ inspiration.
يولّد Stitch كل الـ screens مع design system كامل — الألوان، الـ fonts، وكل شيء متناسق.
عندما يعجبك الـ design: Export ← اختر MCP ← Setup MCP ← اختر Claude Code.
انسخ الأمر الذي يعطيك إياه Stitch والصقه في الـ terminal الخاص بـ Claude Code. الآن يرى Claude الـ design كاملًا بدل التخمين.
أعطِ Claude Code الـ prompt النهائي في الأسفل — يربط كل الـ screens، يضيف الـ animations ويجهّز الـ app للإطلاق.

الـ prompt

Turn these Stitch designs into code. Make all screens. Link them up. Add smooth moves. Use React and Tailwind. Get it launch-ready.

Bonus — الـ skills الرسمية لـ Stitch في Claude Code

الـ repo المرافق من Google يضيف skills للـ design والبناء تعمل فوق الـ Stitch MCP server.

🔗GitHubhttps://github.com/google-labs-code/stitch-skills

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

هذه الـ skills تحتاج إعداد الـ Stitch MCP server أولًا (الخطوتان 3–4). إذا بدت قائمة Export مختلفة عندك، اتبع صفحة إعداد الـ MCP الرسمية في الأعلى — فهي تذكر Claude Code ضمن الـ clients المدعومة.