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

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

يحوّل تصميمات Figma إلى كود تطبيق جاهز للإنتاج باستخدام1:1دقة بصرية عالية. يُستخدم عند تنفيذ كود واجهة المستخدم من ملفات Figma، عندما يذكر المستخدم "تنفيذ التصميم" أو "إنشاء الكود" أو "تنفيذ المكون"، أو يُقدّم روابط Figma، أو يطلب إنشاء مكونات مطابقة لمواصفات Figma. بالنسبة للكتابة على لوحة Figma، يتم ذلك عبرuse_figma، يستخدمfigma-use.

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

get_design_context(fileKey=":fileKey", nodeId="1-2")

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

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

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

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

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

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

• ملخص
• حدود المهارات
• المتطلبات الأساسية
• سير العمل المطلوب
• الخيار أ: تحليل من رابط Figma
• الخيار ب: استخدام التحديد الحالي من تطبيق Figma Desktop (figma-desktop MCP فقط)
• خطوة2جلب سياق التصميم
• خطوة3التقاط مرجع بصري
• خطوة4تنزيل الأصول المطلوبة
• خطوة5ترجمة إلى اتفاقيات المشروع
• خطوة6: يحقق1:1التكافؤ البصري
• خطوة7التحقق من صحة النتائج باستخدام Figma
• تنظيم المكونات
• تكامل نظام التصميم
• جودة الكود
• مثال1تنفيذ مكون الزر
• مثال2: بناء تصميم لوحة المعلومات
• ابدأ دائمًا بالسياق
• التحقق التدريجي
• انحرافات المستندات
• إعادة الاستخدام بدلاً من الترفيه
• نظام التصميم أولاً
• المشكلة: يتم اقتطاع مخرجات Figma
• المشكلة: التصميم لا يتطابق بعد التنفيذ
• المشكلة: لا يتم تحميل الأصول
• المشكلة: تختلف قيم رموز التصميم عن تلك الموجودة في Figma
• فهم تنفيذ التصميم
• مصادر إضافية

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

• 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

63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad