Вёрстка из макета Pencil

Вёрстка из макета Pencil

Внешний вид приложений Zerovibe не придумывается агентом — он берётся из готового макета в Pencil. Pencil отдаёт точные числа (цвета, отступы, размеры, шрифты, тексты), твоя задача — перенести их в HTML-шаблон + static/app.css один в один, не «на глаз». Это убирает главную беду авто-вёрстки: рыхлые отступы, цвета мимо, плоскую иерархию. Источник истины по виду — Pencil, не твоя фантазия.

Что нужно сделать

Макет должен быть открыт в редакторе Pencil, а его MCP-инструменты (mcp__pencil__*) — доступны. Если нет — попроси пользователя открыть нужный экран и продолжай.

1. Найди нужный экран в макете (по имени frame или по выделению пользователя), посмотри его общий вид (скриншот) — чтобы понимать композицию и иерархию.

2. Забери токены дизайн-системы (цвета, шрифты) и положи их в :root в static/app.css, заменив дефолтные переменные шаблона. Это палитра всего приложения — задаётся ОДИН раз; экраны ссылаются на переменные, не хардкодят цвета.

3. Сними точную структуру экрана — пиксельные размеры, отступы (gap/padding), радиусы, бордеры, тексты, шрифты каждого блока. Это и есть верстка: переноси числа как есть, не округляй.

4. Перенеси в код: структуру → семантический HTML в templates/ (Go html/template); размеры/цвета/отступы → классы в static/app.css на переменных из шага 2; данные и интерактив — по HTMX-паттерну (см. skill conventions). Дизайн из Pencil статичен — оживляешь его ты.

5. Сверь со скриншотом макета. Расползается или плоско — вернись к числам из Pencil и поправь. Не сдавай, пока не похоже.

Правила

• Pencil — источник истины по виду. Не добавляй декор от себя, не меняй палитру, не выдумывай отступы. Чего нет в макете — того нет.
• Чистый CSS, без UI-библиотек/фреймворков (Tailwind, UIkit) — только обычный CSS с переменными из Pencil.
• Нет макета на нужный экран — скажи пользователю и предложи сверстать по аналогии с существующими экранами проекта.