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

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

Три пути: конструктор, чат или агент

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

Конструкторы с ИИ (например, Tilda) – отдельная тема: там вы работаете внутри чужой платформы. Далее речь будет идти только о втором и третьем пути, когда сайт полностью ваш.

Что понадобится и сколько стоит

Для любого из двух путей нужны три вещи.

1. Домен – адрес сайта, например moya-firma.ru. Покупается у регистратора (например, reg.ru) на год. Ориентир для .ru – от 150 руб. в год.
2. Хостинг или сервер – компьютер в дата-центре, на котором лежит сайт и который круглосуточно отдаёт его посетителям. Обычный хостинг – от 200 руб. в месяц, собственный виртуальный сервер (VPS) – от 300 руб. в месяц. Чем они отличаются – в разделе «Подготовка».
3. Нейросеть. Для разработки идеально подходят американские (ChatGPT, Claude, Gemini) и китайские (DeepSeek, Qwen, Kimi) модели.

Для работы через чат хватает бесплатных версий – у них есть дневные лимиты, но небольшой сайт в них укладывается. Для работы с агентом нужна платная подписка. Например, начальный тариф Claude Pro стоит $20 – его вполне хватит. Учтите, что Claude и ChatGPT официально не работают в России и не принимают российские карты – вопрос с доступом и оплатой придётся решить заранее.

Цены – ориентиры на осень 2026 года у популярных российских провайдеров, точные тарифы смотрите на их сайтах.

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

Что такое Astro и зачем он нужен

Большинство сайтов на WordPress или Битриксе – это программа: при каждом заходе посетителя сервер собирает страницу из базы данных. Такой сайт нужно обновлять, защищать от взлома и держать на хостинге с поддержкой PHP и баз данных.

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

• Скорость. Страницы открываются мгновенно – поисковики это любят.
• Безопасность. Нет админки и базы данных – нечего взламывать.
• Дешёвое размещение. Подходит самый простой хостинг.
• Удобно для нейросети. Шапка, подвал, блоки – отдельные компоненты, а статьи блога – отдельные файлы. ИИ легко находит, что поправить, и не ломает остальное.

Минус: у Astro нет визуальной админки, как у WordPress. Поменять текст мышкой нельзя – правки вносятся через нейросеть. Для варианта с агентом это не проблема: вы просто пишете ему, что изменить. На Astro, например, сделан и сайт, который вы сейчас видите.

Важная деталь: чтобы собрать сайт на Astro, нужна программа на компьютере (Node.js). Агент установит её и запустит сам, а вот в варианте с чатом – это лишний шаг. Поэтому в чате проще делать сайт на чистом HTML и CSS – обычные файлы, которые открываются в браузере без сборки.

Подготовка: материалы, хостинг или сервер

Что собрать до первого сообщения нейросети

• Структура: какие будут страницы – главная, услуги, цены, контакты, блог.
• Тексты: хотя бы черновые – о компании, услуги, цены, ответы на частые вопросы. Нейросеть поможет их доработать, но факты о вашем бизнесе знаете только вы.
• Контакты и реквизиты: телефон, почта, мессенджеры, адрес, ИНН.
• Логотип и фото в хорошем качестве.
• 2–3 сайта-образца, которые вам нравятся, – и что именно в них нравится.

Удобно собрать всё в один бриф и отправлять его нейросети первым сообщением:

Сделай сайт для [чем занимается компания].
Аудитория: [кто клиенты].
Страницы: [список страниц].
Цель сайта: [заявки / звонки / записи].
Стиль: [светлый/тёмный, строгий/яркий], образцы: [ссылки].
Цвета: [фирменные цвета]. Логотип прилагаю.
Тексты для страниц: [вставьте тексты].
Контакты: [телефон, почта, Telegram].
Требования: адаптивная вёрстка для телефонов, быстрая загрузка,
заголовки и описания страниц для поисковиков.

Хостинг или сервер: в чём разница

Хостинг (виртуальный хостинг) – это как снять место в общем офисе. Провайдер сам следит за сервером, а вам выдаёт панель управления в браузере: в ней есть файловый менеджер, настройки домена и бесплатный сертификат безопасности (тот самый замочек и https в адресной строке). Сайт загружается через панель, как файлы на Яндекс Диск или Google Drive. Это вариант для работы через чат.

