ذكاء Figma الاصطناعي يعمل بجودة التعليمات التي تعطيها له فقط. التوجيهات الغامضة تنتج تخطيطات عامة تحتاج إعادة بناء من الصفر. التوجيهات المحددة — مع نوع الشاشة والأقسام والمكونات وحجم الإطار والتباعد — تنتج بانتظام مخرجات جاهزة للإنتاج بنسبة 70-85% في مرة واحدة. هذه القوالب الـ15 مُنظمة لمجموعة أدوات Figma AI لعام 2026: وكيل التصميم و Figma Make و Skills والميزات المجانية (التخطيط التلقائي وإعادة تسمية الطبقات واستبدال المحتوى) التي لا تكلف نقاط ائتمان.
انسخ أي قالب واستبدل العناصر النائبة بين الأقواس بمنتجك وشغّله عبر محسن التوجيهات المجاني إذا كنت تريد قيود أكثر إحكاماً. للتحسين بنقرة واحدة داخل ChatGPT و Claude و Gemini أثناء كتابة تعليمات الوكيل، يضيف TresPrompt هيكل ICCSSE إلى الشريط الجانبي.
النقطة الأساسية
كل توجيه قوي لذكاء Figma الاصطناعي يحدد أربعة أشياء: أي شاشة تبنيها وأي مكونات منشورة تستخدم وحجم الإطار وقواعد التباعد. أضف قيود سلبية ("لا تستخدم إطارات غير مسماة" و"لا lorem ipsum") ويتوقف الوكيل عن التخمين. Skills تُرمز هذه الأنماط حتى لا تعيد كتابتها في كل جلسة.
قوالب وكيل التصميم (الشاشات على اللوحة)
1
صفحة إعدادات الجوال
أنشئ صفحة إعدادات جوال (390×844) مع:
1. الحساب — صورة رمزية واسم وإيميل وأزرار تعديل
2. الإشعارات — مفاتيح تبديل للإيميل والدفع و SMS
3. المظهر — مفتاح تبديل الوضع المظلم ومحدد حجم الخط
4. الأمان — تغيير كلمة المرور ومفتاح تبديل 2FA
5. التذييل — زر تسجيل خروج مدمر ونص إصدار التطبيق
استخدم المكونات المنشورة فقط. التخطيط التلقائي: تباعد عناصر 16px و32px بين الأقسام. مكون Section Header لتسميات المجموعات.
2
نظرة عامة على لوحة المعلومات (سطح المكتب)
أنشئ لوحة معلومات تحليلات لسطح المكتب (1440×900) مع:
- شريط علوي: شعار وبحث وقائمة مستخدم
- شريط جانبي أيسر: 5 عناصر تنقل وحالة نشطة على "نظرة عامة"
- الرئيسي: 4 بطاقات KPI في صف ومخطط خطي أسفل وجدول نشاط حديث (5 صفوف)
استخدم متغيرات نظام التصميم للون والتباعد. مكون Card لـ KPIs. مكون Table للنشاط. لا تستخدم تسميات بيانات مخطط نائبة مثل "Series 1".
3
تدفق الإعداد الأولي (3 إطارات)
أنشئ 3 شاشات إعداد أولي للجوال (390×844) من اليسار لليمين:
1. الترحيب — عنوان رئيسي ونسخة فرعية و CTA أساسي "ابدأ"
2. الصلاحيات — قائمة إشعارات + موقع مع مفاتيح تبديل
3. النجاح — منطقة رسم توضيحي علامة صح و CTA "أنت جاهز تماماً"
استخدم مكونات Primary Button و Secondary Button. مؤشر تقدم يظهر خطوة 1/3 و2/3 و3/3. حشو أفقي ثابت 24px على جميع الإطارات.
4
حالة فارغة + حالة خطأ
أنشئ إطارين للجوال (390×844):
الإطار أ — نتائج بحث فارغة: منطقة أيقونة وعنوان "لا توجد نتائج" ونسخة نص وزر ثانوي "مسح الفلاتر"
الإطار ب — خطأ: أيقونة تحذير و"حدث خطأ ما" وأساسي "حاول مرة أخرى" وثالثي "اتصل بالدعم"
استخدم مكونات Empty State و Alert المنشورة إن وُجدت. محتوى محاذاة وسط وعرض أقصى 280px لكتلة النص.
5
إعدادات قابلة للوصول (وكيل + a11y)
أنشئ صفحة إعدادات جوال (390×844) مع متطلبات إمكانية الوصول:
- عناصر تفاعلية أهداف لمس أدنى 44×44px
- تباين نص أدنى 4.5:1 (استخدم ألوان نص نظام التصميم)
- تسلسل عناوين H1 → H2 بلا مستويات مُتخطاة
- مفاتيح التبديل تتضمن تسميات نص مرئية (ليس أيقونة فقط)
- حالات الخطأ تستخدم لون ونص (ليس لون وحده)
استخدم المكونات المنشورة. تباعد تخطيط تلقائي 16px / 32px.
📬 تحصل على قيمة من هذا؟
رؤية AI قابلة للتطبيق واحدة أسبوعياً. بالإضافة لحزمة توجيهات مجانية عند الاشتراك.
اشترك مجاناً ←
قوالب Figma Make (النموذج الأولي / الكود)
6
صفحة هبوط تسويقية (Make)
اِبن موقع تسويقي من صفحة واحدة من إطار Figma هذا:
- البطل: عنوان رئيسي وعنوان فرعي والتقاط إيميل + CTA
- 3 أعمدة ميزات مع أيقونات
- صف شعارات دليل اجتماعي
- تذييل مع روابط
اجعل التباعد والألوان تطابق الإطار المحدد. متجاوب للجوال. لا مكتبات خارجية إلا إذا حُددت في ملاحظات الإطار.
7
نموذج أولي تفاعلي (Make)
أنشئ نموذج أولي قابل للنقر من الإطارات [اذكر أسماء الإطارات]:
- النقر على "سجل" ينقل لإطار نموذج التسجيل
- الإرسال يُظهر حالة رسالة نجاح منبثقة
- "رجوع" يعود للشاشة السابقة
استخدم المكونات من الملف. احفظ حالات التمرير على الأزرار الأساسية. لا تضف شاشات جديدة غير موجودة في ملف التصميم.
قوالب Skills (تعليمات وكيل قابلة لإعادة الاستخدام)
احفظ هذه كملفات markdown لـ Skills حتى يتبع الوكيل اتفاقيات الفريق في كل مرة.
8
Skill: /settings-page
عند إنشاء شاشات الإعدادات:
- استخدم دائماً نمط Section Header + قائمة مجمعة
- اتضمن تذييل مع إصدار التطبيق (نمط تسمية توضيحية) وتسجيل خروج مدمر
- افتراضي الجوال 390×844 إلا إذا حدد المستخدم سطح المكتب
- استخدم مكون Toggle للإعدادات المنطقية وليس مربعات اختيار مخصصة أبداً
- التباعد: 16px داخل المجموعات و32px بين المجموعات و24px حشو الشاشة
9
Skill: /data-table
عند إنشاء الجداول:
- استخدم مكونات Table/Header و Table/Row
- اتضمن عمود أيقونة ترتيب فقط إذا طلب المستخدم
- ارتفاع صف 48px أدنى للمس
- اقتطع النص الطويل بعلامات حذف وليس التفاف أكثر من سطرين في الخلايا أبداً
- حالة فارغة أسفل الجدول إذا كانت الصفوف صفر
الميزات المجانية (صفر نقاط ائتمان)
10
استبدال المحتوى (دفعة)
استبدل كل lorem ipsum في الإطار المحدد بنسخة واقعية لـ [B2B SaaS / التجارة الإلكترونية / الرعاية الصحية]. الأسماء: متنوعة ومعقولة. العناوين: تنسيق أمريكي. أسماء المنتجات: خيالية لكن مهنية. حافظ على عد الأحرف مشابه للعناصر النائبة حتى لا يكسر التخطيط.
11
إعادة تسمية الطبقات (تحضير التسليم)
أعد تسمية جميع الطبقات في هذه الصفحة باستخدام نمط: [القسم]/[المكون]/[الحالة]
مثال: Settings/NotificationRow/Default
لا تعيد تسمية إطارات الخلفية المقفلة. تخط الطبقات المخفية.
توجيهات MCP + تسليم الكود (Claude Code / Cursor)
12
React من إطار Figma
اقرأ إطار Figma المحدد عبر MCP. ولّد مكون React باستخدام [Tailwind / مكتبة Shadcn الخاصة بنا]:
- اجعل التباعد والألوان تطابق رموز التصميم في الملف
- استخدم HTML دلالي (nav وmain وsection)
- اتضمن نقاط كسر متجاوبة عند 768px و1024px
- صدّر كـ SettingsPage.tsx مع خصائص مكتوبة لبيانات المستخدم
لا تُرمز قيم hex بشكل ثابت — استخدم أسماء الرموز من متغيرات Figma.
قوالب الاستطلاع والمقارنة
13
ثلاثة اتجاهات تخطيط
ولّد 3 مناهج تخطيط مختلفة لـ [نوع الشاشة] على سطح المكتب 1440×900:
أ — تنقل شريط جانبي
ب — تنقل علامة تبويب علوي
ج — محور قائم على البطاقات
نفس المحتوى في الثلاثة جميعاً. استخدم المكونات المنشورة. ضع الإطارات جنباً إلى جنب مع فجوة 80px. سمّ كل إطار "الاتجاه أ/ب/ج" بنص تسمية توضيحية صغير.
14
توجيه مراجعة نظام التصميم
راجع الصفحة المحددة واذكر:
- المكونات غير الموجودة في المكتبة المنشورة (اعلمها كـ "منفصلة")
- الألوان التي لا تستخدم متغيرات
- النص الذي لا يستخدم أنماط نص
- فجوات التخطيط التلقائي التي ليست 4/8/16/24/32
اعرض كقائمة مراجعة في ملاحظات الإطار. لا تصحح تلقائياً — أبلغ فقط.
15
مرحلة التنقيح (التوجيه الثاني)
على الإطار المولّد طبق هذه الإصلاحات فقط:
1. زد التباعد العمودي بين الأقسام إلى 32px
2. بدّل الزر الأساسي إلى متغير Button/Primary/Large
3. أضف نص مساعد تحت حقل الإيميل: "لن نشارك إيميلك أبداً"
4. حاذ جميع الأيقونات إلى 24×24 في صفوف القائمة
لا تعيد هيكلة التخطيط. لا تضف أقسام جديدة.
كيفية ربط القوالب
تدفق عمل الإنتاج: القالب 13 (استطلع) ← اختر الاتجاه ← القالب 1 أو 2 (شاشة كاملة) ← القالب 15 (نقّح) ← القالب 11 (أعد التسمية) ← القالب 12 (MCP إلى كود). كل خطوة تستخدم توجيه مركز بدلاً من تعليمة عملاقة واحدة تربك الوكيل.
للنظام البيئي الكامل لـ Figma AI (Agent وMake وMCP وSkills وSites) انظر دليلنا الكامل لعام 2026. لإعداد الوكيل خطوة بخطوة انظر كيفية استخدام وكيل التصميم. لميزانية النقاط الائتمانية انظر شرح نقاط Figma AI الائتمانية.
الأسئلة المتكررة
هل تعمل هذه على خطة Figma المجانية؟
القوالب 10-11 (استبدال المحتوى وإعادة التسمية) تعمل على الخطط المجانية. وكيل التصميم و Make يتطلبان خطط مدفوعة ووصول تجريبي. MCP يعمل مع أي خطة يمكن تفعيل Dev Mode / MCP لمقعدك.
هل يجب أن ألصق القالب كاملاً أم أقصره؟
ابدأ بالقالب الكامل. بمجرد أن ترى أي سطور يتجاهلها الوكيل قصّر. التوجيهات الأقصر تعمل فقط بعد أن تعرف أي قيود يحتاجها نظام التصميم الخاص بك فعلاً.
هل يمكنني استخدام نفس التوجيه لـ Make ووكيل التصميم؟
لا — Make يتوقع لغة بناء/نموذج أولي ويستهلك النقاط الائتمانية بشكل مختلف. استخدم قوالب وكيل التصميم لطبقات اللوحة وقوالب Make للمخرجات التفاعلية. خلطهما ينتج نتائج مربكة.
كيف أحفظ التوجيهات كـ Skills؟
انسخ القوالب 8-9 إلى ملفات markdown لـ Skills في مكتبة Skills فريقك. استدع بـ /اسم-skill في لوحة الوكيل. حدّث Skills عندما تتغير أسماء مكوناتك — انظر دليل Skills.
إفصاح: بعض الروابط في هذا المقال روابط تابعة. نوصي فقط بالأدوات التي اختبرناها شخصياً ونستخدمها بانتظام. انظر سياسة الإفصاح الكاملة.