Aider je terminálový AI párový programátor. Čte soubory, které určíte, generuje úpravy jako unified diffy a aplikuje je přímo do vašeho kódu. Každou změnu lze zkontrolovat před tím, než se uloží. Tento přístup orientovaný na diffy se dobře hodí k předávání návrhů pracujícímu s tokeny — přesně vidíte, zda generovaný kód používá spacing.16 ze souboru tokenů, nebo zda se odchýlil na hardkódované 16px.

Tento průvodce pokrývá celý pipeline Aider + figmascope: generování balíčku, jeho načtení do Aider sezení, použití režimu Architect pro počáteční scaffold a iteraci pomocí cílených edit promptů.

Předpoklady

Nainstalujte Aider, pokud jste tak ještě neudělali:

pip install aider-chat
# nebo
brew install aider

Aider podporuje více backendů modelů. Příklady zde používají Claude Sonnet přes Anthropic API, ale workflow je stejný pro OpenAI nebo lokální modely.

export ANTHROPIC_API_KEY=sk-ant-...
# nebo OPENAI_API_KEY pro GPT-4o

Krok 1: Vygenerujte balíček

Přejděte na figmascope.dev, vložte URL svého Figma souboru a klikněte na Export Agent Context. Exportér běží ve vašem prohlížeči — váš Figma personal access token zůstane v localStorage a nikdy neopustí váš počítač.

Stažení přijde jako context-bundle.zip.

Krok 2: Rozbalte do svého projektu

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

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

Krok 3: Spusťte Aider se soubory balíčku v rozsahu

Předejte soubory balíčku, které potřebujete, na příkazovém řádku. Aider je načte jako kontext pro čtení — model na ně může odkazovat, ale nebude je upravovat, pokud explicitně nepoužijete /add k jejich povýšení na upravitelné soubory.

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

Vzor: --read pro soubory balíčku (pouze kontext, nelze upravovat), poziční argumenty pro zdrojové soubory, které chcete Aiderem upravovat. Balíček tak zůstane čistý — Aiderův diff mechanismus se nebude pokoušet upravovat tokens.json.

Pokud chcete, aby Aider vytvořil nový soubor místo úpravy stávajícího, stačí pojmenovat cílovou cestu, která zatím neexistuje. Aider ji vytvoří.

Krok 4: Přidejte referenční PNG

Aider může zahrnout obrázky jako kontext pro multimodální modely. Použijte příkaz /add po spuštění:

/add design/screens/home.png

PNG je 2× render z Figma. S multimodálním modelem (Claude Sonnet, GPT-4o) ho Aider zahrne jako vizuální referenci. Používejte ho pro ověřovací kontroly při review — kanonická specifikace je JSON, ne obrázek.

Krok 5: Režim Architect — počáteční scaffold

Příkaz /architect v Aideru používá dvoustupňový model: jeden průchod pro plánování, jeden pro implementaci. To je správný výchozí bod pro celou obrazovku, kde chcete koherentní strukturu před úpravou jednotlivých částí.

/architect Implementuj design/screens/home.json jako Jetpack Compose obrazovku.

Kontext:
- Přečti CONTEXT.md pro omezení frameworku a cílové konvence.
- Všechny hodnoty mezer, barev a poloměrů pocházejí z tokens.json.
  Mapuj klíče tokenů přímo: spacing.16 → 16.dp, color.7f5cfe → Color(0xFF7F5CFE).
- Používej klíče řetězců z strings.json přes stringResource() s polem fallback jako doslovnou záložní hodnotou.
- Druhy IR uzlů: stack(vertical)→Column, stack(horizontal)→Row, overlay→Box,
  absolute→Box+Modifier.offset, leaf(text)→Text, leaf(rect)→Box+Modifier.background.
- Nepoužívej hardkódované hodnoty, které mají ekvivalent v tokenu.

Výstup do: src/screens/HomeScreen.kt

Aider nejprve vygeneruje plán, ukáže vám ho a poté vytvoří diff. Zkontrolujte plán — pokud mapování uzlů vypadá špatně, opravte to před spuštěním implementačního průchodu.

Krok 6: Upravujte konkrétní soubory s referencemi na tokeny

Po vytvoření scaffoldu použijte cílené /edit prompty k opravě konkrétních problémů. Zde vyniká diff workflow Aideru — každá úprava je malá, přehledná změna, ne celá regenerace.

Komponenta karty v HomeScreen.kt používá hardkódovaných 12dp pro poloměr rohů.
Zkontroluj tokens.json pro správný token poloměru a nahraď ho.

Aider vytvoří minimální diff: změněn jeden nebo dva řádky, nic jiného. Přesně vidíte, co se změnilo.

Pro audit mezer v celém souboru:

Zkontroluj každou hodnotu .dp v src/screens/HomeScreen.kt proti tokenům mezer v design/tokens.json.
Vytvoř diff, který nahradí jakoukoli hardkódovanou hodnotu jejím tokenem, pokud existuje.
Zanech komentář // TODO pro jakoukoli hodnotu, která neodpovídá žádnému tokenu mezery.

Krok 7: Kontrolujte diffy proti specifikaci

Diff view Aideru je plocha pro review. Před přijetím jakékoli změny zkontrolujte:

Pokud diff vypadá špatně, odmítněte ho pomocí n na výzvu a řekněte Aideru, co má opravit. Krátká smyčka zpětné vazby — prompt, diff, přijmout/odmítnout, upřesnit — znamená, že odchylku zachytíte okamžitě, ne po tom, co se usadí velký blok kódu.

Proč se diff workflow Aideru hodí k balíčku

Odchylka tokenů je viditelná v diffech. Pokud vygenerovaný řádek říká color = Color(0xFF7F5CFE) místo color = tokens.colorPrimary, vidíte to před sloučením. Žádné "zkontroluju to později" — review probíhá přímo v místě.

Iterativní zdokonalování je levné. Při každé změně neregenerujete celou obrazovku. Každý následný prompt vytvoří cílený diff. Balíček poskytuje stabilní kontext; Aider poskytuje chirurgické úpravy.

Balíček je verzován spolu s kódem. Když se návrh aktualizuje, znovu exportujte balíček z figmascope, porovnejte diff s předchozí verzí a požádejte Aider, aby aplikoval pouze změněné uzly. Workflow se škáluje napříč více iteracemi návrhu bez plné reimplementace.

Běžné vzory a úskalí

Nepřidávejte všechny obrazovky najednou. Předávejte jeden JSON obrazovky najednou. Více kontextu není vždy lepší — Aider (a podkladový model) funguje lépe s cíleným kontextem než s výpisem každé obrazovky souboru.

Používejte --read pro balíček, ne poziční argumenty. Pokud předáte tokens.json jako poziční argument, Aider se ho může pokusit upravit. Použijte --read pro označení jako kontext jen pro čtení.

Zkontrolujte _meta.json před prvním promptem. Pole warnings uvádí výplně a efekty, které exportér nedokázal plně rozlišit. Informujte Aider o nich předem, aby je neschvaloval potichu:

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

Zahrňte případná varování do svého architect promptu: "Přeskočte výplň hero-background — přechod není podporován. Zanechte komentář TODO."

Preferujte Aider pro chirurgické, přehledné úpravy — a použijte Cursor nebo Claude Code, když potřebujete celé sezení s kontextem napříč mnoha soubory. Všechna tři workflow začínají stejně: hlavní aplikace figmascope zpracovává export ve vašem prohlížeči.