Aider är en terminalbaserad AI-parprogrammerare. Den läser filer du anger, genererar redigeringar som enhetliga diffsignaturer och tillämpar dem direkt i din kodbas. Varje ändring är granskningsbar innan den landar. Det diff-första arbetsflödet passar bra med tokenmedveten designöverlämning — du kan se exakt om den genererade koden använder spacing.16 från tokenfilen eller har driftat till ett hårdkodat 16px.

Den här guiden täcker hela Aider + figmascope-pipelinen: generera paketet, läsa in det i en Aider-session, använda Architect-läge för det initiala gerüstet och iterera med riktade redigeringspromptar.

Förutsättningar

Installera Aider om du inte redan gjort det:

pip install aider-chat
# eller
brew install aider

Aider stöder flera modellbackends. Exemplen här använder Claude Sonnet via Anthropic API, men arbetsflödet är identiskt med OpenAI eller lokala modeller.

export ANTHROPIC_API_KEY=sk-ant-...
# eller OPENAI_API_KEY för GPT-4o

Steg 1: Generera paketet

Gå till figmascope.dev, klistra in din Figma-fil-URL och klicka på Exportera agentkontext. Exportören körs i din webbläsare — din Figma Personal Access Token stannar i localStorage och lämnar aldrig din dator.

Nedladdningen hamnar som context-bundle.zip.

Steg 2: Packa upp i ditt projekt

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

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

Steg 3: Starta Aider med paketfiler i omfång

Skicka paketfilerna du behöver på kommandoraden. Aider laddar dem som läskontext — modellen kan referera dem men redigerar dem inte om du inte explicit använder /add för att göra dem redigerbara.

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

Mönstret: --read för paketfiler (endast kontext, inte redigerbara), positionsargument för källfilerna du vill att Aider ska ändra. Detta håller paketet rent — Aiders diff-maskineri försöker inte redigera tokens.json.

Om du vill att Aider ska skapa en ny fil istället för att redigera en befintlig, namnge bara målsökvägen som inte finns ännu. Aider skapar den.

Steg 4: Lägg till referens-PNG:er

Aider kan inkludera bilder som kontext för multimodala modeller. Använd kommandot /add efter start:

/add design/screens/home.png

PNG:n är en 2×-rendering från Figma. Med en multimodal modell (Claude Sonnet, GPT-4o) inkluderar Aider den som visuell referens. Använd den för rimlighetskontroller under granskning — den kanoniska specen är JSON:en, inte bilden.

Steg 5: Architect-läge — initialt gerüst

Aiders kommando /architect använder en tvåstegsmodell: ett pass för planering, ett pass för implementering. Det är rätt startpunkt för en hel skärm, där du vill ha en sammanhängande struktur innan du redigerar enskilda delar.

/architect Implementera design/screens/home.json som en Jetpack Compose-skärm.

Kontext:
- Läs CONTEXT.md för ramverksbegränsningar och målkonventioner.
- Alla avstånd-, färg- och radievärden kommer från tokens.json.
  Mappa tokennycklar direkt: spacing.16 → 16.dp, color.7f5cfe → Color(0xFF7F5CFE).
- Använd strängar från strings.json via stringResource() med fallback-fältet som bokstavlig fallback.
- IR-nodtyper: stack(vertical)→Column, stack(horizontal)→Row, overlay→Box,
  absolute→Box+Modifier.offset, leaf(text)→Text, leaf(rect)→Box+Modifier.background.
- Hårdkoda inte något värde som har en tokenekvivalent.

Utdata till: src/screens/HomeScreen.kt

Aider genererar en plan först, visar den för dig, sedan produceras diffet. Granska planen — om nodmappningen ser fel ut, korrigera den innan implementeringspasset körs.

Steg 6: Redigera specifika filer med tokenreferenser

Efter att gerüstet är på plats, använd riktade /edit-promptar för att fixa specifika problem. Det är här Aiders diff-arbetsflöde lyser — varje redigering är en liten, granskningsbar ändring snarare än en fullständig omgenerering.

Kortkomponenten i HomeScreen.kt använder hårdkodade 12dp för hörnradius.
Kontrollera tokens.json för rätt radietoken och ersätt den.

Aider producerar ett minimalt diff: en eller två rader ändrade, inget annat rört. Du kan se exakt vad som rörde sig.

För en avståndsgranskning av hela filen:

Granska varje .dp-värde i src/screens/HomeScreen.kt mot avståndstokens i design/tokens.json.
Producera ett diff som ersätter hårdkodade värden med deras tokenekvivalenter där sådana finns.
Lämna en // TODO-kommentar för värden som inte matchar en avståndtoken.

Steg 7: Granska diffsignaturer mot specen

Aiders diff-vy är granskningsytan. Innan du accepterar någon ändring, kontrollera:

Om ett diff ser fel ut, avvisa det med n vid prompten och berätta för Aider vad som ska fixas. Den korta feedbackloopen — prompt, diff, acceptera/avvisa, förfina — innebär att du fångar drift omedelbart snarare än efter att ett stort kodblock landat.

Varför Aiders diff-arbetsflöde passar bra med paketet

Tokendrift är synlig i diffsignaturer. Om en genererad rad säger color = Color(0xFF7F5CFE) istället för color = tokens.colorPrimary, ser du det innan det mergas. Det finns inget "kontrollera det senare" — granskningen sker inline.

Iterativ förfining är billig. Du omgenererar inte hela skärmen vid varje ändring. Varje uppföljningsprompt producerar ett riktat diff. Paketet ger den stabila kontexten; Aider ger den kirurgiska redigeringen.

Paketet versionskontrolleras bredvid koden. När designen uppdateras, exportera om paketet från figmascope, diffa det mot föregående version och be Aider tillämpa bara de ändrade noderna. Arbetsflödet skalas över flera designiterationer utan fullständig omimplementering.

Vanliga mönster och fallgropar

Lägg inte till alla skärmar på en gång. Skicka en skärm-JSON åt gången. Mer kontext är inte alltid bättre — Aider (och den underliggande modellen) presterar bättre med fokuserad kontext än en dump av varje skärm i filen.

Använd --read för paketet, inte positionsargument. Om du skickar tokens.json som positionsargument kan Aider försöka redigera det. Använd --read för att markera det som skrivskyddad kontext.

Kontrollera _meta.json innan den första prompten. Arrayen warnings listar fyllningar och effekter som exportören inte kunde lösa fullt ut. Berätta för Aider om dem i förväg så att den inte approximerar tyst:

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

Inkludera eventuella varningar i din architect-prompt: "Hoppa över hero-background-fyllning — gradient stöds inte. Lämna en TODO-kommentar."

Föredra Aider för kirurgiska, granskningsbara redigeringar — och använd Cursor eller Claude Code när du behöver kontext för hela sessioner över många filer. Alla tre arbetsflöden börjar på samma sätt: huvud-figmascope-appen hanterar export i din webbläsare.