Вкус против шаблона: навык design-taste-frontend

Ася полгода собирала лендинги вместе с агентом, и всё шло гладко, пока клиент не прислал одну строчку: «выглядит так, будто это сгенерировали». Обиднее всего было то, что он прав: фиолетовый градиент, три одинаковые карточки, шрифт Inter, центрированный герой на тёмном фоне.

Так выглядит слоп. Это не «нарисовано плохо», а «нарисовано ровно так, как рисует по умолчанию любая модель». Пакет @dzhechkov/skills-taste содержит один навык, design-taste-frontend, и это навык против шаблонного дизайна: не пожелание «сделай красиво», а свод предписаний, который перекрывает дефолты модели.

Что он приносит, если сказать тремя пунктами:

1. Три ручки — DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY. Агент выставляет их из брифа, а не берёт наугад.
2. Карта «бриф → основа»: когда брать настоящую дизайн-систему официальным пакетом, а когда честно признать, что перед тобой вкусовое направление без библиотеки.
3. Предполётная проверка перед выдачей: список пунктов, провал любого из которых означает «работа не сделана».

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

Открой две ссылки прямо сейчас, они пригодятся дальше: страница пакета на npm и исходный навык, из которого он импортирован по лицензии MIT, — Leonxlnx/taste-skill.

Первое, что делает навык, — не пишет код. Он читает бриф.

Ася раньше начинала с вопроса «какой сделать герой?». Навык начинает с шести сигналов: тип страницы (лендинг, портфолио, редизайн, журнал), слова о настроении («спокойно», «как Linear», «брутально», «премиум»), присланные ссылки и скриншоты, аудитория (закупочный комитет в B2B или человек, который выбирает сковородку), уже существующие активы бренда (логотип, цвет, шрифт, фотография) и тихие ограничения — доступность, госсектор, регулируемая отрасль, детский продукт. Тихие ограничения перебивают вкус: если это сайт государственной услуги, «хочется поживее» проигрывает.

Из шести сигналов складывается чтение брифа одной фразой, которое агент обязан произнести вслух до генерации:

> «Читаю это как: лендинг B2B SaaS для технических покупателей, язык минималистичный в духе Linear, склоняюсь к утилитам Tailwind, шрифту Geist и сдержанному движению.»

Дальше два правила, которые экономят вечер:

• бриф однозначен — не спрашивай: объяви своё чтение и работай;
• бриф правда двоится — задай ровно один вопрос, а не список из пяти. Например: «ближе к чистоте Linear или к экспериментам Awwwards?»

И отдельная дисциплина, ради которой всё затевалось: не сваливаться в дефолты. Фиолетовый градиент, центрированный герой на тёмной сетке, три одинаковые карточки, стекло на всём подряд, Inter со slate-900 — это то, куда модель приходит сама. Мимо них надо пройти осознанно, а не случайно.

Ася однажды выставила настройки на глаз и получила ярмарку: анимация как в рекламе кроссовок на сайте юридической фирмы.

После чтения брифа навык ставит три ручки конфигурации, и дальше каждое решение о раскладке, движении и плотности сверяется именно с ними:

1. DESIGN_VARIANCE — от 1 (идеальная симметрия) до 10 (художественный хаос).
2. MOTION_INTENSITY — от 1 (статика) до 10 (кинематографическая хореография).
3. VISUAL_DENSITY — от 1 (галерея, воздух) до 10 (кокпит, плотные данные).

База — 8 / 6 / 4, и она действует ровно до тех пор, пока чтение брифа её не переписало. Готовые наборы: лендинг SaaS 7 / 6 / 4, агентство 9 / 8 / 3, портфолио разработчика 6 / 5 / 4, государственная услуга 3 / 2 / 5. Редизайн с сохранением бренда берёт значения существующего сайта, редизайн-переделка добавляет по двойке к вариативности и движению.

