Anda membuka file Figma bertanda final_FINAL_v3 hanya untuk menemukan tiga puluh frame tanpa nama, lapisan latar belakang yang terkunci, dan sebuah tombol yang bersarang di dalam grup yang juga berisi lingkaran dekoratif acak. Hal ini lebih umum terjadi daripada yang ingin diakui orang. Saat Anda memasukkan kekacauan tersebut ke dalam alat pengodean AI seperti Codex, hasilnya akan mencerminkan inputnya. Prinsip "input sampah, output sampah" tetap berlaku, bahkan dengan model bahasa besar sekalipun.
Anatomi Handoff yang Berantakan
Desainer bekerja cepat. Mereka menduplikasi frame, membiarkan eksplorasi lama tetap terlihat, dan mengandalkan penyelarasan visual alih-alih auto-layout yang terstruktur. Anda akhirnya mendapatkan nama layer seperti "Frame 3827" yang bersandingan dengan tombol fungsional. Gumpalan gradien dekoratif berbagi grup yang sama dengan call-to-action utama Anda. Mockup perangkat membungkus antarmuka asli dalam bingkai (chrome) yang terlihat seperti konten. Layer yang tersembunyi tetap terlihat di dalam file, menunggu untuk membingungkan parser otomatis apa pun.
Bagi pengembang yang menggunakan Codex, masalahnya bukan karena kemalasan di salah satu pihak. AI kekurangan pengenalan pola manusia. Ia membaca pohon layer secara harfiah. Ketika seorang desainer menempatkan tombol, tajuk, dan background blur di dalam satu grup yang diratakan (flattened group), Codex memperlakukannya sebagai saudara dengan bobot struktural yang sama. Hasilnya adalah frontend yang terlihat rusak secara struktural bahkan sebelum Anda meninjau warnanya.
Alur Kerja yang Mendekatkan Anda pada Hasil Maksimal
Anda tetap bisa menghasilkan kode yang bersih dari sumber yang berantakan jika Anda bertindak sebagai editor, bukan sekadar konverter sederhana. Tujuannya adalah memberikan konteks yang cukup kepada Codex agar dapat membuat tebakan yang tepat, lalu membatasi tebakan tersebut agar tetap berada dalam arsitektur frontend yang masuk akal.
Ekstrak segalanya sebelum AI melihatnya. Aktifkan Dev Mode jika Anda memiliki akses. Salin properti CSS mentah dari panel inspeksi. Ekspor variabel warna dan gaya teks. Masukkan data terstruktur ini ke dalam Codex bersama dengan prompt Anda. Tangkapan layar menunjukkan kebenaran spasial; metadata memberi Anda kode hex, tumpukan font (font stacks), dan tinggi baris (line heights) yang tepat. Tanpa salah satunya, model akan menebak-nebak pada setengah bagian persamaan.
Bersikaplah tegas mengenai sistem tata letak dalam prompt Anda. Jangan pernah meminta Codex untuk sekadar "mengodekan halaman ini." Beritahu ia secara tepat apa yang harus digunakan: "Bangun navigasi dengan CSS Flexbox dan grid dashboard dengan CSS Grid. Jangan gunakan absolute positioning kecuali Anda menempatkan lencana notifikasi relatif terhadap ikon." Alat AI sering kali secara default menggunakan absolute positioning karena mereka membaca koordinat x-y tetap secara langsung dari file desain. Instruksi eksplisit dapat membatalkan kecenderungan tersebut.
Gunakan tangkapan layar sebagai pembatas. Ekspor frame pada resolusi 2x. Unggah bersama dengan konteks teks Anda. Saat Codex menghasilkan draf pertamanya, buka hasilnya di browser di samping tangkapan layar. Perhatikan pergeseran jarak (spacing drift), border yang hilang, dan ketidakcocokan ketebalan font. AI biasanya akan menangkap komposisi luas dengan benar, namun salah dalam menentukan padding yang spesifik.
Rencanakan perbaikan. Bandingkan hasil render dengan referensi visual Anda dan perbaiki kesalahan secara manual. AI mungkin mengubah label teks menjadi tag gambar atau membungkus kartu dalam div generik alih-alih <article> atau <section>. Tahap peninjauan ini tidak bersifat opsional. Ini adalah tahap di mana Anda mengubah kode hasil generatif menjadi kode produksi.
Di Mana AI Menjadi Bingung
Bahkan dengan alur kerja yang hati-hati, pola berantakan tertentu secara konsisten menyulitkan Codex.
Gangguan dekoratif adalah masalah terbesar. File Figma sering kali menyertakan cahaya latar belakang (background glows), templat bilah status, dan ikon ilustrasi yang bukan bagian dari antarmuka fungsional. Tanpa label yang jelas, AI mengodekannya sebagai elemen DOM permanen. Anda akhirnya mendapatkan tag div khusus untuk lingkaran buram yang seharusnya menjadi background CSS atau box-shadow.
Hierarki yang diratakan (flattened hierarchy) merusak deteksi komponen. Dalam file yang bersih, sebuah kartu adalah frame auto-layout yang berisi gambar, judul, dan sebuah aksi. Dalam file yang berantakan, ketiga elemen tersebut mungkin berada di level root, sejajar secara visual tetapi secara struktural terpisah. Codex melewatkan batas kartu sepenuhnya dan menghasilkan urutan elemen datar tanpa induk yang sama.
Memisahkan Sinyal dari Gangguan
Draft ini memunculkan pertanyaan spesifik yang dihadapi setiap pengembang saat menjembatani desain dan kode yang dihasilkan AI.
Apakah Anda lebih mempercayai metadata Figma atau tangkapan layar?
Percayai keduanya, tetapi untuk tugas yang berbeda. Gunakan metadata Figma untuk nilai yang tepat: warna, ukuran font, token spasi, dan aset yang diekspor. Screenshot unggul dalam hal struktur dan hierarki visual. Jika metadata menyatakan sebuah layer berada di x: 120, y: 300, tetapi screenshot menunjukkan layer tersebut berada di tengah sebuah card, percayalah pada screenshot untuk tata letak dan metadata untuk styling. Biarkan screenshot menjadi ground truth Anda. Biarkan inspect panel mengisi nilai-nilai tepatnya.
Bagaimana cara memisahkan UI dari frame perangkat?
Sebelum Anda mengekspor apa pun, sembunyikan setiap layer non-UI. Pilih mockup ponsel atau desktop chrome dan matikan visibilitasnya. Jika file terlalu berantakan untuk membedakan mana template dan mana konten, carilah elemen yang berulang di berbagai layar. Status bar, home indicator, dan navigation shell biasanya berada di posisi yang identik. Tombol, formulir, dan konten yang sebenarnya berada di bagian tengah yang bervariasi. Sembunyikan semua yang tampak tetap di setiap layar. Apa yang tersisa adalah interface asli Anda.
Bagaimana cara menemukan batas komponen dalam file yang berantakan?
Carilah visual clustering, lalu verifikasi dengan spasi. Jika empat elemen berada bersama dengan celah 16px yang konsisten dan berbagi warna latar belakang yang sama, kemungkinan besar mereka termasuk dalam satu container meskipun desainer tidak pernah mengelompokkannya. Periksa daftar layer Figma untuk penumpukan yang berurutan.