efecto-graphic-design — скилл для Claude Code: обзор и сетап
Скилл помогает ИИ-ассистенту создавать графику, презентации и макеты через канвас Efecto. Пригодится при вёрстке питч-деков, постеров, карточек для соцсетей и визиток.
npx skills add pablostanley/efecto-plugin --skill efecto-graphic-design -a claude-code
npx skills add pablostanley/efecto-plugin --skill graphic-design -a claude-codeЧто делает efecto-graphic-design
Ассистент подключается к холсту на efecto.app через локальный MCP-сервер и отдаёт команды на построение графики. Сначала создаётся артборд, затем разметка наполняется блоками на JSX со стилями Tailwind, после чего элементы дорабатываются пакетными обновлениями. Пользователь открывает полученный адрес сессии в браузере и наблюдает изменения в реальном времени.
В наборе предусмотрено 68 MCP-инструментов. Они охватывают чтение дерева документа, работу с анимацией, правку параметров и аудит готового макета. Есть важные технические нюансы: для артборда обязательно указывать flex flex-col, иначе слои наложатся в нулевых координатах. Произвольные HEX-цвета вроде bg-[#f9f9f9] тихо ломаются, поэтому нужны стандартные имена Tailwind или инлайн-стили.
Скилл бесполезен без запущенного пакета @efectoapp/mcp. Для тяжёлых многостраничных файлов безопаснее запрашивать документ через флаги вроде outline: true или artboardId, чтобы не перегрузить контекст токенами.
Какие задачи решает
- Сверстать слайды презентации или питч-дека прямо из диалога с агентом
- Собрать постер мероприятия либо графическую шапку для рассылки
- Сгенерировать карточку Open Graph и промо-материалы для блога
- Подготовить макет визитки или меню на интерактивном холсте
Примеры запросов агенту
- Создай титульный слайд для презентации стартапа с тёмным фоном и крупным заголовком
- Сделай обложку статьи для блога размером 1200 на 630 с карточкой по центру
- Сверстай визитку компании с логотипом, именем и контактами в две колонки
Как установить efecto-graphic-design
1Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill efecto-graphic-design -a claude-codenpx skills add pablostanley/efecto-plugin --skill graphic-design -a claude-code2Вручную: положить файлы
~/.claude/skills/graphic-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/graphic-design/
1Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill graphic-design -a codex2Вручную: положить файлы
.agents/skills/graphic-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill graphic-design -a cursor2Вручную: положить файлы
.cursor/skills/graphic-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pablostanley/efecto-plugin graphic-design2Вручную: положить файлы
.github/skills/graphic-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill graphic-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/pablostanley/efecto-plugin --path skills/graphic-designВручную: положить файлы
.devin/skills/graphic-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill graphic-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о efecto-graphic-design
Как установить efecto-graphic-design в Claude Code?
Выполните команду npx skills add pablostanley/efecto-plugin --skill efecto-graphic-design -a claude-code. Дополнительно подключите сервер командой claude mcp add efecto -- npx -y @efectoapp/mcp.
Что делает efecto-graphic-design?
Скилл даёт инструкции для управления графическим редактором Efecto через MCP. Бот создаёт артборды, вставляет компоненты на JSX и обновляет макеты прямо в окне браузера.
Почему элементы на артборде накладываются друг на друга?
Артборду требуется класс flex flex-col. Без этого параметра Efecto сбрасывает координаты дочерних слоёв в одну начальную точку.
