Как создать сайт с нейросетью с нуля в 2026: бесплатно и без кода

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

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

Коротко: словарик

• Лендинг - одностраничный сайт под одну задачу: рассказать об услуге и получить заявку. Самый частый первый сайт.
• HTML - язык разметки страницы. Нейросеть пишет его за вас, вам его читать не нужно, достаточно скачать готовый файл.
• Конструктор с ИИ - сервис, где вы описываете сайт словами, а он собирает страницы визуально (Wix, Framer, Durable).
• Хостинг - место, где сайт лежит и откуда открывается по ссылке. Для статичного лендинга есть бесплатные варианты.
• Деплой (публикация) - момент, когда файл превращается в живую ссылку в интернете.
• Домен - красивый адрес сайта, который человек набирает в браузере (например, vashe-imya.ru). Покупается отдельно, стоит от пары сотен рублей в год.

Какой путь выбрать: три способа за минуту

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

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

Способ 1: чат-генерация - просим Claude или ChatGPT собрать лендинг

Это самый быстрый путь. Вы открываете обычный чат, описываете сайт, получаете готовый HTML-файл. Никакого конструктора, никакой регистрации на стороннем сервисе, файл сразу ваш.

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

Пошагово:

1. Открываете чат (Claude или ChatGPT).
2. Вставляете развёрнутый промпт лендинга (готовый - ниже) и подставляете свои данные: услугу, цену, контакты.
3. Нейросеть выдаёт код. В Claude нажимаете на артефакт и сразу видите превью страницы. В ChatGPT просите показать превью или скопировать код.
4. Правите текст простыми словами: «сделай заголовок короче», «добавь блок с отзывами», «поменяй цвет кнопки на зелёный».
5. Просите отдать финальный файл: «дай мне готовый index.html одним файлом, чтобы я скачал».
6. Сохраняете файл index.html на компьютер.

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

Развёрнутый промпт лендинга (копируйте и подставляйте своё)

Вот тот самый промпт, который стоит скопировать. Он написан так, чтобы нейросеть собрала аккуратную рабочую страницу и ничего не выдумывала за вас. Меняете только текст в квадратных скобках. Промпты кладём в отдельный блок, чтобы копировать одной кнопкой.

Ты - веб-дизайнер и верстальщик. Собери одностраничный лендинг
одним файлом index.html. Весь CSS - внутри файла в теге <style>,
без внешних библиотек и без JavaScript, если он не нужен.
 
О чём лендинг:
- Услуга: [например, консультации по подбору штор на заказ]
- Для кого: [например, владельцы квартир после ремонта]
- Главная выгода клиента: [например, шторы в тон интерьеру за 3 дня]
- Цена или вилка: [например, замер бесплатно, пошив от 4000 руб]
- Обо мне: [1-2 предложения: кто я, сколько лет в деле]
- Контакт для заявки: [телефон / Telegram / ссылка на форму]
 
Структура страницы сверху вниз:
1. Экран-обложка: крупный заголовок с главной выгодой,
   подзаголовок одним предложением, кнопка «Оставить заявку».
2. Блок «Что вы получите»: 3 пункта с короткими выгодами.
3. Блок «Как это работает»: 3-4 шага процесса.
4. Блок «Цена»: понятная вилка, без мелкого шрифта.
5. Блок «Обо мне»: короткий абзац доверия.
6. Финальный блок с кнопкой заявки и контактом.
7. Подвал: имя, город, контакт.
 
Требования к дизайну:
- Адаптивно под телефон и десктоп.
- Один акцентный цвет [например, тёплый жёлтый], остальное
  спокойное: белый фон, тёмно-серый текст.
- Крупные отступы, воздух, крупные кнопки.
- Шрифт системный (system-ui), читаемый.
- Тон текста живой, на «ты» с читателем, без канцелярита
  и без штампов вроде «команда профессионалов».
 
Отдай готовый код одним файлом. Не объясняй код, просто дай его.

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

Как довести страницу правками в чате

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

Держите под рукой короткий список рабочих формулировок, они закрывают 90% случаев:

Заголовок в две строки максимум, сделай его короче и конкретнее.
Кнопку крупнее и ярче, цвет [жёлтый], текст на кнопке «Оставить заявку».
Добавь блок «Частые вопросы» на 4 вопроса с ответами.
Между блоками мало воздуха, увеличь вертикальные отступы.
Проверь, что вёрстка адаптивна: на телефоне всё в одну колонку, кнопки на всю ширину.
Убери воду из текста, оставь суть, тон живой, на «ты».

Правьте по одному блоку за раз. Свалите десять правок в одно сообщение - нейросеть половину потеряет или переделает лишнее. Одна мысль на одну итерацию, так быстрее и предсказуемее.

Способ 2: онлайн-конструкторы с ИИ

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

По данным обзоров на июль 2026, живые и рабочие бесплатные варианты такие:

