figma-generate-design · openai — скилл для Claude Code: сборка экранов в Figma
Собирает и обновляет целые экраны в Figma из кода или описания, используя опубликованную дизайн-систему, а не нарисованные с нуля прямоугольники.
npx skills add openai/skills --skill figma-generate-design -a claude-codeЧто делает figma-generate-design
Скилл берёт страницу приложения или многосекционный макет и переносит его в Figma. Сначала он читает исходники: разбирает структуру страницы, выделяет крупные секции вроде шапки, hero-блока, сетки тарифов, аккордеона с вопросами и подвала, а для каждой секции составляет список нужных UI-компонентов.
Дальше ищет в дизайн-системе компоненты, переменные и стили. Если в файле уже есть готовые экраны на той же системе, скилл предпочитает осмотреть их и построить точную карту компонентов, а к поиску по библиотеке обращается, когда таких экранов нет. Секции собираются пошагово, на токенах дизайн-системы вместо жёстко прописанных hex-цветов и пикселей.
Для работы нужен подключённый MCP-сервер Figma и файл с опубликованной дизайн-системой или доступ к библиотеке команды. Перед вызовом use_figma скилл требует загрузить ещё и figma-use — там правила по диапазонам цвета и загрузке шрифтов, без них скрипт сломается. Если задача обратная — сгенерировать код из макета, это уже другой скилл, figma-implement-design.
Какие задачи решает
- перенести готовую страницу приложения в Figma без ручной перерисовки
- собрать лендинг из секций на компонентах дизайн-системы
- обновить экран в Figma, чтобы он совпадал с текущим кодом
- найти в библиотеке нужные компоненты, переменные и текстовые стили
- создать новый экран по описанию, не выдумывая цвета и отступы
Примеры запросов агенту
- Возьми страницу из `src/pages/pricing.tsx` и собери её в Figma на компонентах дизайн-системы
- Обнови экран Checkout в Figma, чтобы он совпадал с текущим кодом
- Собери лендинг в Figma: hero, блок с тарифами, аккордеон с вопросами, подвал
Как установить figma-generate-design
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-generate-design -a claude-code2Вручную: положить файлы
~/.claude/skills/figma-generate-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/figma-generate-design/
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-generate-design -a codex2Вручную: положить файлы
.agents/skills/figma-generate-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-generate-design -a cursor2Вручную: положить файлы
.cursor/skills/figma-generate-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/skills figma-generate-design2Вручную: положить файлы
.github/skills/figma-generate-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-generate-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/openai/skills --path skills/.curated/figma-generate-designВручную: положить файлы
.devin/skills/figma-generate-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-generate-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора20
Весь набор →Другие версии figma-generate-design
Похожие
Вопросы о figma-generate-design
Как установить figma-generate-design в Claude?
Выполните npx skills add openai/skills --skill figma-generate-design -a claude-code. Скилл окажется в ~/.claude/skills/figma-generate-design/SKILL.md.
Что делает figma-generate-design?
Создаёт или обновляет полноценный экран в Figma из кода или описания. Компоненты, переменные и стили он берёт из опубликованной дизайн-системы и собирает секции пошагово.
Что нужно, чтобы скилл заработал?
Подключённый MCP-сервер Figma и файл с опубликованной дизайн-системой либо доступ к библиотеке команды. Плюс исходный код или описание экрана, который нужно собрать.
