Aider to terminalowy asystent programowania AI. Czyta pliki, które określasz, generuje edycje jako ujednolicone diffy i stosuje je bezpośrednio do bazy kodu. Każda zmiana jest przeglądana przed zastosowaniem. Ten przepływ pracy oparty na diffach dobrze współgra ze świadomym tokenów przekazaniem projektu — możesz dokładnie zobaczyć, czy wygenerowany kod używa spacing.16 z pliku tokenów, czy zdryfował do hardkodowanego 16px.

Ten przewodnik omawia pełny potok Aider + figmascope: generowanie pakietu, ładowanie go do sesji Aidera, użycie trybu Architect dla początkowego rusztowania i iterowanie z celowanymi promptami edycji.

Wymagania wstępne

Zainstaluj Aidera, jeśli jeszcze tego nie zrobiłeś:

pip install aider-chat
# lub
brew install aider

Aider obsługuje wiele backendów modeli. Przykłady tutaj używają Claude Sonnet przez Anthropic API, ale przepływ pracy jest identyczny z OpenAI lub modelami lokalnymi.

export ANTHROPIC_API_KEY=sk-ant-...
# lub OPENAI_API_KEY dla GPT-4o

Krok 1: Wygeneruj pakiet

Przejdź do figmascope.dev, wklej URL pliku Figma i kliknij Eksportuj kontekst agenta. Eksporter działa w przeglądarce — Twój personal access token Figma pozostaje w localStorage i nigdy nie opuszcza Twojej maszyny.

Pobieranie ląduje jako context-bundle.zip.

Krok 2: Rozpakuj do projektu

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

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

Krok 3: Uruchom Aidera z plikami pakietu w zakresie

Przekaż pliki pakietu, których potrzebujesz, w wierszu poleceń. Aider ładuje je jako kontekst tylko do odczytu — model może się do nich odnosić, ale nie będzie ich edytował, chyba że jawnie użyjesz /add, by awansować je do plików edytowalnych.

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

Wzorzec: --read dla plików pakietu (tylko kontekst, nie edytowalne), pozycyjne argumenty dla plików źródłowych, które chcesz modyfikować przez Aidera. To utrzymuje pakiet czysty — mechanizm diff Aidera nie będzie próbował edytować tokens.json.

Jeśli chcesz, by Aider stworzył nowy plik zamiast edytować istniejący, po prostu podaj docelową ścieżkę, która jeszcze nie istnieje. Aider ją stworzy.

Krok 4: Dodaj referencyjne PNG

Aider może dołączać obrazy jako kontekst dla modeli multimodalnych. Użyj polecenia /add po uruchomieniu:

/add design/screens/home.png

PNG to render 2× z Figma. Z modelem multimodalnym (Claude Sonnet, GPT-4o), Aider dołącza go jako wizualną referencję. Używaj go do weryfikacji podczas przeglądu — kanoniczna specyfikacja to JSON, nie obraz.

Krok 5: Tryb Architect — początkowe rusztowanie

Polecenie /architect Aidera używa dwuetapowego modelu: jeden przebieg na planowanie, jeden na implementację. To właściwy punkt startowy dla pełnego ekranu, gdzie chcesz spójną strukturę przed edytowaniem poszczególnych fragmentów.

/architect Zaimplementuj design/screens/home.json jako ekran Jetpack Compose.

Kontekst:
- Przeczytaj CONTEXT.md dla ograniczeń frameworka i docelowych konwencji.
- Wszystkie wartości odstępów, kolorów i promieni pochodzą z tokens.json.
  Mapuj klucze tokenów bezpośrednio: spacing.16 → 16.dp, color.7f5cfe → Color(0xFF7F5CFE).
- Używaj kluczy ciągów z strings.json przez stringResource() z polem fallback jako literalnym zapasem.
- Rodzaje węzłów IR: stack(vertical)→Column, stack(horizontal)→Row, overlay→Box,
  absolute→Box+Modifier.offset, leaf(text)→Text, leaf(rect)→Box+Modifier.background.
- Nie hardkoduj żadnej wartości, która ma odpowiednik tokenu.

Wynik do: src/screens/HomeScreen.kt

