تسليم التصميم بالذكاء الاصطناعي — سير عمل حديث مع سياق منظم

كان تسليم التصميم مشكلةً محلولة للمطورين البشريين منذ عام 2016 تقريبًا. Zeplin وInVision Inspect وAvocode ووضع Dev Mode الأصلي من Figma — جميعها تفعل الشيء ذاته: تمنح المطور واجهة ويب يمكنه فيها النقر على عقدة وقراءة خصائصها.

ينهار هذا سير العمل تمامًا حين يكون "المطور" وكيلَ ذكاء اصطناعي.

تشرح هذه المقالة السبب، وما يحتاجه الوكلاء فعلًا، وكيفية هيكلة سير عمل تسليم ينتج كودًا صحيحًا لا كودًا تقريبيًا. الحل هو figmascope — أداة تعمل في المتصفح وتصدّر حزمة سياق منظمة مباشرةً من ملف Figma الخاص بك. للاطلاع على سير العمل خطوة بخطوة، راجع Figma إلى Claude Code أو Figma إلى Cursor.

افتراض تسليم التصميم

كل أداة تسليم بُنيت قبل عام 2023 تتضمن نفس الافتراض الضمني: يوجد إنسان في الطرف الآخر يتصفح ويقرأ القيم ويتخذ قرارات الحكم. مهمة الأداة هي عرض المعلومات بوضوح كافٍ حتى يتمكن مطور ماهر من العمل منها دون تبديل السياق باستمرار.

هذا الافتراض مضمّن في تجربة مستخدم هذه الأدوات بأكملها:

• تُعرض القيم في لوحة وليس في ملف مُصدَّر
• تُولَّد مقتطفات الكود عند الطلب لكل تحديد، لا للملف بأكمله
• يتنقل المطور في التصميم بالنقر، لا باستعلام بنية بيانات
• تُكتب التعليقات التوضيحية بلغة طبيعية، لا بتنسيق قابل للمعالجة آليًا

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

ما يحتاجه الوكلاء فعلًا من التصميم

يحتاج وكيل الذكاء الاصطناعي الذي يتلقى مهمة تصميم إلى:

1. مواصفة يقرأها قبل فعل أي شيء — القيود والنطاق واتفاقيات تسمية الرموز وملاحظات الإصدار. لا يُفهم ضمنيًا من التحويم فوق لوحة؛ بل مكتوب صراحةً.
2. قاموس رموز مكتوبة الأنواع — ليس قيم hex خام وأرقام بكسل، بل رموز مسماة ومكتوبة الأنواع مع قيمها. يحتاج الوكيل أن يعرف أن #d96a3a هو color.accent لكي يتمكن من توليد أسماء فئات Tailwind الصحيحة أو خصائص CSS المخصصة.
3. شجرة تخطيط كاملة للشاشة — التسلسل الهرمي لكل عقدة وعلاقاتها التخطيطية وأحجامها ومراجع رموزها. لا عقدة واحدة في كل مرة عند الطلب؛ بل الشجرة الكاملة في الذاكرة.
4. سلاسل موحدة — كل محتوى النص، مُوحَّد، مع مفاتيح موارد. لا مبعثر عبر العقد الفردية.
5. حقيقة بصرية أساسية — عرض مرجعي يمكن للوكيل مقارنة مخرجاته به. لقطة شاشة بحجم 2× للتصميم.
6. أسماء المكونات — معرّفات قانونية يجب أن يستخدمها الكود المُولَّد، لا أسماء مخترعة.

لا توفر أدوات التسليم التقليدية أيًا من هذه في شكل يمكن للوكيل استخدامه. تنتج figmascope جميعها في ملف zip واحد — الصق رابط Figma واحصل على الحزمة. لا رفع، لا خلفية. تنسيق الرمز مغطى بعمق في تصدير رموز التصميم لوكلاء الذكاء الاصطناعي.

لماذا تفشل لقطات الشاشة

أسرع حل يجربه الناس: تصدير PNG من Figma وتمريره للوكيل مع موجه مثل "نفّذ هذه الشاشة." ينتج الوكيل كودًا. أحيانًا يبدو قريبًا. لكن:

