Как сделать сайт с помощью нейросети: от ТЗ до публикации

Сайт с помощью нейросети сегодня делают двумя способами. Первый — конструктор с ИИ: описываете страницу словами и получаете готовый результат на платформе сервиса. Второй — вайбкодинг сайта через ИИ-агента: Cursor, Claude Code или другой агент пишет код в вашем проекте, а вы ставите задачи и проверяете результат. Эта страница — про второй путь: код остаётся у вас, сайт можно перенести на любой хостинг и дорабатывать дальше.

Путь выглядит так: ТЗ → правила для агента → промты по шагам → форма заявок → публикация. На каждом шаге — что сделать, что скопировать и как проверить.

Какой путь выбрать#

Если сайт — одна страница, которую никто не будет развивать, конструктор честно проще. Если сайт будет расти, код через агента окупится.

Что понадобится#

• ИИ-агент для кода. Cursor, Claude Code или другой. У части агентов есть бесплатные планы с лимитами — сравнение в подборке бесплатные нейросети для программирования.
• Git-репозиторий. Например, на GitHub. Через него хостинг получает код и публикует новую версию после каждого изменения.
• Хостинг для статического сайта. На 12 октября 2026 года бесплатные варианты есть у Vercel (план Hobby, только для некоммерческого личного использования), у Netlify (бесплатный план) и у GitHub Pages (публикация из публичного репозитория на бесплатном аккаунте). Для сайта компании или студии проверьте, разрешено ли коммерческое использование на выбранном тарифе.
• Сервис форм, если нужна форма заявок. Об этом — в шаге 4.

Для примера ниже взят Astro: он по умолчанию собирает статический сайт, который публикуется на любом из этих хостингов без настройки сервера. Подойдёт и другой стек — важно указать его в ТЗ.

Шаг 1. ТЗ на сайт#

Агенту нужно не пожелание («сделай сайт для студии йоги»), а короткое техническое задание: цель, что входит, что не входит, стек и критерии готовности. Ниже — пример ТЗ на одностраничный сайт. Скопируйте его и замените содержимое под свой проект.

Цель: одностраничный сайт студии йоги, чтобы новые клиенты увидели
расписание и цены и записались через Telegram.

Что входит:
- первый экран с названием, коротким описанием и кнопкой «Записаться»;
- расписание занятий по дням недели;
- цены на разовое занятие и абонементы;
- блок «Как нас найти» с адресом и картой-картинкой;
- кнопка записи, которая открывает Telegram-чат студии.

Что не входит:
- онлайн-оплата и личный кабинет;
- админка для редактирования расписания;
- блог.

Технические требования:
- Astro, статическая сборка, без бэкенда;
- расписание и цены лежат в одном файле данных, чтобы их было просто менять;
- адаптивная вёрстка от 360 px.

Готово, когда:
- npm run build проходит без ошибок;
- страница нормально выглядит на телефоне и на компьютере;
- кнопка «Записаться» открывает Telegram;
- все тексты заполнены, пометок [ЗАПОЛНИ] не осталось.

Название студии: [ЗАПОЛНИ: название]
Ссылка на Telegram: [ЗАПОЛНИ: t.me/...]
Адрес: [ЗАПОЛНИ: адрес]

Почему так:

• «Что не входит» защищает от лишней работы. Без этого раздела агент вполне может добавить форму оплаты или админку, потому что «так обычно делают».
• Данные в отдельном файле — чтобы потом менять цены и расписание без помощи агента и без поиска по разметке.
• «Готово, когда» — критерии, которые проверяются командой или глазами. Агент сверяется с ними сам.

Шаблон ТЗ из восьми разделов и разбор каждого — на странице ТЗ для нейросети.

Шаг 2. Правила для агента#

ТЗ описывает этот сайт. Правила описывают, как работать в проекте всегда: стек, где что лежит, запреты, что сделать перед словом «готово». Агент читает их в начале каждого разговора, поэтому их не нужно повторять в промтах.

Пример правила для Cursor — файл .cursor/rules/project.mdc:

---
description: Правила проекта: лендинг студии йоги на Astro
globs:
alwaysApply: true
---
- Стек: Astro, статическая сборка. Бэкенд не добавляй.
- Страница: src/pages/index.astro, блоки в src/components/.
- Расписание и цены храни в src/data/, не в разметке.
- Новые зависимости ставь только с объяснением, зачем они нужны.
- Не трогай файлы, о которых тебя не просили.
- Секреты и ключи в код не пиши.
- Перед тем как сказать «готово», запусти npm run build.
- В конце коротко перечисли, какие файлы изменил и зачем.

alwaysApply: true значит, что правило подключается к каждому разговору. Если вы работаете в Claude Code или нескольких инструментах сразу, те же пункты положите в AGENTS.md в корне проекта — этот формат понимают многие агенты. Что ещё туда писать — на странице AGENTS.md.

Шаг 3. Промты по шагам#

Не отдавайте весь сайт одним промтом. Четыре коротких шага дают агенту меньше простора для догадок, а вам — точки, где можно остановиться и проверить.

3.1. План. Включите режим плана: в Cursor — Shift+Tab в поле ввода, в Claude Code — Shift+Tab, пока в строке состояния не появится plan mode on. Агент изучит проект и задаст вопросы, но ничего не изменит.

