Визуальный стиль проекта

На запрос «сделай красиво» ИИ выдаёт нейрослоп — шаблонный дизайн, как у всех. Чтобы его не получить, работаем по схеме: начинаем с design.md — файла с правилами стиля. Дальше помогают референсы, вайрфреймы, скриншоты и точечные правки — все приёмы ниже.

design.md — правила стиля в одном файле

Работает как гайд по тексту с прошлой недели: один раз собираешь — прикладываешь к каждому запросу «оформи», «нарисуй», «добавь экран».

Разделы файла:

Референс — одна строка, на что похож стиль: «как бумажный журнал», «как страница учебника». Даёт ИИ направление там, где не хватит цифр.
Палитра — цвета с hex-кодами и ролями: фон, текст, акцент, приглушённый для второстепенного. Акцент — один, для важного и кликабельного. Пропорция примерно 60/30/10: основной, нейтральный, акцент.
Типографика — шрифт заголовков, шрифт текста, шкала: H1, H2, обычный текст, подпись — размер и межстрочный интервал.
Отступы — базовый шаг (обычно 8px) и расстояние между блоками.
Форма — скругления, тени, рамки.
Компоненты — кнопка (вид и что при наведении), карточка, блок задания, поле ввода.
Можно/нельзя — запреты: без градиентов, без эмодзи вместо иконок — что решишь.

Промпт

Составь design.md для учебного проекта про [тема]. Разделы: референс (одна строка — на что похож стиль); палитра — цвета с hex и ролями (фон, текст, акцент, приглушённый); типографика — шрифты для заголовков и текста, размеры H1/H2/текста/подписи; отступы — базовый шаг; форма — скругления, тени, рамки; компоненты — кнопка, карточка, блок задания, поле ввода; можно/нельзя — запреты. Кратко, маркированными списками. Сохрани в design.md.

Перед каждой задачей на оформление подгружай файл в чат: «Оформи по этому design.md».

Пример готового design.md — проект «Основы фотографии»

# design.md — проект «Основы фотографии»

## Референс
Бумажный журнал о фотографии: много воздуха, крупные
снимки, сдержанный текст.

## Палитра
- Фон: #FAF7F2 — тёплый светлый
- Текст: #1F1D1A — почти чёрный
- Акцент: #C4552D — терракота; кнопки, ссылки, важные пометки
- Приглушённый: #8A8378 — подписи, второстепенное
Пропорция: фон ~60%, текст и нейтральное ~30%, акцент ~10%.

## Типографика
- Заголовки: Playfair Display
- Текст: Source Sans 3
- H1 34px/1.2 · H2 24px/1.3 · текст 17px/1.7 · подпись 14px/1.5

## Отступы
- Базовый шаг 8px
- Между блоками 48px, внутри карточек 24px

## Форма
- Скругления: нет, углы острые
- Тени: нет
- Рамки: 1px #DCD5CA

## Компоненты
- Кнопка: фон акцентный, текст белый, без скругления;
  при наведении темнеет
- Карточка: фон #FFFFFF, рамка 1px, без тени
- Блок задания: слева полоса 3px акцентная, фон #F3EDE4
- Поле ввода: рамка 1px, при фокусе — акцентная

## Можно/нельзя
- Нельзя: градиенты, эмодзи вместо иконок, тени,
  второй акцентный цвет
- Можно: крупные фото, тонкие линии-разделители

Дефолтный вкус ИИ — и как его обойти

Стандартный ответ ИИ на «сделай красиво» — самые частые решения из тех, что модель видела при обучении: типовая сетка карточек, дежурная палитра, одинаковая структура у любого проекта. Это и есть нейрослоп: не уродливо, но как у всех.

Три приёма против:

Запрещай дефолты прямо в промпте: «без градиентов, без эмодзи вместо иконок, шрифт Inter не использовать». Запрет ИИ выполняет так же надёжно, как просьбу.
Проси 2–3 разных варианта одного экрана и выбирай. Первый вариант — самое частое решение модели, то есть самое шаблонное.
Само-ревизия. Отдельным запросом после генерации: «найди в этом экране шаблонные ИИ-решения — дефолтные цвета, одинаковые карточки, лишние тени — и предложи замену». ИИ узнаёт нейрослоп в своей работе, если спросить прямо.

Где взять design.md, если не придумывается

Готовые файлы лежат в каталогах — там разобраны дизайн-системы известных продуктов:

designmd.co и designmd.ai — сотни файлов с фильтрами по тегам: minimal, dark, saas.
awesome-design-md на GitHub — системы Stripe, Linear, Airbnb и других.

Скачиваешь файл понравившейся системы и прикладываешь к проекту как свой. Файлы на английском и подробные — ИИ это не мешает. Если нужен короче, попроси: «сократи этот design.md до палитры, шрифтов, формы и компонентов».

Понравился чужой сайт — design.md снимается с него:

Промпт

Вот скриншоты сайта [или ссылка]. Составь по нему design.md: палитра с hex, шрифты и размеры, отступы, форма, стиль кнопок и карточек.

Референс лучше держать один: чем больше источников, тем труднее свести их в цельный стиль.

Вайрфрейм от руки → готовый экран

Расположение блоков быстрее нарисовать, чем описать. Заодно ИИ не подставит типовую структуру: набросок задаёт свою. Нарисуй экран на бумаге или в любом редакторе — прямоугольники и подписи, без красоты. Сохрани и прикрепи к запросу:

Промпт

Свёрстай экран по этому наброску. Оформление — по design.md (прикладываю).

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

Покажи ИИ, что видишь ты

ИИ пишет код, но не видит, как он отрисовался у тебя. «Всё съехало» ей ни о чём не говорит: что съехало, куда? Сделай скриншот, отметь проблемное место и приложи: «вот тут кнопка вылезла за карточку — почини». Скриншот с пометкой решает быстрее, чем три абзаца описания.

Правь точечно

Не «переделай дизайн», а «поменяй только цвет кнопок». Иначе ИИ перерисует всё, включая то, что уже нравилось.