Aider ist ein terminalbasierter KI-Pair-Programmer. Er liest die von Ihnen angegebenen Dateien, erzeugt Änderungen als Unified Diffs und wendet diese direkt auf Ihre Codebasis an. Jede Änderung ist vor dem Einspielen prüfbar. Dieser diff-orientierte Workflow harmoniert gut mit token-bewusstem Design-Handoff — Sie sehen sofort, ob der generierte Code spacing.16 aus der Token-Datei verwendet oder zu einem fest codierten 16px abgedriftet ist.

Diese Anleitung behandelt die vollständige Aider + figmascope-Pipeline: Bundle generieren, in eine Aider-Sitzung laden, den Architect-Modus für das initiale Grundgerüst nutzen und mit gezielten Edit-Prompts iterieren.

Voraussetzungen

Installieren Sie Aider, falls noch nicht geschehen:

pip install aider-chat
# oder
brew install aider

Aider unterstützt mehrere Modell-Backends. Die Beispiele hier verwenden Claude Sonnet über die Anthropic API, der Workflow ist jedoch identisch mit OpenAI oder lokalen Modellen.

export ANTHROPIC_API_KEY=sk-ant-...
# oder OPENAI_API_KEY für GPT-4o

Schritt 1: Bundle generieren

Gehen Sie zu figmascope.dev, fügen Sie Ihre Figma-Datei-URL ein und klicken Sie auf Agentenkontext exportieren. Der Exporter läuft in Ihrem Browser — Ihr persönliches Figma-Zugriffstoken verbleibt im localStorage und verlässt niemals Ihren Rechner.

Der Download landet als context-bundle.zip.

Schritt 2: In Ihr Projekt entpacken

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

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

Schritt 3: Aider mit Bundle-Dateien im Scope starten

Übergeben Sie die benötigten Bundle-Dateien über die Kommandozeile. Aider lädt sie als Lesekonstext — das Modell kann sie referenzieren, wird sie aber nicht bearbeiten, es sei denn, Sie verwenden explizit /add, um sie zu editierbaren Dateien zu machen.

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

Das Muster: --read für Bundle-Dateien (nur Kontext, nicht editierbar), Positionsargumente für die Quelldateien, die Aider bearbeiten soll. Das hält das Bundle sauber — Aiders Diff-Mechanismus versucht nicht, tokens.json zu editieren.

Wenn Aider eine neue Datei erstellen soll anstatt eine bestehende zu bearbeiten, geben Sie einfach den Zielpfad an, der noch nicht existiert. Aider wird ihn anlegen.

Schritt 4: Referenz-PNGs hinzufügen

Aider kann Bilder als Kontext für multimodale Modelle einschließen. Verwenden Sie den Befehl /add nach dem Start:

/add design/screens/home.png

Das PNG ist ein 2×-Render aus Figma. Mit einem multimodalen Modell (Claude Sonnet, GPT-4o) fügt Aider es als visuelle Referenz ein. Nutzen Sie es zur Plausibilitätsprüfung während des Reviews — die maßgebliche Spezifikation ist das JSON, nicht das Bild.

Schritt 5: Architect-Modus — initiales Grundgerüst

Aiders /architect-Befehl verwendet ein zweistufiges Modell: ein Durchlauf für die Planung, ein weiterer für die Implementierung. Das ist der richtige Ausgangspunkt für einen vollständigen Screen, bei dem Sie eine kohärente Struktur wünschen, bevor einzelne Teile bearbeitet werden.

/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 generiert zuerst einen Plan, zeigt ihn Ihnen und produziert dann den Diff. Prüfen Sie den Plan — wenn die Knoten-Zuordnung falsch aussieht, korrigieren Sie sie, bevor der Implementierungsdurchlauf läuft.

Schritt 6: Gezieltes Bearbeiten einzelner Dateien mit Token-Referenzen

Nachdem das Grundgerüst steht, verwenden Sie gezielte /edit-Prompts, um spezifische Probleme zu beheben. Hier glänzt Aiders Diff-Workflow — jede Bearbeitung ist eine kleine, überprüfbare Änderung statt einer vollständigen Neugenerierung.

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

Aider erzeugt einen minimalen Diff: ein oder zwei geänderte Zeilen, sonst nichts berührt. Sie sehen genau, was sich verändert hat.

Für ein Spacing-Audit über die gesamte Datei:

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.

Schritt 7: Diffs gegen die Spezifikation prüfen

Aiders Diff-Ansicht ist die Review-Oberfläche. Prüfen Sie vor dem Akzeptieren jeder Änderung:

Wenn ein Diff falsch aussieht, lehnen Sie ihn mit n am Prompt ab und teilen Sie Aider mit, was zu korrigieren ist. Die kurze Feedback-Schleife — Prompt, Diff, Akzeptieren/Ablehnen, Verfeinern — bedeutet, dass Sie Drift sofort erkennen, bevor ein großer Codeblock eingespielt wird.

Warum Aiders Diff-Workflow gut zum Bundle passt

Token-Drift ist in Diffs sichtbar. Wenn eine generierte Zeile color = Color(0xFF7F5CFE) statt color = tokens.colorPrimary enthält, sehen Sie es vor dem Merge. Es gibt kein „später prüfen" — das Review findet inline statt.

Iterative Verfeinerung ist günstig. Sie regenerieren nicht bei jeder Änderung den vollständigen Screen. Jeder Follow-up-Prompt produziert einen gezielten Diff. Das Bundle liefert den stabilen Kontext; Aider übernimmt die chirurgische Bearbeitung.

Das Bundle wird gemeinsam mit dem Code versioniert. Wenn das Design aktualisiert wird, exportieren Sie das Bundle neu aus figmascope, vergleichen es mit der Vorversion und bitten Aider, nur die geänderten Knoten anzuwenden. Der Workflow skaliert über mehrere Design-Iterationen ohne vollständige Neuimplementierung.

Häufige Muster und Fallstricke

Nicht alle Screens auf einmal hinzufügen. Übergeben Sie jeweils nur ein Screen-JSON. Mehr Kontext ist nicht immer besser — Aider (und das zugrunde liegende Modell) arbeitet mit fokussiertem Kontext besser als mit einem Dump aller Screen-Dateien.

--read für das Bundle verwenden, nicht Positionsargumente. Wenn Sie tokens.json als Positionsargument übergeben, könnte Aider versuchen, es zu editieren. Verwenden Sie --read, um es als reinen Lesekonstext zu markieren.

_meta.json vor dem ersten Prompt prüfen. Das warnings-Array listet Füllungen und Effekte auf, die der Exporter nicht vollständig auflösen konnte. Teilen Sie Aider diese vorab mit, damit er nicht stillschweigend approximiert:

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

Fügen Sie etwaige Warnungen in Ihren Architect-Prompt ein: „Hero-Hintergrundfüllung überspringen — Verlauf nicht unterstützt. TODO-Kommentar hinterlassen."

Bevorzugen Sie Aider für chirurgische, überprüfbare Bearbeitungen — und verwenden Sie Cursor oder Claude Code, wenn Sie sitzungsübergreifenden Kontext über viele Dateien hinweg benötigen. Alle drei Workflows beginnen gleich: Die figmascope-Haupt-App übernimmt den Export in Ihrem Browser.