Konteks menjadi hambatan dalam pengembangan berbantuan AI. Bukan kemampuan model. Model berkembang cukup cepat sehingga mereka secara teratur bukan menjadi kendala. Yang membatasi kualitas kode yang dihasilkan AI adalah kualitas konteks yang diterima model tersebut.

Untuk alur kerja Figma-ke-kode, konteks hadir dalam dua bentuk yang sangat berbeda: konteks piksel (screenshot, gambar yang dirender) dan konteks terstruktur (IR bertipe, token, hubungan semantik). Ini bukan sekadar format berbeda untuk informasi yang sama. Mereka adalah kategori input yang berbeda, dengan properti berbeda, karakteristik kehilangan berbeda, dan batas yang berbeda pada apa yang dapat dihasilkan agen dari mereka.

Industri masih sebagian besar menggunakan konteks piksel. Ini adalah kesalahan. figmascope mengekspor konteks terstruktur — input yang benar sejak awal.

Apa itu konteks piksel

Konteks piksel adalah representasi rasterized dari desain apa pun: screenshot yang diekspor dari Figma, PNG dari "Export frame," render dari alat desain. Ini yang Anda dapatkan ketika menekan Cmd+Shift+4 di atas kanvas Figma Anda.

LLM yang mendukung visi dapat memproses konteks piksel dengan sangat baik. Mereka mengenali pola UI, mengidentifikasi wilayah layout, menyimpulkan jenis komponen dari tampilan visual, dan menghasilkan kode yang masuk akal dari gambar saja. Jika Anda menggunakan Claude atau GPT-4V untuk screenshot-ke-kode, Anda sudah melihat ini. Output terlihat benar lebih sering dari yang Anda harapkan.

Tetapi "terlihat benar" dan "benar" adalah dua hal yang berbeda, dan kesenjangan di antara keduanya adalah tempat kepatuhan sistem desain, kesetiaan token, identitas komponen, dan reproduksibilitas semua berada.

Apa itu konteks terstruktur

Konteks terstruktur adalah representasi bertipe dan dapat dibaca mesin yang mempertahankan semantik desain: apa setiap elemen adalah, bukan hanya apa tampilannya. Ini mencakup:

IR figmascope adalah ini. Setiap node dalam JSON per-layar memiliki kind, name, absoluteBoundingBox, children, fill yang diselesaikan ke referensi token jika tersedia, properti auto-layout jika berlaku, dan componentId pada instance. Ini adalah pohon desain yang dibuat eksplisit.

Konteks piksel memberi tahu agen seperti apa tampilan desain. Konteks terstruktur memberi tahunya apa arti desain. Agen koding membutuhkan makna untuk menulis kode, bukan penampilan. Penampilan adalah untuk apa uji visual.

Apa yang hilang dalam arah piksel-ke-terstruktur

Mode kegagalan inti konteks piksel adalah kehilangan informasi yang tidak dapat dipulihkan. Ketika Figma merender frame ke PNG, ia membuang persis informasi yang paling penting untuk pembuatan kode:

Pohon layer runtuh. Tidak ada lagi "grup tiga item dengan gap 8px." Ada wilayah piksel yang menyarankan sebuah grup. Agen harus merekonstruksi struktur pohon dari bukti visual, dan rekonstruksi itu bersifat mendekati. Itu akan salah pada persentase tertentu. Persentase itu tumbuh seiring desain menjadi lebih kompleks.

Binding token hilang. Latar belakang oranye yang dipetakan ke color/action/primary menjadi #FF6B00. Agen menghasilkan hex yang hardcoded. Jika warna Anda pernah berubah, atau jika Anda mendukung mode gelap, atau jika Anda perlu mengaudit penggunaan token, nilai hardcoded itu adalah kewajiban.

Identitas komponen hilang. Empat instance komponen kartu yang sama adalah empat persegi panjang yang terlihat mirip. Agen mungkin menghasilkan satu komponen yang dapat digunakan kembali atau empat blok yang mirip tetapi tidak identik, tergantung pada berapa banyak kesamaan struktural yang disimpulkannya. Anda menginginkan output yang dapat diprediksi; Anda mendapatkan output probabilistik.

Maksud layout bersifat ambigu. Apakah ini flex row atau grid? Apakah spacing antara item adalah gap atau margin atau padding pada setiap item? Piksel tidak mengatakan. Agen memilih. Pilihan berbeda antar run.

Pipeline Figma → React, dengan dan tanpa struktur

Pertimbangkan jalur dari Figma ke React produksi.

Dengan konteks piksel: Ekspor PNG. Tempel ke Claude. Dapatkan JSX. Tinjau JSX untuk kebenaran. Perhatikan nilai yang hardcoded. Perhatikan struktur komponen yang salah. Prompt untuk koreksi. Iterasi. Akhirnya dapatkan sesuatu yang masuk akal. Edit manual untuk cocokkan sistem desain. Ship. Layar berikutnya: ulangi dari awal karena output run sebelumnya tidak dapat dikomposis.

Dengan konteks terstruktur: Ekspor bundel (satu klik, berjalan di browser). Berikan CONTEXT.md + IR layar ke Claude dengan system prompt Anda yang menentukan framework dan konvensi sistem desain. Dapatkan JSX yang menggunakan nama token Anda, nama komponen Anda, struktur layout yang benar. Tinjau untuk kebenaran. Ship. Layar berikutnya: bundel yang sama, agen yang sama, output yang dapat dikomposis karena inputnya konsisten.

Penghematan pekerjaan itu nyata tetapi sekunder. Keuntungan utama adalah komposabilitas. Konteks terstruktur memungkinkan output yang dapat dikomposis antar layar dan agen. Konteks piksel tidak — output setiap layar adalah pulau yang dihasilkan dari pass inferensi baru.

Terstruktur berarti: bertipe

Setiap node dalam IR memiliki kind. Ini langsung penting. Node TEXT menghasilkan elemen teks. FRAME dengan auto-layout menghasilkan kontainer. INSTANCE dari Button/Primary/Large menghasilkan panggilan komponen button dengan props yang tepat. VECTOR menghasilkan referensi ikon.

Agen tidak menebak. Ia memetakan jenis ke primitif kode. Pemetaan ditentukan dalam CONTEXT.md untuk target framework. "Untuk node INSTANCE, gunakan nama komponen untuk menentukan komponen React. Untuk FRAME dengan layoutMode HORIZONTAL, gunakan flex row. Untuk TEXT dengan gaya typography/heading.lg, gunakan komponen Heading." Ini adalah aturan seperti kompiler, bukan tugas inferensi.

Terstruktur berarti: spasial

Nilai absoluteBoundingBox pada setiap node memberikan posisi dan ukuran dalam ruang koordinat Figma. Dikombinasikan dengan properti auto-layout — layoutMode, itemSpacing, paddingLeft/Right/Top/Bottom, primaryAxisAlignItems, counterAxisAlignItems — agen memiliki semua yang dibutuhkan untuk menghasilkan kode layout yang benar tanpa menghitung piksel.

Bounding box absolut juga memungkinkan agen memverifikasi outputnya: jika komponen yang dihasilkan memiliki dimensi yang berbeda dari yang ditentukan IR, ada yang salah. Ini adalah properti yang dapat diuji dari konteks terstruktur yang tidak memiliki padanan dalam konteks piksel.

Terstruktur berarti: sadar identitas

Ketika empat node dalam IR berbagi componentId, agen tahu mereka adalah instance dari komponen yang sama. Ia menghasilkan definisi komponen sekali, menurunkan props dari varian dalam instance, dan merender empat panggilan. Ini adalah output yang benar. Ini tidak dapat dicapai dari konteks piksel tanpa rekayasa prompt yang signifikan yang pada dasarnya meminta agen untuk mederivasi ulang struktur yang sudah dimiliki file desain.

Referensi silang string bekerja dengan cara yang sama. Ketika beberapa node teks mereferensikan stringRef.key: "action.continue", agen tahu untuk menggunakan satu pencarian i18n, bukan tiga string hardcoded. Informasi identitas ada dalam IR; agen hanya membacanya.

Terstruktur berarti: dapat dikontrol versi

File JSON biasa berbeda dengan bersih. Nilai padding yang berubah muncul sebagai perubahan satu baris dalam IR per-layar. Token yang diganti namanya muncul sebagai diff cari-ganti di seluruh file token. Instance komponen baru muncul sebagai objek yang ditambahkan dalam array children.

Ini adalah riwayat versi desain yang benar-benar berguna bagi insinyur. Bukan "desain diperbarui pada Selasa" tetapi "inilah tiga properti yang berubah antara ekspor v2 dan v3 layar ini." Anda dapat memasukkan ini dalam deskripsi PR Anda. Anda dapat menjalankan pemeriksaan otomatis di atasnya. Anda dapat menggunakannya untuk mengaudit apakah perubahan kode cocok dengan perubahan desain.

Ke mana ini mengarah: infrastruktur konteks desain

Kategori perkakas yang terbentuk di sini bukan "ekspor Figma, tapi lebih baik." Ini adalah lapisan baru dalam tumpukan: infrastruktur konteks desain. Pekerjaan lapisan ini adalah mengubah sumber desain (file Figma, perpustakaan komponen, sistem token) menjadi artefak terstruktur, dapat dibaca agen, dikontrol versi yang memberi makan lapisan pembuatan kode.

Lapisan ini berada di antara alat desain dan agen koding. Ia memiliki tanggung jawab yang saat ini tidak dimiliki oleh salah satu pihak: manajemen snapshot, ekstraksi semantik, resolusi token, inventaris komponen, pengindeksan string lintas layar, versioning bundel. Ini adalah kepentingan infrastruktur, bukan kepentingan alat desain dan bukan kepentingan LLM.

Memperlakukannya sebagai infrastruktur berarti: ia terotomatisasi, dikontrol versi, berjalan di CI, memiliki format yang ditentukan, dapat diperiksa. Sama seperti sistem build adalah infrastruktur untuk kode — bukan kode itu sendiri, bukan binari target, tetapi pipeline yang andal dan dapat direproduksi yang mengkonversi satu ke yang lain.

Jujur: piksel masih penting

Bundel figmascope menyertakan PNG 2x dari setiap layar yang diekspor. Bukan karena PNG menggerakkan pembuatan kode, tetapi karena konfirmasi visual itu penting. Agen harus dapat merujuk silang outputnya yang dihasilkan terhadap PNG. Pengembang harus dapat melihat layar tanpa membuka Figma. PNG adalah pemeriksaan kewarasan, bukan spesifikasi.

Perbedaan ini — piksel untuk konfirmasi, struktur untuk spesifikasi — adalah model mental yang benar. Anda tidak menghilangkan konteks piksel; Anda menurunkannya ke peran yang benar. Ini adalah artefak QA, bukan input build.

Sama seperti Anda tidak akan memberikan kompiler screenshot kode sumber Anda: Anda memberikannya kode — dan Anda menggunakan screenshot untuk dokumentasi. File desain adalah sumbernya. Bundel adalah artefak kompilasi. PNG adalah gambar dokumentasi.

Ke mana ini mengarah untuk codegen multi-target

Konteks terstruktur memungkinkan alur kerja yang tidak bisa dilakukan konteks piksel: satu desain, banyak target. IR yang sama dapat memberi makan generator React/Tailwind, generator Jetpack Compose, dan generator SwiftUI. Desain dasarnya sama; konteks khusus target (primitif framework, konvensi penamaan, API layout) ada dalam CONTEXT.md, yang dihasilkan per-target.

Ini adalah codegen multi-target yang benar-benar dapat diskalakan. Anda mengekspor satu bundel dari desain. Anda menjalankan tiga agen dengan tiga file CONTEXT.md yang berbeda. Anda mendapatkan tiga implementasi yang setara secara struktural karena dihasilkan dari IR yang sama, bukan dari tiga pass inferensi terpisah atas tiga screenshot.

Hambatan untuk alur kerja ini bukan kemampuan model. Ini adalah kualitas konteks. Konteks terstruktur adalah yang membuatnya mungkin.

Ekspor context bundle terstruktur Anda dari aplikasi figmascope utama, kemudian gunakan bersama Cursor, Claude Code, atau Aider untuk pembuatan UI multi-target yang dapat dikomposis.