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. Ключи используют точечную нотацию, производную от иерархии фреймов:

{
  "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-значения, а не «похоже на тёплый оранжевый»
• Типографикой — гарнитура, размер, насыщенность, межстрочный интервал — всё типизировано
• Направлением разметки — узлы стека имеют явное поле 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 — фрейм без авторазметки. figmascope вывел расположение из абсолютных позиций дочерних элементов, что менее надёжно. Укажите это в промпте для соответствующего экрана: «Этот экран использует абсолютное позиционирование; генерируйте соответственно.»
• strings-collision — два текстовых узла породили одинаковый ключ ресурса. figmascope разграничивает их числовым суффиксом, но следует убедиться в корректности строк в strings.json до того, как агент сгенерирует i18n-вызовы.

Рабочие процессы для Android и iOS

Claude Code не ограничен веб-фреймворками. Бандл контекста не зависит от фреймворка — 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')
"

Устаревший бандл означает, что агент работает с устаревшим дизайном. Проверка временны́х меток выявляет это до того, как вы потратите время на сессию генерации кода, основанную на отменённых спецификациях.