# Дизайн сайта: как получить не шаблон, а свой вид

**Для человека:** это рабочий процесс дизайна в четыре шага с готовыми промптами и два способа взять внешний вид:
нарисовать прототип в дизайн-сервисе или сгенерировать картинки отдельных блоков. Дай файл нейронке на фазе 6 из SAYT.md
(«Дизайн-направление») и скажи: «Веди дизайн по 03-process-dizayna.md, стоп-лист — в 02-antislop-dizayn.md».
Подставь свои данные в квадратные скобки промптов, остальное можно не трогать.

---

**Главная ошибка этапа:** просить «сделай красиво» без опоры. ИИ по умолчанию выдаёт узнаваемый «ИИ-дизайн»: фиолетовый
градиент, скруглённые карточки, три колонки с иконками, эмодзи в заголовках. Такой сайт читается как шаблон и подрывает
доверие — а доверие в поиске это деньги. Поэтому дизайн делаем не «на вкус», а по правилам, которые запрещают дефолты.

## 1. Дизайн-скиллы (необязательно, но удобно)

Скилл — набор правил, который подключается к Claude Code и меняет то, как он принимает решения. Ставится один раз,
работает во всех проектах. Если скиллов нет, работай по правилам из этого файла и из `02-antislop-dizayn.md` — результат
будет тот же, просто чуть больше ручного контроля.

| Скилл | Что даёт | Когда звать |
|---|---|---|
| design-taste-frontend | Анти-шаблон: агент сам выбирает направление под задачу и не скатывается в типовой ИИ-вид | Новый лендинг, главная, посадочная |
| high-end-visual-design | Конкретика «дорогого» вида: шрифты, отступы, тени, структура карточек, анимация; блокирует дефолты | «Вроде всё есть, а выглядит дёшево» |
| ui-ux-pro-max | Библиотека решений: стили, палитры, пары шрифтов, типы продуктов, правила UX | Быстрый выбор палитры и шрифтов под нишу |
| redesign-existing-projects | Апгрейд существующего: аудит, поиск шаблонных мест, замена без поломки функциональности | Сайт уже собран, надо поднять уровень |
| impeccable | Придирчивый разбор интерфейса: иерархия, читаемость, состояния, доступность, мелочи | Финальная вычитка перед выкатом |

Ставятся через маркетплейс скиллов Claude Code (`/plugin` в терминале) или копированием папки скилла в `~/.claude/skills/`.
Проверка, что скилл виден: напиши в Claude Code «какие у тебя есть скиллы по дизайну» — он перечислит установленные.
Если пусто, значит папка не там: скиллы лежат в `~/.claude/skills/<имя>/SKILL.md`.

## 2. Порядок работы: четыре шага, не один

«Сделай дизайн» одним промптом не работает. Каждый следующий шаг опирается на предыдущий.

1. **Направление.** Договариваемся, как сайт должен ощущаться: строгий справочник, тёплый локальный сервис, дорогой B2B.
   Опираемся на нишу и на конкурентов, но не копируем их.
2. **Система.** Фиксируем палитру, пару шрифтов, размеры, отступы, радиусы, тени. Это становится набором токенов в коде —
   все страницы собираются из них, а не «на глаз».
3. **Компоненты и страницы.** Шапка, первый экран, карточка статьи, блок заявки, подвал. Собираем из системы, а не рисуем
   каждую страницу отдельно.
4. **Придирчивая вычитка.** Прогоняем интерфейс по чек-листу: контраст, размеры на телефоне, состояния кнопок, отступы,
   поведение форм.

## 3. Промпты под каждый шаг

**Шаги 1–2 — направление и система.** Запускать в папке сайта:

```
Мой сайт: [ниша, город, для кого]. Тон: [строгий справочник / тёплый локальный сервис / дорогой B2B].
Перед работой прочитай 02-antislop-dizayn.md.

1. Предложи 3 направления дизайна словами (без кода): как сайт ощущается, за счёт чего,
   какие ассоциации. Без «современно и стильно» — конкретика.
2. Я выберу одно. После выбора собери дизайн-систему: палитра (с кодами и где что
   применяется), пара шрифтов, шкала размеров текста, отступы, радиусы, тени.
3. Внеси её в проект как токены/переменные и покажи, какие файлы поменял.

Запрещено: фиолетовые градиенты, эмодзи в заголовках, три колонки с иконками,
стоковые «команды» и любые дефолты, по которым видно, что делал ИИ.

Отдельно про цвет: не размазывай один оттенок по всему сайту. Нейтральная база
плюс ОДИН акцент, и акцент только на действии — кнопка, ссылка, активный пункт.
Фоны блоков нейтральные.

Иконки бери из одного открытого набора (Lucide, Phosphor, Tabler или Heroicons)
и скажи, из какого. Свои не рисуй, эмодзи вместо иконок не ставь.
```

**Шаг 3 — главная и ключевые блоки:**

