figma · davila7 — скилл для Claude Code: дизайн из Figma в код
Скилл связывает Claude с Figma MCP: забирает контекст узла, скриншот и ассеты, а потом переводит макет в код проекта.
npx claude-code-templates@latest --skill creative-design/figmaЧто делает figma
Скилл задаёт порядок работы с Figma MCP. Сначала get_design_context для нужного узла, потом get_metadata, если ответ оказался слишком большим, затем get_screenshot для визуальной сверки. Ассеты скачиваются только после того, как есть и контекст, и скриншот.
Вывод сервера приходит как React с Tailwind. Скилл требует считать это описанием дизайна, а не готовым стилем: утилитарные классы заменяются на токены и компоненты проекта, переиспользуются существующие кнопки, поля и типографика, сохраняются роутинг и работа с состоянием. Если токены расходятся с макетом, приоритет у дизайн-системы, а отступы правятся минимально.
Сервер работает по ссылкам: клиент не открывает URL сам, он вытаскивает из него node ID, поэтому ссылка должна вести точно на нужный фрейм или вариант. Настройка, переменные окружения и отладка лежат в references/figma-mcp-config.md — без поднятого MCP-сервера скилл ничего не получит.
Какие задачи решает
- перевести фрейм из Figma в компонент проекта
- вытащить скриншот узла для визуальной сверки
- забрать иконки и картинки из макета без новых пакетов
- разобрать большой ответ сервера по карте узлов
- сверить готовый интерфейс с макетом один в один
Примеры запросов агенту
- собери этот экран по ссылке на фрейм Figma
- возьми node ID из ссылки и сделай компонент на наших токенах
- сравни готовую страницу со скриншотом из Figma
Как установить figma
1Через claude-code-templates
npx claude-code-templates@latest --skill creative-design/figma2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill figma -a claude-code3Вручную: положить файлы
~/.claude/skills/figma/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/figma/
Вручную: положить файлы
.agents/skills/figma/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/figma/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates figma2Вручную: положить файлы
.github/skills/figma/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/figmaВручную: положить файлы
.devin/skills/figma/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о figma
Как установить figma в Claude?
Через шаблоны: npx claude-code-templates@latest --skill creative-design/figma. Второй способ — npx skills add davila7/claude-code-templates --skill figma -a claude-code. Файл скилла окажется в ~/.claude/skills/figma/SKILL.md.
Что делает скилл figma?
Он описывает, как через Figma MCP получить контекст узла, скриншот и ассеты, а затем превратить их в код на конвенциях проекта.
Что нужно для работы скилла?
Поднятый Figma MCP-сервер и ссылка на конкретный фрейм или вариант. Клиент не открывает ссылку сам, он берёт из неё node ID.
Похожие скиллы
Всё по теме «Дизайн» →Сначала — figma от других авторов.
