شما یک فایل Figma را باز کردهاید که برچسب final_FINAL_v3 دارد، اما تنها با سی فریم بدون نام، یک لایه پسزمینه قفلشده و دکمهای مواجه میشوید که درون گروهی قرار گرفته که یک دایره تزئینی تصادفی نیز در آن است. این اتفاق رایجتر از آن چیزی است که هر کسی حاضر به اعتراف به آن باشد. وقتی این آشفتگی را به یک ابزار کدنویسی هوش مصنوعی مانند Codex میدهید، خروجی دقیقاً بازتابدهنده ورودی خواهد بود. قاعده «ورودی بیکیفیت، خروجی بیکیفیت» حتی برای مدلهای زبانی بزرگ نیز همچنان صادق است.
آناتومی یک هندآف (Handoff) نامنظم
طراحان سریع کار میکنند. آنها فریمها را کپی میکنند، طرحهای آزمایشی قدیمی را قابل مشاهده باقی میگذارند و به جای استفاده از auto-layout ساختاریافته، به تراز کردن چشمی تکیه میکنند. در نهایت با نام لایههایی مثل "Frame 3827" در کنار دکمههای کاربردی مواجه میشوید. لکههای رنگی (gradient blobs) تزئینی، همان گروهی را با دکمه اصلی فراخوان (call-to-action) شما به اشتراک میگذارند. مدلهای دستگاه (Device mockups)، رابط کاربری واقعی را در قابهایی میپیچند که شبیه به محتوا به نظر میرسند. لایههای مخفی در فایل باقی میمانند و منتظر میمانند تا هر پارسر خودکاری را گیج کنند.
برای توسعهدهندهای که از Codex استفاده میکند، مشکل تنبلی هیچیک از طرفین نیست. هوش مصنوعی فاقد تشخیص الگوی انسانی است. این ابزار درخت لایهها را به صورت تحتاللفظی میخواند. وقتی یک طراح، یک دکمه، یک تیتر و یک محوکننده پسزمینه (background blur) را درون یک گروه تخت (flattened group) قرار میدهد، Codex با آنها به عنوان خواهر و برادرهایی با وزن ساختاری برابر برخورد میکند. نتیجه، یک فرانتاِند است که حتی قبل از بررسی رنگها، از نظر ساختاری شکسته به نظر میرسد.
گردشی از کار که شما را به هدف نزدیک میکند
شما همچنان میتوانید با منبعی نامنظم، کد تمیزی تحویل دهید، به شرطی که به جای یک تبدیلکننده ساده، مانند یک ویراستار عمل کنید. هدف این است که به Codex بافت (context) کافی بدهید تا حدسهای آگاهانهای بزند، و سپس آن حدسها را محدود کنید تا در چارچوب یک معماری فرانتاِند منطقی باقی بمانند.
همه چیز را قبل از اینکه هوش مصنوعی آن را ببیند، استخراج کنید. اگر دسترسی دارید، Dev Mode را فعال کنید. ویژگیهای خام CSS را از پنل inspect کپی کنید. متغیرهای رنگی و استایلهای متنی را اکسپورت کنید. این دادههای ساختاریافته را همراه با دستور (prompt) خود به Codex بدهید. اسکرینشاتها واقعیت فضایی را نشان میدهند؛ متادیتا نیز کدهای دقیق hex، فونتها و ارتفاع خطوط را در اختیار شما قرار میدهد. نبود هر یک از اینها باعث میشود مدل در نیمی از معادله، حدس بزند.
در دستورات (prompts) خود نسبت به سیستمهای چیدمان (layout) سختگیر باشید. هرگز از Codex نخواهید که صرفاً «این صفحه را کدنویسی کن». دقیقاً به او بگویید از چه چیزی استفاده کند: «ناوبری را با CSS Flexbox و شبکه داشبورد را با CSS Grid بساز. از absolute positioning استفاده نکن، مگر اینکه بخواهی نشانگر اعلان (notification badge) را نسبت به آیکون قرار دهی.» ابزارهای هوش مصنوعی اغلب به صورت پیشفرض از absolute positioning استفاده میکنند، زیرا مختصات ثابت x-y را مستقیماً از فایل طراحی استخراج میکنند. دستورات صریح این تمایل را خنثی میکنند.
از اسکرینشاتها به عنوان حفاظ استفاده کنید. فریمها را با رزولوشن 2x اکسپورت کنید. آنها را همراه با متن خود آپلود کنید. وقتی Codex اولین نسخه را تولید کرد، نتیجه را در مرورگر و در کنار اسکرینشات باز کنید. به دنبال انحراف در فاصلهگذاری (spacing drift)، نبودِ حاشیهها (borders) و عدم تطابق وزن فونت باشید. هوش مصنوعی معمولاً ترکیببندی کلی را درست تشخیص میدهد، اما در جزئیات padding دچار خطا میشود.
برای اصلاح برنامهریزی کنید. خروجی رندر شده را با مرجع بصری خود مقایسه کنید و خطاها را دستی اصلاح کنید. هوش مصنوعی ممکن است یک برچسب متنی را به یک تگ تصویر تبدیل کند یا یک کارت را به جای استفاده از <article> یا <section>، درون یک div معمولی قرار دهد. این مرحله بازبینی اختیاری نیست؛ این مرحلهای است که در آن کد تولید شده را به کد قابل استفاده در محیط عملیاتی (production code) تبدیل میکنید.
جایی که هوش مصنوعی گم میشود
حتی با یک گردش کار دقیق، الگوهای نامنظم خاصی همواره Codex را به چالش میکشند.
نویزهای تزئینی بزرگترین چالش هستند. فایلهای Figma اغلب شامل درخششهای پسزمینه، قالبهای نوار وضعیت و آیکونهای گرافیکی هستند که بخشی از رابط کاربری عملکردی نیستند. بدون برچسبهای واضح، هوش مصنوعی آنها را به عنوان عناصر دائمی DOM کدنویسی میکند. در نهایت، با تگهای div اختصاصی برای دایرههای محو شدهای مواجه میشوید که باید صرفاً یک background یا box-shadow در CSS میبودند.
سلسلهمراتب تخت (Flattened hierarchy)، تشخیص کامپوننت را مختل میکند. در یک فایل تمیز، یک کارت یک فریم auto-layout شامل تصویر، عنوان و یک دکمه عملیاتی است. در یک فایل نامنظم، این سه عنصر ممکن است در سطح ریشه (root level) قرار داشته باشند؛ یعنی از نظر بصری تراز شدهاند اما از نظر ساختاری یتیم (بدون والد) هستند. Codex مرز کارت را کاملاً نادیده میگیرد و مجموعهای تخت از عناصر را بدون هیچ والد مشترکی خروجی میدهد.
جداسازی سیگنال از نویز
این بحث سوالات خاصی را مطرح میکند که هر توسعهدهندهای هنگام پیوند دادن طراحی و کد تولید شده توسط هوش مصنوعی با آنها روبرو میشود.
آیا به متادیتای Figma بیشتر اعتماد میکنید یا به اسکرینشاتها؟
به هر دو اعتماد کنید، اما برای وظایف متفاوت. برای مقادیر دقیق از متادیتای Figma استفاده کنید: رنگها، اندازهی فونتها، توکنهای فاصلهگذاری (spacing tokens) و داراییهای خروجی (exported assets). اسکرینشاتها در ساختار و سلسلهمراتب بصری برنده هستند. اگر متادیتا بگوید یک لایه در x: 120, y: 300 قرار دارد، اما اسکرینشات آن را در مرکز یک کارت نشان میدهد، برای چیدمان (layout) به اسکرینشات و برای استایلدهی (styling) به متادیتا اعتماد کنید. اجازه دهید اسکرینشات به عنوان مرجع اصلی (ground truth) شما عمل کند. اجازه دهید پنل Inspect مقادیر دقیق را پر کند.
چگونه UI را از قابهای دستگاه (device frames) جدا میکنید؟
قبل از خروجی گرفتن از هر چیزی، تمام لایههای غیر UI را مخفی کنید. موکاپ گوشی یا قاب دسکتاپ (desktop chrome) را انتخاب کرده و نمایش (visibility) آن را خاموش کنید. اگر فایل بیش از حد نامنظم است و نمیتوان تشخیص داد چه چیزی قالب (template) و چه چیزی محتوا (content) است، به دنبال عناصر تکرار شونده در چندین صفحه بگردید. نوار وضعیت (status bar)، نشانگر خانه (home indicator) و پوسته ناوبری (navigation shell) معمولاً در موقعیتهای یکسانی قرار دارند. دکمهها، فرمها و محتوای واقعی در بخش متغیر میانی قرار میگیرند. هر چیزی را که در تمام صفحات ثابت به نظر میرسد، مخفی کنید. آنچه باقی میماند، رابط کاربری واقعی شماست.
چگونه در یک فایل نامنظم، مرزهای کامپوننت (component) را پیدا میکنید؟
به دنبال خوشهبندی بصری (visual clustering) باشید و سپس با بررسی فاصلهها (spacing) آن را تأیید کنید. اگر چهار عنصر با فاصلههای ثابت ۱۶ پیکسلی در کنار هم قرار گرفتهاند و رنگ پسزمینه (background fill) مشترکی دارند، احتمالاً همگی متعلق به یک کانتینر (container) هستند، حتی اگر طراح آنها را گروهبندی نکرده باشد. لیست لایههای Figma را برای بررسی قرارگیری پشت سر هم (consecutive stacking) آنها چک کنید.