```
Собери первый экран и главную страницу СТРОГО на нашей дизайн-системе.

Задача первого экрана: за 5 секунд человек понимает, что это за сайт, для кого,
и что делать дальше. Один призыв к действию, без каруселей.

Дальше по странице: [перечисли блоки — например: услуги, отзывы, как работаем, заявка].
Каждый блок объясни одной строкой: зачем он тут и что человек должен сделать.
Проверь на телефоне: 375px ширина, всё читаемо, кнопки не мельче 44px.

На мобильной ширине блоки и кнопки идут ДРУГ ПОД ДРУГОМ, во всю ширину — не рядом
в две колонки. Липкая панель внизу — максимум одна кнопка, одно главное действие.

Над H1 ничего не пиши: надзаголовки капслоком («УСЛУГИ · ДЛЯ БИЗНЕСА») убрать.
```

**Шаг 4 — вычитка перед выкатом:**

```
Пройди по сайту как придирчивый дизайнер и выпиши, что портит впечатление:
иерархия, контраст, отступы, состояния кнопок, формы, поведение на телефоне.
По каждому пункту — что именно менять.

Сначала список с приоритетами, потом жди моего «ок» — и только тогда правь.
```

## 4. Пять примет нейро-почерка

Вот на чём ИИ-дизайн выдаёт себя чаще всего. Пиши запрет сразу в промпте — после сборки переделывать дороже.

| Примета | Как просить вместо этого |
|---|---|
| Один оттенок размазан по всему сайту: шапка, кнопки, фоны, иконки, подвал | Нейтральная база + один акцент, и акцент только на действии |
| Мелкий текст капслоком над H1 («БЛОГ · ЭКСПЕРТНО») | Заголовок начинается с заголовка, надзаголовков нет |
| На телефоне блоки и кнопки стоят рядом, в две узкие колонки | Один столбец, элементы во всю ширину |
| Липкая панель внизу мобилки из трёх-четырёх кнопок | Одна кнопка = одно главное действие, остальное в тексте |
| Самодельные иконки или эмодзи вместо них | Один открытый набор: Lucide, Phosphor, Tabler, Heroicons |

Это всё про почерк, а не про смысл. Дизайн нужен, чтобы сайту верили, — но если красота начинает мешать скорости,
читаемости на телефоне или структуре заголовков, побеждает то, что даёт результат.

## 5. Что нельзя ломать дизайном

- **Скорость.** Тяжёлые шрифты, видео на первом экране и анимация на каждый скролл роняют показатели, а они влияют на позиции.
- **Структуру заголовков.** H1 один, дальше по порядку. ИИ любит превращать заголовки в «красивые» блоки — следи, чтобы это осталось текстом.
- **Читаемость статьи.** Ширина колонки 65–75 символов, размер текста не меньше 16px, межстрочный интервал 1.6.
- **Форму заявки.** Меньше полей — больше заявок. Дизайн не должен добавлять шагов.

**Когда этап закончен.** Открой сайт на телефоне и покажи человеку не из своей ниши. Если он за 5 секунд говорит, что это
за сайт и для кого, а вид не вызывает «это же шаблон» — можно выкатывать.

## 6. Способ А: нарисовать прототип снаружи и перенести оформление

Схема у всех инструментов одна: **рисуешь прототип снаружи → забираешь из него код или дизайн-систему → отдаёшь своему
агенту (Claude Code или Codex) → он применяет это к твоим страницам.** Сайт при этом не переписывается заново —
меняется только оформление.

| Чем рисовать | Что забираешь на выходе | Кому подойдёт |
|---|---|---|
| Claude Design | Готовые страницы и код — правишь словами прямо в Claude | Уже работаешь в Claude, не хочется заводить ещё один сервис |
| Lovable | Целый рабочий макет с кодом, можно смотреть в браузере и забрать вёрстку | Хочется быстро увидеть «живой» сайт и покрутить варианты |
| Google Stitch | Дизайн-систему: палитра, шрифты, отступы, компоненты; экспорт в код и Figma | Нужна не картинка целиком, а основа стиля под свою нишу |

Пять шагов переноса:

1. **Опиши задачу, а не «красиво».** Ниша, кто читатель, что на первом экране, какое действие ждём. Для блога бери готовый
   промпт из `04-tz-na-dizayn-bloga.md`.
2. **Нарисуй прототип.** Хватит двух-трёх экранов: главная, страница статьи, страница рубрики.
3. **Забери результат.** Из Claude Design и Lovable — код страницы; из Stitch — дизайн-систему и скриншоты. Скриншот тоже
   годится: агент читает картинки.
4. **Отдай агенту в свой проект.** Положи файлы в папку сайта и дай промпт-скелет:

```
В папке /design лежит прототип (код + скриншоты).
Возьми оттуда ТОЛЬКО оформление: палитру, шрифты, размеры, отступы,
стиль карточек и кнопок. Заведи их как токены в проекте.
Применяй к моим текущим страницам, НЕ меняя структуру, тексты,
заголовки h1/h2, ссылки и метатеги. Сначала покажи план правок.
```

