Aider + Figma — Context Bundle से UI का Pair-Coding

Aider एक terminal-based AI pair programmer है। यह उन files को पढ़ता है जो आप specify करते हैं, edits को unified diffs के रूप में generate करता है, और उन्हें directly आपके codebase में apply करता है। हर change merge होने से पहले reviewable होता है। यह diff-first workflow token-aware design handoff के साथ अच्छी तरह pair होता है — आप exactly देख सकते हैं कि generated code token file से spacing.16 use कर रहा है या hardcoded 16px पर drift कर गया है।

यह guide पूरे Aider + figmascope pipeline को cover करती है: bundle generate करना, उसे Aider session में load करना, initial scaffold के लिए Architect mode use करना, और targeted edit prompts के साथ iterate करना।

Prerequisites

अगर पहले से install नहीं है तो Aider install करें:

pip install aider-chat
# या
brew install aider

Aider multiple model backends support करता है। यहाँ के उदाहरण Anthropic API के ज़रिए Claude Sonnet use करते हैं, लेकिन workflow OpenAI या local models के साथ identical है।

export ANTHROPIC_API_KEY=sk-ant-...
# या OPENAI_API_KEY for GPT-4o

Step 1: Bundle generate करें

figmascope.dev पर जाएं, अपना Figma file URL paste करें, और Export Agent Context पर click करें। Exporter आपके browser में run होता है — आपका Figma personal access token localStorage में रहता है और कभी आपकी machine नहीं छोड़ता।

Download context-bundle.zip के रूप में आता है।

Step 2: अपने project में Unzip करें

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

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

Step 3: Bundle files को scope में रखकर Aider launch करें

Command line पर जिन bundle files की ज़रूरत है उन्हें pass करें। Aider उन्हें read-context के रूप में load करता है — model उन्हें reference कर सकता है लेकिन edit नहीं कर सकता जब तक आप explicitly /add use करके उन्हें editable files में promote न करें।

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

Pattern यह है: bundle files के लिए --read (context-only, editable नहीं), और उन source files के लिए positional args जिन्हें आप Aider से modify करवाना चाहते हैं। इससे bundle clean रहता है — Aider की diff machinery tokens.json को edit करने की कोशिश नहीं करेगी।

अगर आप Aider से existing file edit करने की बजाय नई file create करवाना चाहते हैं, तो बस वह target path name करें जो अभी exist नहीं करता। Aider उसे create कर देगा।

Step 4: Reference PNGs add करें

Aider multimodal models के लिए images को context के रूप में include कर सकता है। Launch के बाद /add command use करें:

/add design/screens/home.png

PNG Figma से 2× render है। Multimodal model (Claude Sonnet, GPT-4o) के साथ, Aider इसे visual reference के रूप में include करता है। Review के दौरान sanity checks के लिए इसे use करें — canonical spec JSON है, image नहीं।

Step 5: Architect mode — initial scaffold

Aider का /architect command two-step model use करता है: एक pass plan करने के लिए, एक pass implement करने के लिए। यह full screen के लिए सही starting point है, जहाँ आप individual pieces edit करने से पहले coherent structure चाहते हैं।

/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 पहले एक plan generate करता है, उसे आपको दिखाता है, फिर diff produce करता है। Plan review करें — अगर node mapping गलत लगे, तो implementation pass run होने से पहले उसे correct करें।

Step 6: Token references के साथ specific files edit करें

Scaffold तैयार होने के बाद, specific issues fix करने के लिए targeted /edit prompts use करें। यहाँ Aider का diff workflow shine करता है — हर edit एक छोटा, reviewable change है न कि full regeneration।

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

Aider एक minimal diff produce करता है: एक या दो lines बदलती हैं, और कुछ नहीं touch होता। आप exactly देख सकते हैं क्या बदला।

पूरी file में spacing audit के लिए:

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.

Step 7: Spec के खिलाफ diffs review करें

Aider का diff view review surface है। किसी भी change को accept करने से पहले check करें:

• क्या added lines token keys reference करती हैं, literal values नहीं?
• क्या string literals strings.json में appear होती हैं, या वे hardcoded UI copy हैं?
• क्या generated code में node nesting IR JSON में parent-child order से match करती है?

अगर diff गलत लगे, तो prompt पर n से reject करें और Aider को बताएं क्या fix करना है। Short feedback loop — prompt, diff, accept/reject, refine — का मतलब है कि आप drift तुरंत catch करते हैं न कि code का बड़ा block land होने के बाद।

Aider का diff workflow bundle के साथ क्यों अच्छी तरह pair होता है

Token drift diffs में visible होता है। अगर generated line color = tokens.colorPrimary की बजाय color = Color(0xFF7F5CFE) कहती है, तो आप इसे merge होने से पहले देखते हैं। कोई "बाद में check करना" नहीं — review inline होती है।

Iterative refinement सस्ता है। आप हर change पर full screen regenerate नहीं कर रहे। हर follow-up prompt एक targeted diff produce करता है। Bundle stable context provide करता है; Aider surgical editing provide करता है।

Bundle code के साथ version-controlled है। जब design update हो, figmascope से bundle re-export करें, इसे previous version के खिलाफ diff करें, और Aider से केवल changed nodes apply करने के लिए कहें। Workflow multiple design iterations में full reimplementation के बिना scale करता है।

Common patterns और pitfalls

सभी screens एक साथ add मत करें। एक समय में एक screen JSON pass करें। ज़्यादा context हमेशा बेहतर नहीं होता — Aider (और underlying model) file के हर screen का dump होने की बजाय focused context के साथ बेहतर perform करता है।

Bundle के लिए --read use करें, positional args नहीं। अगर आप tokens.json को positional arg के रूप में pass करते हैं, Aider उसे edit करने की कोशिश कर सकता है। इसे read-only context mark करने के लिए --read use करें।

पहले prompt से पहले _meta.json check करें। warnings array उन fills और effects को list करता है जिन्हें exporter fully resolve नहीं कर सका। Aider को इनके बारे में upfront बताएं ताकि वह silently approximate न करे:

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

किसी भी warning को अपने architect prompt में include करें: "Skip hero-background fill — gradient not supported. Leave a TODO comment."

Surgical, reviewable edits के लिए Aider को prefer करें — और Cursor या Claude Code use करें जब आपको कई files में full-session context चाहिए। तीनों workflows एक ही तरह से शुरू होते हैं: main figmascope app export को आपके browser में handle करता है।