open-pencil-design-editor — скилл для Claude Code: что делает
Скилл учит агента читать и менять файлы .fig, собирать дизайн-токены и экспортировать макеты в код через CLI или MCP-сервер OpenPencil. Пригодится для автоматизации вёрстки и разбора дизайна.
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a claude-codeЧто делает open-pencil-design-editor
Скилл даёт ассистенту инструкции для взаимодействия с экосистемой OpenPencil. Движок читает файлы .fig локально без облака Figma. Через консольную утилиту open-pencil агент строит дерево макета, фильтрует фреймы по XPath-запросам и запрашивает метаданные. Доступен быстрый экспорт графики в SVG или JSX-разметку с утилитарными классами Tailwind v4.
Для изменения файлов применяется команда eval с методами Figma Plugin API. Флаг -w перезаписывает исходный файл на диске. Если десктопный редактор уже открыт, CLI подключается к его холсту через RPC без передачи пути к файлу. Также агент может запускать анализ дизайн-токенов для поиска палитры цветов и типографики.
Для глобальной установки CLI и MCP-сервера в системе потребуется Bun. Если собирать десктопный клиент из исходного кода самостоятельно, понадобится рабочий компилятор Rust.
Какие задачи решает
- экспортировать узлы
.figв код JSX с Tailwind v4 - проверить структуру макета и найти фреймы через XPath
- извлечь палитру цветов и типографику из файла Figma
- изменить свойства объектов скриптом через Figma Plugin API
Примеры запросов агенту
- Покажи структуру узлов в файле
design.figи найди все текстовые блоки с кнопками - Экспортируй главный фрейм из
landing.figв JSX с разметкой Tailwind - Собери палитру цветов и параметры отступов из
ui-kit.fig
Как установить open-pencil-design-editor
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a claude-code2Вручную: положить файлы
~/.claude/skills/open-pencil-design-editor/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/open-pencil-design-editor/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a codex2Вручную: положить файлы
.agents/skills/open-pencil-design-editor/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a cursor2Вручную: положить файлы
.cursor/skills/open-pencil-design-editor/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills open-pencil-design-editor2Вручную: положить файлы
.github/skills/open-pencil-design-editor/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/open-pencil-design-editorВручную: положить файлы
.devin/skills/open-pencil-design-editor/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о open-pencil-design-editor
Как установить open-pencil-design-editor в Claude Code?
Выполните команду npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a claude-code. Агент скопирует описание скилла в каталог ~/.claude/skills/open-pencil-design-editor/SKILL.md.
Для чего нужен этот скилл?
Он даёт ИИ-ассистенту сценарии для чтения, анализа и программного редактирования файлов Figma .fig без запуска закрытого редактора.
Что требуется для запуска MCP-сервера OpenPencil?
Для работы пакета @open-pencil/mcp нужен установленный рантайм Bun. Сервер предоставляет 90 инструментов для взаимодействия агента с макетами через протокол MCP.