Прочитай ТЗ в @docs/spec.md и правила проекта. Код пока не пиши.
Задай вопросы по всему, что неясно. Потом предложи план: какие файлы
создашь и в каком порядке. Начнём после моего «ок».

3.2. Каркас и вёрстка.

Выполни шаги плана 1–[N]: создай проект на Astro, файл данных
src/data/[название].json и блоки страницы по ТЗ. Тексты бери из ТЗ,
там, где их нет, ставь [ЗАПОЛНИ]. Запусти npm run build и пришли вывод.

3.3. Мобильная версия.

Проверь вёрстку на ширине 360 px и 1280 px. Исправь то, что съезжает
или обрезается. Стили других блоков не трогай. Опиши, что поменял.

3.4. Подготовка к публикации.

Подготовь проект к публикации на [Vercel / Netlify / GitHub Pages]:
проверь настройки сборки по документации Astro для этого хостинга,
добавь title и description страницы, alt у изображений.
Запусти npm run build, пришли вывод и список изменённых файлов.

Если агент построил не то, документация Cursor советует не латать результат новыми промтами, а откатить изменения, уточнить план и запустить его заново. Полная цепочка промтов для сайта с разбором — в промте для создания сайта. Если агент застрял на одной ошибке, поможет промт для исправления ошибки.

Шаг 4. Форма заявок#

У статического сайта нет своего сервера, поэтому заявки принимает внешний сервис. Два распространённых варианта по их документации:

• Netlify Forms. Если сайт опубликован на Netlify: включите в панели сайта обнаружение форм (Forms → Enable form detection) и добавьте тегу <form> атрибут data-netlify="true" и имя (name). Netlify находит формы в готовом HTML при сборке, поэтому форма, которая рисуется только скриптом в браузере, без обходного пути не обнаружится. Заявки видны в панели сайта, уведомления можно настроить на почту.
• Formspree. Подходит для любого хостинга. В Formspree создаётся форма с вашей почтой, вы получаете адрес вида https://formspree.io/f/... и ставите его в атрибут action формы. В руководстве Formspree для Astro этот адрес предлагают хранить в переменной окружения.

Промт для агента:

Добавь форму заявки: имя, телефон, кнопка «Отправить».
Заявки уходят в [Netlify Forms / Formspree].
Адрес формы бери из переменной окружения [ИМЯ_ПЕРЕМЕННОЙ], в код его не пиши.
Пустую форму отправить нельзя. После отправки покажи «Заявка отправлена».
Проверка: npm run build, затем опиши, как мне отправить тестовую заявку.

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

Шаг 5. Публикация#

По документации Astro:

• Vercel. Загрузите код в репозиторий на GitHub, GitLab или Bitbucket, импортируйте проект в Vercel — он сам определит Astro и настройки сборки. Дальше каждое изменение в основной ветке публикуется автоматически, а другие ветки получают предварительные версии.
• Netlify. Тот же принцип: подключаете репозиторий, Netlify собирает и публикует сайт после каждого изменения.
• GitHub Pages. Добавьте в проект файл .github/workflows/deploy.yml из документации Astro (официальный GitHub Action), в astro.config укажите site и, если репозиторий не называется имя.github.io, — base с именем репозитория. В настройках репозитория в разделе Pages выберите источник GitHub Actions.

Свой домен можно подключить позже в настройках хостинга.

Если сайт делает менеджер проекта или фрилансер#

Тот же путь работает, когда между заказчиком и кодом стоит менеджер. Главная экономия здесь не в скорости вёрстки, а в согласовании: структуру страницы и раздел «что не входит» стоит показать заказчику до первого промта. Тогда агент получает уже утверждённое ТЗ, а не пересказ переписки, и правок «я хотел по-другому» становится меньше.

Границы тоже стоит назвать сразу. Агент уверенно справляется с типовыми страницами: лендинг, визитка, страница услуги, портфолио. Сложная бизнес-логика, интеграции и всё, что связано с деньгами и персональными данными, требует разработчика — хотя бы для проверки.

Чек-лист: если сайт не работает#

Общее правило: давайте агенту полный текст ошибки и лог, а не пересказ. И проверяйте результат на опубликованной версии, а не только локально.

Дизайн сайта с помощью нейросети#

Слово «красиво» агенту ничего не говорит. Работают конкретные вещи: скриншот сайта, который нравится, с пометкой, что из него взять; цвета в HEX; название шрифта; «много воздуха» или «плотно». Документация Claude Code предлагает приём для вёрстки: вставить скриншот макета, попросить агента сделать снимок результата, сравнить с оригиналом и исправить различия.

После запуска#

Публикация не приводит посетителей сама. Добавьте сайт в Яндекс Вебмастер и Google Search Console, проверьте, что у страницы есть понятные title и description, а тексты отвечают на вопросы клиентов. Ссылку на сайт поставьте там, где вас уже ищут.

Источники: Astro — публикация на Vercel, Astro — публикация на GitHub Pages, Astro — публикация на Netlify, тарифы Netlify, Netlify Forms — настройка, Formspree — форма в Astro, Cursor — режим Plan, Claude Code — рекомендации по работе, Vercel — план Hobby, GitHub Pages — ограничения.