Aider + Figma — Парное программирование UI из контекстного бандла

Aider — AI-помощник по программированию на базе терминала. Он читает указанные вами файлы, генерирует правки в виде унифицированных диффов и применяет их непосредственно к вашей кодовой базе. Каждое изменение доступно для проверки до применения. Этот diff-ориентированный рабочий процесс хорошо сочетается с токен-ориентированным дизайн-хэндоффом — вы можете точно видеть, использует ли сгенерированный код 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 загружает их как контекст для чтения — модель может на них ссылаться, но не редактирует их, если явно не использовать /add для продвижения в редактируемые файлы.

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

Шаблон: --read для файлов бандла (только контекст, без редактирования), позиционные аргументы для исходных файлов, которые нужно изменить. Это сохраняет бандл чистым — механизм диффов Aider не будет пытаться редактировать tokens.json.

Если нужно создать новый файл, а не редактировать существующий, просто укажите целевой путь, которого ещё не существует. 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 для исправления конкретных проблем. Здесь проявляется сила diff-рабочего процесса 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, что исправить. Короткий цикл обратной связи — промпт, дифф, принять/отклонить, уточнить — означает, что дрейф вы замечаете сразу, а не после приземления большого блока кода.

Почему diff-рабочий процесс 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))"

Включите все предупреждения в ваш architect-промпт: «Пропустите заливку hero-background — градиент не поддерживается. Оставьте комментарий TODO.»

Предпочитайте Aider для хирургических, проверяемых правок — а для полного контекста сессии по множеству файлов используйте Cursor или Claude Code. Все три рабочих процесса начинаются одинаково: основное приложение figmascope выполняет экспорт в браузере.