---
name: taste
description: >-
  Дизайн-правила против «AI slop» для лендингов, портфолио, маркетинговых
  страниц и редизайнов на React/Next.js + Tailwind — адаптация открытого
  Leonxlnx/taste-skill (tasteskill.dev) под стек и бренд юзера. Даёт
  жёсткие анти-дефолты (без Inter/AI-purple/em-dash/дежурных beige+brass
  палитр/трёх одинаковых карточек), hard layout rules (hero влезает во
  viewport, один accent на всю страницу, один corner-radius) и pre-flight
  чек-лист на ~60 пунктов перед сдачей. Брать когда: «сделай лендинг/сайт/
  портфолио», «редизайн сайта», «собери маркетинг-страницу», «выглядит
  как шаблонный AI-дизайн, поправь», работа над kodoceh-web family /
  студийными лендингами / avtero-site / zemlya-web / tbr v2 фронтендом.
  НЕ для дашбордов/админок/таблиц данных (там просто аккуратный Tailwind
  без анти-slop правил), не для email/PDF (→ pdf-visual-qa), не для
  чистого backend/API без UI.
---

# taste — анти-AI-slop дизайн для лендингов/фронтенда

Адаптация [taste-skill](https://www.tasteskill.dev/) (Leonxlnx/taste-skill,
MIT) под стек юзера: React/Next.js + Tailwind + Motion, личный бренд
`CeBers_dev` (emerald/mint), проекты kodoceh-web family. Работает для
landing pages, портфолио, маркетинговых страниц и редизайнов.
**НЕ для дашбордов/таблиц/wizard-форм** — там просто аккуратный Tailwind,
без этих правил (см. «Что НЕ входит» ниже).

Апстрим (для install-команд enterprise design-систем — Fluent/Carbon/
Polaris/Atlassian/GOV.UK/USWDS — которые сюда не продублированы, т.к.
юзер их не использует): `github.com/Leonxlnx/taste-skill`.

## Процесс

1. **Design Read** (одна строка) перед кодом: *"Reading this as: \<тип
   страницы> for \<аудитория>, \<vibe>, leaning toward \<система/
   эстетика>."* Если бриф неоднозначен — задай **один** уточняющий
   вопрос, никогда список.
2. **Три дизайн-дайла** (инферятся из брифа, не спрашивай юзера крутить
   какой-то конфиг):
   - `DESIGN_VARIANCE` 1–10 (симметрия → асимметричный хаос), baseline **8**
   - `MOTION_INTENSITY` 1–10 (статика → кинематографичная хореография), baseline **6**
   - `VISUAL_DENSITY` 1–10 (art-gallery воздух → data-cockpit плотность), baseline **4**

   | Сигнал в брифе | VARIANCE | MOTION | DENSITY |
   |---|---|---|---|
   | minimalist / calm / editorial / Linear-style | 5-6 | 3-4 | 2-3 |
   | premium consumer / Apple-y / luxury | 7-8 | 5-7 | 3-4 |
   | playful / Awwwards / experimental / agency | 9-10 | 8-10 | 3-4 |
   | landing/маркетинг-страница (дефолт) | 7-9 | 6-8 | 3-5 |
   | trust-first / regulated / accessibility-critical | 3-4 | 2-3 | 4-5 |
   | редизайн — preserve | как у существующего | +1 | как у существующего |
   | редизайн — overhaul | +2 | +2 | как у существующего |

3. **Фундамент**: стек юзера — Tailwind v4 + собственные компоненты
   (shadcn/ui, `npx shadcn@latest add ...`) или Radix Themes (`@radix-ui/
   themes`). Не изобретай CSS под то, для чего есть готовый пакет — но
   enterprise-системы (Fluent/Carbon/Polaris/GOV.UK) юзеру почти никогда
   не нужны; если бриф реально такой, установи официальный пакет, не
   рисуй его токены руками (см. апстрим-репо за install-командами).
   **Один дизайн-фундамент на проект** — не мешать shadcn с Radix Themes
   в одном дереве.
4. **Собери с анти-дефолт правилами ниже.**
5. **Прогони [`tools/preflight-checklist.md`](tools/preflight-checklist.md)
   до сдачи** — механически, по каждому пункту. Это не опционально: если
   хоть один пункт нельзя честно отметить, страница не готова.

## Стек-дефолты (под юзера)

- Next.js/React, Server Components по умолчанию; любой компонент с
  Motion/GSAP/scroll-listener — изолированный client-leaf с `'use
  client'` наверху.