5. **Проверь по разделу 5** — что скорость, заголовки, читаемость и форма не пострадали. Не понравилось — откатываешь
   через git и пробуешь другой прототип.

Почему так, а не «собери мне сайт в Lovable»: прототип отвечает за внешний вид. Твой сайт уже умеет то, ради чего всё
затевалось: блог, разметку, sitemap. Переносим оформление в него, а не переезжаем в чужой сервис. Любой из трёх
инструментов даст приличный результат, если пришёл с описанием ниши и задачи страницы, и выдаст типовой ИИ-вид,
если пришёл с «сделай красиво».

## 7. Способ Б: свой вид — рисуем блоки картинками

Когда нужен свой вид, а не аккуратный шаблон. **Не генерируем «сайт целиком»** — так выходит красивая нерабочая картинка.
Рисуем по одному блоку из ТЗ, смотрим глазами, оставляем удачные и верстаем по ним.

**Планируй три круга сразу, с первого не выходит ни у кого.** В одном проекте первый заход (девять экранов подряд)
забраковали словами «детский набросок, не тянет на клинику в центре города». Второй круг — сравнение моделей на одной и той
же секции. Третий — три именованных направления по мотивам лидеров ниши, у каждого разбор «что берём / что не берём»,
и выбран гибрид.

| Модель | Что ей рисовать |
|---|---|
| Nano Banana Pro | Фотогеничные экраны: первый экран, кейсы, атмосфера, всё с крупным фото |
| GPT Image 2 | Плотные интерфейсные экраны с мелкой типографикой: цены, карточки, формы, сравнения |
| Recraft (utility) | Когда нужна строгая палитра списком hex |

**Структура промпта: два неизменных блока вокруг переменной части.** Блок DESIGN SYSTEM копируется в каждый промпт без
изменений, иначе блоки разъедутся по стилю. Блок запретов идёт в конец каждого промпта.

```
[DESIGN SYSTEM — копируется в КАЖДЫЙ промпт без изменений]
Flat straight-on UI screenshot, one section of a Russian <ниша> website.
DESIGN SYSTEM: <фон #HEX>, <акцент #HEX>, <шрифтовая пара>,
<характер: editorial / technical / warm documentary>, NOT generic SaaS.

[ПЕРЕМЕННАЯ ЧАСТЬ — про конкретный блок]
Section: <что за блок>. Contains: <что внутри, перечислением>.
Primary action: <кнопка и её текст>.
Russian text, verbatim: "<точный заголовок>", "<точная подпись кнопки>".

[ЗАПРЕТЫ — в конец КАЖДОГО промпта]
STRICTLY AVOID: gradients, glow, neon, glassmorphism, purple, blue,
drop shadows on every element, rounded pill everything, floating cards,
3D blobs, abstract spheres, waves, stock photography clichés,
carousel dots, badges everywhere.
```

- **Русский текст — дословно в кавычках.** Модель рисует кириллицу чисто, если дать готовую строку. «Напиши заголовок
  про запись» не работает.
- **Фото описывай документально:** real documentary photograph, no exaggerated smile, face fully visible with headroom —
  иначе выйдет сток и обрезанные лица.
- **Варианты одной секции — одним запросом** (count: 2), а не двумя вызовами: так они выходят в одной стилистике.
- **Фото на коммерческой странице ставь настоящие.** Сгенерированные «люди-стоки» читаются как ложь ровно там, где
  собирается доверие. В одном из проектов сгенерированный «живой» первый экран в итоге заменили обычным видео с
  преподавателями: настоящие люди за работой доказывают школу лучше любой атмосферы.

## 8. Два ТЗ вместо одного

Когда дизайн утверждён, оформи два документа. Их пишут и читают разные люди, а дизайн-часть живёт дольше сборочной.

**ТЗ на дизайн:**
- что проектируем и для кого;
- дизайн-система: палитра с ролями, типографика, композиция, сетка, изображения, иконки, компоненты с состояниями, движение;
- шаблоны страниц, главный расписан по блокам;
- формы, мобильная версия, доступность;
- что не делать, самопроверка перед показом.

**ТЗ на сборку:**
- стек и что теряем при уходе со старого сайта;
- репозиторий, роутинг, миграция, редиректы;
- контент-модель (например, статьи в `.mdx`, чтобы новые материалы добавлялись без правок кода);
- SEO-обвязка, производительность, формы;
- Definition of Done (когда считаем готовым);
- **ограничения, которые нельзя нарушить**.

**Сквозной приём: правило пиши рядом с текущим багом сайта** — тогда его не пролистывают. Пример из реального ТЗ:
«Сейчас на витрине "Процедура от 170 ₽", где 170 ₽ — цена за одну единицу препарата. На витрине без единицы это читается
как цена процедуры и порождает конфликт при записи. Единица обязательна.»

**Для денежной страницы жёстко:** в первом экране ровно одно целевое действие, и на телефоне это **кнопка, а не форма** —
холодному человеку ещё нечего в неё писать. Финальная форма одна. Цена или честное «по запросу», но не молчание.
Доказательства документами, а не прилагательными.