# Frontend Design

> Эстетика без дизайн-системы: типографика, цвет, ритм. Триггеры: «просто сделай красиво», «soft brutalism», «premium dark». НЕ готовые темы→theme-factory; слайды→deck-themes.

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

---


# 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:

```css
--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`.