- Tailwind v4 (`@tailwindcss/postcss`, НЕ старый plugin в `postcss.config.js`).
- Анимация: **Motion** (`import { motion } from "motion/react"`) —
  дефолт для UI/bento/state-change. **GSAP + ScrollTrigger** только для
  настоящего pin/scrub scroll-hijack (канонические скелеты —
  [`tools/motion-skeletons.tsx`](tools/motion-skeletons.tsx)). Никогда
  не мешать GSAP/Three.js с Motion в одном дереве компонентов — дерутся
  за кадры.
- `useState` **никогда** для непрерывных значений (позиция мыши, scroll
  progress) — `useMotionValue`/`useTransform`, иначе ре-рендер на каждый
  кадр и лаги на мобиле.
- Иконки: Phosphor / HugeIcons / Radix / Tabler (в этом порядке).
  Никогда не рисовать SVG-путь руками. `lucide-react` — только если юзер
  явно попросил или проект уже на нём.
- Шрифты: `next/font` или self-host `@font-face` + `font-display: swap`.
  Никогда `<link>` на Google Fonts в проде.
- Брейкпоинты стандартные (`sm 640 / md 768 / lg 1024 / xl 1280 / 2xl
  1536`), контейнер `max-w-[1400px] mx-auto` или `max-w-7xl`.
- Full-height секции — `min-h-[100dvh]`, НИКОГДА `h-screen` (прыгает на
  iOS Safari из-за адресной строки).
- Сложную раскладку — CSS Grid, не flexbox-процентная математика
  (`w-[calc(33%-1rem)]`).

## Критичные анти-дефолты

### Типографика
- **Inter — не дефолт.** Сначала `Geist`, `Outfit`, `Cabinet Grotesk`,
  `Satoshi`. Override: ок для нейтрального/Linear-style брифа или
  accessibility-first/public-sector сайта.
- **Serif — НЕ дефолт нигде.** «Творческий бриф = serif» — это самый
  частый AI-tell. Только если бренд явно называет serif, или эстетика
  реально editorial/luxury/publication/heritage. Забанены как дефолт:
  `Fraunces`, `Instrument Serif` (два любимых LLM-серифа). Если serif
  оправдан — не повторяй тот же serif в соседних проектах (ротируй из
  пула: PP Editorial New, GT Sectra Display, Reckless Neue, Tiempos
  Headline, Cormorant Garamond, Playfair Display, EB Garamond, Canela...).
- Эмфаза слова в заголовке — italic/bold ТОЙ ЖЕ гарнитуры. Не вставлять
  serif-слово в sans-заголовок «для интереса» — это дилетантский приём.
- Курсив со descender-буквами (`y g j p q`) → `leading-[1.1]` минимум +
  `pb-1`/`mb-1` запас, иначе обрежет хвост буквы.

### Цвет
- Один accent-цвет на весь проект, сатурация <80%. Никаких авто-
  фиолетовых glow-кнопок и случайных неоновых градиентов («Lila Rule» —
  AI-purple/blue glow это самый узнаваемый AI-tell).
- **Для собственного бренда** (личные проекты `CeBers_dev`, студийные
  demo/лендинги без заданного клиентского бренда) — дефолт accent =
  emerald `#26935F` + mint `#5FD6A6` (нейтральные тёмные `#0E3D29`/
  `#0E1A14`/`#14211B`, paper `#F2F8F4`) вместо generic-нейтрали — это
  фирменный акцент юзера, не AI-purple по умолчанию. Для клиентских/
  продуктовых проектов с уже заданным брендом (avtero, zemlya-bot,
  tbr, delor и т.д.) — их собственный бренд-цвет главнее этого дефолта.
- **Premium-consumer палитра забанена как дефолт**: warm-beige/cream +
  brass/clay/oxblood/ochre + espresso-текст — типичный AI-дефолт для
  cookware/wellness/artisan/luxury-брифов, обезличивает бренд. Ротируй:
  cold luxury (silver-grey+chrome+smoke), forest (deep green+bone+amber),
  black&tan (off-black+warm tan, резкий контраст), cobalt+cream,
  terracotta+slate, olive+brick+paper, чистый монохром + один яркий pop.
- **Color Consistency Lock**: выбранный accent — на всей странице, без
  смены цвета CTA в середине (тёплый серый сайт не получает синюю
  кнопку в 7-й секции).

### Layout — жёсткие правила (нарушение = не готово)
- **Hero влезает в первый экран**: заголовок ≤2 строк, подтекст ≤20 слов
  и ≤4 строк, CTA видны без скролла. Top padding ≤ `pt-24` на десктопе.
