# Design Taste

> Калибровка дизайн-вкуса лендингов: 3 шкалы 1-10 + сканер AI-tells. Триггер: «не как типовой AI-лендинг». НЕ дашборды/формы; финал → design-guardrails.

- Skill: `jhamidun/design-taste` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add jhamidun/design-taste`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/design-taste/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: JHamidun (https://skillmd.com/u/jhamidun)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jhamidun/design-taste

---


# Design Taste — количественный анти-slop контроль

> Источник механики: **Leonxlnx/taste-skill** (MIT, 65k★ на 2026-07-20; текст лицензии — `references/LICENSE-taste-skill.txt`, по условиям MIT он обязан ехать вместе с копией). Дословный вендоринг оригинала (v2, `design-taste-frontend`) — `references/full-ruleset.md` (1217 строк, все секции 0-14 + приложения с install-командами и Apple Liquid Glass approximation). Этот файл — рабочая выжимка под нашу дизайн-семью.

## Место в семье (не дублирует)

| Скилл | Что решает |
|---|---|
| `frontend-design` | **Какое** эстетическое направление выбрать, когда нет бренда/референса (5 направлений: editorial/brutalist/soft/data/dark) |
| `design-taste` (этот) | **Насколько** дерзко/подвижно/плотно исполнить выбранное направление (3 шкалы 1-10) + механический сканер AI-штампов |
| `design-guardrails` | Проверка **готового результата** против референса/скриншота (Visual Diff PASS/FAIL) или безопасный редизайн существующего рабочего кода без поломки логики |
| `design-orchestrator` | Диспетчер — решает, какие из трёх подключить и в каком порядке |

Рекомендованный порядок: `design-orchestrator` → (`frontend-design` ИЛИ готовая design-system) → `design-taste` (калибровка + AI-tell чек перед сдачей) → `design-guardrails` (финальная сверка, если есть референс или это редизайн живого кода).

## 0. Design Read (сделай ДО кода)

Прочитай бриф: тип страницы (лендинг/портфолио/редизайн/editorial), вайб-слова пользователя, референсы (URL/скриншоты), аудитория, уже существующий бренд, тихие ограничения (accessibility-first, госсектор, регулируемая отрасль — они ПЕРЕБИВАЮТ эстетику).

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

Если бриф неоднозначен — задай ОДИН уточняющий вопрос, не пачку. Если можешь уверенно вывести — не спрашивай.

**Anti-Default Discipline:** не скатывайся по умолчанию в AI-purple градиенты, центрированный hero над тёмным mesh, три одинаковые feature-карточки, Inter + slate-900. Это дефолты LLM — сознательно обходи их.

## 1. Три шкалы (ядро)

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

**Базовые значения:** `8 / 6 / 4`. Не спрашивай пользователя редактировать эти числа — переопределение происходит в диалоге.

### Вывод шкал из брифа

| Сигнал брифа | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| «минимализм / спокойно / editorial / Linear-style» | 5-6 | 3-4 | 2-3 |
| «премиум-консьюмер / Apple-стиль / люкс» | 7-8 | 5-7 | 3-4 |
| «игривый / дикий / Dribbble / Awwwards / агентство» | 9-10 | 8-10 | 3-4 |
| «лендинг / портфолио / маркетинг (по умолчанию)» | 7-9 | 6-8 | 3-5 |
| «trust-first / госсектор / регулируемое / a11y-критично» | 3-4 | 2-3 | 4-5 |
| «редизайн — сохранить» | как есть | +1 | как есть |
| «редизайн — переделать» | +2 | +2 | как есть |

### Пресеты по типу use-case

| Use case | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| Лендинг SaaS (мейнстрим) | 7 | 6 | 4 |
| Лендинг агентство/креатив | 9 | 8 | 3 |
| Лендинг премиум-консьюмер | 7 | 6 | 3 |
| Портфолио дизайнера/студии | 8 | 7 | 3 |
| Портфолио разработчика | 6 | 5 | 4 |
| Editorial / блог | 6 | 4 | 3 |
| Госсектор / trust-first | 3 | 2 | 5 |

**Технический справочник значений** (что именно значит 1-3/4-7/8-10 в CSS-терминах для каждой шкалы) — Section 7 в `references/full-ruleset.md`.

## 2. Топ-15 AI-tells (механический пре-флайт)

Полный список — 60+ пунктов в Section 9 источника. Здесь — самые частые нарушения (по данным продакшн-тестов апстрима):

1. **Em-dash (`—`/`–`) ПОЛНОСТЬЮ запрещён** — в заголовках, эйбрау, пилюлях, теле текста, цитатах, кнопках, alt-тексте. Без исключений «в теле текста можно». Замена: обычный дефис `-`, точка, запятая.
2. **Eyebrow-инфляция** — максимум 1 эйбрау (маленькая uppercase-метка над заголовком секции) на каждые 3 секции. Hero считается за 1. Механическая проверка: посчитай `uppercase tracking`-паттерны, сравни с `ceil(sectionCount/3)`.
3. **AI-purple / неоновые градиенты** — запрещены по умолчанию. Нейтральная база (Zinc/Slate/Stone) + один насыщенный акцент.
4. **Premium-consumer beige-slop** — бежевый/кремовый фон + латунь/охра/оксблад акцент + эспрессо-текст (`#f5f1ea`+`#b08947`+`#1a1714` и вариации) — запрещена для cookware/wellness/artisan/luxury брифов, если бренд явно не просит именно эту палитру. Ротируй: Cold Luxury / Forest / Black-and-Tan / Cobalt+Cream / Terracotta+Slate.
5. **Serif по умолчанию для «креативного» брифа** — не причина. Sans-serif display — дефолт (Geist Display, Cabinet Grotesk Display, PP Neue Montreal). Serif — только если бренд явно назвал шрифт или это genuinely editorial/luxury/publication. `Fraunces` и `Instrument_Serif` — забанены как дефолты (самые заезженные LLM-выборы).
6. **3 одинаковые карточки в ряд** — генерическая feature-строка. Используй 2-колоночный зигзаг, асимметричную сетку, или horizontal-scroll.
7. **Jane Doe эффект** — «John Doe»/«Sarah Chan» и генерик-аватары (SVG-яйцо, Lucide user icon) → реалистичные имена + фото-плейсхолдеры с намерением.
8. **Fake-perfect числа** — `99.99%`, `50%`, `1234567` → органичные messy-данные (`47.2%`, `+1 (312) 847-1928`) либо реальные цифры из брифа.
9. **Startup-slop имена** — «Acme», «Nexus», «SmartFlow» → контекстные придуманные названия.
10. **Div-based fake screenshots** — фейковый UI из `<div>`-прямоугольников (fake terminal/dashboard/task-list) — Tell №1. Используй реальный скриншот, генерацию изображения, или пропусти превью.
11. **Version-labels/version-footers в hero и футере** (`V0.6`, `BETA`, `v1.4.2`, `Build 0048`) — запрещены на маркетинговых страницах, если бриф не про сам запуск продукта.
12. **Секционная нумерация как эйбрау** (`00 / INDEX`, `001 · Capabilities`, `Stage 1/2/3`) — запрещена. Называй тему обычным языком.
13. **Zigzag-усталость** — максимум 2 секции подряд с паттерном «картинка+текст слева-справа». 3-я подряд = fail.
14. **Scroll cues** (`Scroll`, `↓ scroll to explore`) — не нужны, пользователь и так знает про скролл.
15. **`window.addEventListener('scroll', ...)`** — жёсткий бан в анимациях (джанк, нет батчинга). Используй `useScroll()`/`ScrollTrigger`/`IntersectionObserver`/CSS `animation-timeline: view()`.

