figma-generate-library · openai — скилл для Codex: синхронизация
Скилл для построения профессиональной дизайн-системы в Figma на основе кодовой базы. Создаёт переменные, компоненты с вариантами, стили типографики и теминг в правильном порядке — от токенов к готовым компонентам.
npx skills add openai/plugins --skill figma-generate-library -a codexЧто делает figma-generate-library
Скилл управляет многофазным рабочим процессом: сначала анализирует код и текущее состояние Figma, затем создаёт фундамент (переменные, коллекции, режимы), после этого выстраивает структуру файла и только потом собирает компоненты по зависимостям.
В отличие от ручного создания, скилл идёт пошагово с чек-листами и валидацией после каждой фазы. Он требует загрузки вместе с дополнительным скиллом figma-use, который отвечает за синтаксис Plugin API — сам figma-generate-library учит последовательность, в какой строить систему. Важно: это не одноразовая операция, а многоэтапный процесс с 20–100+ вызовами API, каждый из которых нужно завершить и проверить перед переходом к следующему этапу.
Скилл следует архитектуре реальных дизайн-систем (Material 3, Polaris, Figma UI3), устанавливает области видимости для всех переменных, задаёт синтаксис кода и добавляет необходимые привязки к компонентам. Работает, только если файл Figma открыт в контексте и доступны инструменты для чтения кодовой базы.
Какие задачи решает
- синхронизировать компоненты с дизайн-системой в коде
- создать переменные и режимы оформления (светлую и тёмную тему)
- построить библиотеку компонентов с вариантами и привязками
- нарисовать фундамент дизайн-системы: токены, цвета, типографику
- согласовать структуру Figma с архитектурой кодовой базы
Примеры запросов агенту
- Создай дизайн-систему в Figma на основе нашего Design Tokens файла и компонентов React
- Обновим библиотеку в Figma: добавь переменные для светлой и тёмной темы, потом построй кнопки и инпуты с вариантами
- Помоги мне разобраться в щели между Figma и кодом: там кнопка, а в коде ещё и состояние disabled — синхронизируй
Как установить figma-generate-library
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill figma-generate-library -a codex2Вручную: положить файлы
.agents/skills/figma-generate-library/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill figma-generate-library -a claude-code2Вручную: положить файлы
~/.claude/skills/figma-generate-library/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/figma-generate-library/
Вручную: положить файлы
.cursor/skills/figma-generate-library/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/plugins figma-generate-library2Вручную: положить файлы
.github/skills/figma-generate-library/SKILL.mdКомандой платформы
gemini skills install https://github.com/openai/plugins --path plugins/figma/skills/figma-generate-libraryВручную: положить файлы
.devin/skills/figma-generate-library/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора201
Весь набор →Другие версии figma-generate-library
Похожие
Вопросы о figma-generate-library
Как установить figma-generate-library в Codex?
Выполни команду npx skills add openai/plugins --skill figma-generate-library -a codex, затем найди скилл в файле .agents/skills/figma-generate-library/SKILL.md в корне проекта.
Что делает figma-generate-library?
Управляет пошаговым построением дизайн-системы в Figma из кодовой базы: сначала извлекает токены и компоненты, создаёт переменные и коллекции, затем строит структуру файла и добавляет компоненты с вариантами и привязками переменных.
Нужно ли загружать figma-use вместе с figma-generate-library?
Да, оба скилла должны быть загружены одновременно: figma-generate-library учит, в каком порядке строить систему, а figma-use предоставляет синтаксис для вызовов Plugin API.
