stitch-ui-design
إنشاء تصاميم واجهة المستخدم مع Google Stitch
تساعد هذه المهارة المستخدمين في صياغة مطالبات فعالة لأداة تصميم واجهة المستخدم بالذكاء الاصطناعي Google Stitch. توفر أفضل الممارسات ومطالبات مثال وتقنيات متقدمة لإنشاء واجهات ويب وتطبيقات جوالة احترافية.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "stitch-ui-design". كيف أنشئ لوحة تحكم مع Stitch؟
النتيجة المتوقعة:
لإنشاء لوحة تحكم مع Google Stitch، اتبع هذه المبادئ:
1. كن محددًا: بدلاً من 'أنشئ لوحة تحكم'، استخدم 'لوحة تحكم للأعضاء مع شبكة وحدات الدورة التدريبية، شريط تتبع التقدم، وشريط جانبي لملف المجتمع باستخدام سمة أرجوانية وتصميم قائم على البطاقات'
2. حدد النمط المرئي: ضمّن أنظمة الألوان وجماليات التصميم
3. اذكر المكونات: حدد كل عنصر من عناصر واجهة المستخدم المطلوب
مثال للمطالبة: 'لوحة تحكم للتحليلات مع بطاقات مؤشرات الأداء الرئيسية، مخطط خطي للاتجاهات، منتقي نطاق التواريخ، وزر التصدير. استخدم سمة داكنة عصرية مع ألوان تمييز لتصور البيانات.'
استخدام "stitch-ui-design". ماذا يجب أن أضمّن لمطالبات تطبيقات الجوال؟
النتيجة المتوقعة:
لتطبيقات الجوال، حدد:
- المنصة: iOS أو Android أو cross-platform
- أبعاد الشاشة والسلوك المتجاوب
- نمط التنقل (شريط علامات التبويب، درج، مكدس)
- المكونات الأصلية للمنصة
- الأحجام والمسافات الصديقة للمس
مثال: 'شاشة تسجيل دخول لتطبيق جوال (بنمط iOS) مع حقول البريد الإلكتروني/كلمة المرور، أزرار المصادقة الاجتماعية (Google، Apple)، ورابط نسيت كلمة المرور. استخدم إرشادات واجهة الإنسان لـ iOS مع خط SF Pro.'
التدقيق الأمني
آمنThis is a documentation-only skill containing markdown files with guidance for Google Stitch AI UI design tool. All static analyzer findings are false positives: backticks are markdown code formatting, not shell execution; cryptographic algorithm flags are documentation text misinterpreted by scanner. No executable code, network requests, or dangerous patterns present.
مشكلات عالية المخاطر (3)
درجة الجودة
ماذا يمكنك بناءه
تعلم أساسيات المطالبات في Stitch
المستخدمون الجدد الذين يرغبون في فهم كيفية كتابة مطالبات فعالة لـ Google Stitch لتوليد أولى تصاميم واجهة المستخدم الخاصة بهم
تحسين جودة مخرجات التصميم
المستخدمون الذين جربوا Stitch لكنهم يحصلون على نتائج عامة ويرغبون في تعلم تقنيات محددة للحصول على تصاميم أفضل وأكثر تخصيصاً
إنشاء تدفقات تطبيقات متعددة الشاشات
المستخدمون الذين يبنون تطبيقات كاملة ويحتاجون إلى إرشادات حول المطالبات لعدة شاشات متصلة وتخطيطات متجاوبة
جرّب هذه الموجهات
أنشئ [نوع المكون] مع [الميزات المحددة]، باستخدام سمة [نظام الألوان] وتصميم [نمط التخطيط].
صمم صفحة منتج للتجارة الإلكترونية مع معرض صور رئيسي، زر إضافة إلى عربة التسوق، قسم المراجعات، وCarousel للمنتجات ذات الصلة. استخدم تصميمًا نظيفًا بأقل الحدود مع لمسات [لون التمييز] ومساحة بيضاء سخية.
صمم شاشة [اسم الشاشة] لتطبيق جوال من نوع [نوع التطبيق]. ضمّن [قائمة الميزات والمكونات]. استخدم [نمط التصميم] مع [لوحة الألوان]. أضف [الحالات التفاعلية] و[عناصر التنقل].
أنشئ تطبيق من نوع [نوع التطبيق] مع: - [الشاشة 1] مع [الميزات] - [الشاشة 2] مع [الميزات] - [الشاشة 3] مع [الميزات] استخدم نمط [نظام التصميم] وتأكد من السلوك المتجاوب عبر الجوال وسطح المكتب.
أفضل الممارسات
- حدد دائمًا التفاصيل المرئية: الألوان والطباعة والمسافات ونمط التصميم لتجنب مخرجات الذكاء الاصطناعي العامة
- اذكر كل شاشة صراحةً للتطبيقات متعددة الشاشات - سيؤكد Stitch قبل توليد تصاميم متعددة
- ضمّن المتطلبات الوظيفية: إجراءات الأزرار، التحقق من صحة النماذج، أنماط التنقل، وتدفقات المستخدمين
تجنب
- استخدام مطالبات غامضة مثل 'أنشئ صفحة تسجيل دخول لطيفة' - ينتج عنها تصاميم عامة وغير قابلة للاستخدام
- نسيان تحديد المنصة (جوال مقابل سطح مكتب) مما يؤدي إلى توقعات تخطيط خاطئة
- عدم تحديد النمط المرئي، مما يتسبب في خروج الذكاء الاصطناعي بجماليات عشوائية أو غير متسقة