Нешаблонные лендинги и портфолио

Текст

---
name: design-taste-frontend
description: Скилл против «шаблонного» фронтенда для лендингов, портфолио и редизайнов. Агент читает бриф, определяет подходящее дизайн-направление и выпускает интерфейсы, которые не выглядят типовыми. Настоящие дизайн-системы там, где они уместны, аудит перед редизайном, строгая предполётная проверка.
---

tasteskill: скилл против шаблонного фронтенда

Лендинги, портфолио и редизайны. Не дашборды, не таблицы данных, не многошаговые интерфейсы продукта. Каждое правило ниже зависит от контекста. Ничего не срабатывает автоматически. Сначала прочитай бриф, потом бери только то, что подходит.

0. ВЫВОД ИЗ БРИФА (сначала пойми, о чём просят)

Прежде чем трогать код или крутить регуляторы, определи, чего на самом деле хочет пользователь. Большинство дизайна, который делают языковые модели, плох потому, что модель сразу прыгает к эстетике по умолчанию, вместо того чтобы понять задачу.

0.A Сначала прочитай эти сигналы

1. Тип страницы - лендинг (SaaS / потребительский продукт / агентство / событие), портфолио (разработчик / дизайнер / творческая студия), редизайн (сохранить или переделать полностью), редакционная страница / блог.
2. Слова про настроение, которые использовал пользователь - «минималистично», «спокойно», «в стиле Linear», «как на Awwwards», «брутализм», «премиальный потребительский», «как у Apple», «игриво», «серьёзный B2B», «редакционный», «как у агентств», «стеклянный», «тёмная технологичность».
3. Референсы - ссылки, которые он дал, скриншоты, которые вставил, продукты, которые назвал, бренды, с которыми конкурирует.
4. Аудитория - закупочная комиссия B2B, или потребитель с чувством дизайна, или рекрутер, пролистывающий портфолио. Эстетику выбирает аудитория, а не твой вкус.
5. Уже существующие элементы бренда - логотип, цвет, шрифт, фотографии. В редизайне это исходный материал, а не необязательная вводная (см. раздел 11).
6. Негласные ограничения - аудитории, для которых важна доступность, госсектор, регулируемые отрасли, торговля, где главное доверие, детские продукты. Эти ограничения ПЕРЕВЕШИВАЮТ эстетические предпочтения.

0.B Перед генерацией выведи однострочное «Прочтение дизайна» (Design Read)

Перед любым кодом сформулируй одной строкой: «Читаю это так: \<тип страницы> для \<аудитория>, язык \<настроение>, склоняюсь к \<дизайн-система или семейство эстетики>.»

Примеры прочтения:

• *«Читаю это так: SaaS-лендинг для B2B для технических покупателей, язык минимализма в стиле Linear, склоняюсь к утилитам Tailwind + Geist + сдержанной анимации.»*
• *«Читаю это так: портфолио дизайнера-одиночки для нанимающих менеджеров, язык редакционной / кинетической типографики, склоняюсь к нативному CSS + анимации, управляемой прокруткой, + нестандартной типографике.»*
• *«Читаю это так: редизайн сайта государственной услуги, язык, где главное доверие, склоняюсь к GOV.UK Frontend или USWDS.»*

0.C Если бриф неоднозначен, задай один вопрос, а не гадай

Задай ровно один уточняющий вопрос - никогда не вываливай сразу несколько - и только тогда, когда прочтения дизайна действительно расходятся. Пример: *«Это должно быть ближе к чистому Linear или к экспериментальному Awwwards?»*

Если можешь уверенно вывести из контекста, не спрашивай. Просто объяви прочтение дизайна и продолжай.

0.D Дисциплина против значений по умолчанию

Не скатывайся к: фиолетовым ИИ-градиентам, центрированному главному экрану (hero) на тёмной сетчатой заливке, трём одинаковым карточкам преимуществ, банальному глассморфизму на всём подряд, бесконечным циклам микроанимаций повсюду, Inter + slate-900. Это значения по умолчанию у языковых моделей. Сознательно выходи за их пределы, опираясь на прочтение дизайна.

1. ТРИ РЕГУЛЯТОРА (основная настройка)

После прочтения дизайна выставь три регулятора (dials). От них зависит каждое решение ниже о вёрстке, анимации и плотности.

• **DESIGN_VARIANCE: 8** - 1 = идеальная симметрия, 10 = художественный хаос
• **MOTION_INTENSITY: 6** - 1 = статика, 10 = кинематографичность / физика
• **VISUAL_DENSITY: 4** - 1 = художественная галерея / воздух, 10 = кабина пилота / плотные данные

Базовые значения: 8 / 6 / 4. Используй их, если прочтение дизайна не требует другого. Не проси пользователя править этот файл - значения меняются в разговоре.

1.A Вывод значений регуляторов (прочтение дизайна → значения)

1.B Готовые наборы под сценарии

1.C Как регуляторы управляют результатом

Используй эти значения (или те, что переопределил пользователь) как глобальные переменные. Перекрёстные ссылки во всём документе указывают на именно эти имена переменных - никогда не придумывай псевдонимы вроде LAYOUT_VARIANCE или ANIM_LEVEL.

2. КАРТА «БРИФ → ДИЗАЙН-СИСТЕМА»

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

2.A Когда брать настоящую дизайн-систему (официальные пакеты)

Правило честности: если бриф читается как одна из систем выше, установи и используй официальный пакет. Не воссоздавай его CSS вручную. Не импортируй токены системы, чтобы потом переопределить 90% из них.

Одна система на проект. Не мешай Fluent React с Carbon в одном дереве. Не импортируй компоненты shadcn/ui в приложение на Material 3.

2.B Когда бриф - это эстетика, а не система

Для этих направлений единого официального пакета нет. Собирай на нативном CSS + Tailwind + поддерживаемой библиотеке компонентов. Честно пиши в комментариях к коду, что заимствовано как вдохновение, а что - официальный материал.

3. АРХИТЕКТУРА И СОГЛАШЕНИЯ ПО УМОЛЧАНИЮ

Если прочтение дизайна не выбрало настоящую дизайн-систему (раздел 2.A), по умолчанию действует следующее:

3.A Стек

• Фреймворк: React или Next.js. По умолчанию - серверные компоненты (RSC).
• БЕЗОПАСНОСТЬ RSC: глобальное состояние работает ТОЛЬКО в клиентских компонентах. В Next.js оборачивай провайдеры в компонент с "use client".
• ИЗОЛЯЦИЯ ИНТЕРАКТИВНОСТИ: любой компонент, который использует Motion, слушатели прокрутки или физику указателя, ДОЛЖЕН быть отдельным листовым компонентом с 'use client' в первой строке. Серверные компоненты отрисовывают только статичную вёрстку.
• Стили: Tailwind v4 (по умолчанию). Tailwind v3 - только если этого требует существующий проект.
• Для v4: НЕ используй плагин tailwindcss в postcss.config.js. Используй @tailwindcss/postcss или плагин для Vite.
• Анимация: Motion (библиотека, раньше известная как Framer Motion). Импортируй из motion/react (import { motion } from "motion/react"). Пакет framer-motion всё ещё работает как устаревший псевдоним - в новом коде предпочитай motion/react.
• Шрифты: всегда используй next/font (Next.js) или размещай у себя через @font-face + font-display: swap. Никогда не подключай Google Fonts через <link> в продакшене.

3.B Состояние

• Локальные useState / useReducer - для изолированных частей интерфейса.
• Глобальное состояние - ТОЛЬКО чтобы не протаскивать свойства через много уровней: Zustand, Jotai или контекст React.
• НИКОГДА не используй useState для непрерывных значений, которые задаёт пользователь (положение мыши, прогресс прокрутки, физика указателя, магнитное наведение). Используй useMotionValue / useTransform / useScroll из Motion. useState заново отрисовывает дерево React при каждом изменении и «складывается» на мобильных.

3.C Иконки

• Разрешённые библиотеки (по приоритету): @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react.
• Не рекомендуется: lucide-react. Допустима, только если пользователь прямо попросил или проект уже от неё зависит.
• НИКОГДА не рисуй SVG-иконки вручную. Если нужного значка нет, поставь вторую библиотеку или собери из примитивов - не вычерчивай контуры иконок с нуля.
• Одно семейство на проект. Не смешивай Phosphor с Lucide в одном дереве компонентов.
• **Задай единую толщину линии (strokeWidth) глобально** (например, 1.5 или 2.0).

3.D Политика по эмодзи

По умолчанию эмодзи не рекомендуются в коде, разметке и видимом тексте. Заменяй символы значками из библиотеки иконок. Исключение: разрешай эмодзи, только если пользователь прямо попросил игривую / чатовую / родную для соцсетей атмосферу - и даже тогда используй их скупо и осмысленно.

3.E Адаптивность и механика вёрстки

• Стандартизируй точки перелома (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).
• Ограничивай ширину страницы через max-w-[1400px] mx-auto или max-w-7xl.
• Стабильность области просмотра: НИКОГДА не используй h-screen для главного экрана (Hero) на всю высоту. ВСЕГДА используй min-h-[100dvh], чтобы вёрстка не прыгала на мобильных (адресная строка iOS Safari).
• Сетка вместо арифметики на flex: НИКОГДА не считай проценты сложной математикой flexbox (w-[calc(33%-1rem)]). ВСЕГДА используй CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6).

3.F Проверка зависимостей (обязательно)

Прежде чем импортировать ЛЮБУЮ стороннюю библиотеку, проверь package.json. Если пакета нет, сначала выведи команду установки. Никогда не считай, что библиотека есть.

4. ДИЗАЙНЕРСКИЕ ПРАВИЛА ИНЖЕНЕРИИ (исправление перекосов)

Языковые модели по умолчанию скатываются в клише. Заранее переопределяй эти значения по умолчанию. У каждого правила есть путь исключения, зависящий от контекста.

4.1 Типографика

• Крупные заголовки (Display / Headlines): по умолчанию text-4xl md:text-6xl tracking-tighter leading-none.
• Основной текст / абзацы: по умолчанию text-base text-gray-600 leading-relaxed max-w-[65ch].
• Выбор рубленого шрифта:
• Не рекомендуется как вариант по умолчанию: Inter. Сначала выбирай Geist, Outfit, Cabinet Grotesk, Satoshi или шрифт с засечками, подходящий бренду.
• Исключение: Inter допустим, когда пользователь прямо просит нейтральное / стандартное / в стиле Linear ощущение или когда бриф - сайт госсектора / сайт, где доступность на первом месте.
• Пары шрифтов, которые стоит знать: Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.

• ДИСЦИПЛИНА С ЗАСЕЧКАМИ (ОЧЕНЬ НЕ РЕКОМЕНДУЕТСЯ КАК ВАРИАНТ ПО УМОЛЧАНИЮ):
• Шрифт с засечками очень не рекомендуется как шрифт по умолчанию для любого проекта. «Ощущается творческим / премиальным / редакционным» - НЕ повод тянуться к засечкам. Привычная схема агента «творческий бриф = шрифт с засечками» - самый частый признак ИИ в боевых прогонах.
• Шрифт с засечками допустим, только если явно верно ОДНО из двух:
• В брифе бренда буквально назван шрифт с засечками, ИЛИ
• Семейство эстетики действительно редакционное / люксовое / издательское / рукописное / традиционное / винтажное, И ты можешь объяснить, почему именно этот шрифт с засечками подходит именно этому бренду
• Для всего остального (креативное агентство, студия дизайна, современный бренд, премиальный потребительский продукт, портфолио, лайфстайл) по умолчанию - рубленый шрифт для крупных заголовков (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Рубленые шрифты для заголовков не «скучны» - они вариант по умолчанию по той же причине, по какой чёрный цвет - вариант по умолчанию в моде.
• ПРАВИЛО АКЦЕНТА (связанное): когда хочешь выделить слово внутри заголовка (кинетический приём вроде «and spatial design»), используй курсив или жирное начертание ТОГО ЖЕ шрифта. НЕ вставляй случайное слово с засечками в рубленый заголовок (или наоборот) ради визуального интереса. Выделение шрифтом другого семейства - любительство. Курсив или жирное начертание в том же семействе - правильный ход.
• КОНКРЕТНО ЗАПРЕЩЕНЫ как варианты по умолчанию: Fraunces и Instrument_Serif (два любимых у языковых моделей шрифта с засечками для заголовков).
• Если шрифт с засечками оправдан (редкий случай, см. выше), выбирай из этого списка и НЕ используй один и тот же шрифт в нескольких проектах подряд: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, ITC Galliard.

• ЗАПАС ПОД ВЫНОСНЫЕ ЭЛЕМЕНТЫ КУРСИВА (обязательно): когда курсив используется в крупном шрифте и в слове есть буква с нижним выносным элементом (y g j p q), leading-[1] или leading-none обрежут этот элемент. Используй минимум leading-[1.1] и добавь запас pb-1 или mb-1 на оборачивающем элементе. Перед выпуском проверь каждое курсивное слово в крупных заголовках.

4.2 Калибровка цвета

• Максимум 1 акцентный цвет. Насыщенность по умолчанию < 80%.
• ПРАВИЛО ЛИЛОВОГО (THE LILA RULE): эстетика «фиолетового / синего свечения ИИ» не рекомендуется как вариант по умолчанию. Никакого автоматического фиолетового свечения кнопок, никаких случайных неоновых градиентов. Используй нейтральные основы (Zinc / Slate / Stone) с контрастными одиночными акцентами (изумрудный, электрический синий, глубокая роза, жжёный оранжевый и т. п.).
• Исключение: если бренд или бриф прямо просит фиолетовый / лиловый, принимай его. Но делай осмысленно: единая палитра, согласованные нейтральные, сдержанные градиенты. Не типовой слоп из ИИ-градиентов.
• Одна палитра на проект. Не колеблись между тёплыми и холодными серыми в одном проекте.
• ФИКСАЦИЯ ЦВЕТОВОЙ ПОСЛЕДОВАТЕЛЬНОСТИ (обязательно): выбранный для страницы акцентный цвет используется на ВСЕЙ странице. Сайт в тёплых серых тонах не получает вдруг синюю кнопку призыва к действию в блоке 7. Сайт с розовым акцентом не получает бирюзовый статусный бейдж в подвале. Выбери один акцент, зафиксируй его, проверь каждый компонент перед выпуском.

• ЗАПРЕТ НА ПАЛИТРУ «ПРЕМИАЛЬНОГО ПОТРЕБИТЕЛЯ» (обязательно, второй по частоте признак ИИ):
• Для брифов премиального потребительского сегмента (посуда, велнес, ремесленные товары, люкс, традиционное ремесло, товары для дома напрямую от бренда и т. п.) языковая модель по умолчанию выбирает тёплый бежевый/кремовый + латунь/глину/цвет бычьей крови/охру + эспрессо/чернильный тёмный текст. Конкретно запрещены как фоны и акценты по умолчанию такие семейства hex-значений:
• Фоны: #f5f1ea, #f7f5f1, #fbf8f1, #efeae0, #ece6db, #faf7f1, #e8dfcb (всё это «тёплая бумага / крем / мел / слоновая кость»)
• Акценты: #b08947, #b6553a, #9a2436, #9c6e2a, #bc7c3a, #7d5621 (всё это «латунь / глина / цвет бычьей крови / охра»)
• Текст: #1a1714, #1a1814, #1b1814 (всё это «эспрессо / тёплый почти-чёрный»)
• Эта палитра ЗАПРЕЩЕНА как вариант по умолчанию для брифов премиального потребительского сегмента. Каждый премиальный потребительский сайт, который ты когда-либо выпускал, использует именно эту палитру. Бренд становится невидимым.
• Альтернативы по умолчанию (чередуй, не повторяй):
• Холодная роскошь: серебристо-серый + хром + дымчатый (вспомни Tesla, Apple Watch Hermès без кожи)
• Лес: глубокий зелёный + слоновая кость + янтарный акцент (вспомни Filson, премиум-линию Patagonia)
• Чёрный и бежевый-тан: настоящий не совсем чёрный + тёплый тан, резкий контраст, никакого бежевого
• Кобальт + крем: насыщенный синий на одном нейтральном фоне, без латуни
• Терракота + сланец: тёплая ржавчина на холодном сером, без латуни
• Олива + кирпич + бумага: приглушённая олива и кирпично-красный акцент
• Чистая монохромия + один насыщенный всплеск: не совсем белый + не совсем чёрный + один яркий акцент (электрический синий, изумрудный, ярко-розовый и т. п.)
• Правило ротации палитры: если в предыдущем премиальном потребительском проекте использовалось семейство «бежевый + латунь», в этом ОБЯЗАТЕЛЬНО должно быть другое семейство. Не выпускай одну и ту же тёплую ремесленную палитру дважды подряд.
• Исключение: палитра «бежевый + латунь + эспрессо» допустима ТОЛЬКО когда бриф бренда прямо называет эти цвета или когда айдентика бренда действительно винтажная / ремесленная / тёплая-ремесленная, И ты можешь объяснить, почему именно эта палитра подходит именно этому бренду. Тянуться к ней по умолчанию, потому что «это бриф про посуду», запрещено.

4.3 Разнообразие вёрстки

• ПРОТИВ ЦЕНТРОВАНИЯ: центрированный главный экран (Hero) / H1 не используется при DESIGN_VARIANCE > 4. Принудительно бери «разделённый экран» (50/50), «содержимое слева / картинка справа», «асимметричное пустое пространство» или структуры с закреплением при прокрутке.
• Исключение: центрированный главный экран допустим в брифах-манифестах, редакционных и анонсах запуска, где само сообщение и есть дизайн.

4.4 Материальность, тени, карточки

• Используй карточки ТОЛЬКО когда возвышение передаёт настоящую иерархию. В остальных случаях группируй через border-t, divide-y или пустое пространство.
• Если используешь тень, подкрась её под оттенок фона. Никаких чисто чёрных падающих теней на светлом фоне.
• При VISUAL_DENSITY > 7: типовые контейнеры-карточки запрещены. Показатели с данными дышат в простой вёрстке.
• ФИКСАЦИЯ ЕДИНСТВА ФОРМЫ (обязательно): выбери ОДНУ шкалу скруглений для страницы и держись её. Варианты: всё острое (радиус 0), всё мягкое (радиус 12-16px), всё «таблетки» (полное скругление для интерактивных элементов). Смешанные системы допустимы, только если есть задокументированное правило (например, «кнопки - полные таблетки, карточки - 16px, поля ввода - 8px») и оно соблюдается везде. Круглые кнопки в квадратной вёрстке или квадратные карточки на странице с кнопками-таблетками - сломанный дизайн.

4.5 Интерактивные состояния интерфейса

Языковые модели по умолчанию делают «только статичное успешное состояние». Всегда реализуй полные циклы:

• Загрузка: заглушки-скелеты (skeleton), повторяющие форму итоговой вёрстки. Избегай типовых круглых спиннеров.
• Пустые состояния: красиво оформлены; показывают, как это заполнить.
• Состояния ошибки: понятные, встроенные (в формах) или контекстные (уведомления-тосты только для временных событий).
• Тактильная обратная связь: на :active используй -translate-y-[1px] или scale-[0.98], чтобы имитировать физическое нажатие.
• ПРОВЕРКА КОНТРАСТА КНОПОК (обязательно, доступность): перед выпуском любой кнопки убедись, что текст кнопки читается на её фоне. Белая кнопка + белый текст, призыв к действию с bg-white и подписью text-white, прозрачная кнопка на фоне страницы без рамки → всё это запрещено. Проверь каждый призыв к действию: коэффициент контраста минимум по WCAG AA (4.5:1 для основного текста, 3:1 для крупного текста 18px+). То же правило касается «призрачных» кнопок поверх фотографий (используй подложку, затемнение или обводку).
• ЗАПРЕТ НА ПЕРЕНОС ТЕКСТА КНОПКИ (обязательно): текст кнопки ДОЛЖЕН помещаться в одну строку на десктопе. Если подпись вроде «VIEW SELECTED WORK» переносится на 2 или 3 строки, кнопка сломана. Исправь ЛИБО сокращением подписи (максимум 3 слова для основных призывов к действию, лучше 1-2), ЛИБО расширением кнопки (не ограничивай искусственно max-width у призывов к действию). Перенесённые на десктопе призывы к действию - провал предполётной проверки (Pre-Flight Fail).
• НИКАКИХ ДУБЛЕЙ НАМЕРЕНИЯ В ПРИЗЫВАХ (обязательно): два призыва к действию с одним и тем же намерением на одной странице - провал предполётной проверки. Примеры одного намерения: «Get in touch» + «Contact us» + «Let's talk» + «Start a project» + «Start something» + «Reach out» = всё это намерение «связаться» → выбери ОДНУ подпись и используй её везде на странице (навигация, главный экран, подвал). То же для «Try free» + «Get started» + «Sign up free» (всё это намерение «зарегистрироваться») и «View work» + «See selected work» + «Browse projects» (всё это намерение «портфолио»). Одна подпись на одно намерение.
• ПРОВЕРКА КОНТРАСТА ФОРМ (обязательно, доступность): поля ввода, текст-подсказки (placeholder), кольца фокуса, вспомогательный текст и текст ошибок — всё проходит контраст WCAG AA относительно фона блока. Светлые подсказки на почти белой форме, белая форма на белом блоке страницы, подписи полей с контрастом ниже 4.5:1 → всё это запрещено. Проверь каждую форму перед выпуском.

4.6 Паттерны для данных и форм

• Подпись НАД полем. Вспомогательный текст необязателен, но присутствует в разметке. Текст ошибки ПОД полем. Стандартный gap-2 для блоков ввода.
• Никакого текста-подсказки вместо подписи. Никогда.

4.7 Дисциплина вёрстки (жёсткие правила. Нарушить любое - значит выпустить сломанную работу)

• Главный экран (Hero) ДОЛЖЕН помещаться в начальную область просмотра. Заголовок максимум 2 строки на десктопе, подтекст максимум 20 слов И максимум 3-4 строки, призывы к действию видны без прокрутки. Если текста слишком много: уменьши шкалу шрифта ИЛИ сократи текст. Если ты не можешь описать ценностное предложение подтекстом в 20 слов, неясно само ценностное предложение, а не правило слишком тесное. Никогда не позволяй главному экрану переполняться и заставлять прокручивать, чтобы найти призыв к действию.
• Дисциплина размера шрифта на главном экране. Планируй размер шрифта и размер картинки *вместе*. Если картинка главного экрана большая, а заголовок длиннее 6 слов, не начинай с text-7xl/text-8xl. Разумный диапазон по умолчанию: text-4xl md:text-5xl lg:text-6xl для большинства главных экранов; text-6xl md:text-7xl только когда заголовок из 3-5 слов. Заголовок главного экрана в 4 строки - всегда ошибка размера шрифта, никогда не ошибка длины текста.
• ПОТОЛОК ВЕРХНЕГО ОТСТУПА ГЛАВНОГО ЭКРАНА (обязательно): верхний отступ главного экрана на десктопе максимум pt-24 (≈6rem). Больше - и содержимое главного экрана повисает на середине области просмотра и читается как ошибка вёрстки, а не как намеренное пространство. Если главному экрану нужно больше воздуха, увеличивай шкалу шрифта или размер картинки, а не верхний отступ.
• ДИСЦИПЛИНА СТЕКА ГЛАВНОГО ЭКРАНА (максимум 4 текстовых элемента). Главный экран - это один момент, а не список возможностей. Допустимые текстовые элементы, максимум 4 в сумме:
• Надзаголовок (eyebrow; маленькая подпись заглавными буквами) ИЛИ полоса бренда ИЛИ ничего - выбери ноль или один
• Заголовок (максимум 2 строки, см. выше)
• Подтекст (максимум 20 слов, максимум 4 строки)
• Призывы к действию (1 основной + максимум 1 второстепенный)
• ЗАПРЕЩЕНО на главном экране: мелкая строка под призывами к действию («Работает с GitHub, GitLab и самостоятельно размещённым Git»), полоса доверия («Используют инженерные команды в...»), тизер цены («Бесплатно для одиночек, $10 на пользователя для команд»), маркированный список возможностей, ряд аватарок как социальное доказательство. Всё это переезжает в отдельные блоки сразу под главным экраном.
• Если на одном главном экране есть и надзаголовок, и строка под призывами, убери строку. Если есть и полоса бренда, и строка, убери строку. Один маленький текстовый элемент на главный экран, максимум.
• Стена логотипов «Нам доверяют» / «Используют» находится ПОД главным экраном, никогда не внутри него. Главный экран - для ценностного предложения и основного призыва к действию. Стена логотипов - отдельный блок сразу ниже. Не пихай логотипы доверия в тот же flex-ряд, что и текст главного экрана.
• Навигация ДОЛЖНА отображаться в одну строку на десктопе. Если пункты не помещаются при lg (1024px), сократи подписи, убери второстепенные пункты или перенеси в гамбургер-меню. Двухстрочная навигация на десктопе - сломанный дизайн.
• Потолок высоты навигации: максимум 80px на десктопе, по умолчанию 64-72px. Никаких огромных «агентских» панелей навигации, съедающих 15% области просмотра.
• У бенто-сеток ДОЛЖЕН быть ритм, а не однобокое повторение. Не складывай 6 рядов «картинка слева / текст справа». Варьируй композицию: чередуй ряды на всю ширину, плитки разного размера, вертикальные разрывы.
• ПРАВИЛО ЧИСЛА ЯЧЕЕК БЕНТО (обязательно): в бенто-сетке РОВНО столько ячеек, сколько у тебя содержимого. 3 элемента → 3 ячейки (разбивка 1+2, или 2+1, или асимметричная тройка). 5 элементов → 5 ячеек (2+3, 3+2, главная+4 и т. п.). Если в сетке пустая ячейка посередине или в конце, ты спланировал неправильно. Перестрой сетку; не вставляй пустую плитку.
• Запрет на повтор семейства вёрстки между блоками. Если ты использовал семейство вёрстки для блока (например, карточки-картинки в 3 колонки, цитата на всю ширину, разделённый текст-картинка), это семейство может появиться на странице максимум ОДИН раз. «Избранные заказы» не должны выглядеть как «Чем мы занимаемся». Лендинг из 8 блоков должен использовать минимум 4 разных семейства вёрстки.
• ПОТОЛОК ЗИГЗАГООБРАЗНОГО ЧЕРЕДОВАНИЯ (обязательно). Зигзаг «картинка слева + текст справа», затем «текст слева + картинка справа» - банально. Максимум 2 блока подряд с таким разделением на картинку и текст. Третий подряд блок «картинка + текст» - провал предполётной проверки. Разорви шаблон блоком на всю ширину, блоком с вертикальной стопкой, бенто-сеткой, бегущей строкой (marquee) или другим семейством вёрстки.
• СДЕРЖАННОСТЬ С НАДЗАГОЛОВКАМИ (обязательно, правило №1, которое чаще всего нарушают в боевых прогонах). Надзаголовок (eyebrow) - это маленькая подпись заглавными буквами с широким трекингом над заголовком блока (например, FOUR COLORWAYS, SELECTED WORK, THE HARDWARE, Git-native task management). Типичная CSS-подпись: text-[11px] uppercase tracking-[0.18em], font-mono text-[10.5px] uppercase tracking-[0.22em]. Каждый сайт, собранный ИИ, ставит надзаголовок над КАЖДЫМ заголовком блока, получая один и тот же шаблонный ритм. Жёсткое правило:
• Максимум 1 надзаголовок на 3 блока. Главный экран считается за 1. То есть на странице из 9 блоков допускается максимум 3 надзаголовка в сумме.
• Если у блока A есть надзаголовок, у следующих 2 блоков его быть не может.
• Предполётная проверка механическая: посчитай вхождения uppercase tracking (или похожих маленьких моноширинных подписей капителью над заголовками) во всех компонентах блоков. Если число > ceil(числоБлоков / 3), результат не проходит.
• Что делать вместо надзаголовка: убрать его совсем. Заголовка достаточно. Если нужно отнести блок к категории, место блока на странице уже его категоризует; подпись не нужна.
• ЗАПРЕТ РАЗДЕЛЁННОГО ЗАГОЛОВКА БЛОКА (обязательно). Паттерн «слева большой заголовок + справа маленький поясняющий абзац» в роли шапки блока (слева col-span-7/8, справа col-span-4/5 с маленьким абзацем, повисшим в правой колонке) запрещён по умолчанию. У блока должно быть ОДНО сфокусированное сообщение. Если тебе действительно нужны и заголовок, и поясняющий абзац, ставь их вертикально (заголовок сверху, текст ниже, максимум 65ch). Обращайся к разделённой шапке, только если есть настоящая композиционная причина (например, правая колонка несёт визуальный или интерактивный элемент, а не просто текст-заполнитель).
• Разнообразие фонов в бенто (обязательно). Бенто-блоки и блоки сеток возможностей не могут быть 6 белых карточек на белом с текстом внутри. Минимум 2-3 ячейки в любой многоячеистой сетке должны иметь настоящее визуальное отличие: настоящую картинку, градиент, подходящий бренду (не ИИ-фиолетовый), узор, подкрашенный фон. Кремовое на кремовом бенто с одной только типографикой внутри читается как скучное ИИ-значение по умолчанию, даже если остальная страница хороша.
• Мобильное схлопывание должно быть явным для каждого блока. Для каждой многоколоночной вёрстки объяви запасной вариант для < 768px в том же компоненте. Никаких допущений вроде «заработает, Tailwind сам справится».

4.8 Стратегия картинок и визуальных материалов

Лендинги и портфолио - это визуальные продукты. Страницы из одного текста с div-ами, изображающими фальшивые скриншоты, - слоп.

Порядок приоритета для визуальных материалов:

1. Сначала инструмент генерации изображений. Если в среде есть ЛЮБОЙ инструмент генерации изображений (generate_image, MCP-инструмент для изображений, встроенная в IDE генерация, инструменты изображений OpenAI и т. п.), ты ОБЯЗАН использовать его для создания материалов под конкретные блоки: фотография главного экрана, предметные снимки, фоны-текстуры, настроенческие изображения. Генерируй в правильном соотношении сторон для блока. Не пропускай этот шаг на том основании, что CSS вручную кажется быстрее.
2. Затем настоящие картинки из сети. Когда инструмента генерации нет, используй источники настоящих фотографий. Допустимые варианты по умолчанию:
3. https://picsum.photos/seed/{descriptive-seed}/{w}/{h} для фото-заглушек (seed должен описывать блок, например marrow-cookware-kitchen)
4. Настоящие адреса стоковых или брендовых изображений, когда их даёт бриф
5. Источники с открытой лицензией (Unsplash по прямому адресу, Pexels), если это прямо разрешено
6. Крайняя мера: скажи пользователю. Если невозможно ни то, ни другое, НЕ заполняй страницу нарисованными вручную SVG-иллюстрациями или «фальшивыми скриншотами» на div-ах. Вместо этого оставь чётко подписанные места-заглушки (<!-- TODO: hero product photo, 1600x1200 -->) и в конце ответа напиши: *«Этой странице нужны настоящие изображения в местах: \[список мест\]. Сгенерируйте или предоставьте их.»*

Даже минималистичным сайтам нужны настоящие изображения. Страница из одного текста - не минимализм. Это незавершённая работа. Даже редакционному сайту в стиле Linear нужно минимум 2-3 настоящих изображения (главный экран, один предметный/лайфстайл-снимок, одно поддерживающее изображение). Если бриф сдержанный, генерируй чёрно-белую минималистичную фотографию; не пропускай изображения целиком только потому, что регулятор низкий.

Настоящие логотипы компаний для социального доказательства. Когда бриф требует стену логотипов «Нам доверяют / Используют / Клиенты», НЕ скатывайся к простым текстовым словесным знакам (<span>Acme Co</span>, оформленным в ряд). Используй настоящие SVG-логотипы:

• Источник: Simple Icons (https://cdn.simpleicons.org/{slug}/ffffff для любого цвета или npm-пакет simple-icons). Покрывает большинство известных брендов.
• Альтернатива: devicon для логотипов технологического стека (@svgr/cli или CDN).
• Придумал название бренда? Тогда придумай и SVG-знак. Сгенерируй простую монограмму (одна буква в круге, лигатура из двух букв, абстрактный знак), отрисованную встроенным <svg> в стиле страницы. Простые текстовые словесные знаки для выдуманных брендов выглядят типово.
• Всегда проверяй, что логотипы отображаются и в светлой, и в тёмной теме (белый на тёмном, чёрный на светлом или одноцветная переменная темы).
• Правило «ТОЛЬКО ЛОГОТИП» (обязательно): стена логотипов = логотипы и больше ничего. НЕ печатай под каждым логотипом подписи отрасли / категории (никаких Vercel + hosting снизу, Stripe + payments, Cloudflare + infra). Доверие создаёт логотип, подпись не добавляет того, чего пользователь и так не знает. По желанию: название бренда как альтернативный текст для программ экранного чтения, по желанию ссылка на сайт бренда. Это всё.

Иллюстрации, нарисованные вручную:

• SVG-иконки из библиотек: нормально (см. раздел 3.C).
• Декоративные SVG, нарисованные вручную (собственные иллюстрации, логотипы, знаки): настоятельно не рекомендуются, никогда не по умолчанию. Допустимы, только когда:
• Бриф прямо этого требует («нарисуй мне SVG-логотип»)
• Это один простой геометрический знак (квадрат, круг, словесный знак крупным шрифтом)
• Ты уверен в качестве результата

Фальшивые скриншоты на div-ах запрещены. «Собранный вручную предпросмотр продукта», нарисованный прямоугольниками <div>, с фальшивыми списками задач, фальшивыми дашбордами, фальшивыми окнами терминала - это признак ИИ (Tell). Если нужно показать продукт:

• Используй адрес настоящего скриншота, если он есть
• Сгенерируй его инструментом для изображений
• Используй настоящий предпросмотр компонента (реальную мини-версию интерфейса внутри страницы)
• Или вообще пропусти предпросмотр и используй редакционную фотографию

Главному экрану нужен настоящий визуальный образ. Текст + градиентное пятно - это не главный экран, а заглушка.

4.9 Плотность содержимого

Лендинги живут первым впечатлением, а не полным прочтением. Режь безжалостно.

• Форма содержимого блока по умолчанию: короткий заголовок (≤ 8 слов) + короткий подабзац (≤ 25 слов) + один визуальный материал ИЛИ один призыв к действию. Всё, что сверх этого, должно быть оправдано задачей блока.
• Никаких блоков-свалок данных. Таблица из 20 публикаций, список из 30 наград, гигантская матрица цен на маркетинговой странице - неверная вёрстка. Используй:
• 3-5 главных пунктов + ссылку «Смотреть полный список»
• Бегущую строку / карусель для демонстрации широты
• Вообще другую страницу, если данные и есть продукт
• Длинным спискам нужен другой компонент интерфейса, а не более длинный список. Обычный <ul> с маркерами / рядами divide-y - ленивый выбор. Если пунктов > 5, возьми вместо него одно из этого:
• Разделение на 2 колонки со сгруппированными пунктами
• Сетку карточек с картинкой + подписью на каждый пункт
• Вкладки / аккордеон, если пункты делятся на категории
• Горизонтальные «таблетки» с привязкой при прокрутке (scroll-snap)
• Карусель для списков, где важна широта (отзывы, логотипы, возможности)
• Бегущую строку для «много всего, на чём не нужно задерживаться по отдельности» Спецификация из 10 строк с тонкой линией под каждой строкой - ХУДШИЙ вариант по умолчанию. Либо сгруппируй строки в 2-3 блока с редкими разделителями, либо перейди к вёрстке «карточка на каждую характеристику».
• Таблицы характеристик отдельно (паттерн Marrow-cookware). Длинная таблица технических характеристик продукта с border-b на каждой строке - ИИ-вариант по умолчанию для брифов про посуду / технику / одежду / ремесленные товары. Запрещено. Конкретные альтернативы:
• Сетка карточек в 2 колонки: у каждой характеристики своя карточка с названием, значением (крупное число) и однострочным пояснением «почему это важно». Карточки в 2 колонки на десктопе, в 1 колонку на мобильном.
• Горизонтальные «таблетки» со scroll-snap: каждая характеристика - «таблетка», пользователь может пролистывать их жестом.
• Сгруппированные блоки: сгруппируй 10 характеристик в 3 логических кластера (например, «Материалы», «Готовка», «Гарантия»), у каждого кластера ОДИН мягкий разделитель и заголовок кластера.
• Главные против остальных: 3-4 главные характеристики показаны крупными плитками, остальные свёрнуты под раскрывающимся пунктом «Смотреть все характеристики».

• САМОПРОВЕРКА ТЕКСТА (обязательно перед выпуском): прежде чем объявить любую задачу выполненной, перечитай каждую видимую строку на странице (заголовки, подзаголовки, надзаголовки, подписи кнопок, основной текст, подписи к картинкам, альтернативный текст, текст подвала, сообщения об ошибках). Отметь любую строку, которая:
• Грамматически сломана («free on its past», «two plans but one is honest», «to put it on the table» вне контекста)
• Имеет неясные отсылки («we plan to stay that way» без предшествующего контекста)
• Звучит как галлюцинация ИИ (милая, но неверная игра слов, натянутые метафоры, которые ни к чему не привязаны, фразы «элегантное ничто»)
• Читается как языковая модель, пытающаяся казаться вдумчивой (пассивно-агрессивная скромность, фальшивые «ремесленные» ярлыки, пародийно-поэтические микро-метазаметки) Перепиши каждую отмеченную строку. Если не уверен, имеет ли строка смысл, замени её простым функциональным предложением. Милый текст, сгенерированный ИИ, хуже скучного текста.
• Фальшиво-точные числа отмечаются. Числа вроде 92%, 4.1×, 48k, 5.8 mm, 13.4 lb либо:
• Взяты из настоящих данных (бриф, руководство по бренду, публичные метрики) - нормально
• Прямо помечены как условные (<!-- mock -->, «пример», «образец данных») - нормально
• Придуманы ИИ ради эстетики спецификаций - запрещены. Не изображай инженерную точность, которую бренд не заявляет.
• Один регистр текста на страницу. Не мешай технический моноширинный стиль («47 tasks · 0.6 ctx-switches/day»), редакционную прозу и маркетинговый напор в одной композиции, если голос бренда прямо этого не требует.

4.10 Цитаты и отзывы

• Максимум 3 строки текста цитаты. Никогда не 6. Если исходная цитата длиннее → сократи её. Цитата на лендинге - это фрагмент, а не весь отзыв.
• Для очень мелких размеров шрифта (например, отзывы в стиле подвала) предел строк можно немного растянуть. Суть: «помещается в один взгляд».
• Никаких длинных тире внутри текста цитаты как дизайнерского приёма (долгие паузы, кинетические длинные тире, длинные тире вместо маркеров). См. раздел 9.G - длинное тире запрещено полностью.
• Подпись: имя + должность + (по желанию) компания. Никогда только имя («- Sarah»).
• Кавычки: используй настоящие типографские кавычки ( " " ) или никаких. Не прямые ASCII-кавычки ( " ).

4.11 Фиксация темы страницы (единство светлой / тёмной темы)

У страницы ОДНА тема. Блоки не инвертируются.

• Если страница в тёмной теме, ВСЕ блоки в тёмной теме. Никакого блока в светлой теме с тёплой бумагой, зажатого между тёмными блоками (или наоборот). У пользователя не должно возникать ощущения, что посреди прокрутки он попал на другой сайт.
• Исключение: если бриф прямо требует приём «История цветовых блоков» (Color Block Story) или «Смена темы при прокрутке» И это намеренная композиция (одна полная смена темы с сильным переходом, а не случайное чередование), его можно использовать один раз на страницу.
• Поведение по умолчанию: выбери светлую, тёмную или автоматическую (prefers-color-scheme) тему на уровне страницы и зафиксируй её. Оттенки фона блоков внутри одного семейства темы допустимы (bg-zinc-950 рядом с bg-zinc-900); переключение на bg-amber-50 посреди страницы на bg-zinc-950 - сломанный дизайн.
• Когда используешь дизайн-систему со встроенными темами (Radix Themes, shadcn/ui с <Theme>), задай тему ОДИН раз в layout.tsx или в корне страницы. Не позволяй отдельным блокам её переопределять.

5. ПРОАКТИВНОСТЬ С УЧЁТОМ КОНТЕКСТА

Это инструменты, а не значения по умолчанию. Используй их, когда этого требует прочтение дизайна. Ничто из этого не срабатывает автоматически.

• Liquid Glass / глассморфизм: подходит для премиального потребительского продукта, всего, что рядом с Apple, люксового бренда или оверлеев поверх медиа. Не подходит для дашбордов, госсектора или «скучного B2B». Если используешь, иди дальше backdrop-blur: добавь внутреннюю рамку в 1px (border-white/10) и лёгкую внутреннюю тень (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) для физического преломления на кромке. Дай запасной вариант со сплошной заливкой под prefers-reduced-transparency.
• Магнитная микрофизика: используй, когда MOTION_INTENSITY > 5 И бриф читается как премиальный / игривый / агентский. Реализуй ИСКЛЮЧИТЕЛЬНО через useMotionValue / useTransform из Motion вне цикла отрисовки React. Никогда через useState. См. раздел 3.B.
• Постоянные микровзаимодействия (пульс, эффект печатной машинки, парение, мерцание, карусель): используй, когда MOTION_INTENSITY > 5 И блок действительно выигрывает от движения (индикаторы состояния, живые ленты, ощущение ИИ). Не каждой карточке нужен бесконечный цикл. Если блок информационный, оставь его неподвижным. Применяй пружинную физику (type: "spring", stiffness: 100, damping: 20) - никакой линейной плавности.
• «Заявленное движение должно быть показано». Если MOTION_INTENSITY > 4, страница должна действительно двигаться: как минимум переходы появления на главном экране, раскрытие при прокрутке на ключевых блоках, физика наведения на призывах к действию. Статичная страница, заявляющая MOTION_INTENSITY: 7, сломана. И наоборот, если в доступном объёме ты не можешь выпустить рабочую анимацию, опусти регулятор до 3 и выпусти чистую статичную страницу. Никогда не делай наполовину анимацию, которая ломается (обрезанные ScrollTrigger, дёрганые появления, отсутствующая очистка).
• АНИМАЦИЯ ДОЛЖНА БЫТЬ МОТИВИРОВАНА (обязательно). Прежде чем добавлять любую анимацию, спроси: «что эта анимация сообщает?» Допустимые ответы: иерархия (привлекает внимание к нужному), повествование (раскрывает содержимое в последовательности, соответствующей рассказу), обратная связь (подтверждает действие пользователя), переход состояния (показывает, что что-то изменилось). Недопустимый ответ: «выглядит круто». GSAP везде, потому что GSAP под рукой, - любительство. У каждого ScrollTrigger, каждой бегущей строки, каждого закреплённого блока должна быть причина. Если не можешь сформулировать причину одним предложением, убери анимацию.
• БЕГУЩАЯ СТРОКА - МАКСИМУМ ОДНА НА СТРАНИЦУ (обязательно). Горизонтально прокручивающиеся бегущие текстовые строки (marquee: «бесконечно ползущие логотипы», «манифест, ползущий вбок», «кинетическая лента слов») уместны максимум ОДИН раз на страницу. Две и более бегущие строки на одной странице читаются как ленивый наполнитель. Выбери один блок, где бегущая строка действительно служит содержимому; остальным дай другую вёрстку.
• Паттерн GSAP «закреплённая стопка» (когда используется стопка при прокрутке). «Стопка карточек при прокрутке» должна быть НАСТОЯЩЕЙ закреплённой стопкой (sticky-stack), а не списком с последовательным появлением. Канонический скелет кода - в разделе 5.A ниже. Типичный сбой: триггер срабатывает на середине прокрутки вместо закрепления у верха области просмотра. Исправление: start: "top top", а не start: "top center" или "top 80%".
• Паттерн GSAP «горизонтальная панорама» (когда используется перехват горизонтальной прокрутки). Канонический скелет - в разделе 5.B ниже. Типичный сбой: анимация начинается раньше, чем блок закреплён, и пользователь видит половину слайда. То же исправление: start: "top top", закрепи обёртку, прокручивай (scrub) внутреннюю дорожку.

5.A Закреплённая стопка - канонический скелет

"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function StickyStack({ cards }: { cards: React.ReactNode[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !ref.current) return;
    const ctx = gsap.context(() => {
      const cardEls = gsap.utils.toArray<HTMLElement>(".stack-card");
      cardEls.forEach((card, i) => {
        if (i === cardEls.length - 1) return;
        ScrollTrigger.create({
          trigger: card,
          start: "top top",                              // pin at viewport top
          endTrigger: cardEls[cardEls.length - 1],
          end: "top top",
          pin: true,
          pinSpacing: false,
        });
        gsap.to(card, {
          scale: 0.92,
          opacity: 0.55,
          ease: "none",
          scrollTrigger: {
            trigger: cardEls[i + 1],
            start: "top bottom",
            end: "top top",
            scrub: true,
          },
        });
      });
    }, ref);
    return () => ctx.revert();
  }, [reduce]);

  return (
    <div ref={ref} className="relative">
      {cards.map((card, i) => (
        <div
          key={i}
          className="stack-card sticky top-0 min-h-[100dvh] flex items-center justify-center"
        >
          {card}
        </div>
      ))}
    </div>
  );
}