Важно, что деление шкалы — это не настроение, а конкретная вёрстка. DESIGN_VARIANCE 8–10 означает масонри, дробные колонки 2fr 1fr 1fr и огромные пустые зоны; 1–3 — двенадцать равных колонок и центрирование. MOTION_INTENSITY 4–7 — это переходы на transform и opacity с каскадом задержек; 8–10 разрешает прокрутку-хореографию, но тем же движением обязывает уважать prefers-reduced-motion. VISUAL_DENSITY 8–10 запрещает карточки: данные разделяются линиями в один пиксель, а все числа становятся моноширинными.

И жёсткая оговорка про телефоны: любая асимметрия выше md: обязана схлопываться в одну колонку ниже 768 пикселей. Художественный хаос — это десктопное удовольствие.

Пакет ставится одной строкой, а навык подключается второй.

Ася делает так:

1. dz install @dzhechkov/skills-taste — пакет появляется в местном каталоге.
2. dz init --target claude-code --select design-taste-frontend — точечная установка навыка под конкретную платформу: приезжает ровно один навык, а не весь пресет.

Флаг --target говорит, ПОД ЧТО раскладывать (Claude Code, Codex, Cursor и другие цели), флаг --select — ЧТО именно взять по имени. Без --select приедет весь набор пресета; с ним — только design-taste-frontend. В пакете он всё равно один, но привычка выбирать по имени пригодится с пакетами покрупнее.

Дальше команды не нужны. Навык описан так, что срабатывает на формулировки самой задачи: «собери лендинг для…», «переделай портфолио», «сделай, чтобы это не выглядело шаблонным». Ты пишешь задачу словами, ассистент сам подтягивает навык.

Как понять, что он действительно подключился. Первое, что ты увидишь в ответе, — строка чтения брифа («Читаю это как: …») и явные значения трёх ручек. Если ни того, ни другого нет, навык не сработал, и ты получаешь обычный дефолтный лендинг: проверь имя навыка и цель установки, а не качество модели.

Здесь навык делает то, чего модели обычно не делают: признаётся, когда у вещи есть официальный владелец.

Правило простое. Бриф читается как «продукт в экосистеме Microsoft» — берётся @fluentui/react-components. «Сервис британского госсектора» — govuk-frontend. «Аналитика в стиле IBM» — @carbon/react. «Приложение внутри Shopify» — Polaris. «Страница про инструмент для разработчиков в духе GitHub» — Primer. Это и есть официальная система против эстетики: у неё есть пакет, токены, проработанная доступность и сопровождение.

Правило честности звучит так: не воспроизводи CSS такой системы руками и не подключай её токены, чтобы тут же переопределить девять десятых. И одна система на проект: Fluent рядом с Carbon в одном дереве — это не богатство выбора, это поломка.

Вторая половина карты — направления, у которых официального пакета нет: стекломорфизм, бенто-сетки в духе Apple, брутализм, журнальная вёрстка, тёмный технарский стиль, аврора-градиенты, кинетическая типографика. Их собирают на нативном CSS плюс Tailwind, и в комментариях к коду честно пишут, что это заимствованное вдохновение, а не официальный материал.

Самый показательный случай — Apple Liquid Glass. Apple документирует его для своих платформ. Файла liquid-glass.css не существует. Веб-версия — приближение через backdrop-filter, слоистые границы и подсветку, и её положено так и подписать: приближение.

Ася запомнила всё это одним вопросом перед стартом: «у того, что просят, есть владелец с пакетом — или это вкус?» Ответ определяет и стек, и то, что честно писать в комментариях.

Ася однажды сделала магнитную кнопку на useState. На десктопе выглядело прилично, на телефоне страница легла.

Умолчания навыка, когда официальная дизайн-система не выбрана: React или Next.js с серверными компонентами, Tailwind v4, библиотека Motion с импортом из motion/react, шрифты через next/font или собственный хостинг с font-display: swap. Ссылку на Google Fonts в продакшене не ставят.

Стек по умолчанию и правило состояния — это одна связка, а не два независимых пункта. Правило состояния такое: useState годится для дискретных переключений, но никогда для непрерывных величин — позиции курсора, прогресса прокрутки, физики притяжения. Для них есть useMotionValue, useTransform и useScroll, которые живут вне цикла перерисовки React. useState перерисовывает дерево на каждом кадре, и мобильный браузер этого не переживает.