• Framer AI - самый красивый результат из коробки, генерирует по-настоящему аккуратный дизайн. Бесплатный план есть, но с поддоменом framer.website и брендингом Framer.
• Wix (с ИИ-генератором) - вы отвечаете на несколько вопросов, он собирает многостраничный сайт. Хорош для базовой визитки. Бесплатный план с поддоменом и рекламой Wix.
• Durable - собирает сайт для сферы услуг буквально за полминуты. Удобно, если нужна страничка вот прямо сейчас и не жалко шаблонности.
• Hostinger с ИИ-билдером - платный, примерно от 3 евро в месяц, но сразу с хостингом, доменом и SSL в комплекте.

Главный подвох конструкторов честно назвать сразу: на бесплатном тарифе сайт живёт на их поддомене (типа vashe-imya.framer.website), с их брендингом, а нередко и с рекламой. Свой красивый домен и снятие брендинга - это уже платный тариф. И перенести такой сайт наружу, забрать его как файлы, обычно нельзя: он привязан к сервису.

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

Способ 3: Claude Code для многостраничников

Третий путь - для тех, кому одной страницы мало. Например, нужен сайт из нескольких разделов: главная, услуги, о себе, блог. И вы планируете сайт часто дописывать.

Claude Code - это инструмент Anthropic, который работает в терминале и собирает целый проект: папку со страницами, стилями, картинками. Чат отдаёт один файл, Claude Code держит весь сайт. Вы описываете задачу словами, он создаёт и правит файлы сам.

Разница с чатом простая. Чат отдаёт вам один файл и на этом всё. Claude Code держит весь проект, помнит структуру, и когда вы говорите «добавь ещё одну страницу услуги в том же стиле» - он делает это так, чтобы всё сочеталось.

Порог входа честно не нулевой: придётся освоить терминал, то самое чёрное окно с командами. Это непривычно для нетехнаря, но осваивается за пару вечеров. Подробный разбор, что это и сколько стоит, - в гайде про Claude Code для нетехнарей.

Кому стоит идти этим путём:

• Сайт из 3+ страниц, который вы будете развивать.
• Хочется полный контроль над файлами и возможность выложить бесплатно.
• Готовы потратить вечер на освоение терминала.

Кому не стоит: если нужна одна страница на один раз - это перебор, берите способ 1.

Есть одна вещь, которую делают до старта проекта и которая экономит потом часы. Прежде чем просить Claude Code собирать страницы, заведите понятную структуру папок и файл-инструкцию CLAUDE.md, где записано, что за сайт, в каком стиле и по каким правилам. Без этого модель на большом проекте начинает путаться: просишь поправить кнопку, а она переписывает половину сайта. Как собрать такой каркас за пять минут, разобрано в гайде про каркас проекта для вайбкодинга.

Кстати, тот же подход годится не только для сайтов. Через Claude Code люди без программиста собирают ботов в Телеграме, Telegram Mini App и калькуляторы для сайта. Логика та же: описываете словами, инструмент собирает.

Чат, конструктор или Claude Code: что выбрать под задачу

Чтобы не гадать, разложим три пути по важным для новичка признакам. Смотрите на строку «Кому подходит», она решает.

Вывод короткий. Первый сайт в жизни - берите чат. Нужна красивая визитка и совсем не хочется трогать файлы - конструктор. Планируете развивать сайт и хотите им владеть - Claude Code, но заложите вечер на терминал.

Как сделать, чтобы сайт выглядел прилично

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

Что реально влияет на вид страницы и что просить у нейросети:

• Один акцентный цвет, остальное спокойное. Белый или очень светлый фон, тёмно-серый текст, один яркий цвет на кнопки и важные акценты. Пёстрая страница из пяти цветов всегда выглядит любительски.
• Воздух между блоками. Просите крупные вертикальные отступы. Тесная страница читается тяжело, свободная - дорого.
• Крупные читаемые кнопки. Кнопка заявки должна бросаться в глаза и быть большой, особенно на телефоне.
• Один системный шрифт. system-ui выглядит аккуратно и грузится мгновенно. Экзотические шрифты чаще портят, чем украшают.

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

Сквозной пример: лендинг услуги за вечер, от промпта до ссылки

Соберём всё вместе. Задача: у мастера маникюра нет сайта, есть только Instagram (Instagram принадлежит Meta, признанной в РФ экстремистской и запрещённой). Нужен лендинг, чтобы отправлять ссылку новым клиентам. Идём по способу 1.

Шаг 1. Формулируем оффер (10 минут). До нейросети решаем главное: что за услуга, для кого, чем вы лучше. Мастер пишет: маникюр на дому в своём районе, для тех, кому лень ехать в салон, выезд в течение дня, от 1500 рублей. Это и есть основа промпта.

Шаг 2. Вставляем промпт (5 минут). Берём готовый промпт лендинга выше, подставляем в квадратные скобки данные мастера. Отправляем в Claude.

Шаг 3. Смотрим превью и правим (15 минут). Claude выдаёт страницу. В превью видно: заголовок длинноват, кнопка бледная. Пишем: «сделай заголовок в две строки максимум, кнопку - крупнее и ярче жёлтым». Он правит. Просим добавить блок «частые вопросы»: «сколько длится», «какие материалы». Он добавляет.

