Что включить в бриф для дизайна сайта с ИИ?

Главный вопрос посетителя, материалы до действия, визуальные правила, связанные с содержанием, основное действие и ограничения — например, что предварительная оценка не равна окончательной цене.

Как сравнивать варианты макета от ИИ?

Держите одинаковые заголовки, услуги и изображения во всех версиях. Меняйте организацию материала — по типу неисправности, примеру реставрации или процессу — чтобы сравнивать структуру, а не несколько переменных сразу.

Можно ли заменить портфолио сгенерированными картинками?

Нет. Для портфолио нужны настоящие фотографии с правом использования. Сгенерированные изображения могут задавать настроение или объяснять процесс, если происхождение ясно, но не подтверждают выполненные работы.

Какая обратная связь по дизайну полезна?

Укажите место, проблему и ожидаемый результат после правки. Ведите короткий журнал: что заметили, что изменили и как проверили.

Что проверить в интерфейсе перед запуском?

Пройдите основной сценарий вместе с ошибками, сверьте контраст и размер цели с минимумами WCAG 2.2 AA где уместно, проверьте клавиатуру и видимый фокус, затем дайте человеку из аудитории задачу без подсказок.

Когда можно остановить доработку первой версии?

Когда посетитель находит виды работ и условия, понимает что отправить, завершает обращение, сохраняет ввод после ошибки и получает подтверждение — и каждое обещание на сайте совпадает с реальным процессом.

Как получить хороший дизайн сайта от ИИ: от брифа до проверки интерфейса

Neaptide · 20 сентября 2026 г. · 13 мин чтения

Как поставить ИИ задачу на дизайн сайта: бриф, варианты, изображения и проверка интерфейса. Промпты и пример мастерской.

В этой статье

Бумажный макет страницы, типографические образцы и цветовые акценты на рабочем столе.

Запрос «сделай красивый современный сайт» оставляет слишком много решений на усмотрение модели. Кто придёт на страницу? Что человек должен понять? Какие сведения помогут ему выбрать? Без этих ответов трудно оценить даже эффектный макет: он может нравиться и при этом не решать задачу.

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

Что полезно взять из подхода Аншу Чималы

В статье How to turn your AI into a world-class designer Аншу Чимала предлагает искать разные творческие направления, развивать выбранное и доводить результат итерациями. Среди его приёмов — отдельный ИИ-критик, работающий со скриншотом без истории разработки, и генерация изображений для конкретного замысла.

How to turn your AI into a world-class designer

Это практические рекомендации автора. Его демонстрации не позволяют обещать такое же качество любому проекту. Особенно осторожно стоит относиться к оценке вроде «9 из 10» от другой модели: она может помочь сравнивать версии, но не показывает, справится ли посетитель со своей задачей.

В нашем разборе главным ориентиром будет сайт вымышленной мастерской по ремонту светильников. Все задания, макеты и ситуации ниже — учебные; результаты пользовательского тестирования и бизнес-показатели для них не измерялись.

Сначала опишите решение, которое принимает посетитель

Для мастерской цель «получать заявки» слишком общая. Посетителю нужно понять, берутся ли здесь за его светильник, что отправить для предварительной оценки и как передать вещь в ремонт. Именно эти вопросы определяют содержание страницы.

Начните с короткого задания:

Мы проектируем сайт мастерской по ремонту светильников. Посетитель хочет узнать, можно ли восстановить его вещь. Главное действие — отправить фотографии и описание неисправности для предварительной оценки. До этого ему нужно увидеть виды работ, порядок обращения и условия приёма. Составь список необходимых материалов. Отдельно укажи сведения, которых пока не хватает. Не придумывай цены, сроки, отзывы и гарантии.

Такой запрос помогает обнаружить пробелы ещё до макета. Если условия приёма неизвестны, их нужно получить у мастерской. Красивый блок с выдуманным обещанием только отложит проблему.

Логика «сначала разобраться в задаче, затем разрабатывать решения» заложена и в модели Double Diamond от Design Council. В ней четыре этапа: исследование проблемы, её определение, разработка вариантов и проверка решений. Генерация макетов относится лишь к части этого процесса.

Double Diamond от Design Council

Соберите бриф, по которому можно принимать решения

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

Бриф мастерской: решения и проверки
Часть брифа	Решение для мастерской	Что проверить
Главный вопрос	Можно ли починить мой светильник?	Ответ или следующий шаг легко найти
Содержание	Виды ремонта, примеры работ, порядок обращения	Каждый блок содержит реальные сведения
Визуальный акцент	Фотографии предметов и деталей	Снимки помогают рассмотреть работу
Текст	Короткие объяснения без профессионального жаргона	Понятно, какие фото и сведения отправить
Основное действие	Отправить фото для оценки	Кнопка ведёт к нужной форме или контакту
Ограничение	Предварительная оценка не равна окончательной цене	Разница объяснена рядом с обращением

