Словами самого skill
Этот skill генерирует ультраминималистичные веб-интерфейсы в стиле документа, вдохновлённые премиальными рабочими платформами. Он задаёт тёплую монохромную палитру с оттенками off-white и угольного, авторскую типографическую иерархию на основе редакционных антикв и геометрических гротесков, а также плоские bento-grid раскладки с приглушёнными пастельными акцентами.
Протокол строго запрещает шрифты Inter, Roboto и Open Sans, стандартные библиотеки иконок вроде Lucide и Heroicons, тяжёлые тени по умолчанию в Tailwind, градиенты, эмодзи и клише AI-копирайтинга. Компоненты используют границы 1px solid #EAEAEA, чёткий радиус скругления 8-12px, щедрые внутренние отступы и анимации появления при скролле через IntersectionObserver. Движение незаметное и утончённое, анимируются только transform и opacity.
Что он выдаёт
- Фронтенд-код на HTML, React, Tailwind или Vue, органично отражающий премиальную, лаконичную, редакционную эстетику
- Раскладки с асимметричными bento-grid структурами CSS Grid и щедрым макро-пространством
Как это работает
- 01Сначала задайте макро-пространство
Используйте массивные вертикальные отступы между секциями, конкретно py-24 или py-32 в единицах Tailwind.
- 02Ограничьте ширину контента
Ограничьте основной текстовый контент max-w-4xl или max-w-5xl, чтобы сохранить редакционные пропорции.
- 03Примените типографическую иерархию и монохромные переменные
Сразу задайте кастомные шрифты и цветовые переменные согласно спецификациям тёплой монохромной палитры.
- 04Соблюдайте стандарты границ
Каждая карточка, разделитель и граница должны использовать точно 1px solid #EAEAEA.
- 05Добавьте анимации появления при скролле
Применяйте анимации ко всем основным блокам контента через IntersectionObserver, никогда не через слушатели window scroll.
- 06Обеспечьте визуальную глубину
Секциям нужна глубина за счёт изображений, ambient-градиентов или тонких текстур, а не пустых плоских фонов.