• قيم التباعد مُخمَّنة. يرى الوكيل "فجوة تقريبًا 16px" وينتج 14px أو 20px.
• الألوان موصوفة لا مستخرجة. "البرتقالي الدافئ" يصبح #E67A40 بدلًا من #D96A3A.
• الطباعة مستنتجة. أوزان الخطوط وارتفاعات الأسطر تقريبية.
• أسماء المكونات مخترعة. سيسمي الوكيل الأشياء UserCard بينما التصميم يسميها ProfileTile.
• السلاسل تُستخرج أحيانًا بالتعرف الضوئي على الحروف وأحيانًا تُعاد صياغتها. تُعاد كتابة نصوصك.

كل خطأ من هذه صغير منفردًا. معًا تتراكم لتشكل مكونًا يحتاج تصحيحًا يدويًا كبيرًا — مما يُبطل معظم وفورات الوقت من استخدام وكيل أصلًا.

راجع لماذا تفشل لقطات الشاشة في توليد كود الذكاء الاصطناعي للحصول على تفصيل دقيق مع أمثلة.

تخبر لقطة الشاشة الوكيل بما يبدو عليه التصميم. يخبره السياق المنظم بما هو التصميم.

أدوات التسليم التقليدية — تقييم

Zeplin

الواجهة الرئيسية لـ Zeplin هي تطبيق ويب يفحص فيه المطورون التصاميم عقدة بعقدة. تحتوي على ميزة "Styleguide" التي تجمع الألوان والطباعة من الملف — أقرب شيء لتصدير الرمز. لا تصدّر أشجار التخطيط القابلة للقراءة آليًا. ميزة "Connected Components" تربط مكونات Storybook بإطارات Figma، وهو مفيد للتوثيق لكنه لا يساعد الوكيل على توليد كود جديد.

وضع Dev Mode من Figma

إجابة Figma الأصلية على التسليم. تولّد لوحة الكود CSS من العقد المحددة وتعرض أسماء المتغيرات عند إعدادها. مصممة جيدًا للمطورين البشريين. لا تدعم التصدير على مستوى الملف، ولا تولّد أشجار تخطيط، ومقتطفات كودها خاصة بـ CSS فقط (لا رموز محايدة للإطار). تتطلب مقعد Dev Mode.

Avocode

اكتسبت Abstract شركة Avocode ثم توقفت في 2022. تُذكر لأنها لا تزال تظهر في نتائج البحث عن "أدوات تسليم التصميم" وتجلب بعض حركة المقارنة. لم تعد متاحة.

Locofy وBuilder.io وAnima

تحاول هذه الأدوات توليد كود إطار فعلي (React وNext.js وHTML) مباشرةً من تصاميم Figma. إنها أقرب لمساحة المشكلة — تفهم أن المخرجات يجب أن تكون كودًا لا مجرد لوحة خصائص. لكنها تولد كودًا تنشره، لا سياقًا تُغذّيه لوكيل. الفرق مهم: لا يمكنك أن تسأل "نفّذ شاشة الإعدادات، مع إعادة استخدام مكون UserAvatar الذي بنيته بالفعل" حين تولّد الأداة الكود بنفسها. يمكنك أن تسأل ذلك من Claude Code أو Cursor حين أعطيتهما السياق المنظم.

راجع figmascope مقابل Locofy وfigmascope مقابل Builder.io للمقارنات التفصيلية.

كيف يبدو التسليم الجاهز للوكيل

للتسليم الجاهز للوكيل ثلاث خصائص تميزه عن التسليم التقليدي:

1. إنه قطعة أثرية ملفية لا واجهة مستخدم

قطعة تسليم التصميم هي ملف إصداري (أو مجموعة ملفات) يعيش في المستودع جانب الكود. لا رابط مشترك يتطلب تسجيل دخول. لا لوحة في تطبيق ويب. دليل design/ بملفات JSON وPNG وMarkdown.

لهذا عدة نتائج:

• إنه مُتحكَّم بإصداره. يمكنك git diff تغييرات الرمز بين سباقات التصميم.
• إنه قابل للاستخدام دون اتصال. لا يحتاج الوكيل لاستدعاء API وقت توليد الكود.
• إنه قابل للتكرار. نفس ملف Figma + إصدار figmascope ينتج نفس الحزمة.

2. يستخدم بيانات مكتوبة الأنواع لا نصًا مُصيَّرًا

