---
name: أدوات ستيتش لتصميم الواجهات (Stitch MCP Tools)
description: دليل شامل لاستخدام أدوات خادم Stitch MCP لإنشاء وتعديل وإدارة مشاريع الواجهات (UI Designs) والأنظمة البصرية (Design Systems) بالذكاء الاصطناعي.
---

# 🎨 مهارة أدوات ستيتش لتصميم الواجهات (Stitch MCP Tools)

توفر هذه المهارة إرشادات حول كيفية استخدام أدوات `StitchMCP` لإنشاء، إدارة، وتعديل واجهات المستخدم (UI) باستخدام الذكاء الاصطناعي التوليدي، بالإضافة إلى إدارة مساحات العمل والمشاريع.

---

## 📁 1. إدارة المشاريع (Project Management)
المشروع هو الحاوية الأساسية لتصميمات الواجهات وكود الواجهة الأمامية:
*   **`create_project`**: لإنشاء مشروع Stitch جديد للبدء بالعمل عليه.
*   **`list_projects`**: لاستعراض كافة مشاريع Stitch المتاحة لك (بشكل افتراضي يعرض المشاريع المملوكة للمستخدم).
*   **`get_project`**: لجلب تفاصيل ومعلومات مشروع معين باستخدام اسمه (Resource Name) أو الـ Project ID الخاص به.

---

## 📱 2. إدارة الشاشات (Screen Management)
*   **`list_screens`**: لاستعراض جميع الشاشات الموجودة داخل مشروع معين بناءً على معرف المشروع `projectId`.
*   **`get_screen`**: لجلب التفاصيل الفنية لشاشة معينة باستخدام مسارها أو معرفها، مفيد جداً لمعرفة حالة الشاشة بعد محاولة توليدها أو تعديلها.

---

## 🪄 3. التوليد والتعديل بالذكاء الاصطناعي (AI Generation & Editing)
تعتبر هذه الأدوات العصب الأساسي لتصميم الواجهات باستخدام النصوص:

*   **`generate_screen_from_text`**: لتوليد شاشة جديدة بالكامل بناءً على وصف نصي (Prompt).
    *   **⚠️ تعليمات هامة:** العملية قد تستغرق بضع دقائق. **كن صبوراً ولا تقم بإعادة المحاولة (DO NOT RETRY)**. إذا فشل الاتصال (Connection Error)، فقد تنجح العملية في الخلفية، لذا حاول استخدام `get_screen` لاحقاً للتحقق.
    *   **المخرجات:** إذا تضمنت `output_components` نصاً، اعرضه للمستخدم. إذا تضمنت اقتراحات (مثل: "نعم، قم بإنشاء الجميع")، قم بعرضها على المستخدم، وإذا وافق على إحداها، أعد استدعاء الأداة باستخدام الاقتراح المقبول كـ `prompt`.

*   **`edit_screens`**: لتعديل شاشات حالية باستخدام وصف نصي.
    *   **⚠️ تعليمات هامة:** العملية قد تستغرق بضع دقائق، **ولا تقم بإعادة المحاولة**. أخطاء الاتصال لا تعني بالضرورة فشل العملية.

*   **`generate_variants`**: لتوليد بدائل (Variants) متعددة لشاشة حالية باستخدام الأوامر النصية وتحديد الخيارات (Variant Options).

---

## 🎨 4. الانظمة البصرية والهوية (Design Systems)
لبناء هوية بصرية متسقة (Tokens) وتطبيقها عبر كافة الشاشات:

*   **`create_design_system`**: لإنشاء نظام تصميم جديد للمشروع. يشمل ذلك إعداد: (لوحة الألوان Custom Colors، الخطوط Typography، انحناء الزوايا Shape، وألوان الخلفيات للوضع الفاتح والداكن، بالإضافة لملفات الـ Markdown الخاصة بالتصميم).
    *   **⚠️ تعليمات هامة:** بعد استخدام هذه الأداة، **يجب عليك فوراً استدعاء الأداة `update_design_system`** لتطبيق التصميم على المشروع وإظهاره في الواجهة المرئية.

*   **`update_design_system`**: لتحديث نظام التصميم الخاص بمشروع معين. تُستخدم بعد الإنشاء الأولي للحفظ والتطبيق النهائي.

*   **`list_design_systems`**: لاستعراض كافة الأنظمة البصرية المتاحة لمشروع معين.

*   **`apply_design_system`**: لتطبيق نظام بصري كامل (ألوان، خطوط، وحواف) على شاشة واحدة أو مجموعة شاشات محددة بحيث تتماشى جميعها مع الهوية البصرية الموحدة للمشروع.

---

> [!TIP]
> **نصيحة للمطور الآلي (Agent):**
> عند التعامل مع أدوات Stitch، تذكر أن عمليات التوليد والتعديل (`generate_screen_from_text`, `edit_screens`) تحتاج إلى وقت نظراً لاعتمادها على معالجات صور ذكاء اصطناعي. قم دائماً بإعلام المستخدم بأن العملية قيد التنفيذ، واعتمد على الانتظار أو التحقق اللاحق باستخدام `get_screen` بدلاً من تكرار الاستدعاءات التي قد تؤدي إلى إتلاف المشروع أو إرهاق الخادم.