Как сделать сайт с помощью AI самостоятельно: инструменты, алгоритм и подводные камни

Ещё несколько лет назад, чтобы сделать сайт, нужно было учить код или платить разработчику. Сегодня AI пишет код, тексты и даже публикует сайт в интернете. Кажется, что сайт теперь можно сделать за вечер. Отчасти это правда. Но есть нюанс, о котором редко пишут в рекламе AI-инструментов.

Я разрабатываю сайты с AI каждый день, поэтому в этой статье поделюсь реальным рабочим процессом: какие инструменты использовать, где они сильны, а где подводят, и пошаговым алгоритмом с готовыми промптами, по которому можно собрать сайт самостоятельно.

Что изменилось: машина уже есть, но права нужны

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

Настало время, когда сайт можно сделать самостоятельно. Но это то же самое время, когда нужно уметь управлять машиной.

Автомобиль тоже может ехать сам по трассе, но куда ехать, как объехать яму и где повернуть, решает водитель. С AI так же: он выполнит любую команду, но качество результата определяет тот, кто эти команды даёт.

Какими AI-инструментами можно сделать сайт

В статье я разберу подход с Claude Code: именно им я пользуюсь в работе, и он даёт больше всего свободы — сайт не привязан к конструктору, код принадлежит вам, а менять можно что угодно.

Плюсы и минусы подхода

Главная ловушка: AI делает «средний» сайт

Языковая модель обучена на миллионах сайтов. Когда вы просите «сделай сайт для стоматологии», она собирает самое типичное решение: синий градиент, фото улыбающейся пациентки, три карточки преимуществ. Технически всё работает, но такой сайт выглядит как у десятков конкурентов — и у клиента нет причины выбрать именно вас.

• Нет позиционирования. AI не знает, чем вы лучше, если вы этого не сформулировали.
• Нет визуальной идеи. Без референсов AI выбирает самый безопасный, то есть самый скучный вариант.
• Нет логики продажи. Блоки стоят «как у всех», а не в порядке, в котором клиент принимает решение.

Пошаговый алгоритм: сайт с Claude Code

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

Шаг 1. Структура и тексты — в обычном чате с AI

Начните не с кода, а с того, что будет на сайте. Попросите AI взять у вас интервью о бизнесе и составить структуру страницы. Подробнее о промптах для текстов — в статье «AI для текстов сайта».

Ты — маркетолог и копирайтер, который готовит одностраничный сайт для бизнеса.

Мой бизнес: [чем занимаетесь, город, для кого]
Главное действие посетителя: [оставить заявку / записаться / позвонить]

1. Задай мне 7–10 вопросов о бизнесе, клиентах, преимуществах, ценах и возражениях — по одному.
2. После ответов составь структуру сайта: список экранов (блоков) и цель каждого.
3. Напиши тексты для каждого экрана: заголовок, подзаголовок, основной текст, текст кнопки.

Пиши на русском, коротко и конкретно, без клише вроде «качественный» или «индивидуальный подход».
Не придумывай цифры — если фактов не хватает, пиши [НУЖНО УТОЧНИТЬ].

Шаг 2. Референсы для каждого экрана

Для каждого блока из структуры найдите 1–2 примера, которые вам нравятся: первый экран, блок услуг, отзывы, форма заявки. Ищите на Awwwards, Dribbble, Pinterest или на сайтах сильных компаний в вашей нише. Делайте скриншоты и складывайте в одну папку с названиями по порядку блоков.

Шаг 3. Создайте проект в Claude Code

Установите Claude Code (он работает в терминале, в редакторах кода и в приложении Claude для компьютера) и создайте пустую папку для сайта. Нужна подписка Claude или доступ через API. Первое сообщение — о технологиях и общих правилах проекта:

Создай в этой папке новый сайт на Next.js с TypeScript и Tailwind CSS.

Общие правила проекта:
- язык сайта — русский;
- адаптивность: сначала мобильная версия, потом планшет и компьютер;
- цвета: [основной цвет], [акцентный цвет], фон [цвет];
- шрифт: [название шрифта из Google Fonts];
- каждый блок — отдельный компонент, чтобы его можно было переиспользовать на других страницах.

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