Не превращайте бриф в длинный перечень запретов. Требование «никаких карточек» ничего не говорит о пользе страницы. Карточки могут быть удобны для списка услуг; вопрос в том, какая информация в них размещена и можно ли её сравнить.

Четыре решения перед созданием макета: задача, материалы, визуальные правила и проверка — Авторская схема: что подготовить, чтобы обсуждать дизайн предметно. Полное содержание — в таблице и тексте выше.

Визуальный бриф мастерской: фотография светильника, палитра, шрифты и кнопка обращения — Визуальный бриф учебной мастерской: тёплый фон, терракотовый акцент, предметная фотография и два шрифта с разными ролями. Все макеты ниже созданы специально для статьи.

Сравнивайте варианты на одинаковом содержании

Чтобы выбрать оформление, подготовьте один набор заголовков, услуг и изображений. Если в одном варианте сильный текст и подробные фотографии, а в другом — заглушки, вы сравниваете сразу несколько переменных.

Для учебной мастерской можно проверить три способа организации материала:

По видам неисправностей. Посетитель узнаёт свою ситуацию и переходит к условиям обращения.
По примерам восстановления. Основой страницы становятся реальные работы с пояснением, что было сделано.
По порядку ремонта. Страница последовательно объясняет путь от фотографии до получения вещи.

Здесь различается логика подачи, поэтому выбор имеет практический смысл. После этого можно обсуждать плотность страницы, размеры фотографий и характер шрифта.

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

Ниже — три авторских макета на одной теме. В первом на передний план выходят неисправности, во втором — сам предмет, в третьем — порядок обращения. Палитра и композиция тоже различаются: это иллюстрация возможных направлений, а не контролируемый эксперимент. Для проверки именно структуры сохраните одинаковое оформление и содержание.

Первый вариант страницы: крупный заголовок, светильник справа и три вида неисправностей снизу — Вариант 1. Начинаем с проблемы: посетитель может узнать свою ситуацию. Под основным действием расположены три вида неисправностей.

Второй вариант страницы: большая фотография светильника и спокойная редакционная композиция — Вариант 2. Начинаем с предмета: изображение занимает большую часть экрана. В реальном портфолио здесь нужны фотографии выполненных работ; в макете использован вымышленный светильник.

Третий вариант страницы: тёмно-зелёный фон и три шага обращения в мастерскую — Вариант 3. Начинаем с порядка работы: сфотографировать, описать проблему, получить ответ. Последовательность видна ещё до обращения.

Попросите человека, который не участвовал в разработке, найти условия приёма и объяснить следующий шаг. Если он не может этого сделать, вернитесь к структуре. Его предпочтение по цвету — отдельный вопрос.

Может ли случайная строка помочь с идеями

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

Источник: Lenny’s Newsletter

У исследователей Sakana AI есть метод String Seed of Thought: модель сначала генерирует строку, затем использует операции над ней для построения ответа. Авторы исследуют следование вероятностным инструкциям и разнообразие генерации. В их описании метод не требует внешнего генератора — этим он отличается от практического варианта Чималы.

String Seed of Thought

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

Подбирайте изображения по их роли на странице

В проекте мастерской фотография отремонтированного светильника подтверждает, какую работу здесь умеют выполнять. Сгенерированная картинка такой функции не выполняет: за ней нет реального заказа и результата ремонта.

Как создать изображения для сайта с ИИ: промпты, правки и готовый баннер

Разделите изображения по назначению. Для портфолио нужны настоящие снимки с разрешением на использование. Для объяснения порядка обращения подойдёт авторская схема. Для обложки или атмосферы можно создать концептуальную иллюстрацию и обозначить её происхождение.

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

Для учебного проекта задание может выглядеть так:

Подготовь схему «Как отправить светильник на предварительную оценку». Три шага: сфотографировать предмет целиком; снять повреждение крупным планом; описать, что не работает. Подписи размести обычным текстом страницы. Не изображай вымышленные работы мастерской как её портфолио.

Одинаковое изображение светильника в двух контекстах: честная иллюстрация и неподтверждённый кейс ремонта — Смысл меняется вместе с подписью. Слева изображение честно обозначено как концепт; справа оно не может подтвердить заявление о выполненном ремонте.

