Figma до Claude Code — Структурований дизайн-контекст для CLI від Anthropic

Інструкція «не перереалізовувати компоненти, що вже існують» важлива, коли інвентар компонентів спільний. Claude Code може прочитати design/components/inventory.json, щоб з'ясувати, які компоненти вже реалізовані, та імпортувати їх замість перегенерації.

Підключення дизайн-токенів

tokens.json, що експортується figmascope, використовує вкладену структуру у стилі W3C з полями $value і $type:

{
  "color": {
    "surface":    { "$value": "#f6f2ea", "$type": "color" },
    "ink":        { "$value": "#1f1d1a", "$type": "color" },
    "accent":     { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "1": { "$value": "4px",  "$type": "dimension" },
    "2": { "$value": "8px",  "$type": "dimension" },
    "4": { "$value": "16px", "$type": "dimension" },
    "8": { "$value": "32px", "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "lineHeight": { "$value": 1.45,     "$type": "number" }
    }
  }
}

Попросіть Claude Code згенерувати блок розширення теми tailwind.config.ts з цього файлу першим кроком, перед реалізацією будь-яких екранів. Так всі наступні реалізації зможуть послідовно використовувати псевдоніми токенів Tailwind:

claude --print "Read design/tokens.json and generate a tailwind.config.ts
theme.extend block. Map color tokens to theme.extend.colors,
spacing tokens to theme.extend.spacing, and typography to
theme.extend.fontFamily / fontSize. Output only the config object."

Детальний огляд формату токенів і резервного виведення за частотою — у статті Експорт дизайн-токенів для AI-агентів.

Робота з шаром рядків

Кожен текстовий вузол у Figma-файлі отримує слот у strings.json. Ключі використовують dot-нотацію, виведену з ієрархії фреймів:

{
  "home.hero.title":        "Everything you need",
  "home.hero.subtitle":    "Ship faster with structured context",
  "home.cta.primary":      "Get started",
  "settings.account.heading": "Account settings"
}

Дайте Claude Code інструкцію використовувати ці ключі як i18n-ідентифікатори. Замість хардкоду рядка "Everything you need" в JSX, згенерований компонент викликатиме t('home.hero.title') (або еквівалент у вашій i18n-бібліотеці). Файл ресурсів вже є в strings.json — потрібно лише його імпортувати або підключити до вашого i18n-налаштування.

Якщо figmascope виявляє колізію — два вузли, що хешуються в один ключ — він видає попередження strings-collision у _meta.json і додає числовий суфікс для усунення неоднозначності. Перевіряйте _meta.json перед початком сесії, щоб знати, чого очікувати.

Інтеграція з CLAUDE.md

Якщо ви використовуєте файл контексту проєкту CLAUDE.md, додайте короткий розділ, що спрямовує агента на директорію дизайну. Це добре поєднується з підходом, описаним у статті AI Design Handoff, і доповнює опис того, чим figmascope відрізняється від плагінів-інспекторів Figma.

Додайте розділ про дизайн ось так:

## Design context

Design tokens, layout IR, reference renders, and strings live in `design/`.
Always read `design/CONTEXT.md` before implementing any screen.
Token values are in `design/tokens.json` — never hardcode color or spacing.
Component canonical names are in `design/components/inventory.json`.

Це означає, що кожна сесія Claude Code у проєкті автоматично матиме контекст дизайну як частину своїх робочих знань, без необхідності повторювати це в кожному запиті.

Що агент справді виконує правильно

За наявності структурованого контексту Claude Code надійно відтворює:

• Значення відступів — тому що вони є в tokens.json як spacing.4 → 16px, а не візуально оцінені зі скриншоту
• Кольори — точні hex-значення, а не «схоже на теплий помаранчевий»
• Типографіку — сімейство шрифтів, розмір, насиченість, міжрядковий інтервал — все типізовано
• Напрямок розмітки — вузли stack мають явне поле direction і gap
• Іменування компонентів — inventory.json є канонічним джерелом, тому немає вигаданих назв
• Текстовий вміст — strings.json не дає агенту перефразовувати або вигадувати текст-замінник

Що все ще потребує перевірки людиною: інтерактивні стани (hover, focus, active), які не видно в статичних Figma-фреймах, тайминги анімацій та адаптивні точки розриву, що не були явно задизайнені у файлі. IR фіксує статичну розмітку; динамічна поведінка виходить за рамки охоплення.

Використання --dangerously-skip-permissions у контрольованих середовищах

Для автоматизованих пайплайнів, де ви хочете, щоб Claude Code працював без інтерактивних запитів на підтвердження — наприклад, у CI-кроці, що генерує заготовки компонентів після оновлення дизайну — можна використовувати --dangerously-skip-permissions. Підходить лише для ізольованих середовищ без виробничих облікових даних.

claude --dangerously-skip-permissions --print "$(cat <<'EOF'
Read design/CONTEXT.md. Generate component stub files for any components
in design/components/inventory.json that don't already exist in src/components/.
Use TypeScript + React functional component format. Include a TODO comment
for each component referencing the relevant screen JSON.
EOF
)"

