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

Чтобы создать сайт с помощью ИИ, вы описываете сайт кодовому агенту (Claude Code, Codex, Gemini CLI и подобным) в коротком, конкретном брифе; агент настраивает проект и пишет страницы, вы смотрите результат в браузере и просите исправления, а в конце деплоите на Vercel, Netlify или Cloudflare Pages. Для маркетингового сайта или портфолио на это может хватить одного дня. Реальную разницу делают правильный стек, хороший первый промпт и чек-лист перед запуском.

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

Первое решение: ИИ-конструктор или кодовый агент?

Есть два пути, и оба считаются «созданием сайта с помощью ИИ».

ИИ-конструкторы сайтов (ИИ-функции на платформах вроде Wix, Framer или Webflow, а также браузерные генераторы приложений) превращают одно предложение в рабочую страницу за минуты. Это быстро, а хостинг уже включён. Цена: код в основном остаётся на платформе, вы платите ежемесячно, не можете сделать то, что платформа не разрешает, и уйти оттуда трудно.

Кодовые агенты работают на вашей машине, в вашей папке. Они пишут файлы, запускают npm install, читают ошибки и исправляют их. Шагов больше, зато в итоге у вас обычный репозиторий с кодом. Его можно разместить на бесплатных тарифах, отдать любому разработчику и подключить любую библиотеку.

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

1. Установите основу

Нужны три вещи:

1. Node.js (LTS-версия). На нём работают Astro и Next.js.
2. Git и аккаунт GitHub. Это ваша кнопка «отменить» и самый простой способ подключиться к хостингу.
3. Кодовый агент, например:

npm install -g @anthropic-ai/claude-code   # Claude Code
npm install -g @openai/codex               # Codex

Затем создайте пустую папку, инициализируйте git и запустите в ней агента:

mkdir cafe-site && cd cafe-site
git init
claude

Запустить git сначала важно: когда агент что-то сломает, git diff покажет, что изменилось, а git checkout . вернёт всё обратно.

2. Выберите стек: Astro, Next.js или обычный HTML

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

• Обычные HTML + CSS: одностраничное приглашение, тизер продукта, страница «скоро открытие». Нет этапа сборки, нет зависимостей, работает где угодно.
• Astro: маркетинговые сайты, сайты компаний, блоги, портфолио. Страницы по умолчанию рендерятся в обычный HTML, поэтому они быстрые и хороши для SEO, а записи блога хранятся как файлы Markdown. Это мой выбор по умолчанию для контентных сайтов.
• Next.js: задачи с большим количеством логики приложения: учётные записи пользователей, дашборды, база данных, платежи. Для сайта-визитки сам по себе избыточен.

Если сомневаетесь, начните с Astro. Позже он справится и с формой обратной связи, и с небольшим API.

3. Первый промпт с дизайн-направлением

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

Build a marketing site with Astro for a neighbourhood cafe called "Piggy Bank Coffee".

Pages: Home, Menu, About, Contact.
Home: a large photo area (placeholder for now), a one-line tagline,
a "See the menu" button, opening hours, address and a map link.
Menu: a list grouped by category (coffee, pastries, breakfast), prices in USD.

