Figma-implement-design — скилл для вёрстки по макету Figma

openai/skills· Проверено 13.11.2026· 28,7 тыс.на GitHub

Переводит макет Figma в код проекта один к одному: берёт структуру, токены и скриншот фрейма через Figma MCP и встраивает результат в вашу дизайн-систему.

Как выглядит результат

Экран из макета Figma, перенесённый агентом в код и открытый в браузере источник

Снимки и анимации из репозитория и с сайта автора скилла.

Как установить Figma Implement Design

Личные скиллы лежат в ~/.claude/skills/, проектные — в .claude/skills/ репозитория. Проверка: команда /skills в сессии, вызов по имени — /figma-implement-design.

git clone --depth 1 https://github.com/openai/skills.git /tmp/figma-implement-design
mkdir -p ~/.claude/skills/figma-implement-design
cp -r /tmp/figma-implement-design/skills/.curated/figma-implement-design/. ~/.claude/skills/figma-implement-design/

Общая папка ~/.agents/skills/ (в проекте — .agents/skills/) читают Codex, Cursor, VS Code Copilot, Gemini CLI, Antigravity, OpenCode, Kilo Code, Goose, Qwen Code.

git clone --depth 1 https://github.com/openai/skills.git /tmp/figma-implement-design
mkdir -p ~/.agents/skills/figma-implement-design
cp -r /tmp/figma-implement-design/skills/.curated/figma-implement-design/. ~/.agents/skills/figma-implement-design/

Установщик скиллов от Vercel, нужен Node.js 22.20 или новее. Без -g скилл ставится в текущий проект; флаг -a выбирает агента.

npx skills add openai/skills --skill figma-implement-design -a claude-code

# для всех проектов
npx skills add openai/skills --skill figma-implement-design -g

Свои скиллы загружают на любом тарифе, от Free до Enterprise; нужно включённое выполнение кода.

Скачайте папку скилла с GitHub и упакуйте её в ZIP.
claude.ai → Customize → Skills → + → Create skill → Upload a skill
Загрузите ZIP и включите скилл переключателем.

Gemini CLI ставит скиллы из git-репозитория и хранит их в ~/.gemini/skills/.

gemini skills install https://github.com/openai/skills.git --consent

# проверка
gemini skills list

Что умеет

Сверстать компонент или экран по ссылке на фрейм Figma

Разобрать большой макет по частям через get_metadata, если ответ слишком длинный

Скачать иконки и картинки из макета без сторонних наборов иконок

Заменить классы Tailwind из ответа Figma на токены и компоненты проекта

Сверить готовый интерфейс со скриншотом фрейма: отступы, шрифты, цвета, состояния

Семь шагов: взять node-id из ссылки, вызвать get_design_context и get_screenshot, скачать ассеты, перевести код на конвенции проекта, добиться совпадения и сверить со скриншотом.

Работает через инструменты Figma MCP: удалённого сервера по ссылке или figma-desktop, где достаточно выделить слой в приложении.

В папке есть agents/openai.yaml для Codex; скриптов нет.

Что нужноПодключённый Figma MCP-сервер; Ссылка на фрейм с node-id или открытое приложение Figma с выделенным слоем

АгентыСделан для Codex и ставится там командой $skill-installer figma-implement-design.

Что попросить агента

Implement this Figma button component: <ссылка на фрейм>Агент возьмёт fileKey и node-id, получит контекст и скриншот, расширит кнопку проекта или создаст новую

Сверстай дашборд по макету <ссылка>Агент получит карту узлов, затем контекст каждой секции и соберёт раскладку на компонентах проекта

Сверстай выделенный фреймС сервером figma-desktop агент возьмёт текущее выделение без ссылки

Ограничения

Репозиторий openai/skills помечен как устаревший и отсылает к openai/plugins; в плагине Figma там лежит похожий скилл figma-design-to-code.

Без Figma MCP скилл бесполезен: ему нужны get_design_context и get_screenshot.

Материалы идут по Figma Developer Terms как бета, Figma может изменить или убрать их без уведомления.

Правки внутри самой Figma скилл не делает, для этого есть figma-use.

Описание из SKILL.md

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

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

Есть ли Figma skill для Claude?

Да, figma-implement-design из openai/skills: это обычная папка со SKILL.md, её можно положить в .claude/skills. Нужен подключённый Figma MCP.

Как установить скилл Figma в Codex?

Командой $skill-installer figma-implement-design внутри Codex, затем перезапустите Codex.

Нужен ли Figma MCP?

Да. Скилл вызывает get_design_context, get_metadata и get_screenshot, без сервера Figma шаги не выполнить.

Работает ли выделение без ссылки?

Только с локальным сервером figma-desktop: он берёт выделенный слой из открытого файла. Удалённому серверу нужна ссылка на фрейм или слой.

Что если токены проекта расходятся с макетом?

Скилл велит брать токены дизайн-системы и минимально подгонять отступы и размеры, чтобы визуально совпасть с макетом.

Можно ли этим скиллом рисовать в Figma?

Нет, его результат — код в репозитории. Для правок в Figma есть figma-use, для экранов в Figma — figma-generate-design.

Почему репозиторий openai/skills помечен устаревшим?

OpenAI 22.06.2026 объявила openai/skills устаревшим: свежие примеры скиллов для Codex теперь лежат в плагинах репозитория openai/plugins. Скиллы из старого каталога по-прежнему ставит $skill-installer.