---
name: design-principles
description: Собрать сайт со вкусом - лендинг, страницу бренда, продукта или сервиса с анимацией на скролле. Используй, когда просят собрать сайт, написать промпт на сайт, добавить анимацию по скроллу, или когда сайт получился «как у всех» и надо сделать премиально. Не для правки чужого готового кода без дизайна.
---

# Принципы дизайна для сайтов

Проектируй сайт под то, чем он должен быть, а не натягивай общий шаблон. Люксовый бренд получает воздух и тишину. Запуск продукта получает энергию и движение. Сервис получает холод и уверенность. Сначала пойми, что за сайт, потом дизайнь под это.

Все дизайнерские и технические решения принимай сам, уточняющих вопросов не задавай. Работа считается законченной, когда сайт собран, ассеты сгенерированы, production-сборка прошла, проверка на 390 / 768 / 1440 сделана и есть опубликованная ссылка. До этого не останавливайся.

## Три принципа

- **Слои (layering) - глубина, а не плоскость.** Фон, средний план, передний план живут на разных скоростях и на разной высоте. Плоская страница без слоёв - документ, а не сайт.
- **Отступы (spacing) - место, чтобы дышать.** Отступы по краям около 5% ширины. Заголовки огромные, текста мало. Один экран - одна мысль. Хочется добавить секцию - не добавляй.
- **Сдержанность (restraint) - что оставить за бортом.** В каждый момент движется только одна вещь. Шесть анимаций на странице - нормально, если у каждой своя секция. Три анимации в одной секции - каша. Список запретов в промпте важнее списка хотелок.

## Меню анимаций

Нельзя попросить то, чему не знаешь названия. «Сделай красиво» даёт ничего. «Вращение по скроллу в первом экране, вырез при наведении на продукт» даёт ровно это. Английское название - в промпт как есть.

- **layered parallax** - фон, средний и передний план едут с разной скоростью. Даёт глубину.
- **scroll-triggered text reveal** - слов нет, пока до них не доскроллил. Заголовок собирается по ходу.
- **scroll-driven rotation** - объект крутит положение скролла, не таймер. Назад - крутится обратно.
- **cursor tracking** - элемент следит за мышкой. Глаза персонажа двигаются дальше, чем голова.
- **stacking cards** - каждая секция наезжает на предыдущую, а не выталкивает её.

Из той же обоймы: **pinned section** (секция стоит, пока внутри идёт движение), **hover cutaway** (наводишь - оболочка прозрачная, видно внутренность), **flavour morph** (один скролл, объект меняет цвет и этикетку), **expanding video** (окно с видео растёт на весь экран), **number scramble** (цифры перебираются и останавливаются на настоящих), **horizontal rail** (вертикальный скролл двигает контент вбок).

Это не набор эффектов, а меню, которое пересобирается под каждый проект.

## Скелет промпта - семь блоков

Порядок не меняется, меняется содержимое. Внутри блока 6 порядок секций - это и есть дизайн: для продукта сначала что он видит (видео), потом что он есть (корпус), потом цифры. Большинство делают наоборот.

1. **Одна строка, что это.** Название, что делает, для кого.
2. **Позиционирование.** Одна фраза, вокруг которой строится дизайн.
3. **«Все решения принимай сам. Вопросов не задавай.»**
4. **Визуальное направление.** Цвета в hex, шрифты по именам, явный список запретов.
5. **Ассеты.** Что генерировать и одна спецификация камеры на всё: объектив, свет, фон, цветокор.
6. **Структура страницы.** Каждая секция по порядку, точные заголовки в кавычках, название анимации внутри каждой.
7. **Доступность, проверка, сдача.** Брейкпоинты, режим без анимации, «сдай рабочий сайт, а не макет».

Без блока 3 - вопросы вместо сайта. Без блока 5 - ассеты не сочетаются. Без блока 7 - демо, которое разваливается на телефоне.

## Четыре правила

1. **Референсы, а не прилагательные.** «Премиально» для модели ничего не значит. Ссылка на конкретный сайт значит всё. Лучший ход: дать живой сайт и попросить разобрать, почему он работает. Не скопировать, понять.
2. **Не добавляй движение, где оно не нужно.** Анимация без своей секции - шум.
3. **Называй технику.** «scroll-driven rotation» даёт вращение по скроллу. «Сделай круто» даёт градиент.
4. **Правь, а не перезапускай.** Немного не так - это правка, а не новый промпт с нуля.

## Цикл проверки

На десктопе идеально, на мобиле нет. Всегда. Открой на 390px, заскриншоть сломанное место, отдай скриншот и скажи словами, что не так. Почини только это. Повтори на 768 и 1440. Проверь: нет горизонтального переполнения, ссылки в меню работают, видео стартует, режим без анимации показывает всё содержимое.

## Деплой

Vercel открывать не надо:

```
Задеплой это на Vercel, production.
```

Собери, выполни команды, отдай ссылку. Настоящий сервер, ссылка работает на телефоне и на чужом ноутбуке.