Отсюда же изоляция: всё, что двигается, живёт в листовом клиентском компоненте с 'use client' наверху. Серверные компоненты рисуют статическую раскладку и ничего не слушают.

Мелочи, каждая из которых экономит вечер:

• Иконки — только из разрешённых библиотек: Phosphor, HugeIcons, Radix, Tabler. Пути SVG руками не рисуют, семейство на проект одно, толщина линии единая.
• Зависимости — перед любым импортом заглядывают в package.json; пакета нет — сначала команда установки, а не предположение, что он есть.
• Высота экрана — min-h-[100dvh], а не h-screen: адресная строка мобильного Safari иначе двигает всю раскладку.
• Сетка вместо арифметики — grid grid-cols-1 md:grid-cols-3 gap-6, а не w-[calc(33%-1rem)].

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

Правила раскладки страницы, которые Ася теперь проверяет глазами до того, как показывать клиенту:

1. Герой помещается в первый экран. Заголовок максимум две строки, подпись максимум двадцать слов и четыре строки, кнопки видны без прокрутки. Заголовок в четыре строки — это всегда ошибка кегля, а не длины текста.
2. Верхний отступ героя не больше pt-24. Больше — и содержимое зависает посреди экрана и читается как баг вёрстки, а не как воздух.
3. В герое максимум четыре текстовых элемента: надзаголовок (ноль или один), заголовок, подпись, кнопки. Мелкая строчка под кнопками, полоска «нами пользуются в…», намёк на цену — всё это переезжает в секции ниже.
4. Надзаголовков не больше, чем ceil(число секций / 3). Надзаголовок — та самая мелкая капслочная подпись над заголовком секции. Каждый сгенерированный сайт ставит её над каждой секцией, и получается один и тот же ритм. Проверка механическая: посчитать вхождения uppercase tracking.
5. Навигация в одну строку на десктопе, высота до 80 пикселей. Меню в две строки — сломанная вёрстка, а не «богатое меню».
6. Не больше двух подряд секций «картинка слева, текст справа». Третья такая подряд — провал; ритм ломают полноширинной секцией, вертикальным стеком или бенто-сеткой.
7. Одно семейство раскладки — одна секция. Восемь секций требуют минимум четырёх разных семейств.
8. В бенто-сетке ровно столько ячеек, сколько есть содержимого. Пустая ячейка означает, что сетку спланировали неверно, а не что нужен пустой блок.

Запрещён и «разъехавшийся заголовок»: слева гигантский заголовок, справа мелкий абзац-пояснение, висящий сам по себе. Если нужны оба, ставь их друг под другом с шириной строки до 65 знаков.

Ася называет это почерком: набор мелочей, по которым видно, что страницу собрала модель, а не человек с мнением.

Признаки машинного почерка, вынесенные навыком в отдельный запретный список:

• Длинное тире. Запрет полный: в заголовках, надзаголовках, кнопках, подписях, цитатах, атрибуции и даже в alt-тексте. Ни «умеренно», ни «в основном тексте можно». Разрешены обычный дефис и знак минуса. Одно длинное тире на странице — провал предполётной проверки.
• Нумерация секций в надзаголовках: 00 / INDEX, 001 · Возможности, 06 · как это работает. Надзаголовок называет тему словами, а не считает секции.
• Подсказки прокрутки: «Scroll», стрелка вниз, анимированное колёсико мыши. Если человек ещё не прокручивал, он смотрит на герой — про прокрутку он знает.
• Полоски места и погоды в шапке или подвале: «Лиссабон 14:23 · 18°C». Уместно, только если бриф правда про распределённую студию или физическое место.
• Поддельные превью продукта из блоков div: фальшивый список задач, фальшивый терминал, фальшивая панель. Это главный признак из всех.
• Люди и числа из воздуха: «Иван Иванов», «Acme», 99.99%, ровные 50%. Либо настоящие данные, либо честно помеченный пример.
• Глаголы-наполнители: «раскройте», «бесшовно», «нового поколения». Только конкретные действия.
• Декоративные цветные точки перед каждым пунктом меню и каждой плашкой. Точка допустима, только если означает реальное состояние: живой сервер, занятость слота.