VPS (виртуальный выделенный сервер) – это как снять отдельную квартиру. Вам выдают целый виртуальный компьютер, на котором вы полный хозяин: можно установить любые программы и настроить всё под себя. Но и следить за ним приходится самому – или поручить это агенту. Это вариант для ИИ-агента: он подключается к серверу и сам всё устанавливает.

Что вы получите после оплаты

После оплаты провайдер присылает письмо с доступами. Обычно это:

• Логин и пароль от панели управления – вход на сайт провайдера, где вы оплачиваете услуги, видите свои сервисы и настраиваете их.
• Для хостинга – доступ к панели хостинга (иногда это та же панель) и данные для загрузки файлов (FTP).
• Для VPS – IP-адрес сервера (адрес из цифр, например 203.0.113.10), логин (часто root – главный администратор) и пароль. Подключение к серверу идёт по протоколу SSH – это защищённый канал, через который на сервер отправляют команды.

Пароли от сервера и панели храните в менеджере паролей и не отправляйте нейросети в чат. Для агента есть способ безопаснее – ключ доступа, о нём в варианте Б.

И последнее: домен нужно «направить» на хостинг или сервер. В панели регистратора домена есть раздел DNS – в нём указывается IP-адрес, куда идти посетителям (запись типа A). Если домен и хостинг куплены у одного провайдера, это часто происходит автоматически.

Вариант А: сайт через обычный чат

Шаг 1. Выберите нейросеть

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

• Claude – создание файлов с выполнением кода доступно и на бесплатном тарифе: можно попросить собрать сайт и упаковать его в ZIP-архив для скачивания.
• ChatGPT – тоже собирает сайт в ZIP-архив на бесплатном тарифе, но у работы с файлами есть лимиты.
• DeepSeek, Qwen, Gemini – код хорошего качества, но архив не собирают: показывают код текстом в чате. Файлы придётся создать вручную (шаг 3) – и это не страшно: спросите ту же нейросеть, как создать файл и вставить в него код, и она объяснит по шагам.

Шаг 2. Отправьте бриф и попросите сайт

Вставьте бриф из раздела «Подготовка» и добавьте:

Сделай сайт на чистом HTML и CSS без сборщиков и фреймворков.
Структура: index.html и отдельные файлы страниц, общий style.css,
картинки в папке images. Собери всё в ZIP-архив для скачивания.
Если не можешь создать архив – выведи каждый файл отдельно
с его названием.

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

Шаг 3. Если архива нет – соберите файлы сами

1. Создайте на компьютере папку для сайта, например moy-sayt.
2. Откройте Блокнот (на Mac – TextEdit в режиме простого текста), вставьте код первого файла из чата.
3. Сохраните с точным именем из чата, например index.html, тип файла – «Все файлы», кодировка – UTF-8. Так же сохраните остальные файлы.
4. Положите картинки в папку images с теми именами, которые указаны в коде.
5. Чтобы получить архив: правый клик по папке → «Сжать в ZIP-файл» (Windows) или «Сжать» (Mac).

Шаг 4. Проверьте сайт у себя

Откройте index.html двойным щелчком – сайт откроется в браузере прямо с компьютера. Пройдите по всем ссылкам и уменьшите окно браузера до ширины телефона. Нашли ошибку – опишите её в чате и замените исправленный файл.

Шаг 5. Загрузите на хостинг

1. Войдите в панель хостинга и откройте файловый менеджер.
2. Найдите папку сайта – обычно она называется public_html, www или по имени домена.
3. Загрузите ZIP-архив и распакуйте его в этой папке. Важно, чтобы index.html оказался прямо в ней, а не во вложенной папке. Можно обойтись и без архива: создайте в файловом менеджере нужные папки (например, images) и загрузите файлы по одному в те же места, где они лежат у вас на компьютере.
4. В панели привяжите домен и включите бесплатный SSL-сертификат (у хостинга всегда есть инструкции, как это сделать).
5. Откройте свой домен в браузере. Если видна старая страница-заглушка, подождите: настройки домена применяются до суток.

Если на каком-то шаге непонятно, куда нажимать, спросите ту же нейросеть: «Как загрузить файлы сайта на хостинг [название хостинга]?». Любая из них объяснит по шагам, а по скриншоту панели подскажет, что именно выбрать.