- **Hero-стек максимум 4 текстовых элемента**: eyebrow ИЛИ brand strip
  (0-1), headline, subtext, CTA (1 primary + max 1 secondary). Забанено
  в hero: мелкий tagline под CTA, trust-микрострип («Used by teams
  at...»), прайс-тизер, список фич — всё это отдельные секции ниже.
- **Nav — одна строка на десктопе**, высота ≤80px (дефолт 64-72px). Не
  влезает — сокращай лейблы или уводи в гамбургер.
- **Максимум 2 подряд zigzag-секции** (лево-картинка/право-текст
  чередование) — третья подряд = fail. Ломай паттерн full-width-секцией,
  вертикальным стеком, bento или marquee.
- **Eyebrow-ограничение** (мелкая uppercase-подпись над заголовком
  секции, `text-[11px] uppercase tracking-[0.18em]`) — максимум 1 на 3
  секции (hero считается за 1). Это самое частое нарушение в проде:
  count(`uppercase tracking`) ≤ ceil(sectionCount / 3).
- **Split-header забанен**: «слева большой заголовок + справа мелкий
  параграф-объяснение» как хедер секции — стек их вертикально вместо
  этого.
- **Bento grid — точное число ячеек** под контент (3 айтема → 3 ячейки),
  без пустых плиток в середине/конце. Минимум 2-3 ячейки с реальной
  визуальной вариацией (картинка/градиент/паттерн), не все white-on-white.
- **Одна layout-семья секции — максимум раз на странице.** 8 секций на
  лендинге должны использовать минимум 4 разных layout-семьи.
- **Spec-таблицы с `border-b` на каждой строке** (10 строк характеристик
  товара) — AI-дефолт для cookware/hardware/apparel-брифов, забанен.
  Вместо: 2-колоночная карточная сетка, scroll-snap пилюли,
  сгруппированные кластеры (3 логических блока с одним разделителем),
  featured-vs-rest disclosure.
- **CTA-лейбл не переносится на 2+ строки** на десктопе. Одно намерение
  — один лейбл на всю страницу («Get in touch» и «Let's talk» и «Contact
  us» одновременно на странице = fail, выбери один).

### Картинки
- Приоритет: инструмент генерации картинок → реальные фото (`https://
  picsum.photos/seed/{описательный-seed}/{w}/{h}` для плейсхолдеров) →
  явно помеченный плейсхолдер-слот (`<!-- TODO: hero photo 1600x1200 -->`)
  с прямой просьбой к юзеру в конце ответа.
- **Div-based "fake screenshots"** (стилизованные `<div>`-прямоугольники
  как имитация UI/dashboard/terminal) — забанены, это **#1 AI-design
  tell**. Используй реальный скриншот, сгенерированную картинку, реальный
  мини-компонент UI, или вообще без превью.
- Hero нужен реальный визуал — текст + градиентный блоб это недоделанный
  hero, не дизайн-решение.
- **Logo wall** — реальные SVG-логотипы (`https://cdn.simpleicons.org/
  {slug}/{color}` или devicon), не текстовые wordmark'и. Без подписи
  категории под логотипом («Vercel» + «hosting» под ним — не надо, логотип
  сам по себе credibility). Живёт ПОД hero, не внутри него.

### AI Tells (самые частые нарушения)
- **Em-dash (`—`/`–` как разделитель) запрещён ПОЛНОСТЬЮ** — заголовки,
  кнопки, eyebrow, цитаты, атрибуция, подписи, alt-текст, всё видимое.
  Единственный разрешённый — обычный дефис `-`. Это **#1 по частоте**
  нарушение в проде, не «использовать умеренно» — ноль.
- Версии/бейджи в hero (`V0.6`, `BETA`, `INVITE-ONLY`) — только если бриф
  реально про запуск конкретной версии продукта.
- Секции-нумерация в eyebrow (`001 · Capabilities`, `06 · how it works`) —
  забанено, называй тему обычным языком.
- Generic-имена/бренды ("Jane Doe", "Acme Co", "SmartFlow") — выдумывай
  контекстные реалистичные.
- Фейково-точные числа (`99.99%`, `1234567`) — используй "неровные"
  реальные (`47.2%`, реальный формат телефона).
- Filler-глаголы (Seamless, Unleash, Next-Gen, Revolutionize) —
  конкретные активные глаголы.
- **3 одинаковые карточки в ряд** — самый банальный feature-row паттерн,
  забанен. Ищи 2-колоночный zigzag, асимметричную сетку, scroll-pinned
  или horizontal-scroll альтернативу.
- Decorative dots перед пунктами меню/списка/бейджами — только если
  реально означают статус (живой сервер, доступность).
