Что делать после создания дизайна сайта

Ты закончил дизайн сайта в Figma. Все блоки стоят на своих местах, цвета выбраны, заголовки выглядят нормально.

И тут возникает вопрос:

А что теперь?

Самый простой ответ: макет нужно превратить в настоящий сайт.

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

Не спеши сразу отправлять Figma в нейросеть.

Сначала посмотри на макет как обычный пользователь.

Понятно ли за несколько секунд:

• что предлагает компания;
• для кого этот сайт;
• что нужно сделать;
• куда нажать;
• почему этому бизнесу можно доверять?

Если первый экран сам по себе непонятен, AI не спасёт ситуацию.

Он просто быстрее соберёт непонятный сайт.

Перед сборкой полезно привести макет в порядок.

Посмотри:

все ли основные блоки начинаются по одной линии;

одинаковые ли внутренние отступы;

достаточно ли воздуха между секциями;

не слишком ли много разных размеров;

не прыгают ли элементы из блока в блок.

Это кажется мелочами, но именно из таких мелочей складывается ощущение аккуратного сайта.

Необязательно знать сложную теорию дизайна.

Для начала достаточно понимать:

что должно быть выровнено, где нужен воздух и какой элемент на экране главный.

Теперь можно переходить к сборке.

И здесь важно не просто отправить картинку со словами:

«Сделай такой же сайт».

Нейросеть должна получить понятное техническое задание.

Например:

«Собери одностраничный сайт по этому макету. Максимальная ширина контента 1140 px. Повтори структуру блоков и визуальную иерархию. Используй два шрифта. Основной текст 18 px на десктопе. Между секциями 80–96 px. На мобильном горизонтальные отступы 16 px. Все кнопки должны иметь одинаковую высоту. Сохрани порядок элементов из макета».

Так AI получает не только картинку, но и ограничения.

И результат становится гораздо предсказуемее.

Лучше сначала собрать первый экран.

Проверить:

• ширину;
• шрифты;
• отступы;
• изображение;
• кнопку;
• сетку;
• мобильную версию.

Если первый экран получился хорошо, переходить к остальным намного проще.

Это особенно важно, когда ты работаешь с разными стилями и референсами.

Сначала нужно убедиться, что визуальный язык работает.

После первого экрана переносишь на сайт остальные блоки:

преимущества → карточки → отзывы → форма → контакты.

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

Если один блок выглядит правильно, попроси AI использовать те же:

• размеры;
• отступы;
• радиусы;
• стили кнопок;
• цвета;
• правила сетки.

Так сайт не превращается в набор случайных секций.

Это один из самых частых провалов AI-сайтов.

На компьютере всё выглядит отлично.

На телефоне:

• заголовок развалился на четыре строки;
• карточки стали слишком узкими;
• кнопки вылезают;
• изображение стало огромным;
• между блоками появились странные пустоты.

Поэтому мобильную версию нужно проверять отдельно.

Не достаточно спросить нейросеть:

«Сделай адаптив».

Лучше говорить конкретно:

«На ширине 390 px проверь все секции. Горизонтальные отступы 16 px. Заголовки не должны упираться в края. Карточки перестроить в одну колонку. Кнопки не должны выходить за ширину контейнера».

Ты опять не обязан знать весь CSS.

Нужно уметь описать, каким должен быть результат.

Очень легко попасть в ловушку:

«Код работает — значит всё готово».

Нет.

Открой рядом Figma и настоящий сайт.

Сравни:

размеры

отступы

выравнивание

цвета

шрифты

пропорции изображений

поведение на мобильном

Технически правильный сайт может визуально сильно отличаться от макета.

Именно здесь особенно полезен человек с базовым пониманием дизайна.

Сначала найди причину.

Часто достаточно исправить несколько вещей:

слишком маленькие отступы;

слишком много цветов;

слабая типографическая иерархия;

несовпадающие границы блоков;

случайные изображения;

плохая мобильная версия.

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

Теперь начинается уже не дизайн, а запуск.

Нужно проверить:

работают ли все ссылки;

отправляется ли форма;

нормально ли открывается сайт на телефоне;

есть ли фавикон;

есть ли title и description;

не осталось ли тестового текста;

нет ли сломанных изображений.

Только после этого сайт можно считать действительно готовым.

Красивый сайт сам по себе посетителей не приводит.

После публикации нужно понять:

по каким запросам тебя могут найти;

какие страницы стоит продвигать;

какие материалы можно добавить;

откуда будут приходить люди.

Например, если это сайт кондитера, можно отдельно сделать страницы и материалы под реальные запросы его клиентов.

Сайт становится не картинкой, а частью системы привлечения клиентов.

AI отлично подходит для:

написания кода;

создания вариантов;

исправления ошибок;

адаптации блоков;

быстрой сборки.

Человек нужен для другого:

понять задачу;

оценить дизайн;

выбрать хороший вариант;

заметить, что выглядит плохо;

объяснить, что именно исправить.

И это, пожалуй, главный навык человека, который сегодня делает сайты с AI.

Не уметь написать каждую строчку кода.

А уметь увидеть результат и объяснить машине, каким он должен стать.

Запомни простую последовательность:

Figma → проверка макета → структура → AI-сборка → первый экран → остальные секции → мобильная версия → проверка → публикация → продвижение.

Этого уже достаточно, чтобы не зависнуть на этапе:

«Я дизайн сделал. А дальше что?»

А дальше — превратить его в работающий продукт.

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