رموز التصميم في tokens.json مكتوبة الأنواع — $type: "color" و$type: "dimension" — لا مجرد سلاسل في جدول Markdown. يحتوي تخطيط IR في screens/*.json على أنواع عقد صريحة (stack وoverlay وabsolute وleaf) ومراجع رموز باستخدام تدوين $ref. للسلاسل في strings.json مفاتيح بتدوين النقطة، لا مجرد تسميات بشرية القراءة.

البيانات المكتوبة الأنواع تعني أن الوكيل يمكنه التفكير فيها برمجيًا: "جميع العقد التي لديها background.$ref == color.surface تستخدم نفس لون الخلفية"، لا "جميع العقد التي تبدو على نفس الخلفية."

3. يتضمن وثيقة مواصفة يقرأها الوكيل أولًا

CONTEXT.md هو العقد بين المصمم والوكيل. يصف:

• أي الإطارات في النطاق وأيها ليس كذلك
• اتفاقيات تسمية الرموز المستخدمة
• أمثلة عملية — "عقدة بـ background: { $ref: 'color.surface' } يجب أن تستخدم bg-surface في Tailwind"
• الشذوذات المعروفة — الإطارات التي كان التخطيط التلقائي غائبًا فيها واستنتج figmascope التخطيط من مواضع العناصر الأبناء
• إصدار figmascope المستخدم وطابع وقت التصدير

التسليم التقليدي ليس له مكافئ. يحتوي Dev Mode على حقل "ملاحظات مطور" لكل إطار، لكنه مكتوب عشوائيًا من مصمم بلا هيكل. يُولَّد CONTEXT.md باتساق من المحتوى الفعلي للملف.

سير عمل التسليم خطوة بخطوة

1. يضع المصمم علامة على الإطارات الجاهزة — في Figma، يُحدد المصمم الإطارات الجاهزة للتنفيذ (اتفاقية تسمية، تسمية "جاهز"، أيًا كان ما يستخدمه فريقك).
2. يشغّل المطور figmascope — الصق رابط الملف و PAT على figmascope.dev، انقر تصدير، نزّل ملف zip.
3. فك ضغط في design/ — unzip figmascope-<fileKey>.zip -d design/
4. ارفع design/ للمستودع — الحزمة هي قطعة تسليم. يتضمن طلب السحب كلًا من حزمة التصميم والتنفيذ.
5. ينفذ الوكيل — وجّه Claude Code أو Cursor إلى design/CONTEXT.md وملف JSON للشاشة ذات الصلة. يولّد الوكيل كودًا يستخدم قيم الرموز وأسماء المكونات والسلاسل من الحزمة.
6. راجع وكرر — يراجع المطور مقابل screens/*.png، يلاحظ أي ثغرات، ويحسّن المطالبات.

عندما يتغير التصميم، كرر من الخطوة 2. يخبرك الطابع الزمني لـ _meta.json متى وُلِّدت الحزمة آخر مرة مقارنةً بآخر تعديل لملف Figma — فحص بسيط للنضارة.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

ما لا يتغير

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

السياق المنظم لا يحل محل محادثة المصمم-المطور أيضًا. إذا كان اسم رمز غامضًا، أو كان المكون يتصرف بشكل مختلف عبر نقاط التوقف أكثر مما يوحي به الإطار الثابت، فذلك يحتاج محادثة. يلتقط CONTEXT.md ما هو موجود في الملف؛ لا يستنتج ما نوى المصمم للحالات التي لا يعالجها الملف.

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

قائمة مراجعة: هل تسليم تصميمك جاهز للوكيل؟

• رموز التصميم مصدَّرة إلى ملف JSON قابل للقراءة آليًا (لا مجرد لوحة Figma Variables أو صفحة Notion)
• للرموز أسماء دلالية، ليس فقط قيم hex أو أرقام بكسل
• التسلسل الهرمي للتخطيط لكل شاشة متاح كملف بيانات منظمة، لا مجرد لقطة شاشة
• سلاسل واجهة المستخدم موحدة بمفاتيح موارد مستقرة
• أسماء المكونات قانونية ومتسقة بين ملف التصميم وقاعدة الكود
• وثيقة مواصفة موجودة يمكن للوكيل قراءتها قبل التنفيذ
• قطعة التسليم مُتحكَّم بإصدارها جانب الكود

إذا كان معظمها مفقودًا، سينتج الوكيل كودًا يحتاج تصحيحًا أكثر من البدء من الصفر بسياق جيد. الحزمة التي تولّدها figmascope تستوفي جميعها في تصدير واحد. زر مدونة figmascope لدراسات الحالة وتعمق أعمق في كل عنصر من عناصر قائمة المراجعة، أو راجع بديل Figma Inspector للمقارنة المباشرة مع Dev Mode والإضافات.