تحويل Screenshot إلى Figma باستخدام Cursor وخادم Figma MCP: سير عمل وكيل برمجة بالذكاء الاصطناعي
إذا كنت تستخدم وكلاء برمجة بالذكاء الاصطناعي مثل Cursor أو Claude Code أو Windsurf أو Codex لبناء واجهات من التصاميم، فغالبا وصلت إلى الجدار نفسه الذي يصطدم به الجميع: لصق لقطة شاشة في الدردشة ينجح مع المكونات البسيطة ويتعثر مع أي شيء حقيقي. الوكيل يستنتج؛ والاستنتاج يكون خاطئا؛ فتقوم بتصحيحه؛ ثم تحترق الرموز؛ وفي النهاية تعيد البناء يدويا.
هناك خط أفضل. استخدم Codia AI لتحويل لقطة الشاشة إلى ملف Figma قابل للتعديل ومتعدد الطبقات أولا، ثم نظّفه تنظيفا سريعا. بعد ذلك صِل خادم Figma MCP بوكيلك. عندها يستهلك الوكيل بنية طبقات حقيقية ونصوصا حقيقية — إضافة إلى Variables والمكونات التي تضيفها أثناء التنظيف — لا صورة مسطحة. تتحسن جودة المخرجات، وتقل دورات التكرار، ويصبح العمل أقل شبها بمصارعة الأداة.
استخدم Codia Screenshot to Figma لتحويل لقطات الشاشة وصور واجهات المستخدم إلى طبقات Figma قابلة للتحرير قبل إعادة التصميم أو المقارنة أو التسليم.
ما هو خادم Figma MCP؟
خادم Figma MCP هو الجسر الرسمي بين ملفات Figma ووكلاء الذكاء الاصطناعي الذين يدعمون Model Context Protocol. وهو يعرض ملفات Figma والمكونات وVariables ورموز التصميم كبيانات منظمة يستطيع الوكيل قراءتها مباشرة، بدلا من إجباره على فك الصورة من لقطة شاشة.
عند الوصول إلى خطوة إعادة البناء، افتح Codia Screenshot to Figma وحوّل الصورة المرجعية إلى طبقات قابلة للتحرير قبل تنقيح التصميم.
المحررات التي تدعم MCP اليوم: VS Code وCursor وWindsurf وClaude Code وCodex.
المشكلة التي يحلها MCP
عندما تلصق لقطة شاشة في Cursor أو Claude Code وتقول "ابنِ هذا"، فإن الوكيل يفعل الآتي:
- ينظر إلى الصورة بالرؤية الحاسوبية
- يخمن بنية التخطيط
- يخمن المسافات
- يخمن الألوان
- يخمن المكونات
- يكتب الكود بناء على هذه التخمينات
كل "تخمين" هو موضع تتراكم فيه تكلفة الرموز وتتراجع الجودة. ملفات التصميم الحقيقية تحمل كل هذه المعلومات كبيانات، لا كبكسلات. MCP يعرّض هذه البيانات.
المشكلة التي يحلها Codia في هذا التدفق
يحتاج MCP إلى ملف Figma كي يكون مفيدا. إذا لم يكن لديك ملف — فقط لقطة شاشة للواجهة المرجعية التي تريد بناءها — فلن يساعدك MCP. ستعود إلى لصق صورة.
هنا يغلق Codia هذه الفجوة. لقطة شاشة → Codia → ملف Figma قابل للتعديل بطبقات مجمّعة بدلا من صورة مسطحة → جولة تنظيف قصيرة في Figma (تسمية الطبقات الأساسية، والمكونات، وVariables، وAuto Layout حيث يهم) → جاهز لـ MCP.
خط الأنابيب من ثلاث خطوات
الخطوة 1: حوّل لقطة الشاشة باستخدام Codia
خذ لقطة الشاشة المرجعية لديك — صفحة منافس، أو لقطة إلهام، أو شاشة إنتاج موجودة — وحولها إلى Figma باستخدام Codia AI:
- ارفع لقطة الشاشة بصيغة PNG أو JPG أو WebP إلى إضافة Figma الخاصة بـ Codia أو إلى تطبيق الويب
- شغّل التحويل (معظم الشاشات تصبح جاهزة للتعديل خلال دقائق)
- افتح النتيجة في Figma
المخرجات إطار Figma يحتوي على طبقات نصية قابلة للتعديل (مع اكتشاف الخط والحجم واللون)، وأشكال، وصور وأيقونات كطبقات صور مستقلة، وتسلسل طبقات مجمّع ومتداخل. لا يظهر Auto Layout إلا في بعض الصفوف والأعمدة التي يكتشف فيها Codia تخطيطا شبيها بـ flex؛ ومعظم النتيجة بتموضع مطلق، ولا ينشئ Codia مكونات أو Variables أو أسماء طبقات ذات دلالة. والأهم: أنها تحتوي على بنية — طبقات حقيقية بدلا من بكسلات — وهي الأساس الذي تبني عليه خطوة التنظيف.
لمزيد عن التحويل نفسه، راجع Screenshot to Figma: The Complete Guide.
الخطوة 2: نظّف ملف Figma لـ MCP
يكافئ MCP ملف Figma النظيف بشكل كبير. قم بجولة تنظيف قصيرة:
- طبّق Variables على الألوان. القيم السداسية الخام تمنح الوكيل سلاسل نصية؛ أما Variables فتعطيه رموزا. عندها يستخدم الوكيل نظام التصميم لديك بدلا من اختراع واحد.
- أضف Auto Layout إلى الحاويات التي ينبغي أن تكون مرنة — فـ Codia لا يطبّقه إلا على بعض الصفوف والأعمدة، لذا راجع الباقي. ينقل MCP هذا مباشرة إلى فهم الوكيل لكيفية سلوك التخطيط.
- سمِّ المكونات بشكل ذي معنى.
PrimaryButtonوNavItemوPricingCard— وليسGroup 47. يستخدم الوكيل هذه الأسماء في الكود الناتج. - حوّل العناصر المتكررة إلى مكونات لا إلى نسخ متفرقة. يعرض MCP المكونات كمفاهيم من الدرجة الأولى.
يوفّر عليك Codia ساعات من إعادة الرسم اليدوي — فتبدأ من طبقات قابلة للتعديل ومجمّعة بدلا من إعادة رسم الشاشة — لكنه لا يغني عن هذا التنظيف. فهو يستخدم أسماء عامة مثل group وtext وimage، ولا ينشئ مكونات أو Variables، ولا يضيف Auto Layout إلا حيث يكتشف صفا أو عمودا شبيها بـ flex. هذه الخطوة هي ما يجعل الملف جاهزا لـ MCP.
الخطوة 3: صِل MCP بمحررك وأنشئ
ثبّت وخيّر خادم Figma MCP في المحرر الذي تفضله. دليل الإعداد الرسمي: Figma MCP server guide.
ثم في مطالبتك، أشر إلى ملف Figma أو التحديد:
"استخدم ملف Figma [الرابط أو معرّف التحديد] لبناء مكون React يطابق هذا التصميم بدقة. استخدم Variables كنقاط رموز داخل Tailwind. طابق رموز التباعد."
الوكيل لديه الآن:
- تسلسل هرمي حقيقي للطبقات
- قيم تباعد حقيقية من Auto Layout
- رموز ألوان حقيقية من Variables
- تعريفات مكونات حقيقية
- لقطات شاشة اختيارية للتحديد (للتأكيد البصري)
وتكون المخرجات أقرب كثيرا إلى التصميم من خط الأساس القائم على "ألصق لقطة شاشة".
لماذا يتفوق هذا المسار على "لصق لقطة شاشة في الدردشة"
| النهج | ما يحصل عليه الوكيل | جودة المخرجات | تكلفة الرموز |
|---|---|---|---|
| لصق لقطة شاشة في الدردشة | بكسلات + مطالبتك | منخفضة إلى متوسطة، مع كثير من الاستنتاج | مرتفعة — تصحيحات كثيرة |
| Codia → تنظيف → MCP → الوكيل | طبقات قابلة للتعديل + تنظيفك (مكونات، Variables) + لقطة شاشة | متوسطة إلى عالية، مع استنتاج أقل | أقل — تصحيحات أقل |
| المسار نفسه مع تنظيف مربوط بنظام التصميم لديك | نفسه مع بيانات نظام التصميم | عالية | الأدنى |
عمليا: كلما حصل الوكيل على بنية أكثر كبيانات بدلا من بكسلات، قلّت دورات "صحح هذا" التي تحتاجها مهمة توليد الواجهة مقارنة بمطالبات اللقطة فقط — وتنخفض كذلك تكلفة الرموز.
خطوة بخطوة داخل Cursor
مثال عملي باستخدام Cursor تحديدا:
- في Figma، افتح الملف الذي أنشأه Codia ونظّفته في الخطوة 2. حدّد الإطار الذي تريد بناءه.
- في Cursor، ثبّت خادم Figma MCP (Settings → MCP → Add Server).
- في دردشة Cursor، اكتب: "باستخدام خادم Figma MCP، اجلب الإطار المحدد من ملف Figma الخاص بي وأنشئ مكون React + Tailwind يطابق التصميم بدقة. استخدم Variables كرموز لنظام Tailwind."
- يستدعي الوكيل أداة MCP، ويجلب البيانات المنظمة + لقطة شاشة للتحديد.
- ينشئ المكون. تكون النسخة الأولى أقرب بكثير إلى التصميم مما تعطيه مطالبة لقطة شاشة.
- كرر بطلب تعديلات محددة تشير إلى مصدر Figma نفسه.
الاقتران مع Claude Code
المسار نفسه، مع أدوات مختلفة قليلا. Claude Code يدعم MCP بشكل أصيل. ويتم تثبيت خادم Figma MCP بالطريقة نفسها. أسلوب المطالبة مطابق.
إذا كنت تستخدم Claude Code بالفعل لأعمال الخلفية، فإن إضافة خادم Figma MCP تتيح للوكيل نفسه بناء واجهات من ملفات Figma المحوّلة بواسطة Codia.
الاقتران مع Windsurf
الأمر نفسه هنا. دعم MCP في Windsurf يعني أن خادم Figma MCP يندمج بالطريقة نفسها كما في Cursor أو Claude Code.
المزالق الشائعة
تخطي خطوة Variables. إذا استخدم ملف Figma قيم hex خاما في كل مكان، فسيعيد MCP سلاسل خامة إلى الوكيل. طبّق Variables الخاصة بنظام التصميم — وهذا هو الفارق بين "اللون الصحيح للعلامة" و"لون قريب فقط من لون علامتك".
نسيان Auto Layout. من دون Auto Layout يستطيع MCP وصف المواقع، لكنه لا ينقل النية المرنة. يحوّل Auto Layout ذلك إلى "هذا صف flex مع فجوة 16px" — وهو شيء قابل للاستخدام بالنسبة للوكيل.
طلب الكثير في مطالبة واحدة. "ابنِ لوحة التحكم كاملة" أكبر من اللازم. "ابنِ مكون الشريط الجانبي المطابق لتحديد Figma" يعمل أفضل بكثير. ابنِ على مستوى المكونات ثم اجمعها.
عدم تحديد Figma بدقة. يجلب MCP ما اخترته. اختيار غامض = سياق غامض. حدّد الإطار الدقيق الذي تريده.
مزج مطالبات اللقطة مع MCP. إذا كان MCP مضبوطا لديك، فاستخدمه. لا تلصق لقطة شاشة إضافية إلى جانب مرجع MCP — سيرى الوكيل مصدرين للحقيقة وقد يختار ما يناسبه.
ما بعد اللقطات الفردية: بناء مكتبة مكونات
يتوسع هذا المسار:
- حوّل مجموعة من لقطات الشاشة التمثيلية باستخدام Codia
- حوّل النتيجة إلى مكونات داخل Figma
- طبّق Variables ونظام التصميم الخاص بك
- استخدم MCP لإنشاء مكتبة مكونات مقابلة في الكود
لتحويل دفعات، استخدم Visual Struct API — تعالج نقاط النهاية الدُفعية فيها صورا كثيرة دفعة واحدة، مع ردود webhook عند انتهائها.
متى لا تستخدم هذا المسار
- الأزرار أو الأيقونات البسيطة. أحيانا يكون لصق لقطة شاشة للوكيل أسرع فقط.
- التصاميم التي لديك بالفعل في Figma أصلا. تجاوز Codia وانتقل مباشرة إلى MCP.
- توليد الكود الذي لا يحتاج إلى دقة تصميمية. إذا كان "يبدو صحيحا تقريبا" كافيا، فقد يكون مسار اللقطة وحده كافيا.
الأسئلة الشائعة
هل يجب أن أدفع مقابل خادم Figma MCP؟
خادم Figma MCP الرسمي جزء من منصة Figma؛ راجع خطط Figma لمعرفة توفر MCP.
هل يرى الوكيل ملف Figma الفعلي أم واجهة API فقط؟
يعرض خادم MCP للوكيل بيانات منظمة من ملف Figma الخاص بك (الطبقات، الأسماء، المواضع، Variables، المكونات) ويمكنه إرجاع لقطات شاشة للتحديدات من أجل التأكيد البصري.
هل يمكنني استخدام هذا مع ملف Figma الخاص بي (وليس من Codia)؟
نعم — يعمل MCP مع أي ملف Figma منظم جيدا. Codia هو الجسر للحالات التي لا تملك فيها سوى لقطة شاشة، لا مصدرا أصليا في Figma.
ماذا لو كان ملف Figma المحوّل لدي فوضويا؟
توقّع جولة تنظيف قصيرة في كل الأحوال: يمنحك Codia طبقات قابلة للتعديل ومجمّعة، لكن التسمية والمكونات وVariables تبقى عليك. سمِّ الطبقات الأساسية، وحوّل العناصر المتكررة إلى مكونات، وطبّق Variables، وأضف Auto Layout حيث يهم. تتحسن مخرجات الوكيل بقدر جودة الملف.
هل يعمل هذا مع Auto / Claude / GPT داخل Cursor؟
نعم. MCP محايد للنموذج؛ الخادم يمد أي نموذج يستخدمه المحرر بالبيانات المنظمة.
كيف يقارن هذا مع Figma Make؟
Figma Make ينشئ واجهات من المطالبات داخل Figma؛ أما مسار Codia + MCP فينشئ الكود خارج Figma باستخدام ملف Figma باعتباره مصدر الحقيقة التصميمي. أدوات مختلفة، ومخرجات مختلفة.