Как создать красивое приложение с помощью ИИ: дизайн без шаблонности
Чтобы получить красивое приложение от ИИ, перестаньте просить его «сделать красиво» и дайте то, что хотел бы получить дизайнер: два-три понравившихся референса, название дизайн-направления и конкретные правила для шрифтов, цветов и отступов. Затем сделайте один экран, доведите его до нужного вида и попросите ИИ применить ту же систему ко всему остальному. Большинство «ИИ-стиля» появляется из размытых запросов, которые дают усреднённые ответы; конкретные исходные данные дают конкретный дизайн.
Почему дизайн ИИ выглядит шаблонно
Попросите ИИ «современную чистую панель SaaS», и он выдаст статистическую середину всех панелей, которые он видел: один и тот же шрифт без засечек, градиент от фиолетового к синему, скруглённые карточки с мягкими тенями, иконки в кружках и центрированный баннер с фразой «Ваш процесс, упрощённый». Ни один отдельный выбор не ошибочен. Проблема в том, что ни один из них не выбран для вашего продукта.
Хороший дизайн — это в основном решения. Ваша задача — принять несколько решений, которые придают приложению характер, а ИИ пусть выполнит тысячи мелких решений последовательно.
Шаг 1: Соберите референсы до запроса
Потратьте двадцать минут на два-четыре референса: приложения или сайты, внешний вид которых подходит вашему продукту. Хорошие источники — продукты, которыми уже пользуется ваша аудитория, галереи дизайна и сайты компаний из смежных областей.
Для каждого запишите простыми словами, что вам нравится:
- «Много воздуха, контент в узкой колонке, мелкие серые подписи над крупными цифрами».
- «Плотные таблицы с тонкими разделителями, без теней у карточек, один акцентный цвет для действий».
- «Крупные засечные заголовки, тёплый светлый фон, фотографии вместо иллюстраций».
Затем передайте эти описания ИИ и прикрепите скриншоты, если инструмент принимает изображения. Берите у референсов качества, а не сам продукт: копировать чужую верстку, брендинг или тексты целиком — и юридический, и репутационный риск.
Шаг 2: Выберите дизайн-направление и назовите его
Направление — это короткое описание ощущения. Оно даёт ИИ фильтр для каждого решения. Несколько хорошо работающих вариантов:
| Направление | Типичные решения | Подходит для |
|---|---|---|
| Спокойное и минималистичное | Нейтральная палитра, большие отступы, один акцент, тонкие рамки | Продуктивность, финансы, здоровье |
| Редакционное | Засечные заголовки, сильный контраст шрифтов, крупные изображения, узкие колонки текста | Портфолио, издания, премиум-услуги |
| Плотное и функциональное | Компактные строки, мелкий шрифт, таблицы, удобство с клавиатуры | Внутренние инструменты, панели, админки |
| Тёплое и дружелюбное | Скруглённые формы, мягкие цвета, иллюстрации, крупные зоны нажатия | Потребительские приложения, сообщества, образование |
| Смелое и графичное | Высокий контраст, крупный шрифт, плоские цветовые блоки | Мероприятия, запуски, креативные бренды |
Укажите его в первом запросе вместе с тем, для кого приложение:
Сделай приложение для записи в независимую студию йоги. Дизайн-направление: спокойное и минималистичное, как напечатанное расписание студии. Тёплый светлый фон, почти чёрный текст, один приглушённый шалфейно-зелёный акцент для кнопок и выбранных состояний. Засечный шрифт для заголовков, чистый шрифт без засечек для основного текста. Большие отступы, без градиентов, без теней, без эмодзи. Сначала мобильная версия.
Шаг 3: Задайте правила — шрифты, цвета и отступы
Эти три вещи дают основное визуальное качество. Явное описание их — самое большое улучшение, которое вы можете сделать.
Типографика
- Один или два шрифта. Шрифт для заголовков и шрифт для текста или одно семейство в нескольких начертаниях.
- Шкала размеров. Несколько размеров, используемых последовательно, например 14, 16, 20, 28 и 40 px, а не то, что выберет каждый компонент.
- Читаемый основной текст. На вебе около 16 px, межстрочный интервал примерно 1,5, а длина строки около 60–75 символов для длинных текстов.
- Иерархия через толщину и размер, а не цвет. Заголовки крупнее и жирнее, вспомогательный текст меньше и мягче, серого оттенка.
Цвет
- В основном нейтральные тона. Фоны, поверхности, рамки и серые оттенки текста выполняют большую часть работы.
- Один акцентный цвет для действий и выбранных состояний. Второй — только если у него есть понятная роль.
- Семантические цвета для успеха, предупреждения и ошибки, и только для этих целей.
- Контраст. WCAG 2 требует коэффициент контрастности не ниже 4,5:1 для обычного текста и 3:1 для крупного. Светло-серый текст на белом часто не проходит; попросите ИИ проверить.
- Тёмная тема, если она нужна, продуманная отдельно, а не простая инверсия.
Отступы и верстка
- Шкала отступов, например 4, 8, 12, 16, 24, 32, 48, 64 px. Всё привязано к ней.
- Выравнивание. Края совпадают; содержимое стоит на сетке или в колонке с одинаковой максимальной шириной.
- Близость. Связанные элементы рядом, несвязанные — дальше друг от друга. Это правило решает большинство проблем с перегруженными экранами.
- Меньше контейнеров. Не всё нуждается в карточке. Рамки, разделители и пустое пространство часто группируют содержимое тише.
Промпт, который задаёт систему один раз:
Прежде чем делать другие экраны, создай небольшую дизайн-систему и используй её везде: шкала шрифтов 14/16/20/28/40 px, межстрочный интервал основного текста 1,5, шкала отступов 4/8/12/16/24/32/48 px, нейтральные тона от почти белого до почти чёрного, один акцентный цвет (#3F6B5A) только для основных действий, а красный — только для ошибок. Кнопки, поля ввода и карточки должны иметь один и тот же радиус скругления. Проверь, что весь текст соответствует контрасту WCAG AA.
Если вы работаете в конструкторе, который понимает код, это обычно превращается в дизайн-токены — CSS-переменные или тему Tailwind, — а значит, последующие изменения вносятся в одном месте.
Шаг 4: Сначала сделайте один экран как следует
Не генерируйте двенадцать экранов, а потом пытайтесь исправить все. Выберите экран, который пользователи видят чаще всего, — часто это панель или главный список, — и доводите его, пока он не станет правильным. Затем:
Используй панель как эталон для всех остальных страниц: та же шапка, отступы, размеры текста, стили кнопок и таблиц. Приведи к этому страницы «Настройки» и «Записи».
Готовый эталонный экран передаёт ваш вкус гораздо лучше любого прилагательного.
Шаг 5: Итерируйте короткими конкретными запросами
Обратная связь для ИИ работает так же, как для младшего дизайнера: конкретно, по одной области за раз и с ясностью, что оставить.
| Расплывчато | Конкретно |
|---|---|
| «Сделай красивее». | «Увеличь расстояние между секциями до 64 px, сделай заголовок страницы 40 px и смягчи вспомогательный текст до среднего серого». |
| «Выглядит перегруженно». | «Убери рамки карточек в ряду статистики, выровняй числа по левому краю и поставь подписи над ними мелкими капительными буквами». |
| «Пусть будет ярче». | «Используй акцентный цвет только для основной кнопки. Вторичные кнопки сделай контурными». |
| «Улучши мобильную версию». | «На ширине телефона сверни фильтры в шторку, которая открывается кнопкой „Фильтры“, а строки таблицы превращай в карточки». |
Всегда добавляйте, что сохранить: «сохрани все маршруты, тексты и функции без изменений», — чтобы визуальная правка незаметно не удалила функциональность. И проверяйте каждое изменение на экране телефона, прежде чем просить следующее; о том, как выглядит хорошее приложение на маленьком экране, см. как создать мобильно-адаптивное веб-приложение.
Шаг 6: Детали, которые отличают хороший дизайн от шаблонного
Когда структура верна, эти мелочи делают приложение законченным:
- Пустые состояния. Что видит новый пользователь без данных: короткое объяснение и одно понятное действие, а не пустая таблица.
- Состояния загрузки. Заглушки по форме содержимого, а не спиннеры везде.
- Состояния ошибок. Понятные сообщения рядом с полем, в котором возникла ошибка.
- Состояния наведения, фокуса и нажатия у каждого интерактивного элемента. Обводка фокуса важна для пользователей клавиатуры.
- Реальное содержимое. Замените «Lorem ipsum» и «Иван Иванов» реалистичными текстами и данными: заглушки скрывают проблемы верстки.
- Иконки из одного набора, одного-двух размеров, с одинаковой толщиной линии.
- Изображения с целью. Настоящие фото продукта, места или людей лучше общих стоковых. Если используете сток или сгенерированные изображения, держите единый стиль.
- Тексты. Короткие и конкретные подписи («Записаться на занятие», а не «Отправить») делают для воспринимаемого качества не меньше, чем любой цвет.
Частые ошибки
- Переделка всего одним запросом. Большие переписывания приносят регрессии. Идите страница за страницей.
- Слишком много акцентных цветов. Если выделено всё, ничего не выделено.
- Центрирование всего. Центрированный текст трудно читать дальше заголовка; большую часть содержимого выравнивайте по левому краю.
- Мелкий текст с низким контрастом, который выглядит изящно на большом мониторе и не читается на телефоне на солнце.
- Украшения вместо иерархии. Градиенты и тени не исправят экран, где главное действие не очевидно.
- Игнорирование лендинга. Для многих продуктов это первое впечатление; см. как создать лендинг, который конвертирует.
Больше шаблонов промптов, не связанных с дизайном, читайте в статье как писать промпты для AI-конструкторов приложений. Если ваш продукт — это и есть дизайн или фотография, то как создать портфолио-сайт подробнее раскрывает тему презентации.
Дизайн в Mythex
В Mythex вы описываете дизайн в чате, видите его в живом предпросмотре и проверяете кадр телефона перед следующей правкой. В документации есть короткие примеры: промпты для дизайна и UI о том, что менять и что сохранять, и редизайн интерфейса — как обновлять по одной странице, не теряя функций. Mythex также может найти стоковые фото или сгенерировать изображение в чате — главную картинку, фон, изображение для превью — и поместить его в приложение по вашей просьбе. Если правка пошла не так, вернитесь к контрольной точке до неё. Загляните в шаблоны, если проще начать с готового дизайна и адаптировать его.
Вопросы
Почему все приложения, сделанные ИИ, выглядят одинаково?
Потому что размытый запрос получает самый усреднённый ответ: одни и те же шрифты, градиенты, скруглённые карточки и центрированный баннер. Дайте ИИ референсы, назовите дизайн-направление и задайте конкретные правила для шрифтов, цветов и отступов — и результат перестанет выглядеть шаблонно.
Можно ли дать ИИ скриншот, чтобы он скопировал стиль?
Многие AI-конструкторы принимают изображения, и скриншот — один из самых понятных способов показать стиль. Опишите, что вам нравится: отступы, шрифты, использование цвета, — а не просите скопировать чужой продукт.
Нужен ли дизайнер, если я создаю приложение с ИИ?
Для первой версии — нет. Дизайнер нужнее всего, когда есть бренд, который надо защитить, или сложный продукт, где решения по верстке влияют на удобство. До этого чёткие референсы и небольшие итерации дают аккуратный и удобный интерфейс.
Что делает приложение профессиональным?
Скорее последовательность, чем украшения: одна шкала размеров шрифта, небольшая палитра цветов, которая используется осмысленно, отступы по фиксированной шкале, ровные края и понятная иерархия, чтобы главное на каждом экране было очевидно.