1. Стандартный стиль сайта
У этих трёх сайтов разные темы и цвета, но похожий набор приёмов. Детское приложение, сервис поиска работы и генератор QR-кодов выглядят как вариации одного шаблона.
Что повторяется:
- Крупный жирный заголовок с выделенными цветом словами.
- Одна и та же последовательность: обещание, короткое описание, заметная кнопка.
- Градиенты и мягкое свечение на фоне или в акцентах.
- Скруглённые кнопки, плашки и карточки.
- В первых двух примерах — текст слева и макет интерфейса справа; в третьем та же подача выстроена по центру.
Каждый из этих приёмов может быть уместен. Но если применять весь набор к любому проекту, сайты начинают походить друг на друга. Само по себе такое оформление не доказывает, что сайт сделан ИИ.
Выберите стиль
Если вы не знаете, какие стили бывают, начните с подборок сайтов. На One Page Love можно выбирать примеры по типу сайта и стилю, на Awwwards — по категориям и тегам оформления.
Откройте несколько сайтов, близких к вашей задаче: портфолио, курс, магазин или сервис. Выберите три–пять примеров в одном направлении. Сохраните скриншоты страницы и отдельных блоков, которые вам понравились.
Рядом с каждым примером подпишите, что хотите использовать: шрифты, сочетание цветов, расположение фотографий или оформление меню. Покажите эти скриншоты ИИ вместе с вашим текстом и изображениями. Так у него появится конкретный ориентир.
Например: «Возьми крупную типографику из первого примера и расположение фотографий из второго. Используй спокойные цвета, без градиентов. Адаптируй композицию под мои материалы».
Не собирайте каждый блок в новом стиле. Выберите общее направление и придерживайтесь его на всей странице. Применяйте понравившиеся приёмы к своему содержанию, сохраняя собственные тексты, изображения и характер проекта.
2. Избыточный и странно звучащий текст
ИИ часто старается объяснить всё сразу: как устроен продукт, почему он работает и какими теориями это можно обосновать. В итоге простая мысль растягивается на несколько карточек, а посетителю приходится искать главное.
Первый пример можно сократить до одной фразы: «Ребёнок выполняет задания, получает звёзды и меняет их на призы, которые выбрал сам». Текст сразу объясняет, что происходит в приложении.
Технический текст из спецификации
В третьем примере обратите внимание на фразу: «По умолчанию отправка происходит только после твоего подтверждения». Оборот «по умолчанию» похож на описание настройки из спецификации продукта, перенесённое на первый экран. По одному скриншоту нельзя установить, откуда взят текст, но такой язык легко узнать.
Первый экран перегружен ещё и инструкцией: создать кабинет, подключить hh.ru, подготовить письма, подтвердить отправку. Лучше сначала объяснить результат: «Магний подбирает подходящие вакансии и готовит отклики». Шаги подключения покажите там, где человек приступает к настройке.
Само подтверждение отправки может быть важно: человек хочет знать, уйдёт ли отклик без его согласия. Если это нужно подчеркнуть, скажите проще: «Вы проверяете отклик перед отправкой». Убирайте служебные формулировки, сохраняя полезную информацию.
Как избежать
Перечитайте каждый блок и спросите: помогает ли эта подробность понять предложение, выбрать продукт или сделать следующий шаг? Если нет — сократите её или перенесите в справку.
Для основного текста держите ориентир: 50–70 символов в строке, включая пробелы. Слишком длинную строку труднее читать и искать глазами начало следующей. Ограничьте ширину текстового блока, а не ставьте ручные переносы.
Это рекомендация, а не жёсткое правило для всех элементов. Заголовки могут быть короче, а на телефоне длина строки зависит от ширины экрана и размера шрифта.
3. Вместо изображений — только векторы
На странице есть текст, карточки, значки и схемы, но почти нечего рассматривать. Нет фотографий, примеров работ или подробных скриншотов продукта. Посетитель читает обещания, а представить результат ему трудно.
При сборке сайта ИИ проще создать графику кодом: линии, круги, стрелки и условные экраны. Такие рисунки часто делают в векторном формате, например SVG. Вектор — это изображение из описанных линий и фигур. Его можно увеличивать без потери чёткости. Фотография устроена иначе: она состоит из множества маленьких цветных точек — пикселей.
Чтобы подобрать фотографию, нужно найти подходящий сюжет, проверить условия использования и встроить файл в страницу. Без инструментов поиска и доступа к библиотеке изображений ИИ часто заменяет её тем, что может собрать кодом. Поэтому он не всегда добавляет фотографии сам, даже когда они нужны.
Векторы подходят для иконок, диаграмм и простых схем. Проблема начинается, когда ими заменяют всё: фотографии, реальные интерфейсы и примеры результата.
Как решать
Подберите фотографии на стоках, например Unsplash или Pexels. Скачайте подходящие файлы и передайте ИИ вместе с пояснением, где их разместить. Выбирайте изображения по смыслу, а не просто для заполнения пустого места. Проверяйте условия использования выбранных материалов.
Если ваш ИИ-инструмент поддерживает внешние сервисы, подключите ему API фотостока — способ обращаться к библиотеке изображений из программы. Тогда он сможет искать фотографии по вашему запросу. Доступность подключения зависит от инструмента и правил сервиса; один API-ключ сам по себе не добавляет ИИ новую возможность.
Генерируйте изображения в стиле сайта
Если вы используете ChatGPT с доступной генерацией изображений, можно создавать иллюстрации под оформление сайта. Покажите ему референсы, задайте цвета и настроение. Проработайте несколько примеров и утвердите стиль.
Сразу договоритесь, что он может рисовать: например, обложки, иллюстрации к разделам и фоны. Отдельно укажите, где нужны ваши фотографии и настоящие скриншоты. Сгенерированная картинка не должна выдавать выдуманный интерфейс или результат за реальный.
После этого используйте утверждённые примеры как ориентир для следующих изображений. Так иллюстрации будут сочетаться между собой и с остальной страницей.
4. Иконки в стиле iOS на каждом шаге
Молнии, кубки, подарки и улыбающиеся лица появляются рядом с каждым пунктом. Такие значки легко добавить: эмодзи можно вставить прямо в текст без поиска файлов и подключения библиотеки. Поэтому при генерации страницы они часто становятся самым простым вариантом декора.
На этих примерах — эмодзи, похожие на привычные значки iPhone. Это не отдельная библиотека иконок iOS: их вид зависит от устройства и системы. В одном интерфейсе уже смешаны цветные объёмные эмодзи и тонкие контурные иконки.
Эмодзи уместны, например, для выбора настроения или игровых наград. Но когда ими оформляют каждый раздел, они начинают спорить с остальной графикой и делают разные сайты похожими.
Как решать
Попросите ИИ подключить бесплатную библиотеку иконок и использовать её по всему сайту. Выберите один набор, задайте общий размер, цвет и толщину линий. Три распространённых бесплатных варианта:
- Lucide — лаконичные контурные иконки
- Heroicons — контурные и залитые иконки
- Bootstrap Icons — универсальный набор для интерфейсов
Например: «Замени декоративные эмодзи на иконки Lucide. Используй одинаковую толщину линий, спокойный цвет и единый размер. Добавляй иконку только там, где она помогает понять действие».
Не смешивайте несколько библиотек без необходимости. Эмодзи можно оставить там, где они нужны по смыслу, например в выборе настроения. Главное — заранее определить их роль и придерживаться общего оформления.
5. Несогласованность деталей
Когда сайт становится больше одной страницы, изменения нужно согласовывать между всеми его частями. Иначе главная, каталог и личный кабинет постепенно начинают выглядеть как разные проекты.
Например, вы просите ИИ изменить скругление кнопок на одной странице или обновить вид переключателей. Вы ожидаете, что новое оформление появится на всём сайте. Но если задача сформулирована локально, он может исправить только эту страницу и оставить остальные как были.
В итоге одинаковые действия оформлены по-разному: здесь кнопка круглая, там прямоугольная; на одной странице выбранная вкладка подчёркнута, на другой выделена заливкой. Каждая деталь сама по себе может выглядеть хорошо, но вместе они не складываются в единый интерфейс.
Как решать
Создайте дизайн-систему — отдельную страницу с правилами и живыми примерами интерфейса. Зафиксируйте цвета, шрифты, отступы, скругления, кнопки, поля и переключатели. Покажите их обычное, выбранное и недоступное состояние. С этой страницей сможете сверяться и вы, и ИИ.
Правила должны опираться на общие стили и компоненты сайта. Тогда кнопки на разных страницах используют одно оформление, а не отдельные копии. При изменении стандарта обновляйте и правило, и связанные элементы.
В задании уточняйте масштаб: «Измени скругление всех основных кнопок на сайте. Обнови общий стиль, страницу дизайн-системы и проверь главную, каталог и страницы курсов». После правки сравните несколько страниц на компьютере и телефоне.
Пример из нашего сайта
В дизайн-системе Fokeev скругления заданы по роли: 4 px для карточек, 8 px для кнопок и полей, 12 px для корзины и модальных окон. Круг оставлен для отдельных элементов, например аватаров и кнопок со стрелками.
Так при добавлении новой страницы не нужно каждый раз заново выбирать форму кнопки. Есть понятное правило, на которое можно сослаться в задании ИИ. На той же странице собраны палитра, типографика, вкладки и другие стандарты интерфейса.
Ещё один пример — дизайн-система Ростелекома. Посмотрите, как там собраны правила и образцы компонентов, и используйте её как ориентир для структуры своей страницы стилей.
Дмитрий Фокеев