Как сделать сайт с помощью нейросети: пошагово, для новичка

Как сделать сайт с помощью нейросети, если ты не программист: описать страницу словами, получить от нейросети готовый файл index.html, открыть его в браузере, проверить, как он выглядит на телефоне, и попросить поправить то, что съехало. Так за вечер получается сайт-визитка из одной страницы с рассказом о тебе, услугами и ценами, порядком записи и контактами. Понадобятся компьютер, браузер, «Блокнот» и чат с нейросетью. Чтобы страницу увидели клиенты, её потом выкладывают на хостинг, то есть на сервер, где сайт доступен круглосуточно, и подключают к ней домен.

Такой способ называют вайб-кодингом, то есть созданием сайтов и программ с помощью нейросети, без ручного написания кода. Слово появилось в феврале 2025 года в посте программиста Андрея Карпаты. Все запросы ниже мы проверили на модели Claude, взяв для примера выдуманную мастерскую по ремонту велосипедов «Спица», и на каждом шаге пишем, что модель ответила и что пришлось исправлять.

Запросы из статьи можно сразу вставить в чат сервиса «Нейросети»: там есть Claude, ChatGPT, Gemini и DeepSeek без ВПН и зарубежной карты. С вопросами про код поможет ассистент-программист. Если подписки у тебя ещё не было, пробный доступ стоит 1 ₽. После него доступ платный, цены и условия написаны на странице тарифов.

Какой сайт можно собрать с нейросетью самому

Для первой страницы форма не нужна, ведь с кнопками «Позвонить» и «Как добраться» клиент свяжется с тобой сам.

Перед началом: опиши сайт словами

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

1. Название и одну фразу о том, чем ты занимаешься и где.
2. Для кого страница: кто её откроет и что этот человек хочет сделать.
3. Блоки сверху вниз, например шапка с кнопками, услуги и цены, как проходит работа, адрес и часы.
4. Свои данные: телефон, ссылку на карту, цены, адрес. Чего пока нет, пусть останется пометкой в квадратных скобках.

Шаг 1. Как получить первую версию страницы

Скопируй запрос и замени описание мастерской на своё:

Сделай мне страницу-визитку для мастерской. Я не разбираюсь в программировании, поэтому всё должно быть в одном файле index.html, который я просто открою в браузере.

Кто я: [чем занимаешься, город]. Клиенты в основном [кто они], ссылку открывают с телефона.

На странице нужны четыре блока:
- шапка: название, чем я занимаюсь, кнопки «Позвонить» (tel:[номер]) и «Как добраться» (ссылка на [адрес на Яндекс Картах]);
- что делаю и сколько стоит: [список услуг], цены [уточню];
- как проходит работа: от звонка до результата, в 3-4 пунктах;
- где найти: [адрес], [часы работы].

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

Всё, что я указал в квадратных скобках, - мои данные. Если там пусто или написано «уточню», оставь квадратные скобки в коде как есть и ничего не придумывай.

Пришли файл одним блоком кода, а под ним три-четыре строки: как его сохранить и открыть.

В нашей проверке с данными мастерской «Спица» модель прислала файл на 289 строк и короткую инструкцию по сохранению. Номер, ссылку на карту, цены, адрес и часы работы она не придумала и оставила в квадратных скобках, как просили. Строку, которая подгоняет страницу под ширину экрана телефона (тег meta viewport), модель добавила сама. Если ответ обрывается посреди кода, напиши «продолжи с того места, где остановился» или попроси прислать файл заново, компактнее и без пояснений.

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

Шаг 2. Как сохранить файл и проверить, как он выглядит на телефоне

1. Скопируй код из ответа целиком, от первой строки <!DOCTYPE html> до последней </html>. В чате сервиса «Нейросети» у блока кода есть кнопки «Копировать» и «Скачать». Скачанный файл называется code.html, его остаётся переименовать в index.html.
2. Если копируешь вручную, вставь код в «Блокнот» и выбери «Сохранить как». В поле «Тип файла» поставь «Все файлы», в поле «Кодировка» выбери UTF-8, имя файла напиши index.html. Иначе получится index.html.txt, который откроется как текст, или русские буквы превратятся в непонятные значки.
3. Положи файл в отдельную папку, например «сайт», и открой его двойным щелчком: страница откроется в браузере.
4. В Chrome нажми F12, чтобы открыть инструменты разработчика, затем Ctrl+Shift+M (на Mac это Cmd+Option+I и Cmd+Shift+M). Появится режим телефона, где можно выбрать модель смартфона или ширину экрана. В Firefox тот же режим включается сочетанием Ctrl+Shift+M, на Mac Cmd+Option+M.

Так выглядела первая версия нашей страницы на компьютере:

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

Шаг 3. Как исправить вид страницы по снимку экрана

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

Во вложении снимок экрана телефона и мой index.html.
Проблема одна: [что видишь, например: шапка занимает больше половины первого экрана, кнопки стоят друг под другом, и весь список цен на первый экран не помещается].
Хочу так: [как должно быть, например: на телефоне кнопки рядом в одну строку, шапка ниже].
Сначала одной фразой скажи, какое место в коде за это отвечает. Потом поменяй только его и пришли весь файл, а под ним список правок.

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