Остановись на секунду и вспомни последний лендинг, который тебе действительно понравился. Сколько пунктов из этого списка в нём было? Почти всегда ноль, и это не совпадение: почерк не портит страницу по одной штуке, он делает её неотличимой от сотни соседних.

«Минимализм» — любимое оправдание пустой страницы. Навык на него не ведётся: страница из одного текста — это не минимализм, это незаконченная работа.

Настоящие картинки и плотность текста — два требования, которые чаще всего проваливают вместе: картинок нет, зато текста втрое больше нужного.

Картинки берутся строго по приоритету. Первый источник — генератор изображений, если он есть в окружении: снимок для героя, предметная съёмка, фактура фона, каждая под своё соотношение сторон. Второй — настоящие фотографии: https://picsum.photos/seed/<описательный-ключ>/1600/1200 или ссылки, которые дал бренд. Третий и последний — честность: оставить размеченные слоты вроде <!-- TODO: фото героя, 1600x1200 --> и прямо сказать заказчику, каких снимков не хватает. Чего делать нельзя ни при каких условиях: рисовать поддельные скриншоты блоками div и выдавать самодельные декоративные SVG за иллюстрации.

Стена логотипов — только логотипы. Настоящие SVG из Simple Icons, и никаких подписей «Vercel · хостинг» под каждым: подпись не добавляет того доверия, ради которого стена и существует.

Плотность текста режется безжалостно. По умолчанию на секцию: заголовок до восьми слов, абзац до двадцати пяти слов и один визуальный элемент ИЛИ одна кнопка. Таблица характеристик на двадцать строк с линией под каждой — самая ленивая раскладка из возможных. Вместо неё группируют в три смысловых блока, или дают карточку на характеристику, или прячут хвост под «показать все».

И последнее, что Ася делает перед сдачей: перечитывает вслух каждую видимую строку — заголовки, кнопки, подписи, alt-тексты. Любая фраза, которая звучит умно, но ничего не значит, заменяется простым предложением. Скучный текст лучше милого и бессмысленного.

Ася любит прокрутку-хореографию. Навык её не запрещает — он запрещает делать её плохо.

Движение без потери доступности держится на четырёх правилах.

Первое: слушатель window.addEventListener("scroll", …) запрещён. Он срабатывает на каждом кадре, не группируется и даёт рывки. Вместо него — useScroll() из Motion, ScrollTrigger из GSAP, IntersectionObserver или нативная CSS-анимация по таймлайну (animation-timeline: view()). Тем же запретом накрыты ручные расчёты window.scrollY в состоянии React и циклы requestAnimationFrame, которые трогают состояние.

Второе: анимируются только transform и opacity. Никаких top, left, width, height — они заставляют браузер пересчитывать раскладку на каждом кадре. Свойство will-change ставится точечно, а не на всё подряд.

Третье: всё, что выше MOTION_INTENSITY 3, обязано уважать prefers-reduced-motion. Бесконечные циклы, параллакс, перехват прокрутки и магнитная физика схлопываются в статику. Это условие сдачи, а не пожелание: для части людей движение на странице означает тошноту, а не восторг.

Четвёртое: у каждой анимации есть причина, которую можно назвать одной фразой — иерархия, история, обратная связь или переход состояния. «Чтобы было живее» причиной не считается.

Сверху лежат цели производительности: LCP меньше 2,5 секунды, INP меньше 200 миллисекунд, CLS меньше 0,1. И одна коварная деталь: зерно и шум накладывают только на фиксированный псевдоэлемент с pointer-events: none, никогда на прокручиваемый контейнер — непрерывная перерисовка убивает частоту кадров на телефоне.

Половина плохих редизайнов начинается с неверно определённого режима. Ася теперь спрашивает про это первым делом.

Режим редизайна и аудит до правок — два шага, которые идут раньше любой строки CSS.

Режимов три:

1. С нуля — сайта нет или полную переделку согласовали. Ручки берутся из базы.
2. Редизайн с сохранением — обновить, не сломав бренд. Аудит, извлечение токенов, постепенная эволюция.
3. Редизайн-переделка — новый визуальный язык поверх существующего содержимого. Визуально как с нуля, но содержимое и структура сохраняются.

Если неясно, задаётся ровно один вопрос: сохраняем бренд или начинаем визуально с чистого листа?

Аудит до правок фиксирует: токены бренда (цвета, шрифты, логотип, радиусы), информационную архитектуру (дерево страниц, меню, пути к заявке), какие блоки работают, а какие наполнитель, что сохранить и что убрать, показания трёх ручек у существующего сайта — и базис поисковой выдачи. Потеря позиций при переносе — риск номер один в редизайне, и он дороже любой эстетики.

Рычаги обновления применяются по порядку и останавливаются, как только бриф удовлетворён: типографика, ритм отступов, перекалибровка цвета, слой движения, пересборка героя и ключевых секций и только в самом конце — полная замена блока. Если архитектура, содержимое и выдача в порядке, точечная эволюция даёт примерно семьдесят процентов пользы за сорок процентов риска.

Молча не меняют никогда: адреса страниц, подписи главного меню, имена и порядок полей форм (ломается аналитика и автозаполнение), логотип, юридические тексты и тексты про согласие.

Навык, который знает свои границы, полезнее навыка, который берётся за всё.

Граница применимости и происхождение — то, что Ася читает первым, когда оценивает чужой навык, и то, что чаще всего в чужих навыках отсутствует.

Область названа прямо: лендинги, портфолио, редизайны. Не дашборды и плотные админки, не таблицы данных, не многошаговые мастера форм, не редакторы кода, не нативные мобильные приложения, не интерфейсы совместной работы в реальном времени. Если бриф про них, навык обязан сказать это вслух и показать на правильный инструмент: Fluent, Carbon, Atlassian или Polaris для дашбордов, TanStack Table или AG Grid для таблиц данных.

Рядом живёт frontend-design, и они не конкуренты, а разные высоты. frontend-design даёт лёгкое эстетическое направление для любого интерфейса: компонентов, панелей, постеров, приложений. design-taste-frontend тяжёлый и узкий: только посадочные страницы, портфолио и редизайны, зато с ручками и предполётной проверкой. Один дополняет другой, а не заменяет.

Происхождение указано честно. Навык импортирован по лицензии MIT из проекта Leonxlnx/taste-skill; из четырнадцати навыков верхнего проекта взят один, тело оставлено без изменений, добавлено только поле trust_tier. Значение этого поля — 0, то есть «Advisory»: рекомендация, а не проверенный автоматикой гейт. Чтобы поднять уровень доверия, к навыку нужно добавить папку references/ и прогон /bto-test. Сам пакет лежит на npm.

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

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

Пять замков:

1. Замок темы. У страницы одна тема. Светлая секция посреди тёмной страницы даёт ощущение, что читатель случайно попал на другой сайт.
2. Замок цвета. Один акцентный цвет на всю страницу. Тёплая серая страница не получает синюю кнопку в седьмой секции.
3. Замок формы. Одна шкала скругления углов. Круглые кнопки в квадратной раскладке — поломка, а не разнообразие.
4. Замок контраста. Каждая кнопка, каждое поле формы, каждая подсказка проходят WCAG AA: 4,5:1 для основного текста и 3:1 для крупного. Белый текст на белой кнопке — не приём, а дефект.
5. Замок призыва. Один смысл — одна формулировка. «Свяжитесь с нами», «Напишите нам» и «Обсудим проект» на одной странице — провал, а не богатство языка.

Механическая проверка ровно одна, и её приятно запускать: посчитать надзаголовки поиском по подстроке uppercase tracking и сравнить результат с ceil(число секций / 3).

Плюс два пункта, которые проверяются глазами и всегда окупаются: ноль длинных тире во всём видимом тексте и подпись кнопки, которая помещается в одну строку на десктопе.

Ася прогоняет этот список молча, минут за пять, и почти всегда что-то находит. В этом и смысл: список ловит не глупость, а усталость.