У робочих процесах розробників у продакшені залишайте дозволи інтерактивними. Запити існують з поважної причини — Claude Code може і буде писати файли, і вам варто знати, які саме, перш ніж він це зробить.

Перевірка попереджень експорту перед запитом

figmascope записує попередження до _meta.json для умов, що можуть вплинути на якість результату. Перевіряйте їх перед початком сесії Claude Code:

python3 -c "
import json
meta = json.load(open('design/_meta.json'))
for w in meta.get('warnings', []):
    print(f\"{w['code']}: {w['message']}\")
print(f\"Frames exported: {meta['frameCount']}\")
print(f\"Tokens source: {meta.get('tokensSource', 'variables')}\")
"

Два попередження, на які варто звертати увагу:

• layout-mode-none-inferred — фрейм без auto-layout. figmascope вивів розмітку з абсолютних позицій дочірніх вузлів, що менш надійно. Зазначте це у вашому запиті: «This screen uses absolute positioning; generate accordingly.»
• strings-collision — два текстових вузли дали однаковий ключ ресурсу. figmascope додає числовий суфікс для усунення неоднозначності, але вам варто переконатися, що рядки в strings.json коректні перед тим, як агент генеруватиме i18n-виклики.

Процеси для Android та iOS

Claude Code не обмежений веб-фреймворками. Контекстний бандл не прив'язаний до фреймворку — layout IR і токени є даними, а не CSS. Для Jetpack Compose:

claude --print "$(cat <<'EOF'
Read design/CONTEXT.md and design/tokens.json.

Implement design/screens/Home.json as a Jetpack Compose screen.
- Map color tokens to a MaterialTheme ColorScheme
- Map spacing tokens to Dp values (strip 'px' suffix, use .dp)
- Map typography tokens to MaterialTheme.typography
- Use the component names from design/components/inventory.json as Composable names
- Reference design/screens/Home.png for visual accuracy
EOF
)"

Вузли stack в IR природно відображаються на Column (direction: vertical) і Row (direction: horizontal) у Compose. Вузли leaf з type: "text" стають composable-функціями Text; type: "image" стає Image або заповнювачем. Повний патерн — у статті Jetpack Compose from Figma.

Версіонування бандлу дизайну

Ставтеся до директорії design/ як до будь-якої іншої залежності проєкту. Коли дизайн суттєво змінюється — перееекспортуйте з figmascope.dev, закомітьте та зазначте зміну в PR:

# Check when the bundle was last exported vs when Figma file was last modified
python3 -c "
import json
from datetime import datetime
meta = json.load(open('design/_meta.json'))
exported = datetime.fromisoformat(meta['exportedAt'].replace('Z', '+00:00'))
modified = datetime.fromisoformat(meta['figmaLastModified'].replace('Z', '+00:00'))
delta = modified - exported
if delta.total_seconds() > 0:
    print(f'WARNING: Figma file was modified {delta} after last export')
else:
    print('Bundle is current')
"

Застарілий бандл означає, що агент працює з неактуальним дизайном. Перевірка мітки часу виявляє це ще до того, як ви витратите час на сесію генерації коду на основі застарілих специфікацій.