Aider + Figma — Pair-Coding UI dari Context Bundle

Aider adalah AI pair programmer berbasis terminal. Ia membaca file yang Anda tentukan, menghasilkan edit sebagai unified diff, dan menerapkannya langsung ke codebase Anda. Setiap perubahan dapat ditinjau sebelum diterapkan. Workflow diff-first itu berpadu baik dengan design handoff yang sadar token — Anda dapat melihat secara tepat apakah kode yang dihasilkan menggunakan spacing.16 dari file token atau telah bergeser ke hardcoded 16px.

Panduan ini mencakup pipeline lengkap Aider + figmascope: membuat bundle, memuatnya ke sesi Aider, menggunakan mode Architect untuk scaffold awal, dan beriterasi dengan prompt edit yang ditargetkan.

Prasyarat

Instal Aider jika belum terpasang:

pip install aider-chat
# atau
brew install aider

Aider mendukung berbagai backend model. Contoh di sini menggunakan Claude Sonnet melalui Anthropic API, tetapi workflow-nya identik dengan OpenAI atau model lokal.

export ANTHROPIC_API_KEY=sk-ant-...
# atau OPENAI_API_KEY untuk GPT-4o

Langkah 1: Buat bundle

Buka figmascope.dev, tempel URL file Figma Anda, dan klik Ekspor Konteks Agen. Ekporter berjalan di browser Anda — personal access token Figma Anda tersimpan di localStorage dan tidak pernah meninggalkan perangkat Anda.

Unduhan tersimpan sebagai context-bundle.zip.

Langkah 2: Ekstrak ke proyek Anda

unzip ~/Downloads/context-bundle.zip -d ./design/

ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Langkah 3: Jalankan Aider dengan file bundle dalam cakupan

Teruskan file bundle yang Anda butuhkan di baris perintah. Aider memuatnya sebagai read-context — model dapat mereferensikannya tetapi tidak akan mengeditnya kecuali Anda secara eksplisit menggunakan /add untuk mempromosikannya ke file yang dapat diedit.

aider \
  --read design/CONTEXT.md \
  --read design/tokens.json \
  --read design/strings.json \
  design/screens/home.json \
  src/screens/HomeScreen.kt

Polanya: --read untuk file bundle (hanya konteks, tidak dapat diedit), argumen posisional untuk file sumber yang ingin Anda modifikasi dengan Aider. Ini menjaga bundle tetap bersih — mesin diff Aider tidak akan mencoba mengedit tokens.json.

Jika Anda ingin Aider membuat file baru alih-alih mengedit yang sudah ada, cukup namai jalur target yang belum ada. Aider akan membuatnya.

Langkah 4: Tambahkan PNG referensi

Aider dapat menyertakan gambar sebagai konteks untuk model multimodal. Gunakan perintah /add setelah diluncurkan:

/add design/screens/home.png

PNG adalah render 2× dari Figma. Dengan model multimodal (Claude Sonnet, GPT-4o), Aider menyertakannya sebagai referensi visual. Gunakan untuk pemeriksaan kewarasan saat peninjauan — spesifikasi kanonik adalah JSON, bukan gambar.

Langkah 5: Mode Architect — scaffold awal

Perintah /architect Aider menggunakan model dua langkah: satu pass untuk merencanakan, satu pass untuk mengimplementasikan. Ini adalah titik awal yang tepat untuk layar penuh, di mana Anda menginginkan struktur yang koheren sebelum mengedit bagian-bagian individual.

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

Context:
- Read CONTEXT.md for framework constraints and target conventions.
- All spacing, color, and radius values come from tokens.json.
  Map token keys directly: spacing.16 → 16.dp, color.7f5cfe → Color(0xFF7F5CFE).
- Use string keys from strings.json via stringResource() with the fallback field as the literal fallback.
- IR node kinds: stack(vertical)→Column, stack(horizontal)→Row, overlay→Box,
  absolute→Box+Modifier.offset, leaf(text)→Text, leaf(rect)→Box+Modifier.background.
- Do not hardcode any value that has a token equivalent.

Output to: src/screens/HomeScreen.kt