Полный чек-лист (Pre-Flight Check, ~70 пунктов, включая Color/Shape/Button-Contrast Consistency Locks, Hero Stack Discipline, Bento Cell Count, Reduced Motion, Dark Mode Parity) — Section 14 в `references/full-ruleset.md`. Прогоняй его перед сдачей landing/portfolio-артефактов такого же уровня строгости, как quality-gates.md для кода.

## 3. Redesign Protocol (кратко)

Перед правкой существующего сайта определи режим:
- **Greenfield** — с нуля, шкалы из брифа.
- **Redesign — Preserve** — модернизация без слома бренда: аудит токенов (цвет/шрифт/радиусы), сохранить IA, primary nav labels, form field names (аналитика), copy voice.
- **Redesign — Overhaul** — новый визуальный язык поверх старого контента: визуально как greenfield, контент/IA — сохранить.

Если неясно — спроси ОДИН раз: *«Сохраняем бренд или начинаем визуально с нуля?»*

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

**Никогда не менять молча:** URL/route slugs, primary nav labels, имена/порядок form-полей (аналитика), логотип, юридический/cookie-текст.

Для безопасной хирургии существующего РАБОЧЕГО кода (JS-логика неприкосновенна, только CSS/className) — это уже механика `design-guardrails` (Sacred vs Slop), не дублируй здесь, переключайся туда.

## 4. Формат вывода

При сдаче design-taste-калиброванного артефакта укажи явно (коротко, в чате, не в файле):
```
Design Read: <тип> для <аудитории>, <вайб>
Dials: VARIANCE=X MOTION=Y DENSITY=Z (откуда: бриф/пресет)
AI-tells пройдено: N/15 (см. п.2) — или список нарушений если есть осознанные исключения
```

## Что НЕ отсюда

Дашборды, дата-таблицы, wizard-формы, редакторы кода, нативный мобильный UI, realtime-collab UI — это НЕ зона design-taste (используй design-system: Fluent/Carbon/Atlassian/Polaris — см. Section 2.A источника). Явно скажи об этом и укажи правильный инструмент, если бриф — один из этих случаев.