figma-implement-design · openai — скилл для Claude Code: установка
Скилл переводит макеты Figma в код интерфейса с сохранением структуры, токенов и визуального вида. Нужен при сборке компонентов и экранов по ссылке на макет.
npx skills add openai/skills --skill figma-implement-design -a claude-codeЧто делает figma-implement-design
Скилл разбирает выбранный узел Figma, получает его структуру и скриншот, затем переносит макет в код проекта. Он учитывает размеры, отступы, типографику, цвета, варианты компонентов и ограничения адаптивности. В процессе агент должен использовать существующие компоненты и токены проекта, а ассеты брать из ответа Figma MCP server.
Рабочий сценарий включает получение fileKey и nodeId, вызов get_design_context, получение изображения через get_screenshot, загрузку ассетов и проверку результата по макету. При большом ответе применяются get_metadata и отдельная загрузка дочерних узлов. Без подключённого и доступного Figma MCP server скилл не сможет получить контекст дизайна; для удалённого сервера нужна ссылка вида https://figma.com/design/:fileKey/:fileName?node-id=1-2, а figma-desktop MCP умеет работать с выбранным узлом.
Какие задачи решает
- перенести экран из Figma в код проекта
- собрать компонент по выбранному узлу макета
- сопоставить токены Figma с дизайн-системой проекта
- проверить вёрстку по скриншоту макета
- подключить ассеты из ответа Figma MCP server
Примеры запросов агенту
- Реализуй компонент по Figma URL
https://figma.com/design/:fileKey/:fileName?node-id=1-2в стиле и структуре текущего проекта. - Собери экран из выбранного узла Figma и проверь его по скриншоту макета.
- Перенеси этот дизайн в существующую дизайн-систему, переиспользуй подходящие компоненты и типы пропсов.
Как установить figma-implement-design
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-implement-design -a claude-code2Вручную: положить файлы
~/.claude/skills/figma-implement-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/figma-implement-design/
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-implement-design -a codex2Вручную: положить файлы
.agents/skills/figma-implement-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-implement-design -a cursor2Вручную: положить файлы
.cursor/skills/figma-implement-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/skills figma-implement-design2Вручную: положить файлы
.github/skills/figma-implement-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-implement-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/openai/skills --path skills/.curated/figma-implement-designВручную: положить файлы
.devin/skills/figma-implement-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-implement-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о figma-implement-design
Как установить figma-implement-design в Claude Code?
Выполните npx skills add openai/skills --skill figma-implement-design -a claude-code, затем проверьте файл ~/.claude/skills/figma-implement-design/SKILL.md.
Что делает figma-implement-design?
Скилл переводит выбранный узел Figma в код интерфейса, используя контекст дизайна, скриншот, ассеты и токены проекта. Он также задаёт проверку размеров, типографики, цветов, состояний и адаптивности.
Нужна ли ссылка на Figma для работы скилла?
Для удалённого Figma MCP нужна ссылка с fileKey и node-id. При использовании figma-desktop MCP можно выбрать узел прямо в открытом приложении Figma.
