Как создать сайт с помощью ИИ: от первого промпта до работающего сайта

Чтобы создать сайт с помощью ИИ, запишите, для чего нужен сайт и какие страницы на нём должны быть, опишите это ИИ-конструктору сайтов или приложений в нескольких простых предложениях и дайте ему сгенерировать первую версию, которую вы увидите в живом предпросмотре. Затем поправьте тексты, проверьте сайт на телефоне, добавьте то, что нужно поисковым системам, и опубликуйте его на домене. Большинство небольших сайтов (сайт компании, портфолио, посадочная страница, простой блог) можно довести от идеи до запуска за один присест.

Какой сайт вы создаёте?

Под словом «сайт» скрываются очень разные вещи, и от выбранного типа зависит, что именно вы просите:

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

ИИ-конструкторы сайтов, шаблоны и ИИ-конструкторы приложений

Есть три распространённых пути, и каждый подходит разным людям.

• Конструкторы на шаблонах с функциями ИИ (Wix, Squarespace, Framer и подобные). Вы начинаете с готового шаблона и редактируете его визуально; ИИ помогает написать текст или предложить макет. Они хороши, если нужен проверенный дизайн, визуальный редактор и встроенные дополнения вроде блога или виджета записи.
• ИИ-конструкторы приложений (Mythex, Lovable, Bolt и другие). Вы описываете сайт в чате, ИИ пишет код с нуля и запускает его в живом предпросмотре. Они хороши, если нужно что-то под себя, если вы хотите менять сайт разговором, а не перетаскиванием блоков, или если позже собираетесь добавлять функции приложения.
• Сайты, сделанные вручную или в агентстве. По-прежнему верный выбор для крупных сайтов со сложной работой с контентом, строгой айдентикой или юридической проверкой каждой страницы.

Чтобы сравнить конкретные инструменты, см. лучшие ИИ-конструкторы сайтов.

Шаг 1. Спланируйте сайт на одной странице

Прежде чем открывать любой инструмент, ответьте на пять вопросов. Это займёт десять минут и сэкономит часы переписки с ИИ:

1. Кто посетитель и что он должен сделать? «Местные домовладельцы, которые должны позвонить за расчётом» — это план. «Все» — нет.
2. Какие есть страницы? Составьте список. Большинству небольших сайтов нужно четыре-пять.
3. Что на каждой странице? По строке-две: «Услуги: три услуги с кратким описанием и ценой от».
4. Что из этого настоящее? Соберите реальное название бизнеса, услуги, цены, адрес, часы работы, фотографии и отзывы, которые можно использовать. Всё, что вы не предоставите, ИИ выдумает как заполнитель.
5. Какое должно быть ощущение? Два-три слова («спокойно, чисто, много свободного места») или ссылка на понравившийся сайт.

Шаг 2. Напишите первый промпт

Хороший первый промпт описывает бизнес и страницы, а не код:

Создай сайт для Harbor Physio, клиники физиотерапии в небольшом приморском городе. Страницы: Главная (главный экран с кнопкой «Записаться на осмотр», три причины выбрать нас, короткий блок с отзывами), Услуги (спортивные травмы, боли в спине, реабилитация после операций — у каждой абзац и длительность сеанса), О нас (два физиотерапевта, вместо фото заглушки) и Контакты (адрес, часы работы, телефон и форма обратной связи). Спокойный, чистый вид с мягким голубым акцентом. Сначала мобильная версия. Пиши правдоподобные тексты, без lorem ipsum, и не выдумывай отзывы и награды.

Последнее предложение важно. ИИ-инструменты охотно заполняют пустое место выдуманными отзывами, баннерами «Нам доверяют 10 000 клиентов» или поддельными наградами. Запретите это, а всё равно проверяйте.

Если у вас уже есть логотип, фирменные цвета или скриншот понравившегося сайта, приложите их. Больше приёмов — в материале как писать промпты для ИИ-конструкторов приложений.

