Создать сайт с помощью ИИ и проверить результат

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

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

Что написать в задании для ИИ

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

Как выбрать первую страницу и структуру

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

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

Как удержать единый стиль

Создайте короткую дизайн-систему: основные цвета, типографика, отступы, вид кнопок и карточек. Укажите, какие элементы запрещены. Тогда новые страницы не будут разъезжаться после каждого запроса агенту. Референс задаёт направление; чужой логотип и текст копировать нельзя. Проверяйте контраст и размер интерактивных элементов на телефоне. Локально подключённые шрифты и библиотеки уменьшают зависимость от внешних доменов.

Как сделать форму настоящей

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

Как проверить мобильный экран

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

Что сделать перед выкладкой

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

npx create-next-app@latest
npm view next version
npm audit --omit=dev --audit-level=high
npm run build
npx next start -H 127.0.0.1

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

Как довести первый экран до работающей заявки

Начните с одного посетителя и одной услуги. Он пришёл с телефона, прочитал условия, нажал кнопку, заполнил форму. Запишите, кто получит заявку, какие поля обязательны и как посетитель узнает, что сообщение доставлено. ИИ легко рисует форму с красивым сообщением «Успешно», за которым нет сохранения. Проверка должна включать запись на сервере и уведомление ответственному, а также ошибку связи.

Для Next.js после локальной сборки проверьте запуск с привязкой к локальному адресу. На сервере наружный запрос принимает nginx. Перед выкладкой проверьте ссылки, метаданные и отсутствие чужих внешних шрифтов. Ключи интеграций храните в .env на сервере; переменные NEXT_PUBLIC_ оказываются в браузере и не подходят для секретов.

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

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

Что передать следующему человеку в проекте

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

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

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

Да, если вы умеете описать задачу и проверить результат. За данные и запуск всё равно отвечает человек.

Сколько страниц делать сначала?

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

Почему сайт ломается на телефоне?

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

Можно ли доверить ИИ текст и отзывы?

Черновик текста можно, факты и отзывы требуют собственного подтверждённого источника.

Когда сайт готов к запуску?

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

Что сделать дальше

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