Создание сайта с помощью ИИ — пошаговая инструкция для новичков

Как сделать сайт через нейросеть (ChatGPT, Claude, Cursor) — от первой строки кода до выкладки в интернет. Пошаговая инструкция без воды.

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

Правильный порядок такой:

• Понять, для кого сайт. Один лендинг для торта на заказ и один для онлайн-курса — это два разных сайта, даже если визуально похожи. (Лендинг — это одностраничный сайт, где всё на одной странице: пролистываешь вниз, читаешь. Используется для одной конкретной цели: продать товар, собрать заявки, рассказать об услуге.)
• Собрать 3–5 референсов. Не чтобы скопировать, а чтобы понять, что тебе нравится. Pinterest, Behance, Awwwards — достаточно. (Референсы — это примеры сайтов, которые тебе нравятся по стилю, структуре, подаче. Не копируешь, а смотришь: «ага, вот так можно сделать форму», «вот такие цвета мне заходят».)
• Написать структуру на бумаге. Какие блоки, в каком порядке, что в каждом блоке. Хватит 10 строк в заметках. (Структура — это план страницы: сначала заголовок и кнопка, потом три преимущества, потом отзывы, потом форма заявки. Как оглавление книги.)

Только после этого открываем нейросеть. Она не заменяет этап «подумать», она заменяет этап «писать код руками».

Не нужно ставить десять сервисов и платить за каждый. Для старта хватает трёх:

ChatGPT (бесплатная версия GPT-4o mini)

Для чего: продумать структуру, написать тексты для блоков, сгенерировать первичный промпт для кода. (Промпт — это твоё сообщение нейросети, описание задачи.)

Плюс: бесплатно, работает без VPN в большинстве случаев, понимает по-русски. (VPN — программа, которая «пробивает» блокировки, как туннель сквозь стену: интернет работает, как будто ты за границей.)

Минус: код пишет средне. Для простых лендингов — ок, для сложной логики — не подходит. (Логика — это когда сайт что-то делает: считает, проверяет, отправляет данные. Например, калькулятор стоимости или форма, которая проверяет, правильный ли email.)

Claude (от Anthropic)

Для чего: сложные задачи, где нужна аккуратность — админка, формы, интеграции. (Админка — закрытая часть сайта, где ты управляешь контентом: добавляешь статьи, меняешь цены, смотришь заявки. Интеграции — когда сайт общается с другими сервисами: форма отправляет данные в твою почту или в Telegram-бот.)

Плюс: понимает контекст лучше ChatGPT, меньше «галлюцинирует» в коде. (Контекст — это «объём памяти» нейросети в одном разговоре: чем он больше, тем больше кода она удержит в голове за раз. «Галлюцинирует» — значит, выдумывает несуществующие функции или библиотеки.)

Минус: нужен VPN для доступа, лимит бесплатных запросов. Как обойти и то и другое — в статье как пользоваться Claude в России.

Cursor (редактор кода с ИИ)

Для чего: сама сборка сайта. Это не чат, а полноценная среда разработки, где ИИ видит весь твой проект и пишет код внутри файлов. (Редактор кода — это программа, в которой пишут код, что-то как Word для текстов, только для кода. Среда разработки — это редактор плюс куча инструментов: автодополнение, проверка ошибок, запуск кода.)

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

Минус: нужно установить, интерфейс может напугать с непривычки (но разберёмся за вечер).

Моя связка: ChatGPT для текстов → Claude для сложных задач → Cursor для сборки. Этого хватит на 90% проектов.

Секрет хорошего кода от ИИ — правильный промпт. Вот формула, которая работает у меня:

Роль + Задача + Контекст + Ограничения + Формат ответа

Пример для лендинга:

(Фронтенд-разработчик — специалист, который собирает видимую часть сайта: кнопки, формы, анимации. Senior — опытный разработчик, уровень выше среднего. HTML — «скелет» сайта, язык разметки. CSS — стили: цвета, шрифты, отступы. Фреймворки — готовые наборы инструментов, которые ускоряют разработку, но усложняют код. CTA — призыв к действию, кнопка, на которую нужно нажать. Hero — первый экран сайта, который видишь сразу после открытия. Адаптив — сайт нормально выглядит и на компьютере, и на телефоне. Системные шрифты — те, что уже есть на компьютере, не нужно скачивать из интернета.)

Видишь разницу с «сделай сайт»? ИИ получает все рамки и пишет то, что тебе нужно, а не случайный набор.

Это главный нав