pagecraft-block-design

⚡ Этот скилл — для вызова через тул Skill(pagecraft-block-design), не через Read .../SKILL.md. Если ты сюда попал через Read — остановись, вызови Skill(pagecraft-block-design). Содержимое то же, но система правильно учтёт делегирование.

PageCraft Design

Скилл-«справочник по визуалу». Без скриптов — четыре больших reference-файла, по теме каждый.

Когда подключается

• Стиль без референса — пользователь не дал скриншот / Figma. Открой references/styles-catalogue.md, предложи 3–4 подходящих стиля, жди выбор.
• Есть референс (скриншот или Figma) — открой references/mcp-setup.md, проверь наличие нужных MCP (mcp__figma__*, mcp__chrome-devtools__*). Если нет — предложи поставить или работать «на глаз».
• Сравнение с референсом — после генерации preview.html: chrome-devtools MCP открывает страницу, делает скриншот, сравниваем расхождения, итерируем. Алгоритм в mcp-setup.md + styles-catalogue.md.
• Пишешь style.css — открой references/css-guide.md: контейнерные запросы, fluid typography, BEM, изоляция, full-width, анимации с prefers-reduced-motion.
• Решаешь сколько примеров класть в examples/ — references/examples-guide.md. Не 1–2 заглушки, а полноценный показ потенциала блока.

Справочники

Файл	Когда открывать	Тема
references/styles-catalogue.md	Пользователь не дал референс — нужно предложить стиль	20 стилевых направлений: бруталист, swiss, neumorphism, glassmorphism, claymorphism, retro 90s, brutalist-minimalist, magazine, scandinavian, vaporwave, и др. Для каждого — CSS-переменные, шрифты, типажи, формат предложения пользователю
references/mcp-setup.md	Есть скриншот/Figma или сравниваешь preview ↔ референс	Установка и проверка Figma MCP, chrome-devtools MCP. Карточки-вопросы пользователю. Алгоритм сравнения preview ↔ референс
references/css-guide.md	Пишешь style.css блока	Шаблон CSS блока, container queries, fluid typography с clamp(... cqi ...), full-width, анимации, изоляция
references/examples-guide.md	Наполняешь папку examples/	Правила для папки examples/ блока: количество, разнообразие, какие сценарии показывать

Точность к референсу

Когда пользователь дал референс — он ждёт именно его, а не «улучшенную версию». Самая частая ошибка — подмешать «как делают красивые UI»: лишние градиенты, мягкие тени, скругления, эмодзи-иконки. Никогда не делай.

• Цвета — только из источника. Из Figma — через MCP (точные HEX/токены). Со скриншота — визуально; если сомневаешься в оттенке, лучше уточни.
• Шрифты, веса, размеры, межстрочные — только из источника. Шрифт неузнаваем — спроси, не предполагай Inter/Roboto.
• Отступы, радиусы, бордеры — измеряй. Figma даёт точные, на скриншоте — по сетке. Не округляй до «стандартных» 8/12/16, если в макете 10 или 14.
• Тени, градиенты, hover — только если явно есть в источнике.
• Иконки — если в референсе SVG, бери их; если иконок нет — не вставляй эмодзи.
• Чего не видно — спроси. Hover, focus, поведение при пустых полях, мобильная адаптация — один короткий вопрос, не угадывай.

Дизайн без референса

Когда нет ни скриншота, ни Figma — никогда не делай:

• Inter / Roboto / Arial как заголовочный шрифт — это шрифты интерфейса, не дизайна
• Фиолетово-синий градиент на белом — заезженный паттерн генеративного UI
• Карточки border-radius: 12px + box-shadow на белом — generic SaaS
• Emoji как иконки — рендерятся по-разному в разных ОС и ломают единый стиль; нужен SVG

Алгоритм:

1. Определи контекст: что за сайт / бренд / аудитория.
2. Выбери 3–4 подходящих стиля из styles-catalogue.md.
3. Предложи пользователю — коротко, одно предложение на вариант.
4. Жди выбор, следуй направлению без отступлений.

Что не делает этот скилл

• Не пишет шаблон / схему / JS блока — это pagecraft-schema-block или pagecraft-markdown-block.
• Не работает с серверными данными — pagecraft-block-ssr.
• Не публикует — pagecraft-block-publish.
• Не запускает preview.html — это pagecraft-block/scripts/build-preview.js, но сравнение preview с референсом через chrome-devtools MCP — здесь.