Aider is een terminalgebaseerde AI-pairprogrammeur. Het leest bestanden die je opgeeft, genereert bewerkingen als unified diffs en past deze direct toe op je codebase. Elke wijziging is te beoordelen voordat deze wordt aangebracht. Die diff-eerste workflow past goed bij token-bewuste ontwerpoverdracht — je kunt exact zien of de gegenereerde code spacing.16 uit het tokenbestand gebruikt of is afgedwaald naar een hardcoded 16px.

Deze gids behandelt de volledige Aider + figmascope-pijplijn: het genereren van de bundel, het laden ervan in een Aider-sessie, het gebruik van de Architect-modus voor het eerste geraamte en itereren met gerichte bewerkingsprompts.

Vereisten

Installeer Aider als je dat nog niet hebt gedaan:

pip install aider-chat
# of
brew install aider

Aider ondersteunt meerdere modelbackends. Voorbeelden hier gebruiken Claude Sonnet via de Anthropic API, maar de workflow is identiek met OpenAI of lokale modellen.

export ANTHROPIC_API_KEY=sk-ant-...
# of OPENAI_API_KEY voor GPT-4o

Stap 1: Genereer de bundel

Ga naar figmascope.dev, plak je Figma-bestands-URL en klik op Exporteer agentcontext. De exporteur draait in je browser — je persoonlijke toegangstoken van Figma blijft in localStorage en verlaat nooit je machine.

De download verschijnt als context-bundle.zip.

Stap 2: Pak uit in je project

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

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

Stap 3: Start Aider met bundelbestanden in scope

Geef de bundelbestanden die je nodig hebt mee op de commandoregel. Aider laadt ze als leescontext — het model kan ernaar verwijzen maar zal ze niet bewerken tenzij je expliciet /add gebruikt om ze te promoveren naar bewerkbare bestanden.

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

Het patroon: --read voor bundelbestanden (alleen context, niet bewerkbaar), positionele argumenten voor de bronbestanden die je door Aider wilt laten aanpassen. Dit houdt de bundel schoon — Aider's diff-mechanisme zal niet proberen tokens.json te bewerken.

Als je wilt dat Aider een nieuw bestand aanmaakt in plaats van een bestaand te bewerken, geef gewoon het doelpad op dat nog niet bestaat. Aider zal het aanmaken.

Stap 4: Voeg referentie-PNG's toe

Aider kan afbeeldingen als context opnemen voor multimodale modellen. Gebruik het commando /add na het opstarten:

/add design/screens/home.png

De PNG is een 2×-rendering uit Figma. Met een multimodaal model (Claude Sonnet, GPT-4o) neemt Aider het op als visuele referentie. Gebruik het voor gezondheidscontroles tijdens beoordeling — de canonieke specificatie is de JSON, niet de afbeelding.

Stap 5: Architect-modus — initieel geraamte

Aider's commando /architect gebruikt een tweestappenmodel: één ronde voor planning, één ronde voor implementatie. Dit is het juiste startpunt voor een volledig scherm, waarbij je een coherente structuur wilt voordat je afzonderlijke onderdelen bewerkt.

/architect Implementeer design/screens/home.json als een Jetpack Compose-scherm.

Context:
- Lees CONTEXT.md voor frameworkbeperkingen en doelconventies.
- Alle afstand-, kleur- en straalwaarden komen uit tokens.json.
  Wijs tokensleutels direct toe: spacing.16 → 16.dp, color.7f5cfe → Color(0xFF7F5CFE).
- Gebruik tekenreekssleutels uit strings.json via stringResource() met het veld fallback als letterlijk terugvalplan.
- IR-knooppuntsoorten: stack(vertical)→Column, stack(horizontal)→Row, overlay→Box,
  absolute→Box+Modifier.offset, leaf(text)→Text, leaf(rect)→Box+Modifier.background.
- Hardcode geen waarde die een token-equivalent heeft.

Uitvoer naar: src/screens/HomeScreen.kt