Критические моменты: start: "top top", pin: true, каждая карточка, кроме последней, закреплена, преобразование масштаба/прозрачности управляется триггером прокрутки СЛЕДУЮЩЕЙ карточки (чтобы предыдущая карточка уменьшалась, когда приезжает следующая).

5.B Горизонтальная панорама - канонический скелет

"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function HorizontalPan({ children }: { children: React.ReactNode }) {
  const wrap = useRef<HTMLDivElement>(null);
  const track = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !wrap.current || !track.current) return;
    const ctx = gsap.context(() => {
      const distance = track.current!.scrollWidth - window.innerWidth;
      gsap.to(track.current, {
        x: -distance,
        ease: "none",
        scrollTrigger: {
          trigger: wrap.current,
          start: "top top",                              // pin starts when section top hits viewport top
          end: () => `+=${distance}`,                    // scroll distance = track width minus viewport
          pin: true,
          scrub: 1,
          invalidateOnRefresh: true,
        },
      });
    }, wrap);
    return () => ctx.revert();
  }, [reduce]);

  return (
    <section ref={wrap} className="relative overflow-hidden">
      <div ref={track} className="flex h-[100dvh] items-center">
        {children}
      </div>
    </section>
  );
}

Критические моменты: start: "top top", pin: true, end: "+=${distance}" (длина прокрутки = нужный горизонтальный путь), scrub: 1. Обёртка закреплена, внутренняя дорожка скользит по горизонтали, пока пользователь прокручивает по вертикали.

