Anda telah membuka fail Figma yang ditag final_FINAL_v3 hanya untuk mendapati tiga puluh bingkai (frame) tanpa nama, lapisan latar belakang yang dikunci, dan satu butang yang tersarang di dalam kumpulan yang juga mengandungi bulatan hiasan rawak. Ini lebih biasa berlaku daripada yang ingin diakui oleh sesiapa pun. Apabila anda memasukkan kekacauan tersebut ke dalam alat pengekodan AI seperti Codex, hasilnya mencerminkan input tersebut. "Garbage in, garbage out" (Sampah masuk, sampah keluar) masih terpakai, walaupun dengan model bahasa besar.

Anatomi Penyerahan (Handoff) yang Berselerak

Pereka bentuk bekerja dengan pantas. Mereka menduplikasi bingkai, membiarkan penerokaan lama kelihatan, dan bergantung pada penjajaran mata kasar berbanding auto-layout yang berstruktur. Anda akhirnya mendapat nama lapisan seperti "Frame 3827" yang terletak bersebelahan dengan butang berfungsi. Gumpalan kecerunan (gradient blobs) hiasan berkongsi kumpulan yang sama dengan seruan tindakan (call-to-action) utama anda. Mockup peranti membungkus antara muka sebenar dalam kerangka (chrome) yang kelihatan seperti kandungan. Lapisan tersembunyi kekal kelihatan dalam fail, menunggu untuk mengelirukan sebarang parser automatik.

Bagi pembangun yang menggunakan Codex, masalahnya bukanlah kemalasan di mana-mana pihak. AI kekurangan pengecaman corak manusia. Ia membaca pokok lapisan (layer tree) secara literal. Apabila pereka meletakkan butang, tajuk, dan kabur latar belakang (background blur) di dalam satu kumpulan yang diratakan (flattened group), Codex menganggapnya sebagai adik-beradik dengan berat struktur yang sama. Hasilnya ialah frontend yang kelihatan rosak secara struktur sebelum anda sempat menyemak warna.

Aliran Kerja yang Mendekatkan Anda kepada Hasil

Anda masih boleh menghasilkan kod yang bersih daripada sumber yang berselerak jika anda bertindak sebagai penyunting dan bukannya sekadar penukar. Matlamatnya adalah untuk memberikan Codex konteks yang mencukupi untuk membuat tekaan yang bermaklumat, kemudian mengehadkan tekaan tersebut supaya ia kekal dalam seni bina frontend yang munasabah.

Ekstrak segalanya sebelum AI melihatnya. Aktifkan Dev Mode jika anda mempunyai akses. Salin sifat CSS mentah daripada panel pemeriksaan (inspect panel). Eksport pemboleh ubah warna dan gaya teks. Masukkan data berstruktur ini ke dalam Codex bersama-sama dengan arahan (prompt) anda. Tangkapan skrin menunjukkan kebenaran spatial; metadata memberikan anda kod hex, timbunan fon (font stacks), dan ketinggian baris yang tepat. Tanpa salah satu daripadanya, model tersebut akan terpaksa meneka separuh daripada persamaan tersebut.

Bersikap tegas tentang sistem susun atur dalam arahan anda. Jangan sesekali meminta Codex untuk sekadar "kodkan halaman ini." Beritahu ia dengan tepat apa yang perlu digunakan: "Bina navigasi dengan CSS Flexbox dan grid papan pemuka dengan CSS Grid. Jangan gunakan kedudukan mutlak (absolute positioning) melainkan anda meletakkan lencana pemberitahuan relatif kepada ikon." Alat AI sering menggunakan kedudukan mutlak secara lalai kerana ia membaca koordinat x-y tetap secara terus daripada fail reka bentuk. Arahan eksplisit akan mengatasi kecenderungan tersebut.

