Aider + Figma — Pair-Coding UI з контекстним бандлом

Aider — це AI-партнер по кодуванню, що працює в терміналі. Він читає вказані вами файли, генерує правки у вигляді unified-дифів і застосовує їх безпосередньо до вашої кодової бази. Кожну зміну можна переглянути до того, як вона потрапить до коду. Цей диф-орієнтований підхід чудово поєднується з передачею дизайну з підтримкою токенів — ви можете точно перевірити, чи використовує згенерований код spacing.16 з файлу токенів, чи зсунувся до захардкодженого 16px.

Цей посібник охоплює повний пайплайн Aider + figmascope: генерація бандлу, завантаження його в сесію Aider, використання режиму Architect для початкового каркасу та ітерації через цільові промпти редагування.

Передумови

Встановіть Aider, якщо ще не зробили цього:

pip install aider-chat
# або
brew install aider

Aider підтримує різні бекенди моделей. В прикладах тут використовується Claude Sonnet через Anthropic API, але процес однаковий з OpenAI або локальними моделями.

export ANTHROPIC_API_KEY=sk-ant-...
# або OPENAI_API_KEY для GPT-4o

Крок 1: Генерація бандлу

Перейдіть на figmascope.dev, вставте URL вашого файлу Figma і натисніть Export Agent Context. Експортер працює у вашому браузері — ваш особистий токен доступу Figma зберігається в localStorage і ніколи не залишає ваш пристрій.

Завантаження прийде як context-bundle.zip.

Крок 2: Розпакування у ваш проєкт

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

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

Крок 3: Запуск Aider з файлами бандлу в контексті

Передайте необхідні файли бандлу через командний рядок. Aider завантажує їх як read-context — модель може посилатися на них, але не редагуватиме їх, якщо ви явно не використаєте /add для переведення в редаговані файли.

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

Патерн: --read для файлів бандлу (лише контекст, без редагування), позиційні аргументи для вихідних файлів, які Aider має змінювати. Це зберігає бандл чистим — механізм дифів Aider не намагатиметься редагувати tokens.json.

Якщо ви хочете, щоб Aider створив новий файл, а не редагував наявний, просто вкажіть цільовий шлях, якого ще не існує. Aider його створить.

Крок 4: Додавання референсних PNG

Aider може включати зображення як контекст для мультимодальних моделей. Використовуйте команду /add після запуску:

/add design/screens/home.png

PNG — це рендер 2× з Figma. З мультимодальною моделлю (Claude Sonnet, GPT-4o) Aider включає його як візуальний референс. Використовуйте його для перевірки під час рев'ю — канонічна специфікація це JSON, а не зображення.

Крок 5: Режим Architect — початковий каркас

Команда /architect в Aider використовує двоетапну модель: один прохід для планування, один для реалізації. Це правильна відправна точка для повного екрана, де потрібна цілісна структура перед редагуванням окремих частин.

/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 спочатку генерує план, показує його вам, а потім виробляє диф. Перегляньте план — якщо мапінг вузлів виглядає неправильним, виправте це до запуску кроку реалізації.

Крок 6: Редагування конкретних файлів з посиланнями на токени

Після того як каркас готовий, використовуйте цільові промпти /edit для виправлення конкретних проблем. Тут диф-підхід Aider особливо ефективний — кожне редагування являє собою невелику, перевірену зміну, а не повну регенерацію.

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

Aider виробляє мінімальний диф: змінено один-два рядки, нічого більше. Ви бачите рівно те, що змінилося.

Для аудиту відступів у всьому файлі:

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.

Крок 7: Перегляд дифів відповідно до специфікації

Вигляд дифу Aider — це поверхня для рев'ю. Перед прийняттям будь-якої зміни перевіряйте:

Чи посилаються додані рядки на ключі токенів, а не на літеральні значення?
Чи з'являються рядкові літерали в strings.json, або вони захардкоджені UI-тексти?
Чи відповідає вкладеність вузлів у згенерованому коді порядку батько-дитина в IR JSON?

Якщо диф виглядає неправильним, відхиліть його натисканням n у промпті та скажіть Aider, що виправити. Короткий цикл зворотного зв'язку — промпт, диф, прийняти/відхилити, уточнити — означає, що ви помічаєте зміщення одразу, а не після того, як великий блок коду вже готовий.

Чому диф-підхід Aider добре поєднується з бандлом

Зміщення токенів помітне в дифах. Якщо згенерований рядок містить color = Color(0xFF7F5CFE) замість color = tokens.colorPrimary, ви бачите це до злиття. Немає "перевірю пізніше" — рев'ю відбувається в режимі реального часу.

Ітеративне доопрацювання дешеве. Ви не регенеруєте весь екран при кожній зміні. Кожен наступний промпт виробляє цільовий диф. Бандл забезпечує стабільний контекст; Aider забезпечує точне редагування.

Бандл версіонується разом з кодом. Коли дизайн оновлюється, повторно експортуйте бандл з figmascope, порівняйте його з попередньою версією та попросіть Aider застосувати лише змінені вузли. Робочий процес масштабується через численні ітерації дизайну без повної переімплементації.

Поширені патерни та підводні камені

Не додавайте всі екрани одразу. Передавайте по одному JSON-файлу екрана. Більше контексту не завжди краще — Aider (і базова модель) краще працює зі сфокусованим контекстом, ніж зі скидом усіх екранів файлу.

Використовуйте --read для бандлу, а не позиційні аргументи. Якщо ви передаєте tokens.json як позиційний аргумент, Aider може спробувати відредагувати його. Використовуйте --read, щоб позначити його як контекст лише для читання.

Перевіряйте _meta.json перед першим промптом. Масив warnings перераховує заливки та ефекти, які експортер не міг повністю обробити. Повідомте Aider про них заздалегідь, щоб він не апроксимував мовчки:

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

Включіть будь-які попередження у ваш архітектурний промпт: "Пропустіть заливку hero-background — градієнти не підтримуються. Залиште TODO-коментар."

Надавайте перевагу Aider для точних, перевірених правок — і використовуйте Cursor або Claude Code, коли потрібен повний контекст сесії для багатьох файлів. Всі три підходи починаються однаково: основний застосунок figmascope виконує експорт у вашому браузері.