يترجم تصميمات Figma إلى كود جاهز للإنتاج بدقة بصرية 1:1. يُستخدم عند تنفيذ واجهة المستخدم من ملفات Figma، عندما يذكر المستخدم "تنفيذ التصميم"، أو "إنشاء التعليمات البرمجية"، أو "تنفيذ المكون"، أو "إنشاء تصميم Figma"، أو توفير عناوين URL لـ Figma، أو يطلب إنشاء مكونات مطابقة لمواصفات Figma. يتطلب اتصال خادم Figma MCP.
ثبّت مهارة الذكاء الاصطناعي implement-design بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: figma/mcp-server-guide.
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.
Note: When using the local desktop MCP (figma-desktop), fileKey is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only nodeId is needed.
يترجم تصميمات Figma إلى كود جاهز للإنتاج بدقة بصرية 1:1. يُستخدم عند تنفيذ واجهة المستخدم من ملفات Figma، عندما يذكر المستخدم "تنفيذ التصميم"، أو "إنشاء التعليمات البرمجية"، أو "تنفيذ المكون"، أو "إنشاء تصميم Figma"، أو توفير عناوين URL لـ Figma، أو يطلب إنشاء مكونات مطابقة لمواصفات Figma. يتطلب اتصال خادم Figma MCP. المصدر: figma/mcp-server-guide.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/figma/mcp-server-guide --skill implement-designيترجم تصميمات Figma إلى كود جاهز للإنتاج بدقة بصرية 1:1. يُستخدم عند تنفيذ واجهة المستخدم من ملفات Figma، عندما يذكر المستخدم "تنفيذ التصميم"، أو "إنشاء التعليمات البرمجية"، أو "تنفيذ المكون"، أو "إنشاء تصميم Figma"، أو توفير عناوين URL لـ Figma، أو يطلب إنشاء مكونات مطابقة لمواصفات Figma. يتطلب اتصال خادم Figma MCP. المصدر: figma/mcp-server-guide.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/figma/mcp-server-guide --skill implement-design بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/figma/mcp-server-guide