Otworzyłeś plik Figma oznaczony jako final_FINAL_v3, tylko po to, by odkryć trzydzieści nieopisanych ramek, zablokowaną warstwę tła i przycisk ukryty wewnątrz grupy, która zawiera również przypadkowe dekoracyjne koło. To częstsze, niż ktokolwiek chciałby przyznać. Gdy karmisz ten chaos narzędziem do kodowania AI, takim jak Codex, wynik odzwierciedla dane wejściowe. Zasada „garbage in, garbage out” wciąż obowiązuje, nawet w przypadku dużych modeli językowych.

Anatomia niechlujnego przekazania projektu (handoffu)

Projektanci pracują szybko. Duplikują ramki, zostawiają widoczne stare wersje i polegają na wizualnym wyrównywaniu zamiast na ustrukturyzowanym auto-layoutcie. Kończy się to tym, że nazwy warstw typu „Frame 3827” znajdują się tuż obok funkcjonalnych przycisków. Dekoracyjne, gradientowe plamy współdzielą tę samą grupę co Twój główny przycisk wezwania do działania (CTA). Mockupy urządzeń owijają właściwy interfejs w ramki (chrome), które wyglądają jak treść. Ukryte warstwy pozostają widoczne w pliku, czekając, by zmylić jakikolwiek zautomatyzowany parser.

Dla programisty korzystającego z Codex problemem nie jest lenistwo żadnej ze stron. AI nie posiada ludzkiej zdolności rozpoznawania wzorców. Czyta drzewo warstw dosłownie. Gdy projektant umieści przycisk, nagłówek i rozmycie tła w jednej spłaszczonej grupie, Codex traktuje je jako rodzeństwo o równej wadze strukturalnej. Rezultatem jest frontend, który wygląda na strukturalnie uszkodzony, zanim jeszcze zdążysz przejrzeć kolory.

Workflow, który przybliża Cię do celu

Wciąż możesz dostarczyć czysty kod z niechlujnego źródła, jeśli zaczniesz działać jak redaktor, a nie zwykły konwerter. Celem jest dostarczenie Codexowi wystarczającej ilości kontekstu, aby mógł stawiać świadome przypuszczenia, a następnie ograniczenie tych przypuszczeń tak, aby mieściły się w rozsądnej architekturze frontendu.

Wyodrębnij wszystko, zanim zobaczy to AI. Jeśli masz dostęp, włącz Dev Mode. Skopiuj surowe właściwości CSS z panelu inspekcji. Wyeksportuj zmienne kolorów i style tekstu. Przekaż te ustrukturyzowane dane do Codex wraz z promptem. Zrzuty ekranu pokazują prawdę przestrzenną; metadane dają Ci dokładne kody hex, stosy fontów i wysokości linii. Bez jednego i drugiego model będzie musiał zgadywać połowę równania.

Bądź bezlitosny w kwestii systemów układu w swoich promptach. Nigdy nie proś Codex o proste „zakoduj tę stronę”. Powiedz mu dokładnie, czego ma użyć: „Zbuduj nawigację przy użyciu CSS Flexbox, a siatkę dashboardu przy użyciu CSS Grid. Nie używaj pozycjonowania absolutnego, chyba że umieszczasz odznakę powiadomienia względem ikony”. Narzędzia AI często domyślnie stosują pozycjonowanie absolutne, ponieważ odczytują stałe współrzędne x-y bezpośrednio z pliku projektowego. Wyraźne instrukcje nadpisują tę tendencję.

Używaj zrzutów ekranu jako barier ochronnych. Eksportuj ramki w rozdzielczości 2x. Prześlij je wraz z kontekstem tekstowym. Gdy Codex wygeneruje pierwszą wersję, otwórz wynik w przeglądarce obok zrzutu ekranu. Szukaj przesunięć w odstępach, brakujących obramowań i niedopasowań grubości fontów. AI zazwyczaj poprawnie uchwyci ogólną kompozycję, ale pomyli się w konkretnym paddingu.

Zaplanuj poprawki. Porównaj wyrenderowany wynik ze swoim wzorcem wizualnym i popraw błędy ręcznie. AI może zamienić etykietę tekstową w tag obrazu lub owinąć kartę w generyczny div zamiast <article> lub <section>. Ta faza przeglądu nie jest opcjonalna. To etap, na którym zamieniasz wygenerowany kod w kod produkcyjny.

Gdzie AI się gubi

Nawet przy starannym workflow pewne niechlujne wzorce konsekwentnie wprowadzają Codex w błąd.

Szum dekoracyjny to największa pułapka. Pliki Figma często zawierają poświaty tła, szablony paska stanu i ikony ilustracyjne, które nie są częścią funkcjonalnego interfejsu. Bez jasnych etykiet AI zakoduje je jako stałe elementy DOM. Kończysz z dedykowanymi tagami div dla rozmytych kół, które powinny być właściwością CSS background lub box-shadow.

Spłaszczona hierarchia zaburza wykrywanie komponentów. W czystym pliku karta to ramka z auto-layoutem zawierająca obraz, tytuł i akcję. W niechlujnym pliku te trzy elementy mogą znajdować się na poziomie głównym, wizualnie wyrównane, ale strukturalnie osierocone. Codex całkowicie przeoczy granice karty i wygeneruje płaską sekwencję elementów bez wspólnego rodzica.

Oddzielanie sygnału od szumu

Powyższy tekst stawia konkretne pytania, z którymi mierzy się każdy programista próbujący połączyć projekt z kodem generowanym przez AI.

Czy bardziej ufasz metadanym Figmy, czy zrzutom ekranu?

Ufaj obu, ale do innych zadań. Używaj metadanych Figmy, aby uzyskać dokładne wartości: kolory, rozmiary czcionek, tokeny odstępów i wyeksportowane zasoby. Zrzuty ekranu wygrywają w kwestii struktury i hierarchii wizualnej. Jeśli metadane mówią, że warstwa znajduje się w x: 120, y: 300, ale zrzut ekranu pokazuje ją wyśrodkowaną wewnątrz karty, ufaj zrzutowi ekranu w kwestii układu, a metadanym w kwestii stylizacji. Niech zrzut ekranu służy jako Twoja prawda obiektywna. Pozwól, aby panel inspekcji uzupełnił dokładne wartości.

Jak oddzielić UI od ramek urządzenia?

Zanim cokolwiek wyeksportujesz, ukryj każdą warstwę, która nie jest częścią UI. Wybierz mockup telefonu lub ramkę pulpitu i wyłącz widoczność. Jeśli plik jest zbyt nieuporządkowany, by odróżnić szablon od treści, szukaj powtarzających się elementów na wielu ekranach. Pasek stanu, wskaźnik powrotu do ekranu głównego i obudowa nawigacyjna zazwyczaj znajdują się w tych samych miejscach. Faktyczne przyciski, formularze i treść znajdują się w zmiennym środku. Ukryj wszystko, co wydaje się stałe na każdym ekranie. To, co pozostanie, to Twój rzeczywisty interfejs.

Jak znaleźć granice komponentów w źle przygotowanym pliku?

Szukaj grupowania wizualnego, a następnie zweryfikuj to za pomocą odstępów. Jeśli cztery elementy znajdują się obok siebie z zachowaniem spójnych 16-pikselowych odstępów i mają wspólne wypełnienie tła, prawdopodobnie należą do jednego kontenera, nawet jeśli projektant nigdy ich nie pogrupował. Sprawdź listę warstw w Figmie pod kątem kolejnego ułożenia elementów.