5.C Каскадное раскрытие при прокрутке - канонический скелет (облегчённая альтернатива)

Для простого «элементы появляются, когда входят в область просмотра» (без закрепления) предпочитай whileInView из Motion вместо GSAP - легче, ScrollTrigger не нужен:

"use client";
import { motion, useReducedMotion } from "motion/react";

export function RevealStagger({ items }: { items: string[] }) {
  const reduce = useReducedMotion();
  return (
    <ul className="grid gap-6">
      {items.map((item, i) => (
        <motion.li
          key={item}
          initial={reduce ? false : { opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{
            duration: 0.6,
            delay: i * 0.06,
            ease: [0.16, 1, 0.3, 1],
          }}
        >
          {item}
        </motion.li>
      ))}
    </ul>
  );
}

Используй это для: списков возможностей, сеток отзывов, стен логотипов, всего, что просто должно «появиться при прокрутке». Оставь GSAP для настоящей работы с закреплением и привязкой к прокрутке (pin/scrub).

5.D Запрещённые паттерны анимации

• **window.addEventListener("scroll", ...)** запрещён. Он срабатывает на каждом кадре прокрутки, склонен к подтормаживанию, без пакетной обработки. Используй useScroll() из Motion, ScrollTrigger из GSAP, IntersectionObserver или CSS scroll-driven animations (animation-timeline: view()).
• **Собственные расчёты прогресса прокрутки через window.scrollY** в состоянии React. Та же причина. Повторные отрисовки на каждом кадре.
• **Циклы requestAnimationFrame, которые трогают состояние React.** Вместо этого используй значения движения (useMotionValue + useTransform).
• Переходы вёрстки (Layout Transitions): используй свойства layout и layoutId из Motion для видимых изменений состояния (перестановка списков, раскрытие модальных окон, общие элементы между маршрутами). Не оборачивай статичное содержимое в свойства layout «на всякий случай» - это стоит работы по измерениям.
• Каскадная оркестровка (Staggered Orchestration): используй staggerChildren (Motion) или каскад CSS (animation-delay: calc(var(--index) * 100ms)) для моментов раскрытия, где важна последовательность. Для staggerChildren родитель (variants) и дочерние элементы ДОЛЖНЫ быть в одном дереве клиентского компонента.

6. ОГРАНИЧЕНИЯ ПО ПРОИЗВОДИТЕЛЬНОСТИ И ДОСТУПНОСТИ

6.A Аппаратное ускорение

• Анимируй ТОЛЬКО transform и opacity. Никогда не анимируй top, left, width, height.
• Используй will-change: transform скупо - только на элементах, которые действительно будут анимироваться.

6.B Уменьшенное движение (обязательно)

• **Любое движение при MOTION_INTENSITY > 3 ДОЛЖНО учитывать prefers-reduced-motion.** Это не обсуждается.
• В Motion: оберни через useReducedMotion() и деградируй до статики.
• В CSS: ограничь анимации условием @media (prefers-reduced-motion: no-preference) или дай блок-переопределение под @media (prefers-reduced-motion: reduce), который их отключает.
• Бесконечные циклы, параллакс, перехват прокрутки и магнитная физика ДОЛЖНЫ при уменьшенном движении схлопываться в статику / мгновенное состояние.

6.C Тёмная тема (обязательно для любой страницы, обращённой к потребителю)

• Проектируй под обе темы с самого начала. Никогда не выпускай только светлую или только тёмную без прямого указания пользователя.
• Используй вариант Tailwind dark: ИЛИ переменные CSS для токенов. Выбери одну стратегию на проект.
• Не предписывай здесь конкретные цвета тёмной темы. Решает бриф. Сохраняй визуальную иерархию, айдентику бренда и контраст WCAG AA (AAA для основного текста) в обеих темах.
• Уважай prefers-color-scheme: dark. По умолчанию следуй системным настройкам, если бренд не настаивает на одной теме.

6.D Целевые значения Core Web Vitals

• LCP < 2.5 с. Картинка главного экрана должна быть next/image priority или загружена заранее (preload).
• INP < 200 мс. Тяжёлую работу выноси из основного потока.
• CLS < 0.1. Резервируй место для картинок, шрифтов, встраиваемых элементов.
• Перед тем как объявить страницу готовой, прогони Lighthouse.

6.E Стоимость DOM

• Накладывай фильтры зерна / шума ИСКЛЮЧИТЕЛЬНО на фиксированные псевдоэлементы с pointer-events-none (например, fixed inset-0 z-[60] pointer-events-none). НИКОГДА на прокручиваемые контейнеры - непрерывные перерисовки на GPU убивают частоту кадров на мобильных.
• Помни про размер сборки. Motion не крошечная. Three.js большая. Загружай лениво всё, что не на первом экране.

6.F Сдержанность с z-index

НИКОГДА не сыпь произвольными z-50 или z-10. Используй z-index строго для системных слоёв (прилипающая панель навигации, модальные окна, оверлеи, зерно). Задокументируй шкалу z-index в файле констант проекта.

7. ОПРЕДЕЛЕНИЯ РЕГУЛЯТОРОВ (техническая справка)

DESIGN_VARIANCE (уровень 1-10)

• 1-3 (предсказуемо): симметричная CSS-сетка Grid (12 колонок, равные единицы fr), равные отступы, выравнивание по центру.
• 4-7 (со смещением): перекрытия через margin-top: -2rem, разные соотношения сторон картинок (4:3 рядом с 16:9), заголовки по левому краю над данными, выровненными по центру.
• 8-10 (асимметрично): раскладки «кирпичная кладка» (masonry), CSS Grid с дробными единицами (grid-template-columns: 2fr 1fr 1fr), огромные пустые зоны (padding-left: 20vw).
• МОБИЛЬНОЕ ПЕРЕОПРЕДЕЛЕНИЕ: для уровней 4-10 асимметричные раскладки выше md: ДОЛЖНЫ схлопываться в строго одну колонку (w-full, px-4, py-8) на областях просмотра < 768px.

MOTION_INTENSITY (уровень 1-10)

• 1-3 (статика): никаких автоматических анимаций. Только состояния CSS :hover и :active. prefers-reduced-motion в любом случае режим по умолчанию.
• 4-7 (плавный CSS): transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Каскады animation-delay для появления при загрузке. Упор на transform и opacity.
• 8-10 (сложная хореография): сложные раскрытия по прокрутке, параллакс, анимация, управляемая прокруткой (CSS animation-timeline или GSAP ScrollTrigger). Используй хуки Motion. **НИКОГДА не используй window.addEventListener('scroll')** - это жёсткий запрет, а не «лучше не надо». Допустимые альтернативы - в разделе 5.D.

VISUAL_DENSITY (уровень 1-10)

• 1-3 (художественная галерея): много пустого пространства. Огромные промежутки между блоками (от py-32 до py-48). Дорого, чисто.
• 4-7 (повседневное приложение): стандартные отступы веб-приложения (от py-16 до py-24).
• 8-10 (кабина пилота): плотные отступы. Никаких карточек-рамок; данные разделяют линии в 1px. Обязательно: font-mono для всех чисел.

8. ПРОТОКОЛ ТЁМНОЙ ТЕМЫ

По умолчанию двухтемный режим. Никогда не считай, что будет только светлая тема, кроме случая, когда бриф - редакционная вёрстка, имитирующая печать.

8.A Стратегия токенов (выбери одну и держись её)

• **Вариант Tailwind dark:** (по умолчанию для проектов, ориентированных на утилиты): каждая цветовая утилита в паре со своим тёмным вариантом (bg-white dark:bg-zinc-950, text-gray-900 dark:text-gray-100).
• Переменные CSS (для shadcn/ui, Radix Themes или библиотек компонентов с темами): определи смысловые токены (--surface, --surface-elevated, --text-primary, --accent) и подменяй значения под [data-theme="dark"] или @media (prefers-color-scheme: dark).

8.B Не предписывай здесь конкретные цвета

Решают бриф и бренд. Этот скилл обеспечивает только:

• Контраст - минимум WCAG AA для основного текста, цель AAA для текста главного экрана.
• Паритет иерархии - визуальная иерархия, которая работает в светлой теме, должна работать и в тёмной. Если призыв к действию выделяется в светлой, он выделяется и в тёмной.
• Верность бренду - основной цвет бренда остаётся узнаваемым. Не обесцвечивай бренд ради тёмной темы.
• **Никакого чистого #000000 и никакого чистого #ffffff** - используй не совсем чёрный (zinc-950, почти чёрный тёплый серый) и не совсем белый. Чистые значения убивают глубину.

8.C Режим по умолчанию

Уважай prefers-color-scheme, если бренд не настаивает. Добавь ручной переключатель, если любая из тем потеряет ключевое выражение бренда.

8.D Проверь в обеих темах перед завершением

Открывай страницу в обеих темах в ходе разработки. Не выпускай страницу, которую ты видел только в одной теме.

9. ПРИЗНАКИ ИИ (запрещённые паттерны)

Избегай этих подписей, если бриф прямо их не просит.

9.A Визуал и CSS

• НИКАКОГО неона / внешних свечений по умолчанию. Используй внутренние рамки или лёгкие подкрашенные тени.
• **НИКАКОГО чисто чёрного (#000000).** Не совсем чёрный, zinc-950 или угольный.
• НИКАКИХ перенасыщенных акцентов. Снижай насыщенность, чтобы они сливались с нейтральными.
• НИКАКОГО избыточного градиентного текста для крупных заголовков.
• НИКАКИХ нестандартных курсоров мыши. Устарели, враждебны к доступности, враждебны к производительности.

9.B Типографика

• ИЗБЕГАЙ Inter как варианта по умолчанию. См. раздел 4.1. Путь исключения есть.
• НИКАКИХ гигантских H1, которые просто кричат. Управляй иерархией через насыщенность + цвет, а не через голый масштаб.
• Ограничения по засечкам: шрифт с засечками - для редакционных / люксовых / издательских страниц. Не для дашбордов.

9.C Вёрстка и отступы

• Математически выверенные отступы. Никаких плавающих элементов с неловкими промежутками.
• НИКАКИХ равных карточек возможностей в 3 колонки. Типовой ряд возможностей «три одинаковые карточки в ряд» запрещён. Используй зигзаг в 2 колонки, асимметричную сетку, закрепление при прокрутке или горизонтальную прокрутку.

9.D Содержимое и данные (эффект «Джейн Доу»)

• НИКАКИХ типовых имён. «John Doe», «Sarah Chan», «Jack Su» → используй творческие, реалистичные имена, подходящие по региону.
• НИКАКИХ типовых аватаров. Никаких SVG-«яиц» и пользовательских значков Lucide → используй правдоподобные фото-заглушки или особое оформление.
• НИКАКИХ фальшиво идеальных чисел. Избегай 99.99%, 50%, 1234567. Используй живые, неровные данные (47.2%, +1 (312) 847-1928).
• НИКАКИХ стартап-слоповых названий брендов. «Acme», «Nexus», «SmartFlow», «Cloudly» → придумывай контекстные, премиальные названия, которые звучат по-настоящему.
• НИКАКИХ глаголов-наполнителей. «Elevate», «Seamless», «Unleash», «Next-Gen», «Revolutionize» → только конкретные глаголы.

9.E Внешние ресурсы и компоненты

• НИКАКИХ SVG-иконок, нарисованных вручную. Используй Phosphor / HugeIcons / Radix / Tabler. Lucide - только по прямой просьбе.
• Декоративные SVG, нарисованные вручную, настоятельно не рекомендуются по умолчанию (см. раздел 4.8).
• НИКАКИХ фальшивых скриншотов на div-ах. Никогда не собирай фальшивый интерфейс продукта из прямоугольников <div>, имитируя скриншот. Используй настоящие изображения, сгенерированные изображения или пропусти предпросмотр.
• НИКАКИХ битых ссылок Unsplash. Используй https://picsum.photos/seed/{descriptive-string}/{w}/{h}, или сгенерированные фото-заглушки, или настоящие материалы.
• Настройка shadcn/ui: разрешена, но НИКОГДА в состоянии по умолчанию. Настрой радиусы, цвета, тени, типографику под эстетику проекта.
• Чистота, готовая к продакшену: код визуально чистый, запоминающийся, тщательно доведённый.

9.F Признаки ИИ из боевых тестов (запрещены безоговорочно)

Эти паттерны появились в настоящих тестах лендингов, сгенерированных языковыми моделями. Это подписи, к которым модель скатывается, когда пытается «выглядеть как дизайн». Считай их жёсткими запретами, если бриф прямо не требует какой-то из них.

Главный экран и верх страницы

• НИКАКИХ меток версии на главном экране. V0.6, v2.0, BETA, INVITE-ONLY PREVIEW, EARLY ACCESS, ALPHA - запрещены как надзаголовки по умолчанию. Допустимы, только когда бриф прямо про запуск продукта / статус предпросмотра.
• НИКАКИХ под-надзаголовков в стиле «Brand · No. 01». Микромета-строки вроде «Marrow · No. 01 · The 6-quart». Пропускай их.

Нумерация блоков и микроподписи

• НИКАКИХ надзаголовков с номерами блоков. 00 / INDEX, 001 · Capabilities, 002 · Featured commission, 06 · how it works, 05 · The honest table - запрещены. Надзаголовки должны называть тему простым языком, а не нумеровать.
• **НИКАКОЙ пагинации вида 01 / 4 на картинках или бенто-плитках.** Если пользователь умеет считать, подпись ему не нужна.
• **НИКАКИХ подсказок прокрутки вида Scroll · 001 Capabilities.** Достаточно простой стрелки или «Scroll»; без префикса с номером блока.
• НИКАКИХ подписей-диапазонов вида «Index of Work, 2018 - 2026» в роли надзаголовков. Просто скажи, что это за блок.

Разделители и точки

• **Срединная точка (·) нормируется.** Максимум 1 на строку в полосах метаданных. НЕ используй её как разделитель по умолчанию для всего («foo · bar · baz · qux · quux»). Если нужно семейство разделителей, предпочитай переносы строк, тонкие линии или колонки.
• НИКАКИХ декоративных цветных статусных точек на каждом списке/пункте навигации/бейдже. Цветная точка перед «ONE Q4 SLOT OPEN» или перед каждой ссылкой навигации, или перед каждой строкой задачи - запрещена по умолчанию. Допустима, только когда точка передаёт настоящее смысловое состояние (статус сервера, флаг доступности) и используется скупо.

Длинные тире и типографские излишества

• **НИКАКОГО длинного тире (—) как элемента дизайна И вообще где-либо.** См. раздел 9.G ниже о полном, не подлежащем обсуждению запрете. Символ длинного тире запрещён в заголовках, надзаголовках, «таблетках», основном тексте, цитатах, подписях авторов, подписях к картинкам, тексте кнопок и альтернативном тексте. Используй обычный дефис (-).
• **НИКАКИХ заголовков с разрывом <br> и курсивом** как «дизайнерского хода» по умолчанию. Разбиения вроде «for thirty\<br\>*years.*». Заголовки должны сначала читаться естественно, а остроумничать - только когда этого требует бриф.
• НИКАКОГО вертикального повёрнутого текста («INDEX OF WORK, 2018 - 2026», повёрнутого на 90°). Клише агентского портфолио. Используй, только когда бриф прямо агентский / Awwwards / экспериментальный И это служит настоящей композиционной цели.
• НИКАКИХ линий-перекрестий / тонких линий сетки как украшения. Вертикальные и горизонтальные линии, нарисованные лишь для того, чтобы страница «ощущалась как дизайн», - запрещены. Используй их, только когда они организуют настоящее содержимое.

Фальшивые предпросмотры продукта

• НИКАКОГО фальшивого интерфейса продукта на div-ах на главном экране (фальшивый список задач, фальшивый терминал, фальшивый дашборд из стилизованных div-ов). Это признак ИИ №1 в дизайне от языковых моделей. Используй настоящий скриншот, сгенерированное изображение, настоящий предпросмотр компонента или ничего.
• НИКАКИХ фальшивых подвалов с версиями («v0.6.2-rc.1», «last sync 4s ago · main») внутри фальшивых скриншотов. Ничего не добавляет, кричит об ИИ.

Признаки ИИ в рекламных текстах

• НИКАКИХ заголовков социального доказательства «Quietly in use at» / «Quietly trusted by». Используй естественный язык: «Нам доверяют», «Используют в», «Среди клиентов», либо пропусти заголовок целиком, если говорят сами логотипы.
• НИКАКИХ поэтических подписей в стиле «From the field» / «Field notes» / «Currently on the bench» / «On our desks» / «Loose plates» в блоках цитат, блога или боковой колонки. Читается как показное ремесленничество. Используй простые функциональные подписи («Отзывы», «Последние записи», «Над чем работаем сейчас») или пропусти подпись.
• НИКАКИХ показно-скромных отсылок к отрасли в стиле «We respect the French ones» в основном тексте. Мило и по-ИИшному.
• НИКАКИХ полос с погодой / локацией («LIS 14:23 · 18°C») в шапках/подвалах, если бриф прямо не про место / студию, распределённую по часовым поясам.
• НИКАКИХ микрометапредложений под надзаголовками. Предложения вроде *«Each of these is a feature we ship today, not a roadmap promise. The list will stay short on purpose.»* под заголовком блока - лишний шум. Надзаголовка + заголовка + основного текста достаточно.
• НИКАКИХ типовых подписей шагов. «Stage 1 / Stage 2 / Stage 3», «Step 1 / Step 2 / Step 3», «Phase 01 / Phase 02 / Phase 03», «Pass One / Pass Two / Pass Three». Запрещено. Подписью служит само содержание шага. Если нужно показать движение вперёд, используй глагол-существительное прямо («Установить», «Настроить», «Выпустить»), а не «Stage 1: Install».

«Таблетки», подписи и штампы версий

• НИКАКИХ «таблеток»/подписей/тегов поверх картинок. Никаких оверлеев <span> на фотографиях с тегами вроде Brand · 02, PLATE · BRAND, Field notes - journal. Либо пусть картинка говорит сама, либо добавь подпись прямо под ней (вне картинки).
• НИКАКИХ подписей с авторством фото как украшения. Строки вроде Field study no. 12 · Ines Caetano, Plate 03 · House archive, Frame XII · 35mm под стоковыми/picsum-картинками - претенциозны. Указание автора фото разрешено ТОЛЬКО когда указывается настоящий фотограф за настоящее фото (с разрешения). В остальных случаях: пропусти подпись или используй однострочную функциональную подпись («The 6-quart, in Sage.»).
• НИКАКИХ подвалов с версиями на маркетинговых страницах. Строки подвала вроде v1.4.2, Build 0048, last sync 4s ago · main - атрибуты командной строки / девтулов, а не содержимое лендинга. Запрещены на маркетинговых/лендинговых/портфолио-страницах.
• НИКАКИХ живых счётчиков остатка вроде «Reservation 412 of 800» как украшения. Только если бриф прямо про лист ожидания ограниченного тиража с настоящими данными.

Декоративные текстовые полосы

• НИКАКОЙ декоративной текстовой полосы внизу главного экрана. Паттерны вроде BRAND. MOTION. SPATIAL., TYPE / FORM / MOTION, DESIGN · BUILD · SHIP, ESTD. 2018 · LISBON · BRAND. MOTION. SPATIAL. в виде маленькой моноширинной полосы заглавными буквами через низ главного экрана - клише агентского портфолио. Запрещены по умолчанию. Допустимы, только когда полоса несёт настоящие ссылки для навигации (закреплённая нижняя навигация) или настоящую статусную информацию (баннер cookie, информация о сборке на сайте документации).
• НИКАКОГО плавающего подтекста в правом верхнем углу заголовков блоков. Паттерн: у блока гигантский заголовок по левому краю; в правом верхнем углу той же шапки блока плавает маленький поясняющий абзац, не выровненный ни по чему другому. Этот «плавун» и есть признак ИИ. Либо ставь подтекст прямо под заголовком, либо собери чистую шапку в 2 колонки (слева: заголовок, справа: выровненный текст), но не крошечный абзац в углу.

Списки, разделители и оценки

• **НИКАКИХ border-t + border-b на каждой строке длинного списка / таблицы характеристик.** Выбери одно (нижняя рамка между строками ИЛИ верхняя рамка над группой) и используй скупо. Таблица характеристик на 10 строк с тонкой линией под каждой строкой - самая ленивая вёрстка; альтернативные компоненты интерфейса см. в разделе 4.9.
• НИКАКИХ шкал оценок/прогресса с залитыми фоновыми дорожками как визуализации сравнения. Если нужно показать сравнения «X из Y», предпочитай число + маленькую иконку или крошечную встроенную полоску БЕЗ фоновой дорожки. Большие залитые дорожки bg-zinc-200 с частичной заливкой сверху - мусор интерфейса дашборда на лендинге.

Локация, время, подсказки прокрутки

• Полосы с локацией / названием города / временем / погодой запрещены для 99% брифов. «Lisbon, working with founders» на главном экране, «1200-690 Lisbon, Portugal» в подвале, «Lisbon 14:23 · 18°C» в навигации. Это признаки ИИ, украшательство агентских портфолио. Допустимы ТОЛЬКО когда: бриф прямо описывает глобально распределённую студию с работой, зависящей от часовых поясов, ИЛИ бренд о путешествиях, ИЛИ реальное физическое место. Одно упоминание контактного адреса в подвале нормально; атмосферная полоса с локацией - нет.
• Подсказки прокрутки запрещены. Scroll, ↓ scroll, Scroll to explore, Scroll to walk through it, анимированные значки колёсика мыши. Если пользователь ещё не прокручивал, он смотрит на главный экран. Он знает, что такое прокрутка. Низу области просмотра подпись не нужна.
• НОЛЬ декоративных статусных точек по умолчанию. Цветная точка перед пунктами навигации, перед строками списка, перед бейджами, перед статусными подписями - признак ИИ. Допустима, только когда передаёт настоящее смысловое состояние (живой индикатор реального статуса сервера, живой флаг доступности) и ограничена одной на блок страницы.

9.G ЗАПРЕТ ДЛИННОГО ТИРЕ (самый часто нарушаемый признак ИИ)

**Длинное тире (—) ПОЛНОСТЬЮ запрещено.** Это фирменный стилистический костыль языковых моделей и признак ИИ №1 в боевых тестах. Никаких послаблений «ограниченное использование», никаких «частота как в естественном языке», никаких «в основном тексте можно». Никаких.

• Запрещено в заголовках. Используй точку или запятую.
• Запрещено в надзаголовках / подписях / «таблетках» / тексте кнопок / подписях к картинкам / пунктах навигации. Заменяй переносами строк, колонками или тонкими линиями.
• Запрещено в основном тексте. Перестрой предложение: два предложения через точку, ИЛИ запятая, ИЛИ скобки, ИЛИ двоеточие.
• Запрещено в подписи автора цитаты. Используй обычный дефис с пробелами ( - ) или перенос строки + имя менее насыщенным начертанием.
• **Запрещено и в форме короткого тире (–), когда оно служит разделителем.** Диапазоны дат (2018-2026) пиши с дефисом. Диапазоны чисел (€40-80k) пиши с дефисом.

ЕДИНСТВЕННЫЕ допустимые символы-чёрточки на странице:

• Обычный дефис - (для сложных слов, диапазонов, разделителей строк в разметке)
• Знак минус в математике (-5°C)

Если в твоём результате есть хоть одно — или – в любом месте, видимом пользователю, результат не проходит предполётную проверку (Pre-Flight Check) и должен быть переписан.

Это правило не обсуждается. Агент исторически игнорировал ограничения на длинное тире, когда они формулировались как «используй умеренно». Формулировка здесь бинарная: ноль длинных тире.

10. СПРАВОЧНЫЙ СЛОВАРЬ (названия паттернов, которые агент должен знать)

Это словарь, а не библиотека. Агент должен ЗНАТЬ эти названия паттернов, чтобы говорить о них, проектировать с ними в уме и обращаться к ним, когда этого требует прочтение дизайна. Реализации и наброски кода лежат в библиотеке блоков (раздел 12), которая наполняется постепенно.

Парадигмы главного экрана

• Асимметричный разделённый главный экран (Asymmetric Split Hero) - текст с одной стороны, материал с другой, много пустого пространства.
• Главный экран-манифест в редакционном стиле (Editorial Manifesto Hero) - крупная типографика, без материала, почти плакат.
• Главный экран с маской над видео / медиа (Video / Media Mask Hero) - шрифт вырезан как маска поверх видеофона.
• Главный экран с кинетической типографикой (Kinetic-Type Hero) - анимированная типографика как основной визуальный образ.
• Главный экран-занавес (Curtain-Reveal Hero) - главный экран раздвигается при прокрутке, как занавес.
• Закреплённый при прокрутке главный экран (Scroll-Pinned Hero) - главный экран остаётся закреплённым, пока содержимое прокручивается позади.

Навигация и меню

• Увеличение как в доке Mac OS (Mac OS Dock Magnification) - навигация у края, иконки плавно увеличиваются при наведении.
• Магнитная кнопка (Magnetic Button) - притягивается к курсору.
• «тянущееся» меню (Gooey Menu) - подпункты отделяются, как вязкая жидкость.
• Dynamic Island - превращающаяся «таблетка» для статуса / уведомлений.
• Контекстное радиальное меню (Contextual Radial Menu) - круговое меню, раскрывающееся в точке нажатия.
• Плавающий быстрый набор (Floating Speed Dial) - плавающая кнопка (FAB), из которой выпрыгивают дугой дополнительные действия.
• Раскрытие мегаменю (Mega Menu Reveal) - выпадающее меню на весь экран, содержимое появляется каскадным проявлением.

Вёрстка и сетки

• Бенто-сетка (Bento Grid) - асимметричная группировка плиток (как Центр управления Apple).
• Раскладка «кирпичная кладка» (Masonry Layout) - ступенчатая сетка без фиксированной высоты рядов.
• Цветная сетка (Chroma Grid) - рамки / плитки с тонкими анимированными градиентами.
• Прокрутка с разделённым экраном (Split-Screen Scroll) - две половины скользят в противоположные стороны.
• Блоки-стопка с закреплением (Sticky-Stack Sections) - блоки закрепляются и складываются стопкой при прокрутке.

Карточки и контейнеры

• Карточка с параллакс-наклоном (Parallax Tilt Card) - 3D-наклон, отслеживающий координаты мыши.
• Карточка с подсвечиваемой рамкой (Spotlight Border Card) - рамки освещаются под курсором.
• Панель-глассморфизм (Glassmorphism Panel) - матовое стекло с внутренним преломлением.
• Карточка с голографической фольгой (Holographic Foil Card) - переливающийся радужный сдвиг при наведении.
• Стопка карточек как в Tinder (Tinder Swipe Stack) - физическая стопка карточек, их смахивают.
• Превращающееся модальное окно (Morphing Modal) - кнопка раскрывается в собственное диалоговое окно.

Анимации при прокрутке

• Закреплённая стопка при прокрутке (Sticky Scroll Stack) - карточки закрепляются и физически складываются в стопку.
• Перехват горизонтальной прокрутки (Horizontal Scroll Hijack) - вертикальная прокрутка → горизонтальная панорама.
• Прокрутка-последовательность в духе Locomotive (Locomotive / Sequence Scroll) - видео / 3D-последовательность привязана к полосе прокрутки.
• Параллакс с увеличением (Zoom Parallax) - центральное фоновое изображение увеличивается при прокрутке.
• Линия, рисуемая прокруткой (Scroll Progress Path) - SVG-линия прорисовывается по мере прокрутки.
• Жидкий переход «свайп» (Liquid Swipe Transition) - переход между страницами, как вязкая жидкость.

Галереи и медиа

• Галерея-купол (Dome Gallery) - 3D-панорамная галерея.
• Карусель Coverflow (Coverflow Carousel) - 3D-карусель с наклонёнными краями.
• Сетка с перетаскиванием (Drag-to-Pan Grid) - безграничное полотно, которое можно перетаскивать.
• Слайдер-аккордеон из картинок (Accordion Image Slider) - узкие полосы раскрываются при наведении.
• Шлейф картинок за мышью (Hover Image Trail) - мышь оставляет за собой всплывающий шлейф картинок.
• Картинка с глитч-эффектом (Glitch Effect Image) - сдвиг RGB-каналов при наведении.

Типографика и текст

• Кинетическая бегущая строка (Kinetic Marquee) - бесконечные ленты текста, меняющие направление при прокрутке.
• Раскрытие через маску текста (Text Mask Reveal) - огромный шрифт как прозрачное окно в видео.
• Эффект перемешивания текста (Text Scramble Effect) - расшифровка в стиле «Матрицы» при загрузке / наведении.
• Текст по круговому пути (Circular Text Path) - текст изгибается вдоль вращающегося круга.
• Анимация градиентного контура (Gradient Stroke Animation) - контурный текст с бегущим градиентом.
• Сетка кинетической типографики (Kinetic Typography Grid) - буквы уворачиваются от курсора.

Микровзаимодействия и эффекты

• Кнопка-взрыв частиц (Particle Explosion Button) - призыв к действию разлетается на частицы при успехе.
• Жидкое обновление вытягиванием (Liquid Pull-to-Refresh) - индикатор перезагрузки, как отрывающиеся капли.
• Мерцающий скелет (Skeleton Shimmer) - сдвигающееся отражение света на заглушках.
• Кнопка с заливкой по направлению наведения (Directional Hover-Aware Button) - заливка входит с той самой стороны, откуда пришёл курсор.
• Эффект ряби при клике (Ripple Click Effect) - волна от координат клика.
• Анимированная прорисовка SVG-линии (Animated SVG Line Drawing) - векторы рисуют себя в реальном времени.
• Сетчатый градиентный фон (Mesh Gradient Background) - органичные пятна, как в лава-лампе.
• Глубина через размытие линзы (Lens Blur Depth) - интерфейс на фоне размывается, чтобы сфокусировать действие на переднем плане.

Выбор библиотеки анимации

• **Motion (motion/react)** - по умолчанию для анимации интерфейса / бенто / смены состояния.
• GSAP + ScrollTrigger - для скроллтеллинга на всю страницу и перехвата прокрутки. Изолируй в отдельных листовых компонентах с очисткой в useEffect.
• Three.js / WebGL - для фонов на canvas и 3D-сцен. То же правило изоляции.
• НИКОГДА не смешивай GSAP / Three.js с Motion в одном дереве компонентов. Они дерутся за одни и те же кадры.

11. ПРОТОКОЛ РЕДИЗАЙНА

Этот скилл работает и с нуля, И с редизайнами. Неверное определение режима - главный источник плохого результата редизайна.

11.A Определи режим (первое действие)

• С нуля (Greenfield) - нет существующего сайта или полная переделка одобрена. Базовые значения регуляторов - из раздела 1.
• Редизайн - сохранить - модернизировать, не ломая бренд. Сначала аудит, извлеки токены бренда, развивай постепенно.
• Редизайн - переделать полностью - новый визуальный язык поверх существующего содержимого. Для визуала считай работой с нуля; содержимое и информационную архитектуру (IA) сохрани.

Если неоднозначно, спроси один раз: *«Этот редизайн должен сохранить существующий бренд, или мы начинаем визуально с нуля?»*

11.B Аудит перед тем, как что-либо трогать

Зафиксируй текущее состояние, прежде чем предлагать изменения:

• Токены бренда - основной / акцентный цвета, набор шрифтов, оформление логотипа, радиусы.
• Информационная архитектура - дерево страниц, основная навигация, ключевые пути конверсии.
• Блоки содержимого - что есть, что работает, что наполнитель.
• Паттерны, которые стоит сохранить - фирменные взаимодействия, узнаваемый главный экран, голос текстов.
• Паттерны, которые стоит убрать - признаки ИИ-слопа, сломанная вёрстка, мёртвые ссылки, типовые стоковые изображения, ловушки производительности.
• Показания регуляторов существующего сайта - определи текущие DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY. Это твоя отправная точка, а не базовые значения.
• Базовая линия SEO - страницы, которые сейчас в выдаче, мета-заголовки, структурированные данные, карточки OG. Миграция SEO - риск №1 при редизайне.

11.C Правила сохранения

• Не меняй информационную архитектуру, если не просили. Держи неизменными адреса страниц (slug), ID якорей, подписи основной навигации - ради SEO и мышечной памяти пользователей.
• Извлеки цвета бренда до применения раздела 4.2. Бренд, который уже фиолетовый, остаётся фиолетовым - применяй исключение из ПРАВИЛА ЛИЛОВОГО.
• Сохраняй голос текстов, если не просили переписать. Визуальная модернизация ≠ переписывание содержимого.
• Уважай уже достигнутую доступность. Не ухудши состояния фокуса, альтернативный текст, навигацию с клавиатуры, контраст.
• Уважай существующие события аналитики. Не переименовывай кнопки, поля форм, ID блоков, от которых зависит отслеживание.

11.D Рычаги модернизации (по приоритету)

Применяй по порядку - остановись, когда бриф удовлетворён:

1. Обновление типографики - самый большой визуальный эффект на единицу риска.
2. Отступы и ритм - увеличь отступы блоков, поправь вертикальный ритм.
3. Перекалибровка цвета - снизь насыщенность, объедини нейтральные, оставь акцент бренда.
4. Слой анимации - добавь микровзаимодействия, подходящие для MOTION_INTENSITY, к существующим компонентам.
5. Перекомпоновка главного экрана и ключевых блоков - перестрой верх воронки, используя словарь из раздела 10.
6. Полная замена блока - только когда существующий блок не спасти.

11.E Дерево решений: точечное развитие или полный редизайн

• Информационная архитектура, содержимое и SEO в порядке → точечное развитие (рычаги 1-4). Около 70% пользы при около 40% риска.
• Визуальный долг структурный (сломанная IA, нет дизайн-системы, сломанная мобильная версия) → полный редизайн со строгим сохранением содержимого.
• Меняется сам бренд → с нуля.

11.F Что никогда не меняется молча

Никогда не меняй без прямого одобрения пользователя:

• Структуру URL / адреса маршрутов (slug).
• Подписи основной навигации.
• Имена или порядок полей форм (ломает аналитику + автозаполнение).
• Логотип или словесный знак бренда.
• Существующие юридические тексты / согласия / cookie.

12. БИБЛИОТЕКА БЛОКОВ (контракт - реализации появляются здесь постепенно)

Справочный словарь (раздел 10) называет паттерны. Библиотека блоков реализует их с настоящими свойствами, настоящими спецификациями анимации и настоящими набросками кода.

Статус: схема определена здесь. Блоки будут добавляться постепенно. Не придумывай новые блоки по своему усмотрению, не следуя этой схеме.

12.A Расположение файлов

skills/taste-skill/blocks/
  hero/
    asymmetric-split.md
    editorial-manifesto.md
    kinetic-type.md
    ...
  feature/
    bento-grid.md
    sticky-scroll-stack.md
    zig-zag.md
    ...
  social-proof/
  pricing/
  cta/
  footer/
  navigation/
  portfolio/
  transition/

12.B Обязательная шапка (frontmatter)

---
name: asymmetric-split-hero
category: hero
dial_compatibility:
  variance: [6, 10]
  motion: [3, 10]
  density: [2, 5]
when_to_use: "Landing pages with one strong asset and one strong message. Default hero for SaaS, agency, premium consumer."
not_for: "Editorial / manifesto launches where the message IS the design."
stack: ["react", "next", "tailwind", "motion"]
---

12.C Обязательные разделы тела

1. Визуальный набросок - короткий ASCII-рисунок или описание вёрстки.
2. API свойств (Props API) - интерфейс компонента.
3. Набросок кода - минимальная рабочая реализация (серверный компонент по умолчанию, клиентский «остров» для анимации).
4. Запасной вариант для мобильных - явные правила схлопывания для < 768px.
5. Варианты анимации - один вариант на каждую полосу MOTION_INTENSITY (1-3, 4-7, 8-10). Запасной вариант для уменьшенного движения указан явно.
6. Заметки по тёмной теме - стратегия токенов именно для этого блока.
7. Антипаттерны - типичные способы, как этот блок получается плохо.
8. Ссылки - ссылки на настоящие примеры в продакшене.

12.D Дисциплина библиотеки блоков

• Один блок на файл. Никаких файлов с несколькими блоками.
• Каждый блок должен работать самостоятельно (вставь его на страницу - он отрисуется).
• Каждый блок должен проходить предполётную проверку (раздел 14).
• Блоки, зависящие от дизайн-системы из раздела 2.A, лежат в blocks/<category>/<name>--<system>.md (например, feature/bento-grid--material.md).

13. ЗА ПРЕДЕЛАМИ ЗАДАЧ СКИЛЛА

Этот скилл НЕ для:

• Дашбордов / плотных интерфейсов продукта / админок (используй Fluent, Carbon, Atlassian или Polaris из раздела 2.A).
• Таблиц данных (используй TanStack Table или AG Grid).
• Многошаговых форм / мастеров (используй специальные паттерны форм; этот скилл не сделает их лучше).
• Редакторов кода (используй Monaco / CodeMirror с их официальным оформлением).
• Нативных мобильных приложений (используй Apple HIG / Material напрямую).
• Интерфейсов совместной работы в реальном времени (присутствие, курсоры, работа с учётом OT - другой класс задач).

Если бриф относится к чему-то из этого, скажи об этом прямо, укажи подходящий инструмент и применяй части этого скилла для маркетинговых страниц / страниц «о нас» / лендингов только к тем поверхностям, где они уместны.

14. ИТОГОВАЯ ПРЕДПОЛЁТНАЯ ПРОВЕРКА (FINAL PRE-FLIGHT CHECK)

Прогони эту матрицу перед выдачей кода. Это последний фильтр.

ЭТО НЕ ПО ЖЕЛАНИЮ. Пройди каждую галочку. Если хоть одна не выполнена, результат не готов.

• [ ] Вывод из брифа объявлен (однострочник из раздела 0.B)?
• [ ] Значения регуляторов заданы явно и обоснованы брифом, а не молча взяты базовые?
• [ ] Дизайн-система выбрана из раздела 2, если применимо, или эстетика честно подписана?
• [ ] Режим редизайна определён и аудит проведён (если применимо, раздел 11)?
• [ ] **НОЛЬ длинных тире (—) где-либо на странице.** Заголовки, надзаголовки, «таблетки», основной текст, цитаты, подписи авторов, подписи к картинкам, кнопки, альтернативный текст. Ноль. (Раздел 9.G - не обсуждается.)
• [ ] Фиксация темы страницы: ОДНА тема (светлая, тёмная или авто) на всю страницу. Ни один блок не переворачивается в инвертированный режим посреди страницы (раздел 4.11)?
• [ ] Фиксация цветовой последовательности: один акцентный цвет используется одинаково во всех блоках (раздел 4.2)?
• [ ] Фиксация единства формы: одна система скруглений применяется последовательно (раздел 4.4)?
• [ ] Проверка контраста кнопок: текст каждого призыва к действию читается на его фоне (никакого белого на белом, WCAG AA 4.5:1)?
• [ ] Перенос текста кнопок: ни одна подпись призыва к действию не переносится на 2+ строки на десктопе?
• [ ] Проверка контраста форм: поля ввода, подсказки, кольца фокуса, подписи проходят WCAG AA относительно фона блока?
• [ ] Дисциплина с засечками: если используется шрифт с засечками, это НЕ Fraunces и НЕ Instrument_Serif (либо они есть, но с прямым обоснованием бренда)? Шрифт с засечками отличается от того, что был в предыдущем проекте?
• [ ] Проверка палитры «премиального потребительского»: если бриф премиальный потребительский (посуда / велнес / ремесло / люкс), палитра НЕ ИИ-семейство по умолчанию «бежевый + латунь + цвет бычьей крови + эспрессо»? Другое семейство, чем в предыдущем премиальном потребительском проекте?
• [ ] Запас под выносные элементы курсива: у каждого курсивного слова с y g j p q есть leading-[1.1] минимум + запас pb-1?
• [ ] Главный экран помещается в область просмотра: заголовок ≤ 2 строк, подтекст ≤ 20 слов И ≤ 4 строк, призыв к действию виден без прокрутки, шкала шрифта спланирована с учётом картинки?
• [ ] Верхний отступ главного экрана: максимум pt-24 на десктопе, содержимое главного экрана не повисает на середине области просмотра?
• [ ] Дисциплина стека главного экрана: максимум 4 текстовых элемента на главном экране (надзаголовок ИЛИ полоса бренда, заголовок, подтекст, призывы к действию)? Нет мелкой строки под призывами, нет полосы доверия на главном экране?
• [ ] ЧИСЛО НАДЗАГОЛОВКОВ (механически): посчитай вхождения микроподписей uppercase tracking над заголовками блоков во всех компонентах. Число ≤ ceil(числоБлоков / 3)? Главный экран считается за 1.
• [ ] Запрет разделённого заголовка блока: нет паттерна «слева большой заголовок + справа маленький поясняющий абзац» в роли шапки блока (вместо него вертикальная стопка)?
• [ ] Потолок зигзагообразного чередования: нет 3+ блоков подряд с одинаковой вёрсткой «картинка + текст»?
• [ ] Нет дубля намерения в призывах: нет двух призывов к действию с одним намерением («Get in touch» + «Let's talk» на одной странице = провал)?
• [ ] Стена логотипов = только логотипы: под логотипами не напечатаны подписи отрасли / категории?
• [ ] Разнообразие фонов в бенто: минимум 2-3 ячейки бенто имеют настоящее визуальное отличие (картинка, градиент, узор), а не все белые текстовые карточки на белом?
• [ ] Стена логотипов «Нам доверяют / Используют» находится ПОД главным экраном, а не внутри него, использует НАСТОЯЩИЕ SVG-логотипы (Simple Icons / devicon) или сгенерированные SVG-знаки, а НЕ простые текстовые словесные знаки?
• [ ] Самопроверка текста: каждая видимая строка перечитана, не выпущено грамматически сломанных или галлюцинаторных ИИ-фраз (вроде «free on its past»)?
• [ ] Анимация мотивирована: каждую анимацию можно оправдать одним предложением (иерархия / повествование / обратная связь / переход состояния), нет GSAP «для показухи»?
• [ ] Бегущая строка - максимум одна на страницу: нет двух горизонтальных бегущих строк на одной странице?
• [ ] Навигация в ОДНУ строку на десктопе, высота ≤ 80px?
• [ ] Проверка повтора семейства вёрстки между блоками: нет двух блоков с одним семейством вёрстки (минимум 4 разных семейства на 8 блоков)?
• [ ] У бенто есть ритм И точное число ячеек (N элементов → N ячеек, нет пустых ячеек посередине или в конце)?
• [ ] Длинные списки используют правильный компонент интерфейса (не обычный <ul> с divide-y при > 5 пунктов - см. альтернативы в разделе 4.9)?
• [ ] Использованы настоящие изображения (сначала инструмент генерации, затем Picsum с seed, затем явные места-заглушки) - НИКАКИХ фальшивых скриншотов на div-ах, НИКАКИХ декоративных SVG вручную, НИКАКОГО минимализма из одного текста?
• [ ] Нет «таблеток»/подписей поверх картинок (никаких Plate · Brand, никаких Field notes - journal)?
• [ ] Нет подписей с авторством фото как украшения (Field study no. 12 · Ines Caetano)?
• [ ] Нет подвалов с версиями (v1.4.2, Build 0048) на маркетинговых страницах?
• [ ] Нет микрометапредложений под надзаголовками («Each of these is a feature we ship today...»)?
• [ ] Нет декоративной текстовой полосы внизу главного экрана (BRAND. MOTION. SPATIAL.)?
• [ ] Нет плавающего подтекста в правом верхнем углу заголовков блоков?
• [ ] Нет шкал оценок/прогресса с залитыми фоновыми дорожками как визуализации сравнения?
• [ ] Нет полос с локацией / названием города / временем / погодой, если бриф не про по-настоящему глобально распределённую студию или не привязан к месту?
• [ ] Нет подсказок прокрутки (Scroll, ↓ scroll, Scroll to explore)?
• [ ] Нет меток версии на главном экране (V0.6, BETA, INVITE-ONLY), если бриф не про запуск?
• [ ] Нет надзаголовков с нумерацией блоков (00 / INDEX, 001 · Capabilities, 06 · how it works)?
• [ ] Нет декоративных точек (по умолчанию ноль, только для настоящего смыслового состояния)?
• [ ] **Нет border-t + border-b на каждой строке** длинных списков / таблиц характеристик?
• [ ] Плотность содержимого здравая: нет таблиц данных на 20 строк, нет фальшиво-точных характеристик без обоснования, подабзацы по умолчанию ≤ 25 слов?
• [ ] Цитаты ≤ 3 строк текста, подпись автора чистая (без длинного тире)?
• [ ] Заявленное движение = показанное движение: если MOTION_INTENSITY > 4, страница действительно анимируется, а не только заявлена?
• [ ] GSAP sticky-stack / horizontal-pan реализованы по каноническому скелету из раздела 5.A / 5.B (start: "top top", pin: true, правильный scrub)?
• [ ] **Нет window.addEventListener('scroll')** - используются только useScroll() из Motion / ScrollTrigger / IntersectionObserver / анимации CSS, управляемые прокруткой?
• [ ] Уменьшенное движение учтено для всего, что при MOTION_INTENSITY > 3?
• [ ] Токены тёмной темы определены и проверены в обеих темах?
• [ ] Мобильное схлопывание задано явно (w-full, px-4, max-w-7xl mx-auto) для вёрстки с высоким разбросом?
• [ ] Стабильность области просмотра: min-h-[100dvh], никогда h-screen?
• [ ] **Анимации в useEffect** имеют строгие функции очистки?
• [ ] Пустые / загрузки / ошибки: состояния предусмотрены?
• [ ] Карточки опущены в пользу отступов, где возможно?
• [ ] Иконки только из разрешённой библиотеки (Phosphor / HugeIcons / Radix / Tabler), никаких контуров SVG, нарисованных вручную?
• [ ] Анимация изолирована в клиентских листовых компонентах с 'use client' в первой строке, с мемоизацией?
• [ ] Нет признаков ИИ из раздела 9 (Inter по умолчанию, ИИ-фиолетовый, три равные карточки, Jane Doe, Acme, «Quietly in use at»)?
• [ ] Core Web Vitals правдоподобно выполнены (LCP < 2.5 с, INP < 200 мс, CLS < 0.1)?
• [ ] Одна дизайн-система на проект (нет смеси Material + shadcn)?

Если хоть одну галочку нельзя честно поставить, страница не готова. Исправь это до выдачи.

ПРИЛОЖЕНИЯ - настоящие материалы со ссылками на первоисточники

Разделы ниже - это включённый справочный материал. Он даёт агенту настоящие команды установки, настоящие ссылки на канонические документы и настоящие рабочие стартовые фрагменты для каждой дизайн-системы, названной в разделе 2. Используй их, чтобы опираться на производственную реальность, а не на выдумки из обучающих данных.

Приложение A - команды установки для каждой дизайн-системы

# Material Web (Material 3)
npm install @material/web

# Fluent UI React (v9)
npm install @fluentui/react-components

# Fluent UI Web Components (framework-free)
npm install @fluentui/web-components @fluentui/tokens

# IBM Carbon
npm install @carbon/react @carbon/styles

# Radix Themes
npm install @radix-ui/themes

# shadcn/ui (open code, owned components)
npx shadcn@latest init
npx shadcn@latest add button card badge separator input

# Primer CSS (GitHub product/devtool UI)
npm install --save @primer/css

# Primer Brand (GitHub marketing UI)
npm install @primer/react-brand

# GOV.UK Frontend
npm install govuk-frontend

# USWDS (US Web Design System)
npm install uswds

# Atlassian Design System (Atlaskit)
yarn add @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/badge @atlaskit/section-message @atlaskit/card

# Bootstrap 5.3
npm install bootstrap

# Shopify Polaris Web Components (Shopify apps only)
# Add this to your app HTML head:
#   <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
#   <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>

Приложение B - канонические источники (прочитай, прежде чем изобретать заново)

Material Web

• https://github.com/material-components/material-web
• https://material-web.dev/theming/material-theming/
• https://m3.material.io/develop/web

Fluent UI

• https://fluent2.microsoft.design/get-started/develop
• https://fluent2.microsoft.design/components/web/react/
• https://github.com/microsoft/fluentui
• https://learn.microsoft.com/en-us/fluent-ui/web-components/

Carbon

• https://carbondesignsystem.com/
• https://github.com/carbon-design-system/carbon
• https://carbondesignsystem.com/developing/react-tutorial/overview/
• https://carbondesignsystem.com/developing/web-components-tutorial/overview/

Shopify Polaris

• https://shopify.dev/docs/api/app-home/web-components
• https://github.com/Shopify/polaris-react
• https://polaris-react.shopify.com/components

Atlassian

• https://atlassian.design/get-started/develop
• https://atlassian.design/components/button/examples
• https://atlaskit.atlassian.com/packages/design-system/button/example/disabled
• https://atlassian.design/tokens/design-tokens

Primer

• https://primer.style/
• https://github.com/primer/css
• https://github.com/primer/brand

GOV.UK

• https://design-system.service.gov.uk/components/button/
• https://design-system.service.gov.uk/styles/layout/
• https://github.com/alphagov/govuk-frontend

USWDS

• https://designsystem.digital.gov/documentation/developers/
• https://designsystem.digital.gov/components/button/
• https://designsystem.digital.gov/components/card/
• https://github.com/uswds/uswds

Bootstrap

• https://getbootstrap.com/docs/5.3/layout/grid/
• https://getbootstrap.com/docs/5.3/components/card/

Tailwind

• https://tailwindcss.com/docs/dark-mode
• https://tailwindcss.com/blog/tailwindcss-v4

Radix

• https://www.radix-ui.com/themes/docs/components/theme
• https://www.radix-ui.com/themes/docs/components/card
• https://github.com/radix-ui/themes

shadcn/ui

• https://ui.shadcn.com/docs
• https://ui.shadcn.com/docs/components/card
• https://github.com/shadcn-ui/ui

Нативный CSS / стандарты W3C

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
• https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout
• https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations
• https://drafts.csswg.org/scroll-animations-1/

Apple Liquid Glass (только платформы Apple)

• https://developer.apple.com/design/human-interface-guidelines/materials
• https://developer.apple.com/documentation/TechnologyOverviews/liquid-glass
• https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass
• https://developer.apple.com/documentation/SwiftUI/Material

Приложение C - Apple Liquid Glass: честное веб-приближение

Не считай случайные фрагменты CSS официальным Apple Liquid Glass.

Что официально

Apple документирует Liquid Glass в Руководстве по человеческому интерфейсу (Human Interface Guidelines) и документации для разработчиков Apple для платформ Apple. Это динамический материал, используемый в интерфейсе платформ Apple. Нативная реализация Apple принадлежит API платформ Apple и системным компонентам, а не публичному веб-пакету CSS.

Соответствующие официальные документы:

• Apple Human Interface Guidelines → Materials
• Документация для разработчиков Apple → Liquid Glass
• Документация для разработчиков Apple → Adopting Liquid Glass
• SwiftUI → Material

Что НЕ официально

Для обычных сайтов у Apple нет liquid-glass.css.

Веб-приближение может использовать:

• backdrop-filter
• прозрачные фоны
• многослойные рамки
• подсвечивающие слои
• градиенты
• анимацию
• запасные варианты с сильным контрастом

Но это веб-глассморфизм / приближение «матового стекла», а не официальный Apple Liquid Glass. Подпиши это так в комментариях.

Скелет более безопасного веб-приближения

.liquid-glass-web-approx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .32);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .30), rgb(255 255 255 / .08)),
    rgb(255 255 255 / .12);
  backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .48),
    inset 0 -1px 0 rgb(255 255 255 / .12),
    0 18px 60px rgb(0 0 0 / .18);
}

.liquid-glass-web-approx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 0%, rgb(255 255 255 / .55), transparent 34%),
    linear-gradient(90deg, rgb(255 255 255 / .18), transparent 42%, rgb(255 255 255 / .14));
  pointer-events: none;
}

.liquid-glass-web-approx::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / .14);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .liquid-glass-web-approx {
    border-color: rgb(255 255 255 / .18);
    background:
      linear-gradient(135deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04)),
      rgb(15 23 42 / .42);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .22),
      0 18px 60px rgb(0 0 0 / .42);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .liquid-glass-web-approx {
    background: rgb(255 255 255 / .96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Важно: у prefers-reduced-transparency неравномерная поддержка в браузерах; проверь это. Всегда обеспечивай достаточный контраст даже без размытия.

Конец приложений. Команды установки выше - опорные точки реальности. Скелет Apple Liquid Glass - это подписанное приближение, а не пакет, выпущенный Apple. Канонические документы по каждой дизайн-системе смотри в официальной документации системы (ссылки в разделе 2 плюс приложение B).

Перевод: iiuniversitet. Оригинал: https://github.com/leonxlnx/taste-skill/tree/main/skills/taste-skill, лицензия MIT. Изменения: перевод на русский язык.