Все скиллы

page-design-pipeline

Для разработчиковДизайн

Поэтапное проектирование страницы/компонента с чекпоинтами и согласованием.

Open source — скоро

Использует

GLM-5.2сервис ↗Kimi K3сервис ↗Google Stitchсервис ↗VoltAgent/awesome-design-mdисточникLeonxlnx/taste-skillисточникemil-design-engсервисanimateсервисcontent-genсервис

Нужно подключить API

Чтобы навык работал, понадобятся ключи этих сервисов. Ссылка ведёт туда, где их получить:

Что делает

Поэтапно проектирует новую страницу или компонент с явным согласованием на каждом checkpoint: контекст → структура → черновики ТРЁХ моделей (GLM + Kimi K3 + Stitch, подписанные бок-о-бок) → выбор направления → финальный код руками Claude Code (внешние LLM финал не трогают) → анимации → аудит. Ведётся скорборд: каждая победа модели записывается — со временем видно, кто реально рисует лучше.

Как пользоваться

  1. 1Скажи «спроектируй страницу X» или /design-page.
  2. 2Отвечаешь на контекст, выбираешь структуру.
  3. 3Три модели параллельно рисуют черновики — выбираешь направление, счёт побед копится.
  4. 4Финал собирает Claude Code + Эмил + анимация + аудит, на каждом шаге — твой ОК.

Когда срабатывает

«сделай лендинг X»«спроектируй компонент»«построй экран»/design-page

Пример

/design-page страница тарифов — проведёт от структуры до вылизанного кода.

Обновления

  • Бренд-ориентир теперь даёт ЧИСЛА, а не пересказ: если названа опора вроде Stripe или Linear, подтягивается её карточка токенов (цвета, шрифты, отступы, радиусы) из коллекции `VoltAgent/awesome-design-md` (MIT, 74 бренда) — по локальной копии под зафиксированным коммитом, имя резолвится по белому списку. На финале обязательна обратная сверка: собранный код сравнивается с эталоном, расхождения по цветам и шрифтам показываются таблицей. Инструмент умеет отвечать «не смог проверить» отдельным кодом — на Tailwind-проекте он честно говорит, что не проверял, вместо зелёного отчёта ни о чём. Отдельно ловит кириллицу: у половины премиум-шрифтов из этих карточек её нет, и русская страница по токенам Stripe молча теряет шрифт.

  • Черновики теперь всегда рисуют ТРИ модели параллельно — GLM-5.2, Kimi K3 и Stitch (Gemini 3.1 Pro), превью бок-о-бок с подписями. Появился скорборд: каждый выбор записывается со счётом побед и цитатой «что понравилось» — со временем статистика покажет, какая модель реально сильнее. Финал жёстко зафиксирован за Claude Code: победивший черновик — только направление, финальный код собирается вручную на твоём стеке и проходит Ковальский-дисциплину (вкус → анимация → аудит).

  • Добавлена опциональная ветка Google Stitch (Checkpoint 1.5).

  • Добавлен в каталог RedSkills.

Понравился скилл? Новые разборы и обновления — в канале.