Дизайн интерфейса с ИИ: от макета до кода

Почему одни промпты дают красиво, а другие - "как из конструктора"

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

Хорошая новость: вам не нужно уметь рисовать. Нужно уметь точно описывать. Дизайн - это набор осознанных решений по пяти направлениям: стиль, цвет, типографика, сетка и движение. Если вы зададите каждое из них словами, ИИ соберёт результат уровня студии. Если оставите на усмотрение модели - получите шаблон.

Шаг 1. Выберите стиль и опишите его конкретно

"Сделай красиво" - худший промпт. ИИ не знает, что красиво для вас. Назовите стиль прямо. Рабочие направления:

• Минимализм - много воздуха, мало элементов, один акцентный цвет, крупная типографика.
• Тёмная тема - не просто инверсия цветов. Тёмные поверхности должны быть не чёрными, а слегка тонированными в основной цвет.
• Glassmorphism - полупрозрачные панели с размытием фона. Важно: применять точечно (модальные окна, шапка), а не везде. Размытие должно означать "под этим что-то есть", а не быть украшением.
• Brutalism - жёсткие границы, контраст, моноширинный шрифт, нарочитая "грубость".
• Bento-сетка - блоки разного размера, как в коробке бэнто. Хорошо для лендингов и дашбордов.

Важный приём: не описывайте стиль через категорию ("это для финтеха, значит тёмно-синий с золотом"). Это ловушка - такой интерфейс сразу выглядит как сгенерированный. Вместо этого опишите сцену: кто, где и в каком настроении пользуется продуктом. "Дашборд аналитики" не задаёт ничего. "Маркетолог утром за ноутбуком в светлом офисе смотрит на рост продаж" уже диктует светлую тему, спокойные акценты и крупные числа.

Сделай лендинг для сервиса бронирования столов в ресторанах.
Стиль: тёплый минимализм, не тёмная тема.
Сцена: человек вечером с телефона выбирает, куда пойти на ужин.
Один акцентный цвет - тёплый терракотовый, всё остальное - тёплые
нейтральные тона. Без карточек-близнецов, без больших цифр с градиентом.

Шаг 2. Задайте цвет стратегией, а не палитрой

Сначала выберите стратегию использования цвета, потом сами цвета. Есть четыре уровня:

• Сдержанный - тонированные нейтральные плюс один акцент не более чем на 10% площади. Безопасный выбор для продуктовых интерфейсов.
• Уверенный - один насыщенный цвет занимает 30-60% поверхности. Для лендингов с характером.
• Полная палитра - 3-4 названные роли, каждая применяется осознанно.
• Залитый цветом - сам фон и есть цвет. Для смелых героев и кампаний.

Два технических правила, которые отличают любителя от профи. Первое: никогда не используйте чистый #000 или #fff. Тонируйте каждый нейтральный оттенок в сторону основного цвета бренда - даже едва заметно. Чистый чёрный и белый выглядят дёшево. Второе: для проверки контраста требуйте соотношение не ниже 4.5:1 для обычного текста. Серый текст на сером фоне - частая болезнь сгенерированных сайтов.

Цветовая стратегия - сдержанная. Нейтральные тона тонируй в сторону
тёплого терракотового (чуть-чуть). Никакого чистого чёрного и белого.
Акцентный цвет используй максимум на 10% площади - только на главных
кнопках. Контраст текста к фону - не ниже 4.5:1.

Шаг 3. Типографика: иерархия через контраст

Текст несёт большую часть смысла, и именно на нём ломается дешёвый сайт. Правила, которые стоит зашить в промпт:

• Базовый размер тела текста - 16px. Меньше на мобильных нельзя: iOS начнёт принудительно увеличивать масштаб.
• Высота строки 1.5-1.75 для основного текста.
• Длина строки 65-75 символов - дальше глаз теряет начало следующей строки.
• Иерархия строится контрастом размера и насыщенности. Соотношение между соседними ступенями шкалы - не меньше 1.25. Плоская шкала, где заголовок лишь чуть больше текста, выглядит вяло.
• Сочетание шрифтов по характеру. Заголовочный и текстовый шрифты должны дополнять друг друга, а не конфликтовать.

Шаг 4. Сетка, отступы и состояния

Просите ИИ работать по шкале отступов кратно 4 или 8 пикселям (4, 8, 16, 24, 32, 48). Случайные отступы - первое, что выдаёт самоделку. При этом отступы стоит варьировать: одинаковый отступ везде - это монотонность. Разный ритм создаёт структуру.

Отдельно проговорите состояния элементов. Кнопка должна иметь видимые состояния наведения, нажатия и заблокированности. Нажатие лучше всего ощущается через лёгкое уменьшение масштаба - scale(0.97). Это даёт мгновенную обратную связь, будто интерфейс слышит пользователя.

Типичные ошибки, которые ИИ делает по умолчанию

Заранее запретите их в промпте:

• Эмодзи вместо иконок. Требуйте векторные иконки одного набора (Lucide, Heroicons) с одинаковой толщиной линий.
• Карточки-близнецы. Бесконечные одинаковые блоки "иконка плюс заголовок плюс текст" - признак шаблона.
• Градиентный текст. background-clip: text с градиентом выглядит дёшево. Акцент - через размер и насыщенность.
• Полоска-граница слева. Цветной border-left на карточках и уведомлениях - почти всегда непрофессионально.
• Glassmorphism везде. Размытие должно быть редким и осмысленным.
• Шаблон "большая метрика". Огромное число, мелкая подпись, градиентный акцент - клише SaaS-лендингов.

Готовый каркас промпта

Собери [тип страницы] для [продукт].
Стиль: [название стиля плюс сцена использования].
Цвет: стратегия [сдержанная/уверенная], акцент - [цвет], нейтральные
тонированы, без чистого черного и белого.
Типографика: тело 16px, высота строки 1.6, шкала с контрастом 1.25+,
шрифты [пара].
Сетка: отступы кратно 8px, варьируй ритм.
Состояния: hover, active (scale 0.97), disabled - видимые.
Запреты: эмодзи-иконки, карточки-близнецы, градиентный текст,
border-left как акцент, glassmorphism везде.
Контраст текста - не ниже 4.5:1.

Проверочный тест на финал: если кто-то посмотрит на интерфейс и без сомнений скажет "это сделал ИИ" - значит, вы не приняли достаточно решений. Хороший дизайн с ИИ - это не магия модели, а ваши конкретные указания, переведённые в код.