Aider najpierw generuje plan, pokazuje go Tobie, a następnie produkuje diff. Przejrzyj plan — jeśli mapowanie węzłów wygląda źle, popraw je przed uruchomieniem przebiegu implementacji.

Krok 6: Edytuj konkretne pliki z odwołaniami do tokenów

Po ustanowieniu rusztowania używaj celowanych promptów /edit, by naprawić konkretne problemy. Tu przepływ pracy diff Aidera błyszczy — każda edycja to mała, przeglądalna zmiana, a nie pełna regeneracja.

Komponent karty w HomeScreen.kt używa hardkodowanego 12dp dla promienia narożnika.
Sprawdź tokens.json dla właściwego tokenu promienia i zastąp go.

Aider produkuje minimalny diff: jedna lub dwie zmienione linie, nic innego nie dotknięte. Możesz dokładnie zobaczyć, co się zmieniło.

Dla audytu odstępów w całym pliku:

Przeprowadź audyt każdej wartości .dp w src/screens/HomeScreen.kt względem tokenów odstępów w design/tokens.json.
Produkuj diff, który zastępuje każdą hardkodowaną wartość jej odpowiednikiem tokenu, jeśli taki istnieje.
Zostaw komentarz // TODO dla każdej wartości, która nie pasuje do tokenu odstępu.

Krok 7: Przeglądaj diffy względem specyfikacji

Widok diff Aidera to powierzchnia przeglądu. Przed zaakceptowaniem jakiejkolwiek zmiany sprawdź:

Jeśli diff wygląda źle, odrzuć go za pomocą n przy prompcie i powiedz Aiderowi, co naprawić. Krótka pętla zwrotna — prompt, diff, zaakceptuj/odrzuć, udoskonal — oznacza, że natychmiast wyłapujesz dryf, a nie po wylądowaniu dużego bloku kodu.

Dlaczego przepływ pracy diff Aidera dobrze pasuje do pakietu

Dryf tokenów jest widoczny w diffach. Jeśli wygenerowana linia mówi color = Color(0xFF7F5CFE) zamiast color = tokens.colorPrimary, widzisz to przed mergem. Nie ma "sprawdzenia później" — przegląd odbywa się wbudowany.

Iteracyjne udoskonalanie jest tanie. Nie regenerujesz pełnego ekranu przy każdej zmianie. Każdy następny prompt produkuje celowany diff. Pakiet zapewnia stabilny kontekst; Aider zapewnia chirurgiczne edytowanie.

Pakiet jest kontrolowany wersją obok kodu. Gdy projekt się aktualizuje, ponownie wyeksportuj pakiet z figmascope, porównaj go z poprzednią wersją i poproś Aidera, by zastosował tylko zmienione węzły. Przepływ pracy skaluje się przez wiele iteracji projektowych bez pełnej reimplementacji.

Typowe wzorce i pułapki

Nie dodawaj wszystkich ekranów naraz. Przekazuj jeden JSON ekranu naraz. Więcej kontekstu nie zawsze jest lepsze — Aider (i bazowy model) działa lepiej ze skupionym kontekstem niż z zrzutem każdego ekranu w pliku.

Używaj --read dla pakietu, nie pozycyjnych argumentów. Jeśli przekażesz tokens.json jako pozycyjny argument, Aider może próbować go edytować. Użyj --read, by oznaczyć go jako kontekst tylko do odczytu.

Sprawdź _meta.json przed pierwszym promptem. Tablica warnings wyświetla wypełnienia i efekty, których eksporter nie mógł w pełni rozwiązać. Powiedz o nich Aiderowi z góry, by nie przybliżał po cichu:

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

Dołącz wszelkie ostrzeżenia w prompcie do architekta: "Pomiń wypełnienie hero-background — gradient nieobsługiwany. Zostaw komentarz TODO."

Preferuj Aidera do chirurgicznych, przeglądanych edycji — i używaj Cursor lub Claude Code, gdy potrzebujesz pełnego kontekstu sesji przez wiele plików. Wszystkie trzy przepływy pracy zaczynają się tak samo: główna aplikacja figmascope obsługuje eksport w przeglądarce.