- «Quietly in use at» / «Field notes» / weather-strip в шапке / scroll-
  cue стрелки — перформативные AI-tell фразы, убирай.

### Motion
- **"Motion заявлен = motion показан"**: если `MOTION_INTENSITY > 4`,
  страница реально двигается (entry-transition в hero, scroll-reveal,
  hover-физика CTA). Не можешь честно реализовать — опусти дайл до 3 и
  сдай чистую статику, не полу-рабочий motion с обрывающимся
  ScrollTrigger.
- **Каждая анимация мотивирована** одним предложением: иерархия /
  сторителлинг / фидбек / переход состояния. "Просто красиво" —
  невалидный ответ.
- **Marquee — максимум один на странице.**
- `window.addEventListener('scroll')` и `requestAnimationFrame`,
  трогающий React state, — **запрещены**. Используй Motion `useScroll()`,
  GSAP `ScrollTrigger`, `IntersectionObserver`, CSS `animation-timeline`.
- `prefers-reduced-motion` — обязателен для всего с `MOTION_INTENSITY >
  3`: анимация схлопывается в статику.
- Канонические скелеты sticky-stack / horizontal-pan / scroll-reveal
  (с правильными `start: "top top"`, `pin: true`, cleanup) →
  [`tools/motion-skeletons.tsx`](tools/motion-skeletons.tsx). Частая
  поломка — триггер срабатывает на середине скролла вместо пиннинга на
  верхней границе viewport.
- Animate только `transform`/`opacity` (hardware-accelerated), никогда
  `top`/`left`/`width`/`height`.

### Dark mode
- Dual-mode по умолчанию (кроме print-эстетики). Один способ токенов на
  проект — `dark:`-вариант Tailwind ИЛИ CSS-переменные, не мешать в
  одном проекте.
- Без чистого `#000000`/`#ffffff` — off-black (`zinc-950`)/off-white.
  WCAG AA-контраст в обоих режимах, иерархия должна работать одинаково
  в light и dark. Протестировать оба режима перед сдачей, не только тот,
  что открыт по умолчанию.

### Формы и интерактив
- **Button Contrast Check**: каждая CTA-кнопка проходит WCAG AA (4.5:1)
  против своего фона. Белая кнопка + белый текст, прозрачная кнопка без
  фолбэка — забанено.
- **Form Contrast Check**: инпуты, placeholder, label, error-текст — все
  проходят WCAG AA против фона секции.
- Loading / empty / error состояния — обязательны, не только "успешный"
  вид.
- Tactile feedback на `:active` (`-translate-y-[1px]` или `scale-[0.98]`).
- **Shape Consistency Lock**: один corner-radius на весь проект (all-sharp
  / all-soft 12-16px / all-pill) — если смешиваешь, задокументируй
  правило и следуй ему везде, иначе это сломанный дизайн.

## Редизайн-протокол (кратко)

Сначала определи режим:
- **Greenfield** — нет существующего сайта → дефолтные дайлы.
- **Redesign — Preserve** — модернизация без слома бренда: аудит первым
  делом (бренд-токены, IA, что реально работает, что filler, текущее
  чтение дайлов старого сайта — это твоя стартовая точка, не baseline),
  затем эволюция.
- **Redesign — Overhaul** — новый визуальный язык поверх старого
  контента: визуально как greenfield, IA и копирайт сохранить.

Приоритет правок при preserve (останавливайся, когда бриф закрыт):
типографика → отступы/ритм → цвет (десатурировать, унифицировать
нейтрали, сохранить бренд-акцент) → motion-слой → hero/ключевые секции →
полная замена блока (только если совсем не спасти).

**Никогда не менять молча** без явного согласия юзера: URL-слаги/роуты,
названия/порядок полей форм (ломает аналитику + автозаполнение),
nav-лейблы, лого/wordmark, юридические/consent-тексты.

## Что НЕ входит

Дашборды/dense product UI/админки, таблицы данных (это домен TanStack
Table/AG Grid, свои паттерны), multi-step wizard-формы, редакторы кода
(Monaco/CodeMirror со своим скином), нативный мобильный UI (Apple
HIG/Material напрямую), realtime-collab UI (presence/курсоры — другой
класс задач). Если бриф — одно из этого, скажи прямо и не пытайся
натянуть эти правила; применяй только те части (типографика/цвет/dark
mode), что реально универсальны.

## Перед сдачей

Прогони весь [`tools/preflight-checklist.md`](tools/preflight-checklist.md)
— механически, пункт за пунктом. Если хоть один нельзя честно отметить,
страница не готова: почини и перепройди чек-лист, не сдавай с
оговорками.
