Скиллы Claude для Figma → код

Готовые agent и skills для Figma to code в Claude Code строятся в конвейер: базовый скилл даёт доступ к Figma Plugin API, следующий слой извлекает токены дизайн-системы и спецификации макета, третий генерирует HTML/CSS, React-компоненты или Tailwind-разметку, а Figma Code Connect связывает готовые компоненты с кодом на постоянной основе для всей библиотеки. Все ставятся в ~/.claude/skills/ и работают по открытому стандарту Agent Skills.

Если искали готовые agent и skills для figma to code, скилл для вёрстки из макета или как связать Figma с React через Claude — ниже разбор по шагам конвейера: базовый доступ, извлечение данных, генерация кода, продакшн-связка Code Connect, правила дизайн-системы.

Часть 1 · Зачем

Почему через скилл, а не скриншот макета

Раньше вёрстка по Figma сводилась к тому, что агент смотрел на картинку и угадывал разметку — отсюда сбитые отступы и цвета «примерно как на макете». В 2026 году архитектура сменилась: Figma Dev Mode MCP server передаёт агенту структурированные данные — реальные компоненты, токены дизайн-системы, правила авто-лейаута — вместо того чтобы Claude гадал по скриншоту. Скилы из этого гайда работают поверх этой структуры, а не поверх картинки.

Часть 2 · Основа

Базовый слой: доступ к Figma

Фундамент — figma-use: базовый навык для работы с Figma через Plugin API. Позволяет Claude писать на холсте, инспектировать компоненты, читать и обновлять переменные дизайн-системы. Все остальные Figma-скилы из этого гайда работают поверх него — ставить первым.

Дальше — извлечение данных из готового макета. Навык figma-design-extraction полностью извлекает данные из Figma-макета для пиксельно точной реализации: токены дизайна (переменные цветов, отступов, шрифтов), компоненты, сетки и типографику — одним запросом вместо ручных замеров. Если вайб-кодер берёт дизайн из Figma, получает полную спецификацию сразу.

Часть 3 · Кодоген

Из макета в код

Универсальный конвертер — figma-implement-design: автоматизирует перенос Figma-дизайнов в production-готовый код — читает структуру файла через API и генерирует точный HTML/CSS, React-компоненты или Tailwind-разметку с правильными отступами, типографикой и цветами. Уменьшает разрыв между дизайном и реализацией для команд, где дизайнер работает в Figma, а разработчик пишет код.

Если нужен именно React — figma-design-react: берёт ссылку на дизайн в Figma и генерирует готовые React-компоненты с точным CSS. Идеален для вайб-кодеров и начинающих фронтенд-разработчиков, которые работают с готовыми макетами дизайнера, а не рисуют интерфейс с нуля.

Часть 4 · Продакшн

Продакшн-связка: Figma Code Connect

Разовая генерация кода решает задачу один раз. Для команды, где дизайн-система меняется постоянно, нужна связь, которая живёт — figma-code-connect: официальная функция Figma, которая связывает компоненты дизайна с реальным React/Vue кодом. Скилл генерирует Code Connect файлы для всей библиотеки компонентов автоматически. Дизайнеры сразу видят готовый код компонента прямо в Figma Dev Mode без вопросов разработчику, а фронтенд-команда избавляется от ручного маппинга токенов. Требует установленный figma-use.

Часть 5 · Система

Правила дизайн-системы

Когда дизайн масштабируется с одного продукта на несколько — навык figma-design-system-rules: создаёт правила дизайн-системы внутри Figma-библиотеки — соглашения по именованию, структуры токенов (цвет, отступы, типографика), анатомию компонентов и гайдлайны по использованию. Дизайн-лид выстраивает единые правила для всей команды с документацией прямо в Figma, а разработчик получает чёткую структуру токенов для переноса в Tailwind или CSS-переменные.

Часть 6 · Установка

Как поставить Figma-скилл

Способ общий для всех навыков:

1. возьмите папку скила с файлом SKILL.md (карточки всех перечисленных навыков — на маркетплейсе скилов для Claude);
2. положите её в ~/.claude/skills/, начиная с figma-use — остальные работают поверх него;
3. перезапустите Claude Code, он подхватит навык;
4. дайте Claude ссылку на файл или фрейм в Figma и попросите реализовать его в коде.

# Кладём папки навыков (внутри каждой — SKILL.md):
mkdir -p ~/.claude/skills/
# сначала figma-use (база), затем figma-implement-design
# или figma-design-react, перезапускаем Claude Code

# Дальше — словами:
«Реализуй компонент карточки товара из этого
 фрейма Figma на React с Tailwind»

Для скилов нужен доступ к Figma API — личный токен из настроек аккаунта, шаг описан в репозитории каждого навыка. Часть функций (Dev Mode, Code Connect) доступна на платных планах Figma — российская карта на сайт Figma напрямую не проходит, один из рабочих способов оплаты — посредник с оплатой рублями, например Оплати по миру. Скилы-плагины ставятся через /plugin install. Полный пошаговый разбор трёх способов установки — в гайде как установить скилл в Claude Code.

Вопросы

Частые вопросы

Читать дальше

Соседние гайды