Снимок экрана принимают не все модели. В чате сервиса «Нейросети» те, что принимают картинки, отмечены в списке пометкой «Фото». Если картинку приложить нельзя, опиши проблему словами: какой блок, на какой ширине экрана и что именно не так.

Шаг 4. Как поменять тексты и добавить фотографии

Вот факты о моём деле, других фактов нет:
- [сколько лет работаешь];
- [с чем работаешь и чего не делаешь];
- [сроки];
- [что ещё важно клиенту].

1. Перепиши тексты на странице простым живым языком, обращайся к клиенту на «вы». Не добавляй громких слов и фактов, которых нет в моём списке.
2. Добавь после блока с ценами три фотографии работ. Файлы лежат в папке img рядом с index.html: photo1.jpg, photo2.jpg, photo3.jpg. У каждой фотографии напиши короткое описание в атрибуте alt. На телефоне фотографии идут одна под другой.
3. Больше ничего на странице не меняй. В ответе нужен весь файл и под ним перечень правок.

Мы дали модели четыре факта, среди них «чиню велосипеды восьмой год» и то, что мастерская берёт в ремонт ещё и электросамокаты. В шапке появилась фраза «Восьмой год чиню велосипеды и электросамокаты», хотя про восемь лет в списке говорилось только о велосипедах. Ещё модель переименовала услугу «Ремонт самоката» в «Ремонт электросамоката» и написала об этом в списке правок. Описания фотографий получились общими, вроде «фото 1», и модель предупредила, что снимков не видит. Что изображено на каждой фотографии, впиши сам.

С фотографиями чаще всего случаются три проблемы:

• картинка не показывается, потому что имя файла в коде и в папке не совпадает (на многих хостингах photo1.jpg и Photo1.JPG считаются разными файлами) или папка img лежит не рядом с index.html;
• страница грузится долго, когда снимок прямо с телефона весит несколько мегабайт, хотя для сайта его достаточно уменьшить до ширины 1200-1600 точек и сохранить в формате WebP или JPG;
• в имени файла пробелы или русские буквы, а надёжнее называть файлы латиницей, маленькими буквами, через дефис.

Шаг 5. Как проверить страницу перед показом клиентам

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

На нашем файле модель нашла все 12 пометок в квадратных скобках и объяснила, что номер в ссылке «Позвонить» пишется после tel:+7 цифрами подряд, а ссылка на карту начинается с https://. Она заметила, что номер телефона нигде не показан текстом и посетитель с компьютера его не увидит. Неудачную фразу о сроках ремонта, которую сама написала на шаге 4, модель тоже нашла, как и противоречие между «аккумуляторы не ремонтирую» и услугой «Ремонт электросамоката». Растянутые на электросамокаты «восемь лет» она пропустила, поэтому её список стоит сверять с фактами самому.

Ещё модель предупредила о самых узких экранах, и это подтвердилось: на ширине 320 точек надпись «Как добраться» переносится на вторую строку, страница при этом не сдвигается вбок. Такие мелочи видно только в режиме телефона, и смотреть стоит на двух ширинах, обычной (около 390) и самой узкой.

Где разместить сайт, чтобы его увидели другие

Бесплатные зарубежные площадки для сайтов годятся только для страницы без формы. Если сайт собирает имена и телефоны, закон о персональных данных запрещает записывать и хранить данные граждан России в базах за пределами страны (часть 5 статьи 18 закона 152-ФЗ).

На таком сайте нужно ещё опубликовать политику обработки персональных данных (часть 2 статьи 18.1), а если данные обрабатываются по согласию клиента, оформлять это согласие отдельно от других документов (часть 1 статьи 9). Это не все обязанности: того, кто собирает данные через сайт, закон считает оператором персональных данных, а оператор, как правило, ещё до начала обработки уведомляет Роскомнадзор (статья 22). Перед запуском формы стоит свериться с юристом.

Типовые ошибки новичка

1. Файл сохранился как index.html.txt. В «Блокноте» не выбран тип «Все файлы». Проще всего включить в Проводнике показ расширений файлов и переименовать файл.
2. Код склеен из нескольких ответов. Нейросеть прислала только изменённый кусок, а ты вставил его не туда. Если каждый раз просить файл целиком, вставлять ничего вручную не придётся.
3. На странице выдуманные цены, сроки или телефон. Каждую цифру и каждый контакт сверь глазами, даже если в запросе было «ничего не придумывай».
4. Страницу не проверили на телефоне. Ссылку из мессенджера часто открывают со смартфона, так что режим телефона в браузере включай после каждой правки.
5. Кнопка «Позвонить» не звонит. В ссылке номер с пробелами или без кода страны, а надёжная запись выглядит как tel:+7 и дальше цифры подряд.
6. Нейросеть поменяла то, о чём не просили. Читай список правок после каждого ответа и сравнивай его с самой страницей.
7. Форма заявки сделана «на всякий случай». Чтобы заявки доходили, нужен сервер, и тогда на сайт ложатся требования закона о персональных данных.

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

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

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

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

Какая нейросеть лучше подходит для сайта?
Мы проверяли запросы на Claude. Те же запросы можно отправить ChatGPT, Gemini или DeepSeek: в этой проверке мы их не запускали, поэтому результат любой модели проверяй так же, как в шагах 2 и 5. Правки по снимку экрана сделает только модель, которая принимает картинки.

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

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

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