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