скилл CX Codex

efecto-web-design — скилл для Claude Code: дизайн и установка

Q: Как установить efecto-web-design в Claude Code?

Выполните `npx skills add pablostanley/efecto-plugin --skill efecto-web-design -a claude-code`. После установки файл будет доступен по пути `~/.claude/skills/web-design/SKILL.md`.

Скилл собирает веб-страницы и интерфейсы в Efecto через JSX, Tailwind CSS и MCP-инструменты. Нужен для лендингов, дашбордов и других UI-задач.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add pablostanley/efecto-plugin --skill efecto-web-design -a claude-code
npx skills add pablostanley/efecto-plugin --skill web-design -a claude-code

Открыть на GitHub

Что делает efecto-web-design

efecto-web-design создаёт сессии Efecto, артборды и секции интерфейса. Разметка передаётся как JSX, а стили задаются классами Tailwind CSS. Скилл умеет читать текущее состояние документа, находить узлы и массово менять их свойства через MCP-инструменты.

Работа идёт по сессии: пользователь открывает URL Efecto в браузере, после чего агент добавляет и меняет элементы, а результат появляется на холсте. Сессия завершается после 2 часов бездействия. Без подключённого браузера инструменты сессии не выполнятся; для работы также нужен Efecto MCP-сервер.

Какие задачи решает

собрать лендинг из JSX-секций
создать артборд нужного размера
найти узлы и изменить их стили
перестроить интерфейс по текущему документу

Примеры запросов агенту

Собери лендинг продукта в Efecto: создай сессию, артборд и секции навигации, героя и призыва к действию.
Создай дашборд в JSX с вертикальной структурой и Tailwind CSS, затем покажи URL сессии.
Найди заголовок и кнопки в текущем документе Efecto и обнови их классы через пакетное изменение.

Как установить efecto-web-design

1Через Skills CLI (Vercel)

npx skills add pablostanley/efecto-plugin --skill efecto-web-design -a claude-code

npx skills add pablostanley/efecto-plugin --skill web-design -a claude-code

2Вручную: положить файлы

~/.claude/skills/web-design/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/web-design/

1Через Skills CLI (Vercel)

npx skills add pablostanley/efecto-plugin --skill web-design -a codex

2Вручную: положить файлы

.agents/skills/web-design/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add pablostanley/efecto-plugin --skill web-design -a cursor

2Вручную: положить файлы

.cursor/skills/web-design/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install pablostanley/efecto-plugin web-design

2Вручную: положить файлы

.github/skills/web-design/SKILL.md

1Через Skills CLI (Vercel)

npx skills add pablostanley/efecto-plugin --skill web-design -a gemini-cli

2Командой платформы

gemini skills install https://github.com/pablostanley/efecto-plugin --path skills/web-design

Вручную: положить файлы

.devin/skills/web-design/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add pablostanley/efecto-plugin --skill web-design -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о efecto-web-design

Как установить efecto-web-design в Claude Code?

Выполните npx skills add pablostanley/efecto-plugin --skill efecto-web-design -a claude-code. После установки файл будет доступен по пути ~/.claude/skills/web-design/SKILL.md.

Что делает efecto-web-design?

Скилл управляет дизайном веб-страниц и UI через Efecto: создаёт сессии и артборды, добавляет JSX-секции, читает документ и обновляет узлы.

Что нужно для работы efecto-web-design?

Нужен Efecto MCP-сервер и подключённый браузер с открытой сессией. При потере MCP-процесса существующую сессию подключают заново, а не создают копию.

Похожие скиллы

Всё по теме «Фронтенд и UI» →

frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора2

efecto-graphic-design Скилл помогает ИИ-ассистенту создавать графику, презентации и макеты через канвас Efecto. Пригодится при вёрстке питч-деков, постеров, карточек для соцсетей и визиток. CX Codex +1 795установок