Словами самого skill
Skill против «AI-слопа» для лендингов, портфолио и редизайнов. Агент читает бриф, определяет направление дизайна, а затем задаёт три параметра (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY), которые управляют каждым решением по макету, анимации и плотности. Он соотносит брифы с реальными дизайн-системами там, где они существуют (Fluent, Carbon, GOV.UK, Polaris), и честно помечает решения, относящиеся лишь к эстетике.
Жёсткие правила касаются соответствия hero-блока области просмотра, сдержанности «eyebrow»-надписей, одного акцента и одной темы на страницу, запрещённых признаков AI, а также конкретных библиотек иконок, шрифтов и анимации. Редизайны начинаются с аудита. Завершает всё механическая проверка Pre-Flight Check, каждый пункт которой должен быть выполнен до отправки кода.
Что он выдаёт
- Однострочный Design Read, формулируемый перед любым кодом: тип страницы, аудитория, язык вайба и дизайн-система или эстетическое семейство, к которому тянется решение.
- Фронтенд-код на Tailwind v4 по умолчанию, с откатом на v3 только тогда, когда этого требует существующий проект.
- Комментарии в коде, которые прямо указывают, какие части — заимствованное вдохновение, а какие — официальные материалы.
- Чётко обозначенные слоты-заглушки при отсутствии источника изображений, плюс итоговый список реальных изображений, которые ещё нужны.
Как это работает
- 01Прочитайте бриф прежде всего
Агент выводит, чего на самом деле хочет пользователь, из типа страницы, слов о вайбе, референсов, аудитории, существующих брендовых материалов и неявных ограничений — вместо того чтобы сразу переходить к эстетике по умолчанию.
- 02Задайте три параметра
Базовое значение — 8 / 6 / 4, оно переопределяется в диалоге на основе Design Read. Существуют пресеты под конкретные сценарии: от сервиса госсектора (3 / 2 / 5) до лендинга агентства (9 / 8 / 3).
- 03Честно выберите основу
Если бриф читается как Microsoft, IBM, GitHub, Shopify, Atlassian или относится к госсектору, устанавливайте и используйте официальный пакет, а не воспроизводите его CSS вручную.
- 04Примените стек по умолчанию
React или Next.js с Server Components, Tailwind v4 и Motion, импортируемым из motion/react, при этом анимация изолирована в клиентских листовых компонентах.
- 05Выполните проверку Pre-Flight Check
Перед выводом любого кода каждый пункт матрицы раздела 14 должен быть пройден; хотя бы один непройденный пункт означает, что работа не закончена.