Design direction: warm and simple. Cream background (#f6f0e6), dark brown text (#2b1d14),
terracotta accent (#c2603a). Serif for headings, a readable sans-serif for body text
(Google Fonts). Generous whitespace, small corner radius, no shadows, no gradients.
Mobile first.

Rules:
- No Tailwind; use plain CSS and CSS custom properties.
- html lang="en".
- Every page gets a unique <title> and meta description.
- When done, start `npm run dev` and list the files you created.

Почему это работает: вы указали конкретные цвета и шрифты, список «не делай» (градиенты, тени), а также структуру страниц и содержание. Чем меньше агенту приходится угадывать, тем больше результат похож на то, что вы задумали. Можно также приложить скриншот понравившегося сайта: «Повтори ощущение от отступов и типографики этого сайта; не копируй его цвета и содержание».

4. Дорабатывайте дизайн по скриншотам

Когда агент запустит npm run dev, сайт обычно открывается по адресу http://localhost:4321 (Astro) или http://localhost:3000 (Next.js). Дальше работает цикл:

1. Откройте страницу и сделайте скриншот того, что не нравится.
2. Передайте изображение агенту (большинство CLI принимают картинки перетаскиванием или вставкой) и попросите исправить одну вещь.
3. Проверьте результат; если всё хорошо, делайте коммит.

The attached image is the home page on mobile. Three problems:
1. The tagline doesn't fit; the line breaks look bad.
2. The "See the menu" button touches the screen edge.
3. The opening-hours table overflows horizontally.
Fix only these. Don't change anything else.

«Не меняй больше ничего» — мелочь, но важная: агенты любят «улучшать» соседние компоненты, пока исправляют один. После каждого удачного шага выполняйте git add -A && git commit -m "...", чтобы при поломке от следующей просьбы можно было вернуться к последнему хорошему состоянию.

Если хотите, чтобы агент сам управлял браузером, добавьте сервер Playwright MCP; он сможет открывать страницу, делать собственные скриншоты и исправлять то, что увидит.

5. Проверка мобильной версии и доступности

Сайты, созданные ИИ, часто выглядят нормально на десктопе и разваливаются на телефоне. Перед запуском:

• Включите режим устройства в инструментах разработчика браузера и проверьте как минимум 375 px (телефон), 768 px (планшет) и 1440 px (десктоп). Горизонтальная полоса прокрутки означает, что что-то выходит за границы.
• Запустите Lighthouse из Chrome DevTools. Он оценивает Performance, Accessibility, Best Practices и SEO и перечисляет конкретные замечания.
• Пройдитесь по странице только с клавиатуры (Tab, Enter). Получается ли добраться до каждой ссылки и кнопки, и видно ли, где находится фокус?

Передавайте замечания агенту прямо так:

The Lighthouse accessibility report says: [paste the warnings].
Fix them. Also check that every image has meaningful alt text, every form field
has a label, text/background contrast meets WCAG AA and keyboard focus is visible.

6. Основы SEO

Агент всё это знает, но часто делает наполовину, пока вы не попросите. Чек-лист:

• Уникальный <title> для каждой страницы (около 60 символов) и meta description (около 150–160 символов).
• Один <h1> на страницу и разумный порядок <h2>/<h3> под ним.
• sitemap.xml и robots.txt. В Astro интеграция @astrojs/sitemap генерирует карту сайта; для этого в astro.config должен быть задан URL site.
• Теги Open Graph (og:title, og:description, og:image); превью ссылок в мессенджерах и соцсетях строятся по ним.
• Канонический URL и правильный атрибут lang.
• Для местного бизнеса пишите адрес, телефон и часы работы текстом (а не запекайте в изображение) и при желании добавьте структурированные данные LocalBusiness.

Run an SEO audit: list every page's title and meta description and fix
any that are missing or too long. Add @astrojs/sitemap, create robots.txt,
put Open Graph tags in the shared layout. Summarise the changes.

7. Форма обратной связи

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

1. Сервис форм: что-то вроде Formspree или Netlify Forms, если вы размещаетесь на Netlify. Форма отправляется в сервис, а вам приходит письмо. Самый простой путь.
2. Serverless-функция: небольшой API-маршрут в Astro или Next.js принимает форму и отправляет её через API почтового сервиса. Ключ API хранится только на сервере, в переменной окружения.
3. Просто ссылка mailto:: нет формы — нет проблем. Для небольшого бизнеса часто этого достаточно.

Что бы вы ни выбрали, попросите агента добавить серверную проверку обязательных полей, базовую защиту от спама (скрытое поле-ловушку honeypot или капчу сервиса) и понятное состояние «сообщение получено». Раз вы собираете персональные данные, добавьте и короткое уведомление о конфиденциальности.

8. Домен и деплой

Сначала отправьте сайт на GitHub:

git remote add origin git@github.com:you/cafe-site.git
git push -u origin main

Затем подключите один из трёх популярных хостингов. После подключения репозитория все они пересобирают и деплоят проект при каждом push и могут выдавать preview-URL для веток или pull request:

• Vercel: создан командой Next.js, но Astro тоже обрабатывает отлично. CLI: npx vercel для превью, npx vercel --prod для продакшена.
• Netlify: давно зарекомендовал себя для статических сайтов, есть встроенные формы. CLI: npx netlify deploy --prod.
• Cloudflare Pages: размещает сайт в сети Cloudflare; удобен, если ваш домен уже на Cloudflare. CLI: npx wrangler pages deploy dist.

Настройки сборки обычно определяются автоматически: для Astro команда сборки — npm run build, папка вывода — dist. Добавьте свой домен в дашборде хостинга, затем введите выданную им DNS-запись (обычно A или CNAME) у регистратора. HTTPS-сертификаты выпускаются автоматически.

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

В чём ошибается ИИ

• Шаблонный вид. Без дизайн-направления у всего получается один и тот же градиент и одна и та же сетка карточек. Укажите цвета, шрифты и список «не делай».
• Выдуманный контент. Агенты охотно пишут фальшивые отзывы, придуманные цифры («более 10 000 довольных клиентов») и несуществующие награды. Прочитайте каждую строку и удалите всё, что неправда.
• Изображения с лицензионными рисками. Агент может подтянуть случайные картинки из интернета по прямым ссылкам. Используйте свои фотографии или картинки с нормальной лицензией.
• Лишние зависимости. Большая библиотека анимаций или UI ради простого меню. Добавьте правило «спрашивай перед добавлением нового пакета».
• Битые ссылки и пустые href. Найдите кнопки, оставшиеся с href="#", и перед запуском пройдите по каждой ссылке.
• Проверка только на десктопе. Агент обычно проверяет лишь размер окна по умолчанию; о мобильной версии просите явно.
• Преждевременное «готово». Агент может объявить работу законченной, когда сборка падает. Запустите npm run build сами до деплоя; сборка должна завершиться без ошибок.

Безопасность

Даже у сайта-визитки есть несколько правил:

• Храните секреты в файле .env и проверьте, что .env есть в .gitignore. На хостинге введите те же значения как переменные окружения в дашборде.
• Никогда не вставляйте API-ключи в чат. Скажите агенту «ключ лежит в .env как RESEND_API_KEY», а не само значение. История чата тоже где-то хранится.
• Никаких секретов в клиентском коде. Любой ключ в браузерном JavaScript может прочитать кто угодно. Ключи почты и платежей должны быть только на сервере.
• Читайте, что запускает агент. Не одобряйте автоматически команды вроде rm -rf, curl ... | sh, глобальные установки и git push --force.
• Смотрите diff перед коммитом. git diff — самый простой способ поймать и ошибки, и случайно попавший секрет.

Делаем это в AgentVera

Всё описанное выше работает с одним терминалом и одним браузером. В моём рабочем процессе кое-что делает всё это удобнее, и я пользуюсь этим в AgentVera:

• Параллельные агенты в отдельных worktree. Например, агент Claude Code занимается контентом и SEO, а агент Codex — интерфейсом; каждый сидит в своём git worktree, так что они не перезаписывают работу друг друга. Все они отображаются в одной сетке рабочего пространства.
• Окружения предпросмотра. У dev-сервера каждого worktree свой адрес; окружения предпросмотра могут снимать страницы в мобильном, планшетном и десктопном размерах и попиксельно сравнивать их с прежним эталоном.
• Браузер агента. Агенты используют Chrome с отдельным профилем через Playwright, а вы наблюдаете за их действиями вживую в браузере агента.
• Ревью и учёт токенов. Когда ход заканчивается, code review поручает второй модели прочитать то, что написал агент, и виден расход токенов каждого агента. Diff перед слиянием вы всё равно читаете сами.
• Vercel. Если проект привязан к Vercel, вкладка Vercel показывает деплои и логи сборки, и упавшую сборку можно передать агенту.

Ничего из этого не обязательно; просто так легче не терять нить, когда работаешь с несколькими агентами. О самом методе читайте в статье параллельные кодовые агенты.

Короткий чек-лист

• Стек выбран (Astro для контентного сайта)
• Первый промпт охватывает страницы, содержание, цвета, шрифты и список «не делай»
• Коммит после каждого удачного шага
• Проверено при 375, 768 и 1440 px; замечания Lighthouse исправлены
• У каждой страницы есть title, meta description и один h1; sitemap и robots.txt существуют
• Не осталось выдуманных отзывов, цифр и изображений
• Форма работает, есть защита от спама и уведомление о конфиденциальности
• .env не в git; секреты только на сервере
• npm run build проходит; сайт работает на вашем домене с HTTPS

Итоги

Создание сайта с помощью ИИ теперь меньше про написание кода и больше про хорошее описание и внимательную проверку. Выберите правильный стек, укажите дизайн-направление в первом промпте, двигайтесь небольшими шагами и коммитьте каждый из них, а перед запуском проведите проверки мобильной версии, доступности и SEO. Агент пишет быстро; решать, что верно, по-прежнему вам.