Шаг 3. Просмотрите сайт глазами посетителя

Когда появится первая версия, не начинайте с подбора шрифтов. Пройдите по сайту так, как это сделал бы посетитель:

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

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

Шаг 4. Замените заглушки настоящим содержимым

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

• Тексты. Вставьте настоящие описания услуг, цены и часы работы. Попросите ИИ сделать их лаконичнее, но факты оставьте своими.
• Изображения. Загружайте свои фотографии, где возможно. Стоковые фото подойдут для фона, но настоящие снимки ваших работ, команды или помещения вызывают больше доверия.
• Доказательства. Используйте только те отзывы, логотипы и цифры, которые можете подтвердить.
• Юридические страницы. Если вы собираете через форму какие-либо персональные данные, обычно нужна политика конфиденциальности. Попросите ИИ написать страницу, а затем проверьте её на соответствие правилам вашей страны: сгенерированная политика — это отправная точка, а не юридическая консультация.

Шаг 5. Формы, запись и другие «приложенческие» части

Форме обратной связи нужно куда-то отправлять заявки. Варианты от самого простого к самому сложному:

Если нужны настоящая запись или платежи, см. как создать приложение для записи и как добавить платежи в приложение.

Шаг 6. Основы SEO перед тем, как делиться сайтом

ИИ может написать красивую страницу, которую поисковые системы почти не понимают. Перед запуском попросите добавить:

• Уникальный заголовок и мета-описание на каждой странице
• Один чёткий главный заголовок на странице и разумные подзаголовки
• Описательный alt-текст у изображений
• Теги Open Graph, чтобы ссылки хорошо выглядели при публикации в соцсетях и мессенджерах
• Карту сайта и файл robots

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

Шаг 7. Опубликуйте сайт и подключите домен

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

После запуска заведите бесплатный аккаунт Google Search Console, чтобы видеть, индексируются ли ваши страницы.

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

• Просить всё сразу. Двенадцать страниц, блог, магазин и личный кабинет в одном промпте дают поверхностную версию каждого. Сначала сделайте основные страницы.
• Публиковать текст-заглушку. Перед запуском поищите на каждой странице «Lorem», «Your Company» и выдуманные цифры.
• Игнорировать мобильную версию. Проверяйте каждую страницу в ширине телефона, а не только главную.
• Оставлять призыв к действию расплывчатым. На каждой странице следующий шаг должен быть очевиден: позвонить, записаться, купить или написать.
• Забыть, кто будет обновлять сайт. Если кто-то другой будет править его каждую неделю, убедитесь, что он сможет: либо общаясь с тем же конструктором, либо выбрав инструмент с визуальным редактором.

Сколько это стоит

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

• Конструктор. У большинства есть бесплатный тариф для знакомства и платный для своего домена и большего объёма использования.
• Хостинг. Иногда входит в тариф, иногда оплачивается по использованию.
• Доменное имя. Ежегодная плата за регистрацию, зависящая от имени и зоны.
• Дополнения. Почтовый сервис для уведомлений из форм или платные инструменты для записи и рассылок.

Когда лучше конструктор сайтов

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

Создание сайта в Mythex

Mythex — это ИИ-конструктор приложений, и сайты относятся к самым частым проектам, которые в нём делают. Вы описываете сайт, он собирает его в живом предпросмотре (в том числе в виде размера телефона), а вы публикуете его по адресу yourname.mythex.app; на Pro можно купить домен в Mythex или подключить свой. Если важны позиции в поиске, можно попросить простой статический сайт вместо приложения на React, которое создаётся по умолчанию. См. документацию о статических сайтах и SEO для опубликованного приложения.

Mythex не является CMS: отдельного входа для редактора маркетинговой команды нет, поэтому изменения вносятся через чат с конструктором или правкой кода. Чтобы не начинать с пустого листа, возьмите один из шаблонов сайтов или шаблонов портфолио: каждый открывает новый проект с уже заполненным стартовым промптом.

Вопросы