Шаг 4. Собирайте сайт поэкранно: референс + текст

Теперь для каждого блока отправляйте в Claude Code скриншот референса и готовый текст. Один экран — одно сообщение. Посмотрели результат, исправили, перешли к следующему.

Сделай на главной странице блок «[название блока, напр. Первый экран]».

Референс — на прикреплённом скриншоте: возьми из него композицию, иерархию и ощущение, но не копируй один в один. Используй цвета и шрифт нашего проекта.

Тексты для блока:
"""
[вставьте заголовок, подзаголовок, текст и текст кнопки из шага 1]
"""

Требования:
- на телефоне блок должен выглядеть аккуратно, без горизонтальной прокрутки;
- кнопка «[текст кнопки]» открывает форму заявки;
- после изменений покажи, что именно ты сделал, и запусти сайт для просмотра.

Почему поэкранно — это важно

• Ошибки исправляются один раз. Если в блоке появился баг — например, текст вылезает за край на телефоне, — вы исправляете его в одном компоненте, а не на всех страницах.
• Блоки становятся шаблонами. Готовый и отшлифованный экран (карточки услуг, отзывы, FAQ) потом используется на других страницах без переделки.
• Экономия лимитов. Короткие точные задачи тратят значительно меньше ресурса подписки, чем просьба «переделать весь сайт».
• Вы контролируете качество. Каждый экран проходит вашу проверку, а не появляется вместе с десятком других.

Сайт, собранный поэкранно, — как дом из проверенных кирпичей. Сайт «одним запросом» — как дом, в котором трещину находишь уже после переезда.

Шаг 5. Проверка: телефон, скорость, тексты

• Откройте сайт на телефоне — большинство посетителей придёт именно с него.
• Попросите Claude Code проверить скорость и оптимизировать изображения.
• Перечитайте тексты вслух: если так не сказали бы клиенту вживую — переписывайте.

Шаг 6. SEO-основа и форма заявки

Подготовь сайт к запуску:

1. SEO: уникальные title и description для каждой страницы, один H1 на странице, alt для всех изображений, sitemap.xml и robots.txt, микроразметка Schema.org для бизнеса.
2. Форма заявки: отправляй заявки мне в Telegram через бота. Объясни пошагово, как создать бота и где взять токен и chat id, и сохрани их как секреты, а не в коде сайта.
3. Защита формы от спама и ограничение количества отправок.

После каждого пункта коротко объясни, что сделано.

Шаг 7. Домен и публикация

Купите домен у регистратора, а дальше просто напишите Claude Code: «Я хочу опубликовать сайт». Он предложит хостинг, пошагово объяснит, что нажать в вашем аккаунте, и сам выполнит техническую часть. Вам останется подтверждать действия, подключить домен и проверить, что сайт открывается.

Шаг 8. Изменения после запуска

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

Сколько времени это реально занимает

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

• структуру и тексты — чаще всего на них уходит больше всего времени;
• поиск референсов и решение, что из них взять;
• десятки итераций «не то — переделать», пока не научитесь формулировать задачи;
• разбор регистраторов, хостинга, DNS, ботов и аналитики;
• проверку на телефонах, скорость, SEO.

Когда делать самому, а когда заказать

Вывод: каждый должен заниматься своим делом

AI сделал создание сайтов доступнее — и это прекрасно. Но инструмент не заменяет опыта: чтобы управлять AI, нужны насмотренность, понимание UI, структуры и того, как посетитель принимает решение. Без этого даже лучший инструмент выдаст сайт, похожий на сотни других.

Если вы предприниматель, ваш главный ресурс — время и фокус на бизнесе. Разбираться в референсах, промптах, DNS и ботах — это ещё одна работа, которая отвлекает от клиентов. Я работаю с AI каждый день, поэтому совмещаю скорость нейросетей с опытом дизайнера: вы получаете сайт под ключ — от структуры и текстов до запуска и SEO, — не тратя на это недели.

AI — отличный инструмент. Но результат всегда зависит от того, кто его держит.