Claude Code + Figma — Детермінований пайплайн передачі дизайну

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

Контекстний бандл 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 не змінюються між ходами. Ви можете запитати "чи використали ви правильний відступ для відступу картки?" на 12-му ходу і отримати точну відповідь, бо джерело правди все ще на диску.

Зручний для дифів. Коли ви повторно експортуєте після зміни дизайну, новий бандл виробляє диф відносно старого. Ви можете попросити Claude переглянути диф і оновити лише зачеплені компоненти — без повної переімплементації.

Без повторного завантаження. Бандл живе у вашому репо. Ви не вставляєте скріншоти повторно для кожного нового екрана. Кожен новий екран — це просто design/screens/<name>.json — ще один файл для посилання у наступному промпті.

Чесний щодо прогалин. CONTEXT.md та _meta.json явно перераховують те, що бандл не охоплює. Промптинг зі скріншотами не має еквівалента — модель просто здогадується крізь прогалини.

Основний застосунок figmascope виконує експорт у вашому браузері — вставте URL Figma, експортуйте бандл, і ви готові запускати Claude Code відносно детермінованої специфікації.