| name | frontend-design |
| description | Эстетическое направление, когда нет дизайн-системы. Типографика, цвет, ритм, плотность. Соседние: theme-factory (готовые темы для артефактов), deck-themes (стартовые темы слайдов); развилка — в design-orchestrator. |
| when_to_use | Дизайн без бренда / без UI-кита. Когда нужно "просто сделай красиво". |
Frontend design
Без референса — без направления. Если у тебя нет ни бренда, ни Figma, ни скриншотов — выбери одно из направлений ниже до начала работы и держись его. Не миксуй три эстетики в одном артефакте.
Дефолтная база (использовать, если ничего не сказано)
- Цвета: мягкий off-white фон (
#FAF9F6), тёплый чёрный текст (#111), один акцент через oklch(62% 0.14 25). Никаких насыщенностей выше 0.02 для «белых» и «чёрных».
- Типографика: Helvetica Neue (или системный sans). Один шрифт на весь артефакт. Заголовки тяжелее, тело — regular.
- Радиусы: 4 / 8 / 16 — три уровня, всегда из этого набора.
- Тени: одна —
0 30px 80px rgba(0,0,0,.1). Не множь.
- Отступы: кратно 4. Базовая шкала
4 / 8 / 12 / 16 / 24 / 32 / 48 / 80.
Скажи это вслух пользователю в начале работы: «Использую дефолтную базу — Helvetica, off-white, тёплый акцент».
Альтернативные направления
1. Editorial / журнальный
- Антиква с засечками для заголовков (Source Serif, Spectral, GT Sectra).
- Гротеск 14–16px для тела.
- Длинные строки (60–75 символов).
- Большие верхние/нижние отступы у секций (120px+).
- Палитра: бумага + типографская чёрная + один глубокий акцент (бордовый, индиго).
2. Brutalist / utility
- Моноширинный шрифт + один гротеск.
- Чёрно-белый, либо чёрный + один кричащий цвет (электрический жёлтый, хот-пинк).
- Жирные бордеры (1.5–2px), нулевые радиусы.
- Сетка явно видна, секции границами разделены.
3. Soft / OS-вдохновлённый
- SF Pro / Inter, всегда
-0.01em letter-spacing на больших.
- Радиусы 12-20px, тени многослойные мягкие.
- Цвета: молочный фон, тонированные нейтрали, акцент — пастельный.
- Текст 14–17px, line-height 1.4–1.5.
4. Data / dashboard
- Гротеск + табличный mono для чисел (
tabular-nums).
- Светлая база, но без off-white — чистый
#fff.
- Сетки явные. Бордеры тонкие (1px), цвет
rgba(0,0,0,.06).
- Цветные акценты только в графиках, нигде больше.
5. Dark / cinematic
- Фон
#0a0a0a или #111.
- Текст не белый, а
#e8e6e1 (тёплый off-white).
- Один цветной акцент.
- Большие плашки негативного пространства, фотография на full-bleed.
Правила, общие для всех направлений
- Один шрифт по умолчанию, два максимум. Третий не добавлять без причины.
- Контраст текста к фону ≥ 4.5:1 для основного текста, ≥ 3:1 для крупного (24px+).
- Не центрировать длинный текст. Только заголовки, манифесты, цитаты.
- Не использовать чистый чёрный (
#000) на чистом белом (#fff). Выглядит «компьютерно». Сдвинь оба на 5–10%.
- Текст-врап
pretty в CSS — улучшает baseline бесплатно.
Цветовая палитра через oklch
Если нужно несколько акцентов одной интенсивности — варьируй только hue:
--accent-1: oklch(62% 0.14 25);
--accent-2: oklch(62% 0.14 145);
--accent-3: oklch(62% 0.14 245);
Все три «звучат» одинаково по громкости — мозг читает их как семейство.
Когда что выбирать
| Тип проекта | Направление |
|---|
| Серьёзный B2B | дефолт или soft |
| Лендинг продукта для разработчиков | brutalist / utility или data |
| Питч стартапа | editorial или soft |
| Внутренний инструмент | data / dashboard |
| Маркетинг / лайфстайл | editorial или dark |
| Учебный материал | soft, без акцентов |
Финальная проверка
- Один раз перечитай весь артефакт.
- Если есть элемент, для которого ты не можешь сказать почему он именно такой — убери или переделай.
- Если всё «работает», но выглядит generic — добавь одну смелую деталь (нестандартный layout, крупный type, неожиданный цвет негативного пространства). Только одну.
Legacy reference
Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в references/legacy-frontend-design.md. Секции там: Пресеты, Как использовать, Не путать, Антипаттерны.
Количественный слой поверх этого скилла
Этот скилл выбирает какое направление. Для насколько дерзко/подвижно/плотно исполнить его (3 числовые шкалы 1-10) плюс механический сканер типовых AI-tells (em-dash, eyebrow-инфляция, AI-purple, три одинаковые карточки и т.д.) — соседний скилл design-taste. Для финальной сверки готового результата с референсом или безопасного редизайна живого кода — design-guardrails.
