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.
1---2name: frontend-design3description: Эстетика без дизайн-системы: типографика, цвет, ритм. Триггеры: «просто сделай красиво», «soft brutalism», «premium dark». НЕ готовые темы→theme-factory; слайды→deck-themes.4---56# Frontend design78Без референса — без направления. Если у тебя нет ни бренда, ни Figma, ни скриншотов — выбери одно из направлений ниже **до** начала работы и держись его. Не миксуй три эстетики в одном артефакте.910## Дефолтная база (использовать, если ничего не сказано)1112- **Цвета:** мягкий off-white фон (`#FAF9F6`), тёплый чёрный текст (`#111`), один акцент через `oklch(62% 0.14 25)`. Никаких насыщенностей выше 0.02 для «белых» и «чёрных».13- **Типографика:** Helvetica Neue (или системный sans). Один шрифт на весь артефакт. Заголовки тяжелее, тело — regular.14- **Радиусы:** 4 / 8 / 16 — три уровня, всегда из этого набора.15- **Тени:** одна — `0 30px 80px rgba(0,0,0,.1)`. Не множь.16- **Отступы:** кратно 4. Базовая шкала `4 / 8 / 12 / 16 / 24 / 32 / 48 / 80`.1718Скажи это вслух пользователю в начале работы: «Использую дефолтную базу — Helvetica, off-white, тёплый акцент».1920## Альтернативные направления2122### 1. Editorial / журнальный23- Антиква с засечками для заголовков (Source Serif, Spectral, GT Sectra).24- Гротеск 14–16px для тела.25- Длинные строки (60–75 символов).26- Большие верхние/нижние отступы у секций (120px+).27- Палитра: бумага + типографская чёрная + один глубокий акцент (бордовый, индиго).2829### 2. Brutalist / utility30- Моноширинный шрифт + один гротеск.31- Чёрно-белый, либо чёрный + один кричащий цвет (электрический жёлтый, хот-пинк).32- Жирные бордеры (1.5–2px), нулевые радиусы.33- Сетка явно видна, секции границами разделены.3435### 3. Soft / OS-вдохновлённый36- SF Pro / Inter, всегда `-0.01em` letter-spacing на больших.37- Радиусы 12-20px, тени многослойные мягкие.38- Цвета: молочный фон, тонированные нейтрали, акцент — пастельный.39- Текст 14–17px, line-height 1.4–1.5.4041### 4. Data / dashboard42- Гротеск + табличный mono для чисел (`tabular-nums`).43- Светлая база, но без off-white — чистый `#fff`.44- Сетки явные. Бордеры тонкие (1px), цвет `rgba(0,0,0,.06)`.45- Цветные акценты только в графиках, нигде больше.4647### 5. Dark / cinematic48- Фон `#0a0a0a` или `#111`.49- Текст не белый, а `#e8e6e1` (тёплый off-white).50- Один цветной акцент.51- Большие плашки негативного пространства, фотография на full-bleed.5253## Правила, общие для всех направлений5455- **Один шрифт по умолчанию, два максимум.** Третий не добавлять без причины.56- **Контраст текста к фону ≥ 4.5:1** для основного текста, ≥ 3:1 для крупного (24px+).57- **Не центрировать длинный текст.** Только заголовки, манифесты, цитаты.58- **Не использовать чистый чёрный (`#000`) на чистом белом (`#fff`).** Выглядит «компьютерно». Сдвинь оба на 5–10%.59- **Текст-врап `pretty`** в CSS — улучшает baseline бесплатно.6061## Цветовая палитра через oklch6263Если нужно несколько акцентов одной интенсивности — варьируй только hue:6465```css66--accent-1: oklch(62% 0.14 25); /* теплый */67--accent-2: oklch(62% 0.14 145); /* зелёный */68--accent-3: oklch(62% 0.14 245); /* синий */69```7071Все три «звучат» одинаково по громкости — мозг читает их как семейство.7273## Когда что выбирать7475| Тип проекта | Направление |76|---|---|77| Серьёзный B2B | дефолт или soft |78| Лендинг продукта для разработчиков | brutalist / utility или data |79| Питч стартапа | editorial или soft |80| Внутренний инструмент | data / dashboard |81| Маркетинг / лайфстайл | editorial или dark |82| Учебный материал | soft, без акцентов |8384## Финальная проверка8586- Один раз перечитай весь артефакт.87- Если есть элемент, для которого ты не можешь сказать почему он именно такой — убери или переделай.88- Если всё «работает», но выглядит generic — добавь одну смелую деталь (нестандартный layout, крупный type, неожиданный цвет негативного пространства). Только одну.8990## Legacy reference9192Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в `references/legacy-frontend-design.md`. Секции там: Пресеты, Как использовать, Не путать, Антипаттерны.9394## Количественный слой поверх этого скилла9596Этот скилл выбирает **какое** направление. Для **насколько** дерзко/подвижно/плотно исполнить его (3 числовые шкалы 1-10) плюс механический сканер типовых AI-tells (em-dash, eyebrow-инфляция, AI-purple, три одинаковые карточки и т.д.) — соседний скилл `design-taste`. Для финальной сверки готового результата с референсом или безопасного редизайна живого кода — `design-guardrails`.
JHamidun