figma-create-design-system-rules — скилл для Claude Code: установка
Генерирует правила дизайн-системы для кодовой базы при переносе макетов из Figma. Помогает агентам соблюдать структуру компонентов и токенов проекта.
npx skills add openai/skills --skill figma-create-design-system-rules -a claude-codeЧто делает figma-create-design-system-rules
Скилл формирует набор проектных инструкций для агентов, реализующих макеты из Figma. Вместо ручного ввода требований в каждом диалоге правила один раз записываются в файл конфигурации: CLAUDE.md для Claude Code, AGENTS.md для Codex CLI или .cursor/rules/figma-design-system.mdc для Cursor.
Сначала вызывается инструмент create_design_system_rules на MCP-сервере Figma с передачей языка и фреймворка. Затем агент анализирует пути к компонентам, способ организации стилей, токены и соглашения об именовании. Итоговый файл регламентирует вызовы get_design_context и get_screenshot, запрещает импорт сторонних пакетов иконок и требует точного визуального соответствия интерфейсу.
Для работы обязательно нужно предварительно запустить и подключить Figma MCP сервер. Без него агент не сможет запросить базовый шаблон правил и прервёт выполнение.
Какие задачи решает
- создать файл правил дизайн-системы под кодовую базу
- зафиксировать пути к компонентам и дизайн-токенам для агента
- настроить порядок работы с Figma MCP сервером
- избежать дублирования существующих элементов интерфейса
Примеры запросов агенту
- Создай правила дизайн-системы для нашего проекта
- Настрой инструкции для переноса интерфейсов из Figma в репозиторий
- Сгенерируй правила работы с компонентами и стилями для Claude Code
Как установить figma-create-design-system-rules
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-create-design-system-rules -a claude-code2Вручную: положить файлы
~/.claude/skills/figma-create-design-system-rules/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/figma-create-design-system-rules/
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-create-design-system-rules -a codex2Вручную: положить файлы
.agents/skills/figma-create-design-system-rules/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-create-design-system-rules -a cursor2Вручную: положить файлы
.cursor/skills/figma-create-design-system-rules/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/skills figma-create-design-system-rules2Вручную: положить файлы
.github/skills/figma-create-design-system-rules/SKILL.md1Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-create-design-system-rules -a gemini-cli2Командой платформы
gemini skills install https://github.com/openai/skills --path skills/.curated/figma-create-design-system-rulesВручную: положить файлы
.devin/skills/figma-create-design-system-rules/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add openai/skills --skill figma-create-design-system-rules -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора20
Весь набор →Похожие
Вопросы о figma-create-design-system-rules
Как установить figma-create-design-system-rules в Claude Code?
Выполните в терминале команду npx skills add openai/skills --skill figma-create-design-system-rules -a claude-code. Она добавит скилл в конфигурацию Claude Code.
Что делает figma-create-design-system-rules?
Скилл сканирует репозиторий и генерирует файл правил с описанием компонентов, стилей и токенов. Это помогает ассистенту писать код по правилам проекта при переносе интерфейсов из Figma.
Что нужно настроить перед запуском скилла?
Необходимо подключить и настроить MCP-сервер Figma, а также предоставить доступ к кодовой базе проекта. Скилл обращается к серверу за шаблоном правил через инструмент create_design_system_rules.
