פתחתם קובץ Figma שתויג ב-final_FINAL_v3 רק כדי למצוא שלושים פריימים (frames) ללא שם, שכבת רקע נעולה, וכפתור מקונן בתוך קבוצה שמכילה גם עיגול דקורטיבי אקראי. זה נפוץ יותר ממה שכולם רוצים להודות. כשמזינים את הכאוס הזה לכלי קידוד מבוסס AI כמו Codex, הפלט משקף את הקלט. הכלל "Garbage in, garbage out" עדיין תקף, גם עם מודלי שפה גדולים.
האנטומיה של מסירה (Handoff) מבולגנת
מעצבים עובדים מהר. הם משכפלים פריימים, משאירים סקיצות ישנות גלויות, ומסתמכים על יישור בעין במקום על auto-layout מובנה. אתם מסיימים עם שמות שכבות כמו "Frame 3827" לצד כפתורים פונקציונליים. כתמי גרדיאנט דקורטיביים חולקים את אותה קבוצה עם ה-call-to-action העיקרי שלכם. מוקפי מכשירים (Device mockups) עוטפים את הממשק האמיתי במסגרת (chrome) שנראית כמו תוכן. שכבות נסתרות נשארות גלויות בקובץ, ומחכות לבלבל כל parser אוטומטי.
עבור מפתח המשתמש ב-Codex, הבעיה אינה עצלנות מצד אף אחד מהצדדים. ל-AI חסרה יכולת זיהוי תבניות אנושית. הוא קורא את עץ השכבות באופן מילולי. כשמעצב שם כפתור, כותרת וטשטוש רקע בתוך קבוצה אחת שטוחה, Codex מתייחס אליהם כאחים בעלי משקל מבני שווה. התוצאה היא frontend שנראה שבור מבנית עוד לפני שהספקתם לבדוק את הצבעים.
תהליך עבודה שמקרב אתכם ליעד
אתם עדיין יכולים להפיק קוד נקי ממקור מבולגן אם תפעלו כעורכים ולא כמתרגמים פשוטים. המטרה היא לספק ל-Codex מספיק הקשר כדי לבצע ניחושים מושכלים, ואז להגביל את הניחושים הללו כך שיישארו במסגרת ארכיטקטורת frontend הגיונית.
חלצו הכל לפני שה-AI רואה את זה. הפעילו את Dev Mode אם יש לכם גישה. העתיקו מאפייני CSS גולמיים מלוח ה-inspect. ייצאו משתני צבע וסגנונות טקסט. הזינו את הנתונים המובנים הללו ל-Codex לצד הפרומפט שלכם. צילומי מסך מראים את האמת המרחבית; מטא-דאטה נותן לכם קודי hex מדויקים, ערימות פונטים (font stacks) וגובה שורות. אחד ללא השני משאיר את המודל לנחש בחצי מהמשוואה.
היו קשוחים לגבי מערכות פריסה (layout) בפרומפטים שלכם. לעולם אל תבקשו מ-Codex פשוט "לקודד את הדף הזה". אמרו לו בדיוק מה להשתמש: "בנה את הניווט באמצעות CSS Flexbox ואת גריד הדאשבורד באמצעות CSS Grid. אל תשתמש ב-absolute positioning אלא אם אתה מציב את תג ה-notification ביחס לאייקון". כלי AI נוטים לעיתים קרובות לבחור ב-absolute positioning כברירת מחדל כי הם מנתחים קואורדינטות x-y קבועות ישירות מקובץ העיצוב. הוראות מפורשות גוברות על הנטייה הזו.
השתמשו בצילומי מסך כמעקות בטיחות. ייצאו פריימים ברזולוציית 2x. העלו אותם לצד הקשר הטקסט שלכם. כשאחרי ש-Codex מייצר את המעבר הראשון, פתחו את התוצאה בדפדפן לצד צילום המסך. חפשו סטייה ברווחים (spacing drift), גבולות חסרים וחוסר התאמה במשקל הפונט. ה-AI בדרך כלל יתפוס את הקומפוזיציה הכללית נכון, אך יטעה ב-padding הספציפי.
תכננו תיקונים. השוו את הפלט המרונדר (rendered) למקור הוויזואלי שלכם ותקנו שגיאות ידנית. ה-AI עלול להפוך תווית טקסט לתג תמונה או לעטוף כרטיס ב-div גנרי במקום ב-<article> או <section>. שלב סקירה זה אינו אופציונלי. זה השלב שבו אתם הופכים קוד גנרטיבי לקוד ייצור (production code).
איפה ה-AI הולך לאיבוד
גם עם תהליך עבודה זהיר, תבניות מבולגנות מסוימות מבלבלות את Codex באופן עקבי.
רעש דקורטיבי הוא המכשול הגדול ביותר. קובצי Figma כוללים לעיתים קרובות זוויות רקע (background glows), תבניות של שורת סטטוס ואייקונים איורים שאינם חלק מהממשק הפונקציונלי. ללא תוויות ברורות, ה-AI מקודד אותם כאלמנטים קבועים ב-DOM. אתם מסיימים עם תגי div ייעודיים עבור עיגולים מטושטשים שהיו אמורים להיות background ב-CSS או box-shadow.
היררכיה שטוחה שוברת זיהוי רכיבים (components). בקובץ נקי, כרטיס הוא פרייים של auto-layout המכיל תמונה, כותרת ופעולה. בקובץ מבולגן, שלושת האלמנטים הללו עשויים להתקיים ברמת השורש (root level), מיושרים ויזואלית אך מנוכרים מבנית. Codex מפספס לחלוטין את גבולות הכרטיס ומוציא רצף שטוח של אלמנטים ללא הורה (parent) משותף.
הפרדת האות מרעש
סמוך על שניהם, אך למשימות שונות. השתמש במטא-דאטה של Figma עבור ערכים מדויקים: צבעים, גדלי גופן, spacing tokens ונכסים (assets) מיוצאים. צילומי מסך מנצחים בכל הנוגע למבנה והיררכיה ויזואלית. אם המטא-דאטה אומר ששכבה נמצאת ב-x: 120, y: 300, אך צילום המסך מראה שהיא ממוקמת במרכז בתוך כרטיס, סמוך לצילום המסך לצורך הפריסה (layout) ולמטא-דאטה לצורך העיצוב (styling). תן לצילום המסך לשמש כ-"ground truth" שלך. תן לפאנל ה-inspect למלא את הערכים המדויקים.
איך מפרידים בין ה-UI לבין מסגרות המכשיר (device frames)?
לפני שאתה מייצא משהו, הסתר כל שכבה שאינה חלק מה-UI. בחר את ה-mockup של הטלפון או את ה-desktop chrome וכבה את הנראות (visibility). אם הקובץ מבולגן מדי מכדי להבחין בין תבנית לבין תוכן, חפש אלמנטים חוזרים במספר מסכים. שורת המצב (status bar), ה-home indicator ומעטפת הניווט (navigation shell) נמצאים בדרך כלל במיקומים זהים. הכפתורים, הטפסים והתוכן עצמם נמצאים במרכז המשתנה. הסתר כל דבר שנראה קבוע בכל המסכים. מה שנותר הוא ממשק המשתמש האמיתי שלך.
איך מוצאים גבולות של רכיבים (components) בקובץ גרוע?
חפש צבירה ויזואלית (visual clustering), ואז וודא זאת באמצעות ריווח. אם ארבעה אלמנטים יושבים יחד עם מרווחים עקביים של 16px וחולקים מילוי רקע משותף, הם כנראה שייכים לקונטיינר אחד, גם אם המעצב מעולם לא קיבץ אותם. בדוק את רשימת השכבות ב-Figma כדי לראות אם יש ערימה רציפה (consecutive stacking).