figma-generative-plugins — скилл для Claude Code: обзор и настройка
Задаёт агенту правила сборки и обновления генеративных плагинов в редакторе Figma Design. Помогает пошагово развернуть шаблон, переписать код логики и связать интерфейс.
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a claude-codeЧто делает figma-generative-plugins
Скилл описывает порядок взаимодействия с вызовами create_generative_plugin и update_generative_plugin. Сначала агент выясняет рабочий сценарий и идентификатор плана через whoami. После генерации начального каркаса инструмент запрашивает исходники через get_generative_plugin и полностью переписывает файлы code.ts и ui.html.
В архитектуре есть жёсткое ограничение: нельзя создавать новые файлы или менять манифест manifest.json. Все секреты и приватные токены здесь под запретом. Код плагина открыт для чтения всем, кто имеет к нему доступ. Для закрытых внешних сервисов придётся готовить публичные эндпоинты или статичные наборы данных.
После коммита скилл формирует ссылку для тестирования результата в новом или существующем файле дизайна. При сбоях сборки агент не начинает переписывать проект с нуля, а делает одну точечную правку по логам компилятора.
Какие задачи решает
- сгенерировать новый плагин для Figma Design с интерактивным интерфейсом
- обновить TypeScript-код и разметку существующего генеративного расширения
- настроить передачу параметров между UI-окном и холстом Figma
- сформировать ссылку для проверки плагина в рабочем дизайн-макете
Примеры запросов агенту
- Создай генеративный плагин для Figma, который выравнивает фреймы по сетке
- Обнови разметку в ui.html и логику в code.ts, добавив проверку выбранных слоёв
- Исправь ошибку компиляции в текущем расширении Figma по логам сборщика
Как установить figma-generative-plugins
1Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a claude-code2Вручную: положить файлы
~/.claude/skills/figma-generative-plugins/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/figma-generative-plugins/
1Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a codex2Вручную: положить файлы
.agents/skills/figma-generative-plugins/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a cursor2Вручную: положить файлы
.cursor/skills/figma-generative-plugins/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install figma/mcp-server-guide figma-generative-plugins2Вручную: положить файлы
.github/skills/figma-generative-plugins/SKILL.md1Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a gemini-cli2Командой платформы
gemini skills install https://github.com/figma/mcp-server-guide --path skills-figquery/figma-generative-pluginsВручную: положить файлы
.devin/skills/figma-generative-plugins/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора3
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о figma-generative-plugins
Как установить figma-generative-plugins в Claude Code?
Выполните в терминале команду: npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a claude-code.
Что делает скилл figma-generative-plugins?
Он задаёт для ИИ-ассистента строгий регламент создания и изменения генеративных плагинов для Figma. Скилл координирует вызовы API, замену базового шаблона на рабочий код и подготовку интерфейса.
Можно ли передавать в плагин приватные ключи API?
Нет, внедрять токены и секреты запрещено, поскольку исходный код доступен читателям плагина. Интеграции должны опираться на открытые сетевые эндпоинты или статичные файлы.