Aider genereert eerst een plan, toont het aan je, en produceert daarna de diff. Beoordeel het plan — als de knooppunttoewijzing er onjuist uitziet, corrigeer het dan voordat de implementatieronde wordt uitgevoerd.

Stap 6: Bewerk specifieke bestanden met tokenreferenties

Nadat het geraamte op zijn plaats is, gebruik gerichte /edit-prompts om specifieke problemen op te lossen. Dit is waar Aider's diff-workflow uitblinkt — elke bewerking is een kleine, te beoordelen wijziging in plaats van een volledige regeneratie.

Het kaartcomponent in HomeScreen.kt gebruikt hardcoded 12dp voor de hoekstraal.
Controleer tokens.json voor het juiste straaltoken en vervang het.

Aider produceert een minimale diff: één of twee regels gewijzigd, niets anders aangeraakt. Je kunt precies zien wat is verschoven.

Voor een afstandscontrole over het hele bestand:

Controleer elke .dp-waarde in src/screens/HomeScreen.kt aan de hand van de afstandstokens in design/tokens.json.
Produceer een diff die elke hardcoded waarde vervangt door het token-equivalent indien dat bestaat.
Laat een // TODO-opmerking achter voor elke waarde die niet overeenkomt met een afstandstoken.

Stap 7: Beoordeel diffs aan de hand van de specificatie

Aider's diff-weergave is het beoordelingsoppervlak. Controleer vóór het accepteren van een wijziging:

Als een diff er verkeerd uitziet, weiger het met n bij de prompt en vertel Aider wat er moet worden opgelost. De korte feedbacklus — prompt, diff, accepteren/weigeren, verfijnen — betekent dat je afwijking onmiddellijk opmerkt in plaats van nadat een groot blok code is geland.

Waarom Aider's diff-workflow goed past bij de bundel

Tokenafwijking is zichtbaar in diffs. Als een gegenereerde regel color = Color(0xFF7F5CFE) zegt in plaats van color = tokens.colorPrimary, zie je het voordat het wordt samengevoegd. Er is geen "controleer het later" — de beoordeling vindt inline plaats.

Iteratieve verfijning is goedkoop. Je regenereert niet het volledige scherm bij elke wijziging. Elke vervolgprompt produceert een gerichte diff. De bundel levert de stabiele context; Aider levert de chirurgische bewerking.

De bundel wordt naast de code versiebeheerd. Wanneer het ontwerp wordt bijgewerkt, exporteer de bundel opnieuw uit figmascope, vergelijk het met de vorige versie en vraag Aider om alleen de gewijzigde knooppunten toe te passen. De workflow schaalt over meerdere ontwerpiteraties zonder volledige herimplementatie.

Veelvoorkomende patronen en valkuilen

Voeg niet alle schermen tegelijk toe. Geef één scherm-JSON per keer door. Meer context is niet altijd beter — Aider (en het onderliggende model) presteert beter met gefocuste context dan met een dump van elk scherm in het bestand.

Gebruik --read voor de bundel, niet positionele argumenten. Als je tokens.json als positioneel argument doorgeeft, kan Aider proberen het te bewerken. Gebruik --read om het te markeren als alleen-lezen context.

Controleer _meta.json vóór de eerste prompt. De array warnings geeft een overzicht van fills en effecten die de exporteur niet volledig kon oplossen. Vertel Aider er van tevoren over zodat het niet stilletjes bij benadering werkt:

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

Vermeld eventuele waarschuwingen in je architect-prompt: "Sla heldenachtergrond-fill over — verloop niet ondersteund. Laat een TODO-opmerking achter."

Gebruik Aider bij voorkeur voor chirurgische, te beoordelen bewerkingen — en gebruik Cursor of Claude Code wanneer je volledige sessieecontext over veel bestanden nodig hebt. Alle drie de workflows beginnen op dezelfde manier: de hoofd figmascope-app regelt de export in je browser.