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