Раньше для создания сайта нужен был разработчик, дизайнер и копирайтер, теперь достаточно текстового промпта. Нейросети могут сгенерировать структуру, тексты, изображения и верстку за считанные минуты. В этом гайде разберем, какие задачи ИИ берет на себя, и покажем, как сгенерировать сайт в сервисе Gamma.
Как нейросети помогают создать сайт
ИИ-конструкторы могут закрыть большую часть работы по созданию сайта. С помощью таких сервисов можно:
- выстроить архитектуру страниц: шапку, лид-блок, преимущества, отзывы, CTA, футер;
- написать черновики текстов, например, заголовки, описания услуг, призывы к действию;
- подобрать цветовую палитру, типографику и расположение блоков;
- сгенерировать изображения или подобрать релевантные стоковые фото;
- адаптировать сайт под мобильные, планшеты и десктоп;
- опубликовать сайт на бесплатном хостинге и поддомене в один клик.
Нейросети позволяют ускорить разработку и собрать рабочую версию сайта-визитки, лендинга без разработчика и дизайнера. Но сгенерированный вариант все равно нужно редактировать и дорабатывать, так как маловероятно, что с первого раза получится нужный результат.
Как сгенерировать сайт в Gamma
Gamma — ИИ-платформа для создания презентаций, сайтов и документов. Бесплатный тариф включает хостинг на поддомене gamma.site и 400 кредитов при регистрации — этого хватает, чтобы собрать полноценный сайт с нуля. Платные тарифы стартуют от $9 в месяц по подписке Plus с 1000 кредитов для генерации.
Чтобы воспользоваться сервисом, можно зарегистрироваться через почту или Google-аккаунт. После входа Gamma предложит четыре режима создания сайта:
- Сгенерировать — создать по текстовому промпту с нуля;
- Вставить текст — добавить готовый текст, который ИИ оформит в виде сайта;
- Создать сайт на основе шаблонов сервиса, с учетом дизайна и структуры макетов;
- Импортировать — загрузить файл или URL, Gamma перенесет контент оттуда на новый сайт.
Для большинства задач подходит функция «Сгенерировать». Сервис напишет черновик самостоятельно на основе описания бизнеса в промпте.
Чтобы получить нужный результат, в промпте стоит указать:
- нишу и название бизнеса или проекта;
- цель сайта: продать услугу, собрать заявки или рассказать о себе;
- целевую аудиторию;
- желаемую структуру сайта;
- тон коммуникации: дружелюбный, экспертный, лаконичный.
Пример промпта:
Сайт для агентства по организации мероприятий. Цель — привлечь корпоративных клиентов и собрать заявки на расчёт стоимости. Аудитория — HR-менеджеры и руководители компаний, которые ищут подрядчика для корпоративов, конференций и тимбилдингов. Разделы: главная с оффером, услуги (корпоративы, конференции, тимбилдинги), портфолио мероприятий, преимущества компании, форма заявки с запросом на расчет. Тон — профессиональный, без излишней официальности.
В настройках можно указать количество слайдов на веб-странице и выбрать язык текста.
Сервис создаст примерную структуру сайта в виде блоков, которые можно корректировать по наполнению и менять местами.
Нейросети для создания игр Ниже в настройках можно указать особенности контента сайта. Например, сделать упор на визуальную часть с минимальным текстовым наполнением. По умолчанию стоит формат «краткий», поэтому визуал и текст распределяются равномерно по веб-странице.
В следующем блоке параметров можно выбрать тему оформления, для этого нажать на кнопку с тремя точками. Откроется поисковик, в котором по ключевым словам отображаются подходящие стили оформления сайта, например, «минимализм» или «базовый».
В следующем блоке можно выбрать источник изображений для сайта:
Стоковые фотографии. Поиск бесплатных фото и фонов высокого разрешения. Подходит для большинства бизнес-сайтов, быстро и бесплатно.
Веб-изображения. Сервис делает поиск картинок в интернете. Удобно, если нужно что-то конкретное, но нужно проверить права на использование изображений, не все можно публиковать.
Изображения ИИ. Генерация уникальных картинок и графики с помощью искусственного интеллекта. Режим выбран по умолчанию, создает оригинальный визуал, но результат бывает непредсказуемым, особенно с людьми.
Иллюстрации. Поиск изображений через Pictographic — подходит для образовательных проектов, стартапов и IT-продуктов, где иллюстративный стиль уместнее фотографий.
Анимированные GIF-файлы. Сервис делает поиск GIF через Giphy. Для большинства бизнес-сайтов не подходит, но можно использовать для неформальных или креативных проектов.
Замещающие изображения. Платформа оставляет вместо изображений пустые заполнители — серые прямоугольники. Они помогают оценить примерное наполнение слайда, а потом на их место можно загрузить собственные фотографии.
Акцентные изображения. Gamma создает декоративные элементы из выбранной темы оформления абстракциями, паттернами или фоновой графикой.
Можно выбрать параметр «Не добавлять изображения», тогда сайт будет полностью без визуала.
Если пользователь выбрал «Изображения ИИ», то ниже можно будет выбрать модель нейросети для генерации: Flux 2 Fast, Qwen Image Fast, Nano Banana 2 Mini, GPT Image Mini и другие.
После нажатия кнопки «Сгенерировать» откроется новая веб-страница. В течение пяти минут блоки заполнятся текстом и изображениями.
Как и в обычном конструкторе сайтов, здесь можно переставить блоки, поменять их структуру, скорректировать текст и визуал, добавить формы и кнопки. Изменить содержимое блоков можно с помощью ИИ-агента, для этого нужно кликнуть по блоку и выбрать «Редактировать с Agent». Откроется чат с нейросетью, которая по запросу отредактирует текст или изображение.
С помощью панели справа можно встроить приложения или веб-страницы, например, вставить интерактивные прототипы Figma или добавить документы, таблицы из Google Drive.
Чтобы посмотреть, как сайт будет выглядеть после публикации, нужно нажать на «Опубликовать» и выбрать «Предварительный просмотр».
После корректировок можно опубликовать веб-страницу, нажав на кнопку «Опубликовать» в верхнем правом углу. Ссылка на сайт будет содержать домен gamma.site. Чтобы подключить собственный домен, нужно использовать платный тариф.
Как создать сайт с помощью вайбкодинга
Если хочется самостоятельно подобрать структуру, содержание и дизайн блоков, можно использовать Cursor или Codex — это бесплатные редакторы кода со встроенным ИИ-агентом. Писать код не придется: всё общение будет происходить в текстовом чате, нейросеть сама сгенерирует код под задачу.
В Cursor можно создать структуру сайта, тексты, но на бесплатном тарифе количество запросов ограничено. Если потратить лимиты на обсуждение прототипа и контента, их может не хватить на сборку сайта. Поэтому выгоднее заранее сделать всё в бесплатных нейросетях вроде ChatGPT или Claude, а в Cursor добавить уже готовые материалы.
Что нужно сделать:
Придумать прототип. Необходимо определиться со структурой сайта: какие блоки будут на странице и в каком порядке. Можно самостоятельно записать список блоков в заметках или попросить об этом нейросеть, например, ChatGPT или Claude. Вариант запроса:
Придумай структуру лендинга для агентства по организации мероприятий. Цель — привлечь корпоративных клиентов и собрать заявки на расчёт стоимости. Аудитория — HR-менеджеры и руководители компаний, которые ищут подрядчика для корпоративов, конференций и тимбилдингов.
Нейросеть составит список блоков, в которые входят шапка с меню, главный экран с заголовком и кнопкой, блок услуг, портфолио, преимущества, форма заявки и футер. Эту структуру нужно сохранить в виде текстового файла, например, Прототип.txt.
Написать тексты. Под каждый блок прототипа нужны тексты: заголовки, описания услуг, призывы к действию. Их тоже можно написать самостоятельно или сгенерировать в нейросети. Для этого ей нужно отправить прототип с просьбой написать контент для каждого раздела. Результат можно сохранить в файл Тексты.txt.
Сгенерировать картинки. Если собственных фотографий нет, изображения для сайта можно найти на бесплатных стоках, например, Unsplash, или сгенерировать с помощью нейросети. Из бесплатных и доступных в России подойдут Kandinsky и Шедеврум, из зарубежных — Midjourney.
Для примера с агентством по организации мероприятий лучше всего использовать фотографии корпоративов, конференций, тимбилдингов. Все эти изображения нужно сохранить в отдельную подпапку «Изображения».
Сложить всё в одну папку. Когда прототип, тексты и картинки будут готовы, нужно собрать все материалы в одном месте. Внутри папки должны лежать файлы Прототип.txt, Тексты.txt и подпапка «Изображения» со всем визуалом. Отсюда Cursor будет собирать содержимое для создания сайта.
Установить Cursor и собрать сайт. Для этого нужно зайти на официальный сайт, скачать программу и установить ее на компьютер. При первом запуске Cursor предложит зарегистрироваться, можно сделать это через Google-аккаунт. Платить ничего не нужно, лимитов на бесплатном тарифе хватит, чтобы собрать сайт с нуля.
Лучшие промпты для кода и программистов После установки Cursor нужно открыть в программе подготовленную папку через меню File → Open Folder.
Слева в программе появятся файлы, которые будут использоваться при создании сайта. Справа будет находиться чат с нейросетью. Если он не появится автоматически, его можно вызвать сочетанием клавиш Cmd+I на Mac или Ctrl+I на Windows. В чат нужно добавить промпт:
В этой папке лежат все материалы для сайта. В prototype.txt описана структура, в texts.txt — тексты для каждого блока, в папке images — картинки. Собери из этого одностраничный лендинг в файле index.html. Сделай адаптивную верстку, современный минималистичный дизайн. Только HTML, CSS и JavaScript, без Python.
В процессе генерации нейросеть будет запрашивать разрешения для чтения списка файлов, нужно выбирать команду «Run». Через несколько минут сервис сообщит о готовности проекта и создаст файл index.html.
Чтобы увидеть результат, достаточно найти этот файл в папке проекта и открыть в браузере.
Доработка. Все правки можно внести в том же чате Cursor: написать, что не нравится, и нейросеть сама найдет нужные строки в коде и исправит их. Например, попросить сделать кнопку крупнее, поменять фон на темный или переписать текстовый блок. После каждой правки нужно обновить страницу в браузере, чтобы увидеть результат.
Публикация. Пока файлы хранятся на компьютере, сайт виден только владельцу. Чтобы другие люди могли перейти по ссылке на сайте, нужно загрузить файлы на хостинг.
Для простого HTML-сайта подойдет GitHub Pages. Нужно зарегистрироваться на сайте GitHub, создать специальную папку — репозиторий, загрузить туда html-файл. Затем активировать публикацию в разделе Pages.
Сайт станет доступен через несколько минут по бесплатной ссылке формата «логин.github.io/название_проекта». Такой способ публикации подойдет для лендинга, визитки или портфолио.
Для более сложных сайтов можно воспользоваться российскими хостингами Timeweb или Beget. Долго разбираться не нужно: достаточно спросить у нейросети прямо в Cursor, как опубликовать сайт на выбранном хостинге, и она пошагово всё объяснит.
4 ошибки при создании сайта с помощью ИИ
Оставлять шаблонные тексты без правок. Нейросеть по умолчанию генерирует общие фразы про качественный сервис и команду профессионалов. Такие формулировки не вызывают доверия, поэтому каждый блок стоит дорабатывать вручную: добавлять факты, цифры и конкретные преимущества.
Не проверять сгенерированные изображения. ИИ-картинки могут содержать неестественные детали, например, искаженные лица. Перед публикацией каждое изображение нужно просматривать и при необходимости заменять стоковыми фото, но лучше всего — использовать собственный контент.
Перегружать сайт блоками. Gamma легко генерирует много разделов, если оставлять все, что создал ИИ — страница получится длинной и перегруженной. Лучше оставить только те блоки, которые реально нужны пользователю для принятия решения.
Не проверять мобильную версию. Gamma адаптирует сайт автоматически, но верстка на смартфоне может съехать, особенно в блоках с изображениями. Перед публикацией стоит переключиться в режим мобильного предпросмотра и пройтись по каждому блоку.
Обсуждаем новости, делимся кейсами подписчиков, полезными находками и промптами.