Как создать сайт с помощью ИИ: пошагово, с промтом и готовой страницей
Чтобы создать сайт с ИИ, не нужно ни шаблона, ни кода: опишите страницу словами, получите первую версию, поправьте её фразами вроде «сделай шапку темнее» и поделитесь ссылкой. Ниже — пять шагов, шаблон промта, который даёт страницу под ваше дело, а не безликую заготовку, и честно о том, что нейросеть сделает, а что нет.
Пять шагов: от описания до ссылки
- Решите, что это за страница. Лендинг под одну услугу, визитка, портфолио, калькулятор. Одна страница — одна цель: «записаться», «позвонить», «посчитать стоимость».
- Опишите её в промте. Что за дело, для кого, какие блоки и какой стиль. Шаблон — ниже.
- Посмотрите первую версию. Страница откроется рядом с чатом, по ней можно кликать, проверить на узком экране.
- Правьте словами. «Поменяй цвета на зелёный», «добавь блок с отзывами», «кнопка “записаться” должна открывать Telegram». Лучше собирать несколько правок в одно сообщение: страница каждый раз переписывается целиком.
- Опубликуйте. Включите публичную ссылку — и страницу можно отправить клиентам. Или скачайте HTML-файл и положите на свой хостинг.
Промт для создания сайта: шаблон
Нейросеть не знает вашего дела, и всё, чего нет в промте, она придумает сама — правдоподобные, но выдуманные цены, адреса и отзывы. Хороший промт для сайта отвечает на пять вопросов:
| Что указать | Пример | Если пропустить |
|---|---|---|
| Что за дело и где | Кофейня у метро «Чкаловская», работаем с 7:30 | Получится «Кофейня» без адреса и часов |
| Для кого | Офисные сотрудники, берут кофе с собой | Тексты будут ни о ком |
| Какие блоки | Меню с ценами, акция на завтраки, адрес с картой-ссылкой, отзывы | Нейросеть выберет блоки сама |
| Главное действие | Кнопка «Позвонить» и «Написать в Telegram» @coffee_chk | Кнопка будет вести в никуда |
| Стиль | Тёплые тона, крупные фото, без лишнего текста, под телефон | Получится средний «современный» шаблон |
Реальные данные — цены, телефон, адрес, ник в Telegram — пишите сразу: подставлять их потом дольше, чем указать в первом сообщении. Если нужны свои фотографии, приложите их; если нет — попросите нейросеть сгенерировать картинки для страницы.
Сделай лендинг кофейни «Зерно» у метро Чкаловская. Аудитория — офисные сотрудники, берут кофе с собой по пути на работу, открыты с 7:30. Блоки: первый экран с главным предложением и кнопкой «Позвонить», меню с ценами (капучино 220 ₽, флэт уайт 250 ₽, раф 280 ₽, круассан 190 ₽), акция «завтрак + кофе за 350 ₽ до 10:00», три отзыва, адрес и ссылка на Яндекс Карты, кнопка «Написать в Telegram» на @zerno_chk. Тёплые кофейные тона, сгенерируй две фотографии для страницы, всё под телефон.
Соберите свою страницу
Вставьте промт по шаблону выше — или начните с короткой фразы и уточняйте по ходу.
Как править сайт, сделанный нейросетью
Правки — обычными фразами в том же чате, и нейросеть меняет ту же страницу, а не делает новую. Работает лучше всего, когда вы говорите конкретно: не «сделай красивее», а «увеличь заголовок, убери тень у карточек, фон первого экрана — фото кофе». Если что-то сломалось — кнопка не нажимается, блок уехал, — так и напишите, что видите.
| Хотите | Напишите |
|---|---|
| Другой стиль | «Сделай в стиле минимализм: белый фон, чёрный текст, один акцентный цвет — терракотовый» |
| Новый блок | «Добавь после меню блок “Вопросы и ответы” с пятью вопросами про доставку» |
| Под телефон | «На узком экране меню в одну колонку, кнопки на всю ширину» |
| Тёмную тему | «Добавь переключатель светлой и тёмной темы в шапку» |
| Навигацию | «Сделай меню в шапке, которое прокручивает к разделам» |
Как опубликовать: ссылка или свой хостинг
Публичная ссылка. В панели страницы есть кнопка «Поделиться»: она даёт ссылку, по которой страницу видит любой, без входа в Twelver. Этого хватает, чтобы отправить лендинг клиенту, поставить ссылку в профиль или проверить идею на знакомых.
HTML-файл. Страницу можно скачать одним файлом и разместить где угодно: на своём хостинге, на GitHub Pages или Netlify (у обоих есть бесплатный тариф), — и привязать к нему свой домен. Внутри файла всё: стили, скрипты, ссылки на картинки. Скачивание файла открывается после первой покупки. Что из этого бесплатно, а что нет, — в главе «ИИ для создания сайта бесплатно».
Чего не умеет: одна страница, без сервера
Twelver собирает одну самодостаточную страницу. Своего домена и хостинга у неё нет, базы данных тоже: форма заявки сама никуда не отправит данные, а введённое посетителем пропадёт после перезагрузки. Поэтому кнопки действия делают ссылками — на телефон, Telegram, WhatsApp или почту, — а если нужна именно форма, подключают внешний сервис форм. Многостраничный сайт, магазин с корзиной и личный кабинет — задача для конструктора сайтов.
Частые ошибки
- Промт из трёх слов. «Сайт для салона красоты» даёт салон красоты вообще. Пять вопросов из шаблона — пять минут, которые экономят десяток правок.
- Правки по одной. Страница каждый раз переписывается целиком, поэтому пять мелких просьб в одном сообщении быстрее и дешевле, чем пять сообщений.
- Ожидание сайта на двадцать страниц. Если нужен каталог или блог, лучше сразу брать конструктор: одностраничник не превратится в многостраничный сайт.
- Чужие фото по ссылке. Картинка из поиска может пропасть или нарушить чьи-то права. Свои фото прикладывайте, а недостающие просите сгенерировать.
Частые вопросы
Как создать сайт с помощью ИИ?
Какой промт написать для создания сайта?
Можно ли создать сайт по описанию без программирования?
Сколько страниц может быть у сайта, сделанного ИИ?
Будет ли работать форма заявки?
Все возможности конструктора и живые примеры — на странице «Создать сайт нейросетью онлайн». Обзор книги — в оглавлении.
Попробуйте сами
Всё из этого руководства работает в Twelver
Один чат для текста, картинок, видео, музыки и озвучки — без отдельных сервисов и подписок.
Открыть чат Twelver