Как получить хороший дизайн сайта от ИИ: от брифа до проверки интерфейса
Neaptide · 20 сентября 2026 г. · 13 мин чтения · Обновлено: 3 октября 2026 г.
Как поставить ИИ задачу на дизайн сайта: бриф, варианты, изображения и проверка интерфейса. Промпты и пример мастерской.
В этой статье
Запрос «сделай красивый современный сайт» оставляет слишком много решений на усмотрение модели. Она не знает, кто придёт на страницу, что человек должен понять и какие сведения помогут ему выбрать. Без этого трудно оценить даже эффектный макет: он может нравиться и при этом не решать задачу.
Поэтому до первого макета подготовьте содержание страницы, задайте визуальные правила и решите, как будете принимать результат. Дальше описан порядок работы для владельца небольшого бизнеса, продакт-менеджера или дизайнера, который собирает сайт с ИИ.
Что полезно взять из подхода Аншу Чималы
В статье How to turn your AI into a world-class designer Аншу Чимала предлагает искать разные творческие направления, развивать выбранное и доводить результат итерациями. Среди его приёмов есть отдельный ИИ-критик, который видит только скриншот и не знает истории разработки, и генерация изображений под конкретный замысел.
Это практические советы автора, и его демонстрации не обещают такого же качества любому проекту. Осторожнее всего стоит быть с оценкой вроде «9 из 10» от другой модели. Сравнивать версии она помогает, но справится ли посетитель со своей задачей, по ней не узнать.
Разбирать всё будем на сайте вымышленной мастерской по ремонту светильников. Задания, макеты и ситуации ниже учебные. Пользовательского тестирования мы для них не проводили и бизнес-показателей не измеряли.
Сначала опишите решение, которое принимает посетитель
Для мастерской цель «получать заявки» слишком общая. Посетителю нужно понять, берутся ли здесь за его светильник, что отправить для предварительной оценки и как передать вещь в ремонт. Из этих вопросов и складывается содержание страницы.
Начните с короткого задания:
Мы проектируем сайт мастерской по ремонту светильников. Посетитель хочет узнать, можно ли восстановить его вещь. Главное действие — отправить фотографии и описание неисправности для предварительной оценки. До этого ему нужно увидеть виды работ, порядок обращения и условия приёма. Составь список необходимых материалов. Отдельно укажи сведения, которых пока не хватает. Не придумывай цены, сроки, отзывы и гарантии.Такой запрос вскрывает пробелы ещё до макета. Если условия приёма неизвестны, узнайте их у мастерской. Красивый блок с выдуманным обещанием проблему только отложит.
Тот же порядок (сначала разобраться в задаче, потом разрабатывать решения) заложен в модели Double Diamond от Design Council. В ней четыре этапа: исследование проблемы, её определение, разработка вариантов и проверка решений. Генерация макетов покрывает лишь часть этого пути.
Соберите бриф, по которому можно принимать решения
Полезный бриф привязывает оформление к содержанию. Нашей мастерской подойдёт спокойная предметная подача: крупные фотографии деталей, понятные подписи, заметное действие «Отправить фото». Так мы решили для учебного проекта. Универсальным стилем для сервисного бизнеса это не назовёшь.
| Часть брифа | Решение для мастерской | Что проверить |
|---|---|---|
| Главный вопрос | Можно ли починить мой светильник? | Ответ или следующий шаг легко найти |
| Содержание | Виды ремонта, примеры работ, порядок обращения | Каждый блок содержит реальные сведения |
| Визуальный акцент | Фотографии предметов и деталей | Снимки помогают рассмотреть работу |
| Текст | Короткие объяснения без профессионального жаргона | Понятно, какие фото и сведения отправить |
| Основное действие | Отправить фото для оценки | Кнопка ведёт к нужной форме или контакту |
| Ограничение | Предварительная оценка не равна окончательной цене | Разница объяснена рядом с обращением |
Не превращайте бриф в длинный перечень запретов. Требование «никаких карточек» ничего не говорит о пользе страницы. Для списка услуг карточки бывают удобны. Важно, что в них написано и можно ли это сравнить.
Сравнивайте варианты на одинаковом содержании
Прежде чем выбирать оформление, подготовьте единый набор заголовков, услуг и изображений. Если в одном варианте сильный текст и подробные фотографии, а в другом стоят заглушки, вы сравниваете сразу несколько переменных.
Для учебной мастерской можно проверить три способа организации материала:
- По видам неисправностей. Посетитель узнаёт свою ситуацию и переходит к условиям обращения.
- По примерам восстановления. Страница строится на реальных работах с пояснением, что было сделано.
- По порядку ремонта. Страница последовательно объясняет путь от фотографии до получения вещи.
Эти три варианта различаются логикой подачи, так что выбирать между ними есть смысл. Плотность страницы, размеры фотографий и характер шрифта обсуждают уже после.
Подготовь три схемы страницы по этим трём принципам. Используй одинаковые исходные сведения и основное действие. Для каждой схемы объясни, на какой вопрос она отвечает первой и какая информация окажется ниже. Пока не добавляй декоративные эффекты. Отметь, где для решения не хватает материалов.Ниже три авторских макета на одну тему. В первом на передний план выходят неисправности, во втором сам предмет, в третьем порядок обращения. Палитра и композиция у них тоже разные, поэтому считайте их иллюстрацией возможных направлений: контролируемого эксперимента здесь нет. Если хотите проверить именно структуру, оформление и содержание оставьте одинаковыми.
Попросите человека, который не участвовал в разработке, найти условия приёма и объяснить следующий шаг. Если у него не получается, вернитесь к структуре. Какой цвет ему больше нравится, обсудите отдельно.
Может ли случайная строка помочь с идеями
Если варианты слишком похожи, можно попробовать необычный источник ассоциаций. Чимала предлагает получать случайную строку внешним скриптом и использовать её как отправную точку для оформления. Это эксперимент, без которого вполне можно обойтись.
У исследователей Sakana AI есть метод String Seed of Thought: модель сначала сама генерирует случайную строку, а потом выводит ответ из операций над ней. Авторы изучают, как модели следуют вероятностным инструкциям и насколько разнообразны их ответы. Внешний генератор методу не нужен, и в этом его отличие от практического варианта Чималы.
Из этих результатов не следует, что случайная строка делает сайт удобнее или поднимает продажи. Для рабочего проекта хватит простой проверки: дал ли эксперимент вариант, который решает задачу и который стоит прорабатывать дальше. Если нет, отложите его. Необычность сама по себе не повод менять понятную навигацию.
Подбирайте изображения по их роли на странице
В проекте мастерской фотография отремонтированного светильника показывает, что здесь умеют делать. Сгенерированная картинка этого не докажет: за ней нет ни реального заказа, ни результата ремонта.
Разделите изображения по назначению. В портфолио идут только настоящие снимки, на использование которых есть разрешение. Порядок обращения объяснит авторская схема. А для обложки или атмосферы можно создать концептуальную иллюстрацию и подписать, откуда она.
До генерации решите, где будет стоять изображение. Если рядом заголовок, смотрите их вместе. Если на узком экране картинка обрезается, убедитесь, что важная деталь остаётся в кадре. Текст, кнопки и условия услуги оставьте обычными элементами страницы, тогда их можно править и адаптировать независимо от иллюстрации.
Для учебного проекта задание может выглядеть так:
Подготовь схему «Как отправить светильник на предварительную оценку». Три шага: сфотографировать предмет целиком; снять повреждение крупным планом; описать, что не работает. Подписи размести обычным текстом страницы. Не изображай вымышленные работы мастерской как её портфолио.
Превратите замечания в проверяемые правки
Из фразы «дизайн выглядит дёшево» не понять, что менять. В полезном замечании названы место, проблема и то, как всё должно работать после исправления.
| Общее впечатление | Задание на правку |
|---|---|
| На странице слишком много всего | Найди блоки, которые повторяют уже сказанное. Предложи, что объединить, и объясни, какая информация сохранится |
| Кнопка теряется | Проверь, можно ли найти отправку фотографий после чтения условий. Покажи вариант с действием рядом с ними |
| На телефоне неудобно | Проверь форму на узком экране: подписи, переносы, клавиатуру, сообщения об ошибках и отправку |
| Фотографии не помогают | Для каждого снимка укажи, что он объясняет. Замени неопределённые подписи конкретным описанием работы |
Предварительный разбор можно поручить ИИ. Дайте ему задачу посетителя, бриф и текущий экран и попросите отделить видимые проблемы от предположений, проверить которые можно только на работающем сайте. По скриншоту обсуждают композицию. Отправку формы по нему не проверишь.
Ведите короткий журнал: что заметили, что изменили, как проверили. Например: «После ошибки отправки исчезало описание неисправности → сохранили введённый текст → повторили неудачную отправку и убедились, что описание осталось». От такого журнала больше толку, чем от растущего балла за красоту.
Проверьте интерфейс там, где им будут пользоваться
Перед запуском пройдите основной сценарий целиком. В мастерской это значит найти условия, подготовить фотографии, заполнить обращение, исправить ошибку и получить понятное подтверждение. Удачным путём не ограничивайтесь: на пустые поля и сбой загрузки интерфейс тоже должен отвечать внятно.
Отдельно проверьте, легко ли читать текст и попадать по элементам управления. Критерий контрастности уровня AA в WCAG 2.2 требует не менее 4,5:1 для обычного текста и 3:1 для крупного, с оговорёнными исключениями. Крупным считается текст от 18 pt либо от 14 pt в полужирном начертании. Контраст считают по цветам текста и фона. Оценка на глаз здесь не годится.
Для области нажатия критерий 2.5.8 уровня AA задаёт минимум 24 × 24 CSS-пикселя. Исключения есть: например, маленькие цели с достаточным расстоянием между ними и ссылки внутри текста. Это нижняя граница. Делать каждую кнопку именно такого размера критерий не советует.
Две эти проверки ещё не означают соответствия всему стандарту. Пройдите страницу с клавиатуры, посмотрите, виден ли фокус, подписаны ли поля и что происходит при увеличении текста. Потом дайте человеку из вашей аудитории конкретную задачу и не подсказывайте. Записывайте, где он останавливается и что понимает иначе, чем вы ожидали.
Когда можно остановить доработку
Для первой версии заранее запишите условия готовности. Посетитель находит виды работ и условия приёма, понимает, что отправить, может заполнить обращение, не теряет введённые данные после ошибки и получает подтверждение. И ещё одно: каждое опубликованное обещание должно совпадать с тем, как мастерская работает на самом деле.
Когда эти условия выполнены, новые изменения привязывайте к наблюдениям. Люди путают предварительную цену с окончательной — перепишите объяснение. Не удаётся прикрепить фото — чините форму. А ещё один оттенок может подождать.
Начните с одного сценария и доведите его до рабочего состояния. Тогда в следующем разговоре с ИИ будет о чём говорить по делу: вы покажете конкретную проблему и проверите, устранена ли она.
Источники
- Anshu Chimala — How to turn your AI into a world-class designer, Lenny’s Newsletter, 1 сентября 2026. Оригинал. Использована открытая часть; продолжение за подпиской не изучалось.
- Design Council — The Double Diamond. Описание процесса. Основа разграничения исследования задачи, разработки и проверки решений.
- Kou Misaki, Takuya Akiba, Sakana AI — String Seed of Thought: Prompting LLMs for Distribution-Faithful and Diverse Generation. Описание метода и экспериментов. Источник сведений о разнообразии генерации и вероятностных инструкциях.
- W3C — Understanding SC 1.4.3: Contrast (Minimum). Контраст текста.
- W3C — Understanding SC 2.5.8: Target Size (Minimum). Размер области нажатия и исключения.
- Оригинал
- Описание процесса
- Описание метода и экспериментов
- Контраст текста
- Размер области нажатия и исключения
Источники проверены 3 октября 2026 года. Бриф мастерской, задания, таблицы и схемы составлены для этой статьи. Это предлагаемый порядок работы, отчётом об эксперименте их считать не нужно.