figma-generate-designالغرض والاستخدام والمصدر

ما تفعله هذه المهارة

استخدم هذه المهارة بالتزامن مع Figma عند تحويل صفحة تطبيق أو عرض أو تصميم متعدد الأقسام إلى Figma. المحفزات: "الكتابة إلى Figma"، "الإنشاء في Figma من الكود"، "دفع الصفحة إلى Figma"، "أخذ هذاapp/pageثم قم بإنشائه في Figma، مثل "إنشاء شاشة" أو "بناء صفحة هبوط في Figma" أو "تحديث شاشة Figma لتتوافق مع الكود". تُعد هذه المهارة هي الأنسب عندما يرغب المستخدم في إنشاء أو تحديث صفحة أو شاشة أو عرض كامل في Figma انطلاقًا من الكود أو الوصف. يكتشف هذا الأسلوب مكونات نظام التصميم والمتغيرات والأنماط عبر البحث في نظام التصميم، ويستوردها، ثم يُجمّع الشاشات تدريجيًا قسمًا تلو الآخر باستخدام رموز نظام التصميم بدلًا من القيم المُبرمجة مسبقًا.

طريقة الاستخدام وفق المستند الأصلي

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

المتطلبات والإعداد

الحدود وفحوصات الجودة

لم يتم تحديد أي مقطع حدود منفصل من هذا الملف. هذا لا يعني أن المهارة آمنة لكل مدخلات أو بيئة. راجع المصدر بالكامل وتحقق من صحة النتيجة بنفسك.

ابدأ بتجربة آمنة

1. تحقق من المضيف المدعوم وتعليمات تثبيت المستودع. احتفظ بمجلد المهارات والبرامج النصية والأصول والوثائق المشار إليها معًا؛SKILL.mdقد يؤدي وجود شخص واحد فقط إلى إغفال بعض التبعيات.
2. زوّد البرنامج ببياناتك الفعلية، والمخرجات المطلوبة، ومعايير القبول. يعتمد بناء جملة الاستدعاء والأدوات المتاحة على النظام المضيف؛ ولا يفترض هذا الموقع وجود أمر تثبيت موحد.
3. جرّب سير العمل الأصلي في مشروع مؤقت أو على نسخة احتياطية. راجع العمليات التي تُغيّر الملفات أو الخدمات البعيدة أو الموارد القابلة للفوترة قبل السماح بها.
4. تحقق من صحة المخرجات بمقارنتها بفحوصات جودة المصدر ومتطلباتك الخاصة. لا يُعدّ نجاح عملية التشغيل أو ارتفاع عدد النجوم في المستودع دليلاً على صحة النتيجة.

مواصفات ملف المهارة وبنية المجلدات ↗

اقرأ المزيد في المصدر

• إنشاء / تحديث الشاشات من نظام التصميم
• حدود المهارات
• المتطلبات الأساسية
• سير عمل متوازٍ مع generate_figma_design (تطبيقات الويب فقط)
• سير العمل المطلوب
• خطوة1فهم الشاشة
• خطوة2اكتشف نظام التصميم - المكونات والمتغيرات والأنماط
• 2أ: اكتشاف المكونات
• 2ب: اكتشاف المتغيرات (الألوان، التباعد، أنصاف الأقطار)
• 2ج: اكتشف الأنماط (أنماط النصوص، أنماط التأثيرات)
• خطوة3قم بإنشاء إطار غلاف الصفحة أولاً
• خطوة4قم ببناء كل قسم داخل الغلاف
• قم بتجاوز نص المثيل باستخدام setProperties()
• اقرأ الإعدادات الافتراضية لشفرة المصدر بعناية
• ما الذي يجب بناؤه يدويًا مقابل استيراده من نظام التصميم؟
• خطوة5التحقق من صحة وضع ملء الشاشة
• خطوة6تحديث شاشة موجودة
• الوثائق المرجعية
• استعادة الأخطاء
• أفضل الممارسات

المهارات ذات الصلة

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-design-system-rulesopenai/skills

الترجمة والنطاق

يختار دليل القراءة هذا مقاطع من المصدر الرئيسي المثبتSKILL.mdهذه الترجمة مساعدة. وهي ليست دليلاً كاملاً ولا تضمن التوافق المُختَبَر. يُرجى قراءة النص الأصلي والملفات المُشار إليها قبل الاستخدام.

تشير هذه المقدمة إلى النسخة المثبتة أدناه؛ ويتم عرض نشاط المستودع الحالي ووقت التجميع بشكل منفصل.

المصدر بإصدار ثابت

اقرأ الأصل ↗

تم استرجاع المصدر

2026-10-29T09:32:23Z

معرّف نسخة Git

49f948faa9258a0c61caceaf225e179651397431

المصدر SHA-256

45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9