Gunakan tangkapan skrin sebagai panduan. Eksport bingkai pada resolusi 2x. Muat naik bersamanya bersama konteks teks anda. Apabila Codex menjana cubaan pertamanya, buka hasilnya dalam pelayar bersebelahan dengan tangkapan skrin. Cari ralat jarak (spacing drift), sempadan yang hilang, dan ketidakpadanan berat fon. AI biasanya akan menangkap komposisi kasar dengan betul tetapi tersalah dalam menentukan padding yang spesifik.

Rancang untuk pembetulan. Bandingkan output yang dihasilkan dengan rujukan visual anda dan betulkan ralat secara manual. AI mungkin menukarkan label teks kepada tag imej atau membungkus kad dalam div generik dan bukannya <article> atau <section>. Proses semakan ini bukanlah pilihan. Ia adalah peringkat di mana anda menukarkan kod yang dijana kepada kod pengeluaran (production code).

Di Mana AI Menjadi Keliru

Walaupun dengan aliran kerja yang teliti, corak berselerak tertentu secara konsisten menyukarkan Codex.

Gangguan hiasan (decorative noise) adalah punca utama masalah. Fail Figma sering menyertakan cahaya latar belakang (background glows), templat bar status, dan ikon ilustrasi yang bukan sebahagian daripada antara muka berfungsi. Tanpa label yang jelas, AI mengekodkannya sebagai elemen DOM kekal. Anda akhirnya mendapat tag div khas untuk bulatan kabur yang sepatutnya menjadi background CSS atau box-shadow.

Hierarki yang diratakan (flattened hierarchy) merosakkan pengesanan komponen. Dalam fail yang bersih, sebuah kad adalah bingkai auto-layout yang mengandungi imej, tajuk, dan tindakan. Dalam fail yang berselerak, ketiga-tiga elemen tersebut mungkin berada pada tahap akar (root level), selari secara visual tetapi terasing secara struktur. Codex terlepas sempadan kad sepenuhnya dan menghasilkan urutan elemen yang rata tanpa ibu bapa (parent) yang dikongsi.

Memisahkan Isyarat daripada Bunyi

Draf ini menimbulkan soalan khusus yang dihadapi oleh setiap pembangun apabila menghubungkan reka bentuk dengan kod yang dijana oleh AI.

Adakah anda lebih mempercayai metadata Figma atau tangkapan skrin?

Percayai kedua-duanya, tetapi untuk tugasan yang berbeza. Gunakan metadata Figma untuk nilai yang tepat: warna, saiz fon, token jarak, dan aset yang dieksport. Tangkapan skrin lebih unggul dalam struktur dan hierarki visual. Jika metadata menyatakan sesuatu lapisan berada pada x: 120, y: 300, tetapi tangkapan skrin menunjukkan ia berada di tengah-tengah kad, percayai tangkapan skrin untuk susun atur dan metadata untuk gaya. Biarkan tangkapan skrin menjadi rujukan utama anda. Biarkan panel pemeriksaan mengisi nilai yang tepat.

Bagaimana anda memisahkan UI daripada bingkai peranti?

Sebelum anda mengeksport apa-apa, sembunyikan setiap lapisan bukan UI. Pilih mockup telefon atau bingkai desktop dan matikan keterlihatan. Jika fail terlalu berselerak untuk membezakan antara templat dan kandungan, cari elemen yang berulang merentasi pelbagai skrin. Bar status, penunjuk laman utama, dan kerangka navigasi biasanya berada di kedudukan yang sama. Butang, borang, dan kandungan sebenar berada di bahagian tengah yang berubah-ubah. Sembunyikan semua yang kelihatan tetap pada setiap skrin. Apa yang tinggal adalah antara muka sebenar anda.

Bagaimana anda mencari sempadan komponen dalam fail yang tidak teratur?

Cari pengelompokan visual, kemudian sahkan dengan jarak. Jika empat elemen berada bersama dengan jarak 16px yang konsisten dan berkongsi isian latar belakang yang sama, ia berkemungkinan besar tergolong dalam satu bekas walaupun pereka tidak pernah mengelompokkannya. Semak senarai lapisan Figma untuk susunan berturutan.