Aider menghasilkan rencana terlebih dahulu, menampilkannya kepada Anda, kemudian menghasilkan diff. Tinjau rencananya — jika pemetaan node terlihat salah, koreksi sebelum pass implementasi berjalan.

Langkah 6: Edit file tertentu dengan referensi token

Setelah scaffold terpasang, gunakan prompt /edit yang ditargetkan untuk memperbaiki masalah spesifik. Di sinilah workflow diff Aider bersinar — setiap edit adalah perubahan kecil yang dapat ditinjau alih-alih regenerasi penuh.

The card component in HomeScreen.kt uses hardcoded 12dp for corner radius.
Check tokens.json for the correct radius token and replace it.

Aider menghasilkan diff minimal: satu atau dua baris yang berubah, tidak ada yang lain tersentuh. Anda dapat melihat dengan tepat apa yang bergerak.

Untuk audit spacing di seluruh file:

Audit every .dp value in src/screens/HomeScreen.kt against the spacing tokens in design/tokens.json.
Produce a diff that replaces any hardcoded value with its token equivalent where one exists.
Leave a // TODO comment for any value that doesn't match a spacing token.

Langkah 7: Tinjau diff terhadap spesifikasi

Tampilan diff Aider adalah permukaan peninjauan. Sebelum menerima perubahan apa pun, periksa:

Apakah baris yang ditambahkan mereferensikan kunci token, bukan nilai literal?
Apakah string literal muncul di strings.json, atau apakah itu UI copy yang di-hardcode?
Apakah penumpukan node dalam kode yang dihasilkan cocok dengan urutan parent-child dalam IR JSON?

Jika diff terlihat salah, tolak dengan n di prompt dan beri tahu Aider apa yang harus diperbaiki. Loop feedback yang pendek — prompt, diff, terima/tolak, perhalus — berarti Anda langsung menangkap drift daripada setelah blok kode besar terlanjur masuk.

Mengapa workflow diff Aider berpadu baik dengan bundle

Token drift terlihat dalam diff. Jika baris yang dihasilkan mengatakan color = Color(0xFF7F5CFE) alih-alih color = tokens.colorPrimary, Anda melihatnya sebelum digabungkan. Tidak ada "periksa nanti" — peninjauan terjadi secara inline.

Penyempurnaan iteratif itu murah. Anda tidak meregenerasi layar penuh pada setiap perubahan. Setiap prompt lanjutan menghasilkan diff yang ditargetkan. Bundle menyediakan konteks yang stabil; Aider menyediakan pengeditan yang tepat sasaran.

Bundle di-version-control bersama kode. Ketika desain diperbarui, ekspor ulang bundle dari figmascope, diff-kan terhadap versi sebelumnya, dan minta Aider untuk hanya menerapkan node yang berubah. Workflow ini skalabel di berbagai iterasi desain tanpa reimplementasi penuh.

Pola umum dan jebakan

Jangan tambahkan semua layar sekaligus. Teruskan satu JSON layar pada satu waktu. Lebih banyak konteks tidak selalu lebih baik — Aider (dan model yang mendasarinya) berkinerja lebih baik dengan konteks yang terfokus daripada dump setiap layar dalam file.

Gunakan --read untuk bundle, bukan argumen posisional. Jika Anda meneruskan tokens.json sebagai argumen posisional, Aider mungkin mencoba mengeditnya. Gunakan --read untuk menandainya sebagai konteks read-only.

Periksa _meta.json sebelum prompt pertama. Array warnings mencantumkan fill dan efek yang tidak dapat sepenuhnya diselesaikan oleh ekporter. Beri tahu Aider tentang keduanya di awal agar tidak melakukan pendekatan secara diam-diam:

cat design/_meta.json | python3 -c "import sys,json; w=json.load(sys.stdin).get('warnings',[]); print('\n'.join(w))"

Sertakan peringatan apa pun dalam prompt arsitek Anda: "Skip hero-background fill — gradient not supported. Leave a TODO comment."

Pilih Aider untuk edit yang tepat sasaran dan dapat ditinjau — dan gunakan Cursor atau Claude Code saat Anda membutuhkan konteks sesi penuh di banyak file. Ketiga workflow ini dimulai dengan cara yang sama: aplikasi figmascope utama menangani ekspor di browser Anda.