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

URL: https://agentvera.dev/ru/blog/build-website-with-ai/ · Опубликовано: 2026-10-11

Создайте сайт с помощью ИИ: выберите стек, напишите первый промпт с дизайном, дорабатывайте по скриншотам, проверьте мобильную версию и SEO, задеплойте на Vercel.

**Коротко:**

- Для контентного сайта хорошим выбором по умолчанию будет Astro; Next.js берите, когда нужны вход в систему, дашборд или база данных, а для одной страницы хватит обычных HTML и CSS.
- В первом промпте укажите конкретные страницы, цвета, шрифты и список «не делай», затем правьте по одному пункту по скриншотам и делайте коммит после каждого удачного шага.
- Перед запуском проверьте ширины 375, 768 и 1440 px и Lighthouse, добавьте title, meta description и sitemap, уберите выдуманный контент и убедитесь, что npm run build проходит.

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

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

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

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

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

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

| | Конструктор сайтов | Кодовый агент |
| --- | --- | --- |
| Время до первого результата | Минуты | Час-два |
| Кому принадлежит код | В основном платформе | Вам |
| Хостинг | Их собственный, на платном тарифе | Любой, часто бесплатный тариф |
| Нестандартные задачи | В пределах возможностей платформы | В пределах возможностей кода |
| Порог входа | Очень низкий | Нужно уверенно чувствовать себя в терминале и git |

Это руководство описывает второй путь: [vibe coding](/ru/glossary/vibe-coding/) сайта, где код пишет агент, а вы направляете результат. Если вы ещё не выбрали агента, посмотрите [лучшие ИИ-инструменты для программирования в CLI](/ru/blog/best-ai-coding-cli-tools/).

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

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

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

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

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

```bash
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. Первый промпт с дизайн-направлением

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

```text
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. Проверьте результат; если всё хорошо, делайте коммит.

```text
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](/ru/glossary/mcp/); он сможет открывать страницу, делать собственные скриншоты и исправлять то, что увидит.

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

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

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

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

```text
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`.

```text
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:

```bash
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](/ru/download/):

- **Параллельные агенты в отдельных worktree.** Например, агент Claude Code занимается контентом и SEO, а агент Codex — интерфейсом; каждый сидит в своём [git worktree](/ru/glossary/git-worktree/), так что они не перезаписывают работу друг друга. Все они отображаются в одной сетке [рабочего пространства](/ru/features/workspace/).
- **Окружения предпросмотра.** У dev-сервера каждого worktree свой адрес; [окружения предпросмотра](/ru/features/preview-environments/) могут снимать страницы в мобильном, планшетном и десктопном размерах и попиксельно сравнивать их с прежним эталоном.
- **Браузер агента.** Агенты используют Chrome с отдельным профилем через Playwright, а вы наблюдаете за их действиями вживую в [браузере агента](/ru/features/agent-browser/).
- **Ревью и учёт токенов.** Когда ход заканчивается, [code review](/ru/features/code-review/) поручает второй модели прочитать то, что написал агент, и виден расход [токенов](/ru/glossary/token/) каждого агента. Diff перед слиянием вы всё равно читаете сами.
- **Vercel.** Если проект привязан к Vercel, [вкладка Vercel](/ru/features/vercel/) показывает деплои и логи сборки, и упавшую сборку можно передать агенту.

Ничего из этого не обязательно; просто так легче не терять нить, когда работаешь с несколькими агентами. О самом методе читайте в статье [параллельные кодовые агенты](/ru/blog/parallel-coding-agents/).

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

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

## Итоги

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

## Частые вопросы

**Можно ли создать сайт с помощью ИИ, не умея программировать?** Да, если это простой маркетинговый сайт или портфолио. Кодовый агент пишет файлы и запускает команды; ваша задача — чётко описать, что вам нужно, проверить результат в браузере и выполнить несколько базовых проверок перед запуском.

**Какой стек выбрать, чтобы создать сайт с помощью ИИ?** Для контентного сайта (маркетинговые страницы, блог, портфолио) хорошим выбором по умолчанию будет Astro. Если нужны вход в систему, дашборд или база данных, лучше подойдёт Next.js; для одной страницы достаточно обычных HTML и CSS.

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

**Будет ли сайт, созданный с ИИ, ранжироваться в Google?** Технически да: с правильными title, meta description, sitemap и быстро загружающимися страницами Google обходит его как любой другой сайт. Позиции зависят от качества и полезности контента, а не от того, писал ли код ИИ.

**Где разместить сайт, созданный с помощью ИИ?** Для статических сайтов обычно выбирают Vercel, Netlify и Cloudflare Pages; все три подключаются к репозиторию GitHub и заново деплоят проект при каждом push. Свой домен вы добавляете в их дашборде и обновляете DNS-запись у регистратора.

---

**Об AgentVera.** AgentVera — настольное приложение для macOS, Windows и Linux от Solviera Teknoloji. Оно запускает 18 ИИ-агентов для программирования (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) рядом, по проектам, в настоящих терминалах с собственными установками CLI и входами пользователя. В бесплатном тарифе количество агентов не ограничено. Скачать: https://agentvera.dev/ru/download/ · Цены: https://agentvera.dev/ru/pricing/