يمكن للذكاء الاصطناعي إنشاء تطبيق React وظيفي في ثوانٍ معدودة، وتعد أدوات مثل GeekyAnts باستعادة ذلك الكود الذي تم إنشاؤه حديثاً إلى Figma دون فقدان هيكلية نظام التصميم. هذا الادعاء مهم لأن فرق التصميم كانت تضطر للبدء من الصفر في كل مرة يظهر فيها كود مكتوب بواسطة الذكاء الاصطناعي، مما يؤدي إلى تضخم وقت وتكلفة إعادة التصميم.

لسنوات، بدت عملية التسليم بسيطة على الورق: يصمم المصممون الشاشات في Figma، ويعيد المطورون كتابة تلك الشاشات برمجياً، ويحتفظ كل طرف بنسخته الخاصة من التخطيط. لكن مولدات الكود المدعومة بالذكاء الاصطناعي حطمت ذلك الإيقاع. حيث يقدم محرك الذكاء الاصطناعي مشروع React جاهزاً للتشغيل، ولكن لا توجد طريقة مباشرة لاستيراد المكونات الناتجة مرة أخرى إلى ملف التصميم الأصلي. والنتيجة هي حلقة مفرغة ومؤلمة من "الكود أولاً، ثم التصميم لاحقاً" التي تؤدي إلى تآكل لغة التصميم المشتركة وتزيد من أعباء الصيانة.

لماذا يقصر الـ DOM عن تلبية الاحتياجات

تبدأ معظم أدوات الهندسة العكسية باستخدام نموذج كائن المستند (DOM)، وهو تمثيل المتصفح لعناصر HTML. يتعامل الـ DOM مع كل قطعة مرئية كعنصر <div أو <span> عام. ولا يمكنه التمييز بين الزر والبطاقة (card)، كما أنه لا يعرف ما إذا كانت مجموعة من العناصر تنتمي إلى مكون رئيسي (master component) في نظام تصميم ما. عندما تحتوي الصفحة على عشرة أزرار، يكتفي الـ DOM بالإبلاغ عن عشر طبقات مجهولة. وتختفي الصلة بمكتبة المكونات الأصلية، مما يترك المصممين أمام فوضى متشابكة من الأشكال غير المجمعة التي غالباً ما تتطلب جهداً في التنظيف أكثر من إعادة بناء الشاشة من الصفر.

يوفر React Fiber خريطة أكثر ثراءً

يحافظ المجدول الداخلي لـ React، والذي يسمى Fiber، على شجرة من المكونات، كاملة بالأسماء، وعلاقات الأب والابن، ومجموعات الخصائص (property bags). ومن خلال قراءة هيكل Fiber بدلاً من HTML الذي تم عرضه، يمكن لأداة الهندسة العكسية تحديد أن عنصر <div معين هو في الواقع مكون PrimaryButton ، وأنه موجود داخل مكون Header ، وأنه يحمل مجموعة من الـ props التي تحدد حالته. هذا الفهم يحافظ على القصد الذي وضعه المطور الأصلي — أو الذكاء الاصطناعي الذي أنشأ الكود — على واجهة المستخدم.

تستخدم GeekyAnts تقنية استخراج React Fiber لجلب الكود الحي إلى ملفات Figma قابلة للتحرير.

كيف يحل سير العمل الجديد المشكلات الحقيقية

توسيع المتغيرات (Variant expansion)

تلتقط طرق الالتقاط التقليدية فقط الحالة المرئية للمكون — على سبيل المثال، زر في حالته الافتراضية عند عدم التمرير (hover-off). ومن خلال فحص تعريف المكون في شجرة Fiber، تقوم الأداة بحصر كل متغير (variant) تم التصريح عنه في الكود المصدري: مثل hover، وfocused، وdisabled، وloading، وما إلى ذلك. ثم تقوم بإنشاء مجموعة مكونات Figma (Figma Component Set) تجمع كل تلك الحالات معاً، مما يعكس قصد نظام التصميم دون الحاجة إلى التكرار اليدوي.

رسم خرائط التخطيط (Layout mapping)

تعتمد تخطيطات الويب بشكل كبير على CSS Flexbox، بينما المعادل لها في Figma هو Auto Layout. إن وجود طبقة ترجمة تربط خصائص Flexbox (الاتجاه، التبرير، المحاذاة، الفجوات) مباشرة بمعايير Auto Layout يعني أن المسافات، وسلوك تغيير الحجم، والمحاذاة ستظل محفوظة خلال عملية النقل. لم يعد المصممون بحاجة إلى إعادة بناء حاويات flex المعقدة يدوياً.

تحفيز الحالات (State triggering)

العديد من قطع واجهة المستخدم — مثل النوافذ المنبثقة (modals)، والقوائم المنسدلة (dropdowns)، والأكورديون (accordions) — تكون مخفية في الـ DOM حتى تقوم JavaScript بتغيير الحالة. ولأن شجرة Fiber تسجل هذا المنطق، يمكن لأداة الهندسة العكسية تحفيز تلك الحالات برمجياً، وإظهار العناصر المخفية، والتقاطها كأجسام تصميم. والنتيجة هي ملف تصميم كامل يتضمن كل قطعة تفاعلية، وليس فقط ما كان مرئياً في البداية عند التحميل.

مجموعة الأدوات الناشئة

  • GeekyAnts – تستخرج React Fiber لإنتاج ملفات Figma حية وقابلة للتحرير تحترم حدود المكونات.
  • Anima – تركز على المسار الأمامي، حيث تحول تصميمات Figma إلى كود React أو Vue.
  • Locofy.ai – تستخدم الذكاء الاصطناعي لتحويل تخطيطات Figma إلى كود مستجيب، مع التركيز على السرعة.
  • Builder.io – تستعيد مكونات HTML إلى Figma.
  • Codia AI – تحول لقطات الشاشة إلى ملفات Figma منظمة.

التبعات على الفرق والميزانيات

عندما تتباعد عملية التصميم والتطوير، يصبح إصلاح عدم الاتساق مكلفاً للغاية.

الحجج المضادة والقيود

(تم ترك هذا القسم فارغاً عن قصد)

ما يجب مراقبته مستقبلاً

(تم ترك هذا القسم فارغاً عن قصد)

الخلاصة

إن قراءة شجرة Fiber الداخلية لـ React بدلاً من الـ DOM السطحي تحول حلقة "البرمجة أولاً، التصميم لاحقاً" المرهقة إلى مسار ذي اتجاهين. إذ أصبح بإمكان التطبيقات التي يتم إنشاؤها بواسطة الذكاء الاصطناعي (AI) الآن العودة إلى Figma دون فقدان هيكلية المكونات. وبالنسبة للفرق التي تعاني من انحراف التصميم (design drift) وارتفاع تكاليف الصيانة، قد يمثل هذا التحول الفرق بين سباق إعادة تصميم فوضوي وبين سير عمل منضبط يعتمد على المكونات أولاً.