Шаг 4. Забираем файл (2 минуты). Пишем: «дай финальный index.html одним файлом». Скачиваем, кладём на рабочий стол. Открываем двойным кликом - страница показывается в браузере, всё на месте.

Шаг 5. Публикуем (15 минут). Файл на компьютере - это ещё не сайт в интернете, ссылку никому не отправить. Нужен хостинг. Самый быстрый бесплатный способ без всякого кода - перетащить папку с файлом в Netlify Drop прямо в браузере. Через минуту у вас живая ссылка вида nazvanie.netlify.app, которую можно кинуть клиенту.

Весь процесс - примерно вечер, и большая часть его ушла на текст об услуге, техника заняла минуты. Как именно выложить сайт бесплатно (все четыре способа с таблицей лимитов), разобрано отдельно в гайде про публикацию сайта.

Больше примеров: под какую задачу какой сайт

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

• Эксперт с консультациями. Психолог, репетитор, коуч. Лендинг с блоком «как проходит консультация», ценой за сессию и кнопкой записи в Telegram. Собирается способом 1 за вечер.
• Локальная услуга на выезд. Клининг, ремонт техники, мастер на час. Упор на район работы и скорость выезда, крупный телефон вверху страницы. Тоже чат-генерация.
• Небольшой магазин ручной работы. Свечи, украшения, торты на заказ. Здесь уже удобнее многостраничник: главная плюс каталог по категориям. Это способ 3, Claude Code, или конструктор, если не хочется файлов.
• Личная страница-визитка. Портфолио, ссылки на соцсети, форма связи. Если важен красивый вид и не нужен свой файл - Framer через способ 2. Если хочется владеть - способ 1.

Логика выбора всегда одна. Одна страница на один раз - чат. Красиво и без возни с файлами - конструктор. Несколько разделов и планы развивать - Claude Code.

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

Пара граблей, на которые наступают почти все.

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

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

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

Путают файл и сайт. Файл на компьютере ещё не сайт. Пока вы не выложили его на хостинг, ссылки нет. Это отдельный шаг, не пропускайте его.

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

Что делать, если нейросеть выдала кривой сайт

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

• Съехала верстка - «блоки наезжают друг на друга, поправь отступы и проверь на телефоне».
• Некрасивый шрифт или цвета - «сделай спокойнее: белый фон, тёмно-серый текст, один жёлтый акцент».
• Слишком длинно - «убери воду, оставь суть, тексты короче в два раза».
• Не скачивается одним файлом - «собери весь CSS внутрь index.html, без внешних файлов, отдай один файл».
• Кнопка заявки никуда не ведёт - «сделай кнопку ссылкой на мой Telegram [ссылка], чтобы по клику открывался чат».
• Страница белая и пустая при открытии файла - обычно нейросеть подключила внешнюю библиотеку. Просите: «убери все внешние подключения, весь стиль внутри файла».

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

Как проверить, что сайт готов и работает

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

• Откройте с чужого телефона. Возьмите телефон друга или режим инкогнито, свой компьютер тут плохой судья. Так видно, как страницу увидит реальный человек.
• Нажмите кнопку заявки. Она должна вести куда надо: открывать Telegram, набирать номер, показывать форму. Мёртвая кнопка - самая обидная ошибка.
• Проверьте текст на опечатки и цену. Нейросеть иногда меняет цифры при правках. Убедитесь, что цена и контакт верные.
• Посмотрите на телефоне и на компьютере. Всё должно читаться в обоих случаях: на телефоне в одну колонку, на компьютере по центру с полями.
• Дайте ссылку одному живому человеку. Попросите открыть и сказать, понятно ли, что вы предлагаете и как заказать. Свежий взгляд ловит то, что вы уже не видите.

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

Свой домен: когда и зачем

Бесплатная ссылка вида nazvanie.netlify.app работает и её не стыдно отправить клиенту. Но со временем захочется красивый адрес vashe-imya.ru - его проще запомнить и он выглядит серьёзнее в визитке или рекламе.

Домен покупается отдельно и стоит недорого, примерно от 200 рублей в год за зону .ru. Это единственная статья расходов во всей затее, и то по желанию: на старте спокойно живёте на бесплатном адресе. Как купить домен и привязать его к сайту по шагам, без кода, разобрано в гайде про покупку домена в Timeweb.

Чек-лист: что у вас теперь есть

Пройдитесь по списку. Если всё отмечено - сайт готов.

• Сформулирован понятный оффер: что за услуга, для кого, чем вы лучше.
• Выбран путь: чат-генерация, конструктор или Claude Code.
• Собрана страница, текст на «ты», без штампов.
• Проверено превью на десктопе и на телефоне.
• Скачан финальный файл (для способа 1) или сайт опубликован в конструкторе.
• Есть живая ссылка в интернете, которую можно отправить.
• Ссылка проверена: открывается с чужого телефона, кнопка заявки работает.
• Решено, нужен ли свой домен, и если да - куплен и привязан.

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