لقد فتحت ملف Figma يحمل وسم final_FINAL_v3 لتجد ثلاثين إطاراً (frame) غير مسمى، وطبقة خلفية مقفلة، وزراً متداخلاً داخل مجموعة تحتوي أيضاً على دائرة زخرفية عشوائية. هذا الأمر أكثر شيوعاً مما يرغب أي شخص في الاعتراف به. عندما تغذي تلك الفوضى بأداة برمجة تعمل بالذكاء الاصطناعي مثل Codex، فإن المخرجات تعكس المدخلات. لا تزال قاعدة "المدخلات الرديئة تؤدي إلى مخرجات رديئة" (Garbage in, garbage out) سارية، حتى مع النماذج اللغوية الكبيرة.
تشريح عملية التسليم الفوضوية
يعمل المصممون بسرعة. يقومون بمضاعفة الإطارات، ويتركون الاستكشافات القديمة مرئية، ويعتمدون على المحاذاة بالعين بدلاً من التخطيط التلقائي (auto-layout) المنظم. ينتهي بك الأمر بأسماء طبقات مثل "Frame 3827" بجانب أزرار وظيفية. وتتشارك بقع التدرج اللوني الزخرفية نفس المجموعة مع زر اتخاذ الإجراء (call-to-action) الأساسي. كما تغلف نماذج المحاكاة (mockups) الواجهة الحقيقية بإطار (chrome) يبدو وكأنه محتوى. وتظل الطبقات المخفية مرئية في الملف، بانتظار إرباك أي محلل (parser) آلي.
بالنسبة للمطور الذي يستخدم Codex، لا تكمن المشكلة في الكسل من أي من الطرفين. يفتقر الذكاء الاصطناعي إلى القدرة البشرية على التعرف على الأنماط؛ فهو يقرأ شجرة الطبقات حرفياً. عندما يضع المصمم زراً، وعنواناً، وتغبيشاً للخلفية (background blur) داخل مجموعة واحدة مسطحة، يعاملها Codex كعناصر متساوية في الوزن الهيكلي. والنتيجة هي واجهة أمامية (frontend) تبدو محطمة هيكلياً حتى قبل أن تراجع الألوان.
سير عمل يقربك من النتيجة المطلوبة
لا يزال بإمكانك تقديم كود نظيف من مصدر فوضوي إذا تصرفت كمحرر بدلاً من مجرد محول بسيط. الهدف هو تزويد Codex بسياق كافٍ لتقديم تخمينات مدروسة، ثم تقييد تلك التخمينات لتبقى ضمن بنية واجهة أمامية منطقية.
استخرج كل شيء قبل أن يراه الذكاء الاصطناعي. قم بتفعيل وضع المطور (Dev Mode) إذا كان لديك صلاحية الوصول. انسخ خصائص CSS الخام من لوحة الفحص (inspect panel). قم بتصدير متغيرات الألوان وأنماط النصوص. قم بتغذية هذه البيانات المنظمة في Codex جنباً إلى جنب مع أمرك (prompt). تُظهر لقطات الشاشة الحقيقة المكانية؛ بينما تمنحك البيانات الوصفية (metadata) أكواد hex دقيقة، ومجموعات الخطوط (font stacks)، وارتفاعات الأسطر. غياب أحدهما يجعل النموذج يخمن نصف المعادلة.
كن حازماً بشأن أنظمة التخطيط في أوامرك. لا تطلب من Codex أبداً "برمجة هذه الصفحة" فحسب. أخبره بالضبط بما يجب استخدامه: "ابنِ شريط التنقل باستخدام CSS Flexbox وشبكة لوحة التحكم باستخدام CSS Grid. لا تستخدم التموضع المطلق (absolute positioning) إلا إذا كنت تضع شارة التنبيه بالنسبة للأيقونة." غالباً ما تلجأ أدوات الذكاء الاصطناعي إلى التموضع المطلق لأنها تحلل إحداثيات x-y الثابتة مباشرة من ملف التصميم. التعليمات الصريحة تتجاوز هذا الميل.
استخدم لقطات الشاشة كضوابط. قم بتصدير الإطارات بدقة 2x. ارفعها جنباً إلى جنب مع سياق النص الخاص بك. عندما يولد Codex المسودة الأولى، افتح النتيجة في المتصفح بجانب لقطة الشاشة. ابحث عن انزياح المسافات، والحدود المفقودة، وعدم تطابق أوزان الخطوط. عادة ما يلتقط الذكاء الاصطناعي التكوين العام بشكل صحيح بينما يخطئ في المسافات الداخلية (padding) المحددة.
خطط للتصحيح. قارن المخرجات التي تم عرضها بمرجعك البصري وقم بإصلاح الأخطاء يدوياً. قد يحول الذكاء الاصطناعي تسمية نصية إلى وسم صورة أو يغلف بطاقة في div عام بدلاً من <article> أو <section>. مرحلة المراجعة هذه ليست اختيارية؛ إنها المرحلة التي تحول فيها الكود المولد إلى كود جاهز للإنتاج.
أين يضل الذكاء الاصطناعي طريقه
حتى مع سير عمل دقيق، هناك أنماط فوضوية معينة تضلل Codex باستمرار.
يعد الضجيج الزخرفي أكبر فخ. غالباً ما تتضمن ملفات Figma توهجات خلفية، وقوالب شريط الحالة، وأيقونات توضيحية ليست جزءاً من الواجهة الوظيفية. بدون تسميات واضحة، يبرمجها الذكاء الاصطناعي كعناصر DOM دائمة. ينتهي بك الأمر بوسوم div مخصصة لدوائر مموهة كان ينبغي أن تكون مجرد background أو box-shadow في CSS.
التسلسل الهرمي المسطح يكسر عملية اكتشاف المكونات. في الملف النظيف، تكون البطاقة عبارة عن إطار (auto-layout frame) يحتوي على صورة، وعنوان، وإجراء. أما في الملف الفوضوي، فقد تعيش هذه العناصر الثلاثة في المستوى الجذر (root level)، وهي محاذية بصرياً ولكنها يتيمة هيكلياً. يفتقد Codex حدود البطاقة تماماً ويخرج تسلسلاً مسطحاً من العناصر بدون أب مشترك.
الفصل بين الإشارة والضجيج
تثير هذه المسودة أسئلة محددة يواجهها كل مطور عند الربط بين التصميم والكود المولد بواسطة الذكاء الاصطناعي.
هل تثق في بيانات Figma الوصفية (metadata) أم في لقطات الشاشة أكثر؟
Trust both, but for different jobs. Use Figma metadata for exact values: colors, font sizes, spacing tokens, and exported assets. Screenshots win on structure and visual hierarchy. If the metadata says a layer sits at x: 120, y: 300, but the screenshot shows it centered inside a card, trust the screenshot for layout and the metadata for styling. Let the screenshot serve as your ground truth. Let the inspect panel fill in the exact values.
How do you separate UI from device frames?
Before you export anything, hide every non-UI layer. Select the phone mockup or desktop chrome and toggle visibility off. If the file is too messy to tell what is template and what is content, look for repeating elements across multiple screens. The status bar, home indicator, and navigation shell usually sit in identical positions. The actual buttons, forms, and content sit in the variable middle. Hide everything that appears fixed across every screen. What remains is your real interface.
How do you find component boundaries in a bad file?
Look for visual clustering, then verify with spacing. If four elements sit together with consistent 16px gaps and share a common background fill, they probably belong in one container even if the designer never grouped them. Check the Figma layer list for consecutive stacking.