Промптинг по скриншотам имеет потолок. Вы вставляете дизайн, модель делает правдоподобное приближение, вы исправляете, в следующем ходу она снова дрейфует. Ничего не закреплено. У модели нет источника истины, с которым она могла бы сверяться между ходами.

Контекстный бандл figmascope меняет правила игры. Вместо пиксельного референса, который модель интерпретирует каждый раз заново, вы получаете структурированный, ссылаемый набор файлов — токены дизайна, IR макета, инвентарь компонентов, UI-строки — которые остаются в сессии и остаются согласованными. Claude Code может их читать, реализовывать на их основе и по запросу сверять собственный вывод с ними.

Это пошаговое руководство охватывает полный пайплайн: от экспорта бандла до проверенной, токен-верифицированной реализации.

Что делает процесс детерминированным

Три вещи делают бандл ссылаемым, а не интерпретируемым:

  1. Токены типизированы и снабжены ключами. tokens.json отображает семантические имена (spacing.16, color.7f5cfe) на точные значения. Модель может сверять свой вывод с файлом, не переобрабатывая дизайн.
  2. IR — это дерево, не пиксели. screens/home.json описывает макет в терминах узлов stack/overlay/absolute/leaf — та же абстракция, которую использует цель реализации (Compose, React и т.д.). Шага визуальной интерпретации нет.
  3. Бандл стабилен между ходами. Как только он в репозитории, каждый промпт в сессии может ссылаться на одни и те же файлы. Дрейф токенов обнаруживаем: попросите модель сравнить вывод с tokens.json, и она сделает это механически.

Шаг 1: Генерация бандла

Откройте figmascope.dev в браузере. Вставьте URL вашего Figma-файла. Экспортёр работает на стороне клиента через Figma REST API — ваш личный токен доступа Figma хранится в localStorage и никогда не отправляется на серверы figmascope.

Нажмите Export Agent Context. Страница экспортирует фреймы верхнего уровня, разрешает токены дизайна, строит IR и скачивает context-bundle.zip.

Шаг 2: Распаковка в ваш проект

# из корня проекта
unzip ~/Downloads/context-bundle.zip -d ./design/

# проверьте структуру
find design/ -type f | sort
# design/CONTEXT.md
# design/_meta.json
# design/components/inventory.json
# design/screens/home.json
# design/screens/home.png
# design/screens/settings.json
# design/screens/settings.png
# design/strings.json
# design/tokens.json

Имя директории не важно — design/ просто соглашение. Важно, чтобы Claude Code мог читать файлы из рабочей директории.

Шаг 3: Запуск Claude Code в вашем репозитории

cd my-app
claude

Claude Code стартует в корне вашего репозитория с полным доступом к файлам. Он может читать, писать и ссылаться на любой файл в дереве на протяжении всей сессии — именно эта ключевая возможность делает паттерн с бандлом работоспособным.

Шаг 4: Ориентирование агента

Начните с промпта чтения перед любой реализацией. Это загружает спецификацию в контекст сессии и позволяет убедиться в корректности экспорта до написания кода.

Read ./design/CONTEXT.md and tell me:
1. What target framework is this bundle for?
2. What token files does it reference?
3. Are there any warnings I should know about before implementing?

Claude сообщит цель (Jetpack Compose по умолчанию), источник токенов и предупреждения из заголовка CONTEXT.md — градиентные заливки, отсутствующие маппинги токенов, неподдерживаемые эффекты. Вы замечаете их сейчас, а не после генерации 200 строк кода.

Затем быстрая проверка токенов:

List the top 10 color tokens from ./design/tokens.json.
Then list the spacing tokens.

Это подтверждает, что файл токенов разобран правильно, и даёт ментальную модель палитры до реализации.

Шаг 5: Реализация экрана

Теперь промпт реализации. Явно укажите, какие файлы авторитетны для каких решений:

Implement ./design/screens/home.json as a Jetpack Compose screen.

Rules:
- CONTEXT.md constraints apply. Read it if you haven't already.
- All spacing, color, and radius values must come from ./design/tokens.json.
  Map token keys to the appropriate Compose primitives (e.g. spacing.16 → 16.dp).
- UI strings must use keys from ./design/strings.json via stringResource().
  Fall back to the "fallback" field value if no resource ID is available yet.
- The IR node kinds map as follows:
    stack (axis:vertical)   → Column
    stack (axis:horizontal) → Row
    overlay                 → Box
    absolute                → Box with Modifier.offset
    leaf (text)             → Text with TextStyle
    leaf (rectangle)        → Box with Modifier.background
- Do not invent any value not present in the token or IR files.
  If something is missing, leave a TODO comment with the token key you expected.

Claude Code прочитает IR, пройдёт по дереву узлов, сопоставит каждый узел с примитивом Compose и возьмёт значения токенов по ключу. Вывод прослеживаем: каждое значение .dp должно соответствовать токену отступа, каждый Color(0xFF...) должен соответствовать токену цвета.

Шаг 6: Обнаружение и исправление дрейфа токенов

После первого прохода реализации запустите проверку дрейфа до визуального ревью. Это ключевое преимущество бандла над промптингом по скриншотам — вы можете попросить модель механически верифицировать собственный вывод.

Compare every color value in the generated HomeScreen.kt against ./design/tokens.json.
List any hex values in the output that don't correspond to a color token key.
For each one, identify the correct token and replace the hardcoded value.

То же для отступов:

Compare every .dp value in HomeScreen.kt against the spacing tokens in ./design/tokens.json.
Flag any value that doesn't match a spacing token. Replace with the correct token reference.

Этот цикл — реализация, проверка дрейфа, исправление — сходится быстро. К второму-третьему проходу вывод полностью ссылается на токены.

Совет: включайте предупреждения _meta.json в первый промпт

design/_meta.json содержит массив warnings. Это вещи, которые экспортёр не смог полностью разрешить: градиентные заливки, встроенные изображения, эффекты без эквивалентного токена. Прочитайте их до реализации:

cat design/_meta.json

Если вывод содержит что-то вроде:

{
  "warnings": [
    "node 'hero-background': gradientFill not fully supported — background fill omitted",
    "node 'avatar': imageFill — reference only, no pixel data"
  ]
}

Добавьте это явно в промпт реализации: «Пропустите заливку hero background и оставьте // TODO: gradient. Для узла avatar используйте заполнитель AsyncImage с серым фоном.»

Это не позволяет Claude аппроксимировать молча — он сделает то, что вы сказали, вместо догадок.

Почему это лучше промптинга по скриншотам

Безопасно для многошагового режима. Файл токенов и IR не изменяются между ходами. Вы можете спросить «использовал ли ты правильные отступы для padding карточки?» на 12-м ходу и получить точный ответ, потому что источник истины по-прежнему на диске.

Удобно для диффов. При повторном экспорте после изменения дизайна новый бандл даёт дифф относительно старого. Вы можете попросить Claude проверить дифф и обновить только затронутые компоненты — полная переработка не требуется.

Не нужно повторно загружать. Бандл живёт в вашем репозитории. Вы не вставляете скриншоты заново для каждого нового экрана. Каждый новый экран — просто design/screens/<name>.json — ещё один файл для ссылки в следующем промпте.

Честен о пробелах. CONTEXT.md и _meta.json явно перечисляют то, что бандл не покрывает. У промптинга по скриншотам нет эквивалента — модель просто угадывает через пробелы.

Основное приложение figmascope выполняет экспорт в браузере — вставьте URL Figma, экспортируйте бандл, и вы готовы запускать Claude Code против детерминированной спецификации.