figma-shaders — скилл для Claude Code: шейдеры Figma
Скилл помогает создавать и менять шейдеры в Figma через MCP. Нужен перед вызовами create_shader и update_shader.
npx skills add figma/mcp-server-guide --skill figma-shaders -a claude-codeЧто делает figma-shaders
Скилл задаёт порядок работы с эффектами, которые обрабатывают уже отрисованный слой, и заливками, создающими изображение без исходного растра. При создании он помогает выбрать тип и план, получить заготовку, прочитать исходники и заменить main.ts полной версией шейдера. Создание не заканчивается на заготовке.
При изменении скилл предлагает сначала найти шейдер и прочитать его файлы, затем сохранить текущие элементы управления, если их не просили менять. Перед написанием кода нужно изучить references/authoring.md. Для анимации и реакции на мышь метаданные должны совпадать с тем, какие данные читает исходник; если инструмент сообщает, что функция недоступна, обходить ограничение нельзя. Это важно: update_shader требует сохранить исходный тип шейдера.
Какие задачи решает
- Создать процедурную заливку или графический эффект в Figma
- Изменить существующий шейдер, сохранив его тип
- Настроить параметры анимации и реакции на положение мыши
- Исправить ошибку сборки шейдера по сообщению компилятора
Примеры запросов агенту
- Создай в Figma процедурную заливку с шумовой текстурой.
- Измени эффект размытия в существующем шейдере, сохрани его тип и элементы управления.
- Добавь анимацию, зависящую от времени, и обнови метаданные шейдера.
Как установить figma-shaders
1Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a claude-code2Вручную: положить файлы
~/.claude/skills/figma-shaders/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/figma-shaders/
1Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a codex2Вручную: положить файлы
.agents/skills/figma-shaders/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a cursor2Вручную: положить файлы
.cursor/skills/figma-shaders/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install figma/mcp-server-guide figma-shaders2Вручную: положить файлы
.github/skills/figma-shaders/SKILL.md1Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a gemini-cli2Командой платформы
gemini skills install https://github.com/figma/mcp-server-guide --path skills-figquery/figma-shadersВручную: положить файлы
.devin/skills/figma-shaders/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о figma-shaders
Как установить figma-shaders в Claude Code?
Выполните npx skills add figma/mcp-server-guide --skill figma-shaders -a claude-code. Файл скилла: ~/.claude/skills/figma-shaders/SKILL.md.
Что делает figma-shaders?
Помогает агенту создавать и обновлять эффекты и заливки-шэйдеры в Figma через MCP, включая чтение исходников и замену main.ts.
Нужно ли читать references/authoring.md перед созданием шейдера?
Да. Скилл требует изучить этот файл до подготовки замены main.ts; в нём описаны структура модуля, параметры и правила для эффектов и заливок.
