مهارات المهام
Stitch Skills
وجّه AI من وصف نصي أو صورة إلى تصميم صفحات ومكونات واجهات.
مقدمة
أعدّه LessAI Tools اعتمادًا على وثائق المشروع العامة
لمن يراجع التصميم قبل بناء موقع أو تطبيق. تعمل المهارات مع Google Stitch لتوليد الشاشات وتعديلها وإدارة الأنماط وتحويلها إلى مكونات مثل React. تحتاج حساب Stitch وصلاحيات المشروع واتصال MCP واعتماديات المهارات. منشورة من Google Labs code لكنها تصرح بأنها ليست منتجا مدعوما رسميا من Google. الحصص وفق الإرشادات الحالية.
ابدأ الاستخدام
راجع المتطلبات ثم اختر مساعدك لعرض خطوات الإعداد.
- ما تحتاج إليه
- Codex أو Claude Code أو Cursor يدعم الإضافات؛ آخر اثنين يحتاجان Node.js وnpm للتثبيت.
- استخدم حساب Stitch الخاص وجهز بيانات MCP حسب الوثائق. توليد التصميم يحتاج الإنترنت.
- التكاليف
- الإضافة Apache-2.0؛ راجع حساب Stitch للحصص والحدود. المساعد منفصل.
- الصلاحيات المطلوبة
- MCP يقرأ ويعدل مشاريع Stitch المأذونة. المطالبات والصور وHTML المختارة ترسل إلى Stitch والنتائج تحفظ محليا. ارفع مواد مأذونة واحفظ بياناتك في إعداد مساعدك.
Codexإعداد رسمي موثّق
README الحالي يسرد Codex صراحة. صل Stitch MCP أيضا، وهو اتصال يتيح للمساعد الوصول لتصاميمك.
خطوات الإعداد
- في Codex افتح الإعدادات ← أسواق الإضافات ← إضافة؛ المصدر https://github.com/google-labs-code/stitch-skills وGit ref هو main.
- ثبّت stitch-design من السوق المضاف وابدأ بإضافة التصميم.
- اتبع إعداد Stitch MCP أدناه للبيانات والاتصال؛ افتح جلسة واطلب قائمة مشاريعك.
التحقّق من نجاح الإعداد
تحقق من مشاريعك الفعلية؛ القائمة الفارغة صالحة إن لم تكن لديك مشاريع. ثم اطلب شاشة اختبار وراجعها في Stitch. المهارات وحدها لا تربط MCP.
المصادر الرسمية
Claude Codeإعداد رسمي موثّق
README الحالي يسرد Claude Code صراحة؛ صل Stitch MCP للوصول لتصاميمك أيضا.
خطوات الإعداد
- افتح طرفية في المشروع وتحقق من Node.js وnpm.
- شغّل npx plugins add google-labs-code/stitch-skills --scope project --target claude-code وراجع مطالبات التثبيت.
- اتبع إعداد Stitch MCP أدناه للبيانات والاتصال؛ افتح جلسة واطلب قائمة مشاريعك.
التحقّق من نجاح الإعداد
تحقق من مشاريعك الفعلية؛ القائمة الفارغة صالحة إن لم تكن لديك مشاريع. ثم اطلب شاشة اختبار وراجعها في Stitch. المهارات وحدها لا تربط MCP.
المصادر الرسمية
Cursorإعداد رسمي موثّق
README الحالي يسرد Cursor صراحة؛ صل Stitch MCP للوصول لتصاميمك أيضا.
خطوات الإعداد
- افتح طرفية في المشروع وتحقق من Node.js وnpm.
- شغّل npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor وراجع مطالبات التثبيت.
- اتبع إعداد Stitch MCP أدناه للبيانات والاتصال؛ افتح جلسة واطلب قائمة مشاريعك.
التحقّق من نجاح الإعداد
تحقق من مشاريعك الفعلية؛ القائمة الفارغة صالحة إن لم تكن لديك مشاريع. ثم اطلب شاشة اختبار وراجعها في Stitch. المهارات وحدها لا تربط MCP.
المصادر الرسمية
المصادر الرسمية
تاريخ مراجعة الإعداد 2026-10-13 · وفق الوثائق العامة؛ لم يُثبّت كل مشروع ويُختبر هنا.
طرق الاستخدام
- توليد الشاشات وتعديلها بالنص أو الصور
- إدارة أنماط التصميم لتوحيد الشاشات
- تحويل التصاميم إلى مكونات بالمهارات المختارة
المشروع ووثائقه الرسمية
وصف المشروع (مترجم)
مكتبة مهارات تعمل مع Stitch MCP وتتبع معيار Agent Skills المفتوح للتوافق مع Antigravity وGemini CLI وClaude Code وCursor
إضافات لمهام مشابهة
تُطابق المهمة الأساسية أولًا ثم الاستخدامات المشتركة والنجوم. قد يختلف الإعداد.
- Anthropic Skills · Frontend Design — تخطيط الواجهة وإنشائها وانتقادها باستخدام خيارات التخطيط والطباعة والتفاعل المتعمدة.
- Taste Skill — قم بإعطاء موقع ويب عام توجيهًا مرئيًا متعمدًا، ثم تحقق من النتيجة في المتصفح.
- Text to CAD — صف الأبعاد والأشكال لإنشاء نماذج قطع ثلاثية الأبعاد قابلة للتحرير.