·figma-design-to-code
*

figma-design-to-code

قم بتنفيذ كود واجهة المستخدم الجاهز للتكامل من تحديد Figma أو معرف العقدة المقدم باستخدام TemPad Dev MCP باعتباره المصدر الوحيد لأدلة التصميم (لقطة التعليمات البرمجية، والبنية، والأصول، والرموز المميزة، وتكوين Codegen). اكتشف مجموعة اتفاقيات الريبو المستهدفة أولاً، ثم قم بترجمة JSX/Vue IR الشبيهة بـ Tailwind الخاصة بـ TempPad Dev إلى تعليمات برمجية أصلية للمشروع دون إضافة تبعيات جديدة. لا تخمن أبدًا الأنماط أو القياسات الرئيسية. إذا كانت الأدلة المطلوبة مفقودة/متناقضة أو لا يمكن التعامل مع الأصول بموجب سياسة إعادة الشراء، فقم بإيقاف أو شحن قاعدة آمنة مع تحذيرات وإغفالات صريحة.

34التثبيتات·1الرائج·@ecomfe

التثبيت

$npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code

كيفية تثبيت figma-design-to-code

ثبّت مهارة الذكاء الاصطناعي figma-design-to-code بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: ecomfe/tempad-dev.

This skill requires TemPad Dev MCP. If tempad-dev: tools are unavailable/inactive/unauthorized, stop and tell the user to install TemPad Dev MCP and ensure it is activated in the TemPad Dev panel in the Figma design file.

TemPad Dev outputs Tailwind-like IR in either JSX or Vue. Treat MCP outputs as design facts. Never guess key styles.

Never invent: colors, typography (size/weight/line-height/letter-spacing), spacing, radius, borders, shadows, gradients, opacity/overlays, blur.

قم بتنفيذ كود واجهة المستخدم الجاهز للتكامل من تحديد Figma أو معرف العقدة المقدم باستخدام TemPad Dev MCP باعتباره المصدر الوحيد لأدلة التصميم (لقطة التعليمات البرمجية، والبنية، والأصول، والرموز المميزة، وتكوين Codegen). اكتشف مجموعة اتفاقيات الريبو المستهدفة أولاً، ثم قم بترجمة JSX/Vue IR الشبيهة بـ Tailwind الخاصة بـ TempPad Dev إلى تعليمات برمجية أصلية للمشروع دون إضافة تبعيات جديدة. لا تخمن أبدًا الأنماط أو القياسات الرئيسية. إذا كانت الأدلة المطلوبة مفقودة/متناقضة أو لا يمكن التعامل مع الأصول بموجب سياسة إعادة الشراء، فقم بإيقاف أو شحن قاعدة آمنة مع تحذيرات وإغفالات صريحة. المصدر: ecomfe/tempad-dev.

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code
المصدر
ecomfe/tempad-dev
الفئة
*وسائط إبداعية
موثق
أول ظهور
2026-03-03
آخر تحديث
2026-03-10

Browse more skills from ecomfe/tempad-dev

إجابات سريعة

ما هي figma-design-to-code؟

قم بتنفيذ كود واجهة المستخدم الجاهز للتكامل من تحديد Figma أو معرف العقدة المقدم باستخدام TemPad Dev MCP باعتباره المصدر الوحيد لأدلة التصميم (لقطة التعليمات البرمجية، والبنية، والأصول، والرموز المميزة، وتكوين Codegen). اكتشف مجموعة اتفاقيات الريبو المستهدفة أولاً، ثم قم بترجمة JSX/Vue IR الشبيهة بـ Tailwind الخاصة بـ TempPad Dev إلى تعليمات برمجية أصلية للمشروع دون إضافة تبعيات جديدة. لا تخمن أبدًا الأنماط أو القياسات الرئيسية. إذا كانت الأدلة المطلوبة مفقودة/متناقضة أو لا يمكن التعامل مع الأصول بموجب سياسة إعادة الشراء، فقم بإيقاف أو شحن قاعدة آمنة مع تحذيرات وإغفالات صريحة. المصدر: ecomfe/tempad-dev.

كيف أثبّت figma-design-to-code؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/ecomfe/tempad-dev

التفاصيل

الفئة
*وسائط إبداعية
المصدر
skills.sh
أول ظهور
2026-03-03

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

لا يوجد