Нейросеть для дизайна сайта: как задать стиль и проверить экран

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

Попробуйте так же назвать главный материал своей страницы и действие посетителя до выбора цветов. Тогда у ИИ будет ясный критерий для вариантов.

Какие правила сайта закрепить перед правкой

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

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

Соберите маленькую систему компонентов

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

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

Как это выглядит в работе

На широком снимке «Кара-тау Групп» видны тёмная плита, крупный заголовок, каталог и кнопка расчёта. На мобильном те же действия идут друг за другом. Снимки показывают, какие элементы должны сохранить роль при смене ширины.

Сделайте цикл снимка и исправления

Соберите страницу и откройте её на широком экране и на ширине телефона. Снимите верх страницы, середину с основным действием и место после отправки формы. Запишите три конкретных дефекта: «заголовок закрывает кнопку», «подпись картинки не видна», «таблица уходит вправо». Дайте ИИ этот список и снимки, попросите изменить только нужные компоненты. Затем сделайте новый снимок того же места. Сравнение двух снимков покажет результат правки.

rg -n 'font|color|spacing|Button|Card' app components styles
npm run build
git diff --stat

Пути в команде подставьте из своего проекта. Если стили лежат в другом месте, сначала найдите файлы через rg --files. При изменении общего компонента проверьте все страницы, где он используется. Кнопка, исправленная на лендинге, может стать слишком широкой в личном кабинете. Внимательно посмотрите diff, чтобы генератор не переписал готовое меню или обработку формы ради одного визуального изменения.

Критерии приёмки вместо «мне нравится»

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

Попросите знакомого выполнить действие без подсказки. Запишите, где он остановился и какую кнопку ожидал увидеть. Это даст проверяемый материал для следующей правки.

Для следующего прогона дайте ИИ конкретный список:

• Назовите место, где человек остановился.
• Покажите снимок того же места на телефоне.
• Укажите компонент, который нужно исправить.
• Сравните новый снимок на той же ширине.

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

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

Частые вопросы

Достаточно ли отправить ИИ ссылку на красивый сайт?

Нет. Объясните, какой приём нужен и зачем. Иначе модель скопирует внешнюю форму без связи с вашей задачей.

Нужно ли менять всю дизайн-систему ради новой страницы?

Обычно сначала используют действующие компоненты. Новое правило добавляют, если существующие действительно не покрывают важное состояние.

Как не потерять единый стиль на следующей странице?

Храните цвета, типографику и состояния кнопок в общих правилах. После правки сравните снимки нескольких страниц, где компонент используется.

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

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

Что делать, если ИИ испортил готовую страницу?

Сравните diff, найдите затронутый общий компонент и верните не относящиеся к задаче изменения. Следующую правку сформулируйте по одному экрану и состоянию.

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