Ви відкриваєте файл Figma з тегом final_FINAL_v3 лише для того, щоб виявити тридцять непідписаних фреймів, заблокований шар фону та кнопку, вкладену в групу, яка також містить випадковий декоративний коло. Це трапляється частіше, ніж хтось хоче визнавати. Коли ви подаєте цей хаос в інструмент для написання коду на базі ШІ, такий як Codex, результат відображає вхідні дані. Принцип «сміття на вході — сміття на виході» все ще діє навіть із великими мовними моделями.
Анатомія безладного передавання макетів
Дизайнери працюють швидко. Вони дублюють фрейми, залишають видимими старі варіанти та покладаються на візуальне вирівнювання замість структурованого auto-layout. У результаті назви шарів на кшталт "Frame 3827" опиняються поруч із функціональними кнопками. Декоративні градієнтні плями знаходяться в тій самій групі, що й ваш основний заклик до дії (call-to-action). Мокапи пристроїв огортають реальний інтерфейс «хромом», який виглядає як контент. Приховані шари залишаються видимими у файлі, чекаючи на можливість заплутати будь-який автоматизований парсер.
Для розробника, який використовує Codex, проблема не в лінощах жодної зі сторін. ШІ бракує людського розпізнавання патернів. Він читає дерево шарів буквально. Коли дизайнер поміщає кнопку, заголовок і розмиття фону в одну сплюснуту групу, Codex сприймає їх як сусідні елементи з однаковою структурною вагою. Результатом є фронтенд, який виглядає структурно зламаним ще до того, як ви перевірите кольори.
Робочий процес, що наближає вас до результату
Ви все ще можете видати чистий код із безладного джерела, якщо діятимете як редактор, а не просто конвертер. Мета полягає в тому, щоб надати Codex достатньо контексту для обґрунтованих припущень, а потім обмежити ці припущення, щоб вони залишалися в межах розумної архітектури фронтенду.
Витягуйте все перед тим, як це побачить ШІ. Увімкніть Dev Mode, якщо у вас є доступ. Копіюйте сирі CSS-властивості з панелі інспектування. Експортуйте змінні кольорів та текстові стилі. Подавайте ці структуровані дані в Codex разом із вашим промптом. Скриншоти показують просторову істину; метадані дають вам точні hex-коди, стеки шрифтів і міжрядкові інтервали. Відсутність одного з цих елементів змушує модель гадати щодо половини рівняння.
Будьте суворими щодо систем макетування у своїх промптах. Ніколи не просіть Codex просто «закодувати цю сторінку». Кажіть йому точно, що використовувати: «Побудуй навігацію за допомогою CSS Flexbox, а сітку дашборду — за допомогою CSS Grid. Не використовуй абсолютне позиціонування, якщо тільки ти не розміщуєш значок сповіщення відносно іконки». Інструменти ШІ часто за замовчуванням використовують абсолютне позиціонування, оскільки вони зчитують фіксовані x-y координати безпосередньо з файлу дизайну. Чіткі інструкції долають цю тенденцію.
Використовуйте скриншоти як орієнтири. Експортуйте фрейми в роздільній здатності 2x. Завантажуйте їх разом із текстовим контекстом. Коли Codex створить перший варіант, відкрийте результат у браузері поруч зі скриншотом. Шукайте відхилення у відступах, відсутні межі та невідповідності ваги шрифту. ШІ зазвичай правильно передає загальну композицію, але помиляється в конкретних внутрішніх відступах (padding).
Плануйте виправлення. Порівняйте відрендерений результат із візуальним еталоном і виправляйте помилки вручну. ШІ може перетворити текстову мітку на тег зображення або обгорнути картку в загальний div замість <article> або <section>. Цей етап перевірки не є необов'язковим. Це той етап, на якому ви перетворюєте згенерований код на робочий (production) код.
Де ШІ втрачає орієнтацію
Навіть при ретельному робочому процесі певні безладні патерни постійно збивають Codex з пантелику.
Декоративний шум — це найбільша пастка. Файли Figma часто містять світіння фону, шаблони статус-барів та ілюстративні іконки, які не є частиною функціонального інтерфейсу. Без чітких міток ШІ кодує їх як постійні елементи DOM. У результаті ви отримуєте окремі теги div для розмитих кіл, які мали б бути CSS-властивостями background або box-shadow.
Сплющена ієрархія порушує виявлення компонентів. У чистому файлі картка — це фрейм з auto-layout, що містить зображення, заголовок і кнопку дії. У безладному файлі ці три елементи можуть знаходитися на кореневому рівні, візуально вирівняні, але структурно «сироти». Codex повністю пропускає межі картки та видає пласку послідовність елементів без спільного батьківського контейнера.
Відокремлення сигналу від шуму
Цей матеріал порушує конкретні питання, з якими стикається кожен розробник, намагаючись поєднати дизайн і код, згенерований ШІ.
Ви більше довіряєте метаданим Figma чи скриншотам?
Довіряйте обом, але для різних завдань. Використовуйте метадані Figma для отримання точних значень: кольорів, розмірів шрифтів, токенів відступів та експортованих активів. Скриншоти кращі для визначення структури та візуальної ієрархії. Якщо метадані вказують, що шар розташований за координатами x: 120, y: 300, але на скриншоті він виглядає центрованим у картці, довіряйте скриншоту щодо макета, а метаданим — щодо стилізації. Нехай скриншот слугує вашим еталоном. Нехай панель інспектування надає точні значення.
Як відокремити UI від рамок пристрою?
Перед тим як щось експортувати, приховайте всі шари, що не стосуються UI. Виберіть мокап телефону або десктопну оболонку (desktop chrome) і вимкніть видимість. Якщо файл занадто захаращений, щоб зрозуміти, де шаблон, а де контент, шукайте повторювані елементи на різних екранах. Статус-бар, індикатор «додому» та навігаційна оболонка зазвичай розташовані в однакових позиціях. Самі кнопки, форми та контент знаходяться у змінній центральній частині. Приховайте все, що виглядає незмінним на кожному екрані. Те, що залишиться, і є вашим справжнім інтерфейсом.
Як знайти межі компонентів у поганому файлі?
Шукайте візуальне групування, а потім перевіряйте за допомогою відступів. Якщо чотири елементи розташовані поруч із постійними відступами у 16px і мають спільне заповнення фону, вони, ймовірно, належать до одного контейнера, навіть якщо дизайнер їх не згрупував. Перевірте список шарів Figma на наявність послідовного накладання.