From zerovibe
Сверстать или оформить экран приложения по дизайн-макету из Pencil. Используй ВСЕГДА когда нужно сделать внешний вид страницы (новый экран, форма, список, дашборд, «сделай красиво», «свёрстай по макету», редизайн). Дизайн берётся из открытого .pen-макета через MCP-инструменты Pencil и переносится в Go-шаблон + static/app.css 1-в-1. НЕ сочиняй внешний вид сам.
How this skill is triggered — by the user, by Claude, or both
Slash command
/zerovibe:designThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Внешний вид приложений Zerovibe **не придумывается агентом** — он берётся из готового
Внешний вид приложений Zerovibe не придумывается агентом — он берётся из готового
макета в Pencil. Pencil отдаёт точные числа (цвета, отступы, размеры, шрифты, тексты),
твоя задача — перенести их в HTML-шаблон + static/app.css один в один, не «на
глаз». Это убирает главную беду авто-вёрстки: рыхлые отступы, цвета мимо, плоскую
иерархию. Источник истины по виду — Pencil, не твоя фантазия.
Макет должен быть открыт в редакторе Pencil, а его MCP-инструменты (mcp__pencil__*) —
доступны. Если нет — попроси пользователя открыть нужный экран и продолжай.
Найди нужный экран в макете (по имени frame или по выделению пользователя), посмотри его общий вид (скриншот) — чтобы понимать композицию и иерархию.
Забери токены дизайн-системы (цвета, шрифты) и положи их в :root в
static/app.css, заменив дефолтные переменные шаблона. Это палитра всего
приложения — задаётся ОДИН раз; экраны ссылаются на переменные, не хардкодят цвета.
Сними точную структуру экрана — пиксельные размеры, отступы (gap/padding), радиусы, бордеры, тексты, шрифты каждого блока. Это и есть верстка: переноси числа как есть, не округляй.
Перенеси в код: структуру → семантический HTML в templates/ (Go
html/template); размеры/цвета/отступы → классы в static/app.css на переменных
из шага 2; данные и интерактив — по HTMX-паттерну (см. skill conventions). Дизайн
из Pencil статичен — оживляешь его ты.
Сверь со скриншотом макета. Расползается или плоско — вернись к числам из Pencil и поправь. Не сдавай, пока не похоже.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub chudno/zerovibe --plugin zerovibe