Превратите замечания в проверяемые правки

Фраза «дизайн выглядит дёшево» не объясняет, что менять. Полезное замечание указывает место, проблему и ожидаемое поведение после исправления.

Как превратить общее впечатление в проверяемую правку
Общее впечатление	Задание на правку
На странице слишком много всего	Найди блоки, которые повторяют уже сказанное. Предложи, что объединить, и объясни, какая информация сохранится
Кнопка теряется	Проверь, можно ли найти отправку фотографий после чтения условий. Покажи вариант с действием рядом с ними
На телефоне неудобно	Проверь форму на узком экране: подписи, переносы, клавиатуру, сообщения об ошибках и отправку
Фотографии не помогают	Для каждого снимка укажи, что он объясняет. Замени неопределённые подписи конкретным описанием работы

До и после правки первого экрана: вместо абстрактных обещаний конкретная услуга и отправка фотографии — Авторское сравнение двух учебных макетов. Справа уточнена услуга, убраны повторяющиеся обещания и выделено одно действие. Это демонстрация правок, а не доказательство роста конверсии.

ИИ можно поручить предварительный разбор. Передайте ему задачу посетителя, бриф и текущий экран; попросите отделить видимые проблемы от предположений, для которых нужен работающий сайт. Скриншот позволяет обсудить композицию, но не проверить отправку формы.

Сохраняйте короткий журнал: что заметили, что изменили, как проверили. Например: «После ошибки отправки исчезало описание неисправности → сохранили введённый текст → повторили неудачную отправку и убедились, что описание осталось». Такой журнал полезнее растущего балла за красоту.

Три уровня проверки: вид страницы, работа интерфейса и выполнение задачи человеком — Авторская схема: у каждого способа проверки свои возможности. Ни один из трёх уровней не заменяет остальные.

Проверьте интерфейс там, где им будут пользоваться

Перед запуском пройдите основной сценарий целиком. Для мастерской это поиск условий, подготовка фотографий, заполнение обращения, исправление ошибки и получение понятного подтверждения. Проверяйте не только удачный путь: пустые поля и сбой загрузки тоже требуют внятного ответа.

Два учебных состояния мобильной формы: потеря введённых данных и сохранённое обращение с повторной отправкой — В правом макете после сбоя остаются фотография и описание, а сообщение объясняет следующий шаг. Это проектируемое поведение; его нужно отдельно реализовать и проверить в работающем интерфейсе.

Отдельно проверьте чтение и управление. В WCAG 2.2 критерий контрастности уровня AA предусматривает не менее 4,5:1 для обычного текста и 3:1 для крупного, с оговорёнными исключениями. Крупным считается текст от 18 pt либо от 14 pt при полужирном начертании. Контраст проверяют по цветам текста и фона, а не по впечатлению от картинки. Пояснение W3C к критерию 1.4.3.

Пояснение W3C к критерию 1.4.3

Для области нажатия критерий 2.5.8 уровня AA задаёт минимум 24 × 24 CSS-пикселя, но предусматривает исключения, включая достаточные расстояния между маленькими целями и ссылки внутри текста. Это нижняя граница критерия, а не рекомендация делать каждую кнопку именно такого размера. Пояснение W3C к критерию 2.5.8.

Пояснение W3C к критерию 2.5.8

Эти две проверки не означают соответствия всему стандарту. Также пройдите страницу клавиатурой, проверьте видимость фокуса, подписи полей и поведение при увеличении текста. Затем дайте представителю аудитории конкретную задачу без подсказок. Фиксируйте, где он останавливается и что понимает иначе, чем вы ожидали.

Когда можно остановить доработку

Для первой версии мастерской заранее запишите условия готовности: посетитель находит виды работ и условия приёма; понимает, что отправить; может заполнить обращение; сохраняет данные после ошибки; получает подтверждение. Все опубликованные обещания должны быть согласованы с реальным процессом мастерской.

Если эти условия выполнены, следующие изменения стоит привязывать к наблюдениям. Путаница между предварительной и окончательной ценой — основание переписать объяснение. Невозможность прикрепить фото — основание исправить форму. Желание попробовать ещё один оттенок можно оставить на потом.

Начните с одного сценария и доведите его до рабочего состояния. Это даст понятную основу для следующего разговора с ИИ: вы сможете показать конкретную проблему и проверить, устранена ли она.

Источники

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). Размер области нажатия и исключения.

Источники проверены 20 сентября 2026 года. Бриф мастерской, задания, таблицы и схемы составлены для этой статьи. Они представляют предлагаемый рабочий процесс, а не отчёт об эксперименте.