Вариант Б: сайт с ИИ-агентом Claude

ИИ-агент отличается от чата тем, что он не только пишет код, но и сам действует: создаёт и меняет файлы у вас на компьютере, запускает программы, открывает сайт для проверки, подключается к серверу и выкладывает обновления. Вы ставите задачи обычным текстом и проверяете результат. Покажем на примере Claude Code – агента от создателей Claude.

Шаг 1. Установите приложение и откройте Code

Claude Code работает в приложении Claude для компьютера (Windows, Mac) – во вкладке Code. Нужна платная подписка Claude, начиная с Pro. Терминал и командная строка не нужны: вы общаетесь с агентом в привычном окне чата.

Шаг 2. Создайте проект

Создайте на компьютере пустую папку, например moy-sayt, например на Рабочем столе или в «Документах». Это и есть «рабочая папка»: агент видит и меняет только то, что лежит внутри неё, и все файлы сайта появятся именно там. К остальным вашим файлам он доступа не получит.

Как выбрать эту папку в Claude:

1. Откройте приложение Claude и перейдите на вкладку Code вверху.
2. Выберите Local – агент будет работать с файлами на вашем компьютере.
3. Нажмите Select folder и укажите папку moy-sayt.
4. В поле внизу напишите первую задачу – о ней в следующем шаге.

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

Шаг 3. Дайте первую задачу

Вставьте подготовленный ранее бриф и ниже добавьте текст:

Сделай сайт на Astro. Установи всё, что для этого нужно.
Сначала покажи мне план структуры, потом сделай главную страницу
и запусти просмотр, чтобы я посмотрел сайт в браузере.

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

Шаг 4. Подключите сервер

Для агента удобнее всего VPS: агент подключается к нему по SSH и настраивает всё сам. Порядок такой:

1. Арендуйте VPS с операционной системой Ubuntu – это самая распространённая и понятная нейросетям система. Выбрать её можно на этапе создания сервера (чаще всего она выбрана по умолчанию).
2. Напишите агенту: «Вот IP-адрес моего сервера. Создай ключ доступа и помоги подключиться к серверу». Ключ – это электронный пропуск вместо пароля: он хранится у вас на компьютере, и его нельзя подобрать.
3. Агент подскажет, как один раз ввести пароль из письма провайдера, чтобы установить ключ. Пароль вводите сами, в окне, которое покажет агент, а не в чат.
4. Направьте домен на IP-адрес сервера (запись A в DNS у регистратора). Агент подскажет, что вписать.
5. Напишите: «Настрой на сервере веб-сервер для моего сайта с HTTPS и выложи сайт. Сделай так, чтобы следующие выкладки были одной командой». Агент установит веб-сервер (например, Caddy – он сам получает и продлевает сертификат безопасности), загрузит сайт и подготовит скрипт выкладки.

После этого публикация любого изменения – это сообщение агенту «выкладывай». Он соберёт сайт, загрузит новые файлы на сервер и проверит, что сайт открывается.

Шаг 5. Как давать команды агенту

• Одна задача – одно сообщение. «Добавь страницу “Цены” с таблицей из трёх тарифов» лучше, чем десять правок в одном сообщении.
• Описывайте результат, а не код. Не «поменяй padding», а «между блоками слишком много пустого места на телефоне».
• Сначала посмотреть, потом выкладывать. Просите показать изменения в браузере у себя до отправки на сервер.
• Прикладывайте скриншоты. Картинка с обведённой проблемой объясняет быстрее абзаца текста.
• Попросите агента объяснять. «Объясни простыми словами, что ты сделал» – так вы постепенно разберётесь в своём сайте.

Как вносить изменения потом

Через чат

Скачайте с хостинга актуальный файл, загрузите его в чат, опишите правку, сохраните ответ и загрузите файл обратно на хостинг. Главное – всегда отдавать нейросети последнюю версию, а не ту, что осталась в старом диалоге.

Через агента

Откройте папку проекта в Code и напишите, что нужно изменить: «Поменяй цену на услугу X на 15 000 руб.», «Добавь статью в блог, текст ниже», «Сделай страницу акции до конца месяца». Дальше:

1. Агент вносит правку и показывает результат в браузере у вас на компьютере.
2. Вы проверяете – на компьютере и в режиме телефона.
3. Пишете «выкладывай» – агент обновляет сайт на сервере и проверяет, что всё открывается.

Несколько правил, чтобы ничего не сломать:

• Начинайте новую сессию для новой большой задачи – так агент не путается в старом контексте.
• Когда договорились о новом правиле («цены пишем с пробелом: 15 000 руб.»), попросите агента запомнить это. Он запишет правило в свои инструкции и будет соблюдать его и в следующих сессиях.
• Попросите агента хранить копию предыдущей версии сайта на сервере, чтобы при ошибке вернуть её одной командой.

Формы заявок и 152-ФЗ

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

• На вашем сервере. Агент может написать небольшой обработчик, который пересылает заявки в Telegram или на почту. Данные никуда, кроме вашего сервера, не уходят.
• Сторонний сервис форм. Проще подключить, но заявки проходят через чужой сервер. Для 152-ФЗ важно, где он находится.
• Без формы: кнопки «Написать в Telegram» и кликабельный телефон. Самый простой вариант для визитки.

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

• политика обработки персональных данных на отдельной странице;
• согласие на обработку – отдельная галочка у формы, не отмеченная заранее;
• уведомление о cookie, если на сайте стоит Яндекс Метрика или другая аналитика;
• хранение данных в России – заявки граждан РФ не должны попадать на зарубежный сервер;
• уведомление в Роскомнадзор о начале обработки персональных данных.

Тексты документов нейросеть может подготовить по образцу, но проверить их лучше у юриста – штрафы за нарушения ощутимые. Если не уверены, что всё сделано правильно, можно проверить сайт по 152-ФЗ у специалистов.

Базовое SEO: чтобы сайт нашли

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

Задача агенту может звучать так:

Проверь сайт на базовое SEO: title и description на всех страницах,
один H1, sitemap.xml, robots.txt, микроразметка Organization,
BreadcrumbList и FAQPage, страница 404. Подключи Яндекс Метрику
(номер счётчика: ...) с целью на отправку формы. Настрой IndexNow
при выкладке. Сначала покажи список того, что нашёл.

Регистрацию в Вебмастере, Search Console и Яндекс Бизнесе делаете вы сами: там нужен вход в ваш аккаунт. Агент подскажет, где взять код подтверждения сайта и куда его вставить.

Отдельная тема – чтобы сайт попадал в ответы Алисы, ChatGPT и других нейросетей. Об этом – в статье «GEO: как попасть в ответы нейросетей».

Чек-лист перед запуском

• Сайт открывается по домену с https и без предупреждений браузера.
• Адрес с www и без www ведёт на одну версию сайта.
• Все страницы и ссылки работают, нет «заглушек» и текста-рыбы.
• Сайт удобно читать на телефоне, ничего не уезжает вбок.
• Телефон кликабельный, ссылка на Telegram открывается.
• Форма заявки отправляется, заявка дошла до вас.
• У формы есть галочка согласия, на сайте есть политика и уведомление о cookie.
• У каждой страницы свой title и description.
• Есть sitemap.xml и robots.txt, в robots.txt нет запрета на индексацию.
• Есть страница 404.
• Метрика стоит, цель на заявку срабатывает.
• Сайт добавлен в Яндекс Вебмастер и Google Search Console, карта сайта отправлена.
• Картинки сжаты, страница грузится быстро.
• Есть иконка сайта (favicon) и картинка для превью в мессенджерах.
• Доступы к домену, хостингу и серверу записаны в менеджере паролей.

Частые ошибки

• Ждать готовый сайт с одного сообщения. Нейросеть сделает что-то среднее. Хороший сайт получается из десятков точных правок.
• Работать со старой версией файла. В чате легко взять код из прошлого диалога и затереть свежие правки. Всегда отдавайте нейросети актуальный файл.
• Выкладывать без проверки. Сначала посмотрите изменения у себя, потом на сервер.
• Забыть про закон. Форма без согласия и политики – прямой путь к штрафу.
• Запустить и забыть про поиск. Без Яндекс Вебмастера, Google Search Console, файла robots.txt и sitemap.xml новый сайт может годами не появляться в выдаче поисковых систем.

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