Prompting screenshot memiliki batas. Anda menempel desain, model membuat perkiraan yang masuk akal, Anda mengoreksinya, turn berikutnya ia menyimpang lagi. Tidak ada yang dijangkarkan. Model tidak memiliki sumber kebenaran untuk memeriksa dirinya sendiri antar turn.

Context bundle figmascope mengubah kontraknya. Alih-alih referensi piksel yang harus diinterpretasikan model setiap saat, Anda mendapatkan set file terstruktur dan dapat direferensikan — design token, layout IR, inventaris komponen, string UI — yang tetap ada dalam sesi dan tetap konsisten. Claude Code dapat membacanya, mengimplementasikan dari sana, dan memeriksa outputnya sendiri terhadap mereka sesuai permintaan.

Panduan ini mencakup pipeline lengkap dari ekspor bundle hingga implementasi yang telah ditinjau dan diverifikasi token.

Apa yang membuat ini deterministik

Tiga hal membuat bundle dapat direferensikan daripada diinterpretasikan:

  1. Token diketik dan diberi kunci. tokens.json memetakan nama semantik (spacing.16, color.7f5cfe) ke nilai yang tepat. Model dapat memeriksa outputnya terhadap file tanpa memproses ulang desain.
  2. IR adalah pohon, bukan piksel. screens/home.json mendeskripsikan tata letak dalam hal node stack/overlay/absolute/leaf — abstraksi yang sama yang digunakan target implementasi (Compose, React, dll.). Tidak ada langkah interpretasi visual.
  3. Bundle stabil antar turn. Setelah ada di repo, setiap prompt dalam sesi dapat mereferensikan file yang sama. Token drift dapat dideteksi: minta model untuk membandingkan outputnya terhadap tokens.json dan ia dapat melakukannya secara mekanis.

Langkah 1: Buat bundle

Buka figmascope.dev di browser Anda. Tempel URL file Figma Anda. Ekporter berjalan di sisi klien menggunakan Figma REST API — personal access token Figma Anda disimpan di localStorage dan tidak pernah dikirim ke server figmascope.

Klik Ekspor Konteks Agen. Halaman mengekspor frame tingkat atas, menyelesaikan design token, membangun IR, dan mengunduh context-bundle.zip.

Langkah 2: Ekstrak ke proyek Anda

# dari root proyek Anda
unzip ~/Downloads/context-bundle.zip -d ./design/

# konfirmasi apa yang Anda miliki
find design/ -type f | sort
# design/CONTEXT.md
# design/_meta.json
# design/components/inventory.json
# design/screens/home.json
# design/screens/home.png
# design/screens/settings.json
# design/screens/settings.png
# design/strings.json
# design/tokens.json

Nama direktori tidak penting — design/ hanyalah konvensi. Yang penting adalah Claude Code dapat membaca file dari direktori kerja.

Langkah 3: Mulai Claude Code di repo Anda

cd my-app
claude

Claude Code dimulai di root repo Anda dengan akses file penuh. Ia dapat membaca, menulis, dan mereferensikan file apa pun dalam tree di seluruh sesi — ini adalah kemampuan kunci yang membuat pola bundle berfungsi.

Langkah 4: Orientasi agen

Mulailah dengan prompt membaca sebelum implementasi apa pun. Ini memuat spesifikasi ke dalam konteks sesi dan memungkinkan Anda memverifikasi bahwa ekspor terlihat benar sebelum menulis kode apa pun.

Read ./design/CONTEXT.md and tell me:
1. What target framework is this bundle for?
2. What token files does it reference?
3. Are there any warnings I should know about before implementing?

Claude akan melaporkan kembali target (Jetpack Compose secara default), sumber token, dan peringatan apa pun dari header CONTEXT.md — fill gradient, pemetaan token yang hilang, efek yang tidak didukung. Anda menangkap ini sekarang, bukan setelah menghasilkan 200 baris kode.

Lanjutkan dengan pemeriksaan token cepat:

List the top 10 color tokens from ./design/tokens.json.
Then list the spacing tokens.

Ini mengonfirmasi bahwa file token diurai dengan benar dan memberi Anda model mental palet sebelum implementasi.

Langkah 5: Implementasikan layar

Sekarang prompt implementasi. Bersikaplah eksplisit tentang file mana yang otoritatif untuk keputusan mana:

Implement ./design/screens/home.json as a Jetpack Compose screen.

Rules:
- CONTEXT.md constraints apply. Read it if you haven't already.
- All spacing, color, and radius values must come from ./design/tokens.json.
  Map token keys to the appropriate Compose primitives (e.g. spacing.16 → 16.dp).
- UI strings must use keys from ./design/strings.json via stringResource().
  Fall back to the "fallback" field value if no resource ID is available yet.
- The IR node kinds map as follows:
    stack (axis:vertical)   → Column
    stack (axis:horizontal) → Row
    overlay                 → Box
    absolute                → Box with Modifier.offset
    leaf (text)             → Text with TextStyle
    leaf (rectangle)        → Box with Modifier.background
- Do not invent any value not present in the token or IR files.
  If something is missing, leave a TODO comment with the token key you expected.

Claude Code akan membaca IR, menelusuri pohon node, memetakan setiap node ke primitif Compose-nya, dan menarik nilai token berdasarkan kunci. Outputnya dapat dilacak: setiap nilai .dp harus sesuai dengan token spacing, setiap Color(0xFF...) harus cocok dengan token warna.

Langkah 6: Deteksi dan perbaiki token drift

Setelah pass implementasi pertama, jalankan pemeriksaan drift sebelum meninjau secara visual. Ini adalah keunggulan utama bundle dibandingkan prompting screenshot — Anda dapat meminta model untuk memverifikasi outputnya sendiri secara mekanis.

Compare every color value in the generated HomeScreen.kt against ./design/tokens.json.
List any hex values in the output that don't correspond to a color token key.
For each one, identify the correct token and replace the hardcoded value.

Lakukan hal yang sama untuk spacing:

Compare every .dp value in HomeScreen.kt against the spacing tokens in ./design/tokens.json.
Flag any value that doesn't match a spacing token. Replace with the correct token reference.

Loop ini — implementasi, periksa drift, perbaiki — konvergen dengan cepat. Pada pass kedua atau ketiga, output sepenuhnya direferensikan token.

Tips: sertakan peringatan _meta.json dalam prompt pertama Anda

design/_meta.json berisi array warnings. Ini adalah hal-hal yang tidak dapat sepenuhnya diselesaikan oleh ekporter: fill gradient, gambar tertanam, efek tanpa padanan token. Baca sebelum mengimplementasikan:

cat design/_meta.json

Jika outputnya mencakup sesuatu seperti:

{
  "warnings": [
    "node 'hero-background': gradientFill not fully supported — background fill omitted",
    "node 'avatar': imageFill — reference only, no pixel data"
  ]
}

Tambahkan ini secara eksplisit ke prompt implementasi Anda: "Skip the hero background fill and leave a // TODO: gradient. For the avatar node, use a placeholder AsyncImage with a grey background."

Ini mencegah Claude melakukan perkiraan diam-diam — ia akan melakukan apa yang Anda instruksikan alih-alih menebak.

Mengapa ini mengalahkan prompting screenshot

Aman multi-turn. File token dan IR tidak berubah antar turn. Anda dapat bertanya "apakah Anda menggunakan spacing yang benar untuk padding kartu?" pada turn ke-12 dan mendapatkan jawaban yang akurat, karena sumber kebenaran masih ada di disk.

Ramah diff. Ketika Anda mengekspor ulang setelah perubahan desain, bundle baru menghasilkan diff terhadap yang lama. Anda dapat meminta Claude untuk meninjau diff dan hanya memperbarui komponen yang terpengaruh — tidak perlu reimplementasi penuh.

Tanpa unggah ulang. Bundle ada di repo Anda. Anda tidak perlu menempel screenshot ulang untuk setiap layar baru. Setiap layar baru hanyalah design/screens/<name>.json — satu file lagi untuk direferensikan dalam prompt berikutnya.

Jujur tentang kesenjangan. CONTEXT.md dan _meta.json secara eksplisit mencantumkan apa yang tidak dicakup bundle. Prompting screenshot tidak memiliki padanan — model hanya menebak melalui kesenjangan.

Aplikasi figmascope utama menangani ekspor di browser Anda — tempel URL Figma Anda, ekspor bundle, dan Anda siap menjalankan Claude Code terhadap spesifikasi yang deterministik.