Чтобы создать сайт с помощью ИИ, сначала опишите одну страницу и одно целевое действие, попросите выдать цельный index.html, а затем проверьте результат как обычный код. В этой статье мы соберём одностраничник студии растений: заголовок, карточки услуг и кнопку записи. ИИ ускорит черновик, но структуру, текст, мобильный вид и публикацию вы проконтролируете сами.
Фраза «сделай красивый сайт» почти гарантирует случайный результат. Модель не знает, кому предназначена страница, что человек должен сделать и какие ограничения важны. Хорошая новость в том, что для первого проекта не нужен сложный технический документ. Достаточно зафиксировать тему, посетителя, состав страницы, цвета, мобильную ширину и один критерий готовности. После этого ИИ становится быстрым помощником, а не автоматом с лотерейным билетом.
Описываем аудиторию, пять блоков страницы и действие посетителя.
Просим один файл с понятным HTML, CSS и небольшим JavaScript.
Открываем страницу, тестируем кнопку, мобильную ширину и публикацию.
Как поставить ИИ задачу, которую можно проверить
Начните не с цветов, а с результата. Для нашей страницы результат звучит так: посетитель понимает, чем занимается студия, видит три услуги и нажимает «Записаться». Затем перечислите ограничения: один HTML-файл, русский язык, без внешних библиотек, адаптивность от 360 пикселей, семантические заголовки и рабочая кнопка. Такой запрос задаёт границы и позволяет принять работу по пунктам, а не по ощущению «вроде красиво».
| Часть запроса | Что написать | Как проверить |
|---|---|---|
| Цель | Одностраничник студии домашних растений | Тема понятна по первому экрану |
| Аудитория | Люди, которым нужна помощь с уходом | Текст отвечает на их ситуацию |
| Структура | Hero, 3 услуги, процесс, CTA, контакты | Все пять частей есть в HTML |
| Ограничения | Один файл, без фреймворков, от 360 px | Страница открывается локально и не ломается |
| Действие | Кнопка прокручивает к форме | Клик меняет положение страницы |
Управляемый процесс состоит из запроса, черновика, проверки и только затем публикации.
Собираем работающий одностраничник в одном файле
Создайте папку plant-studio, внутри файл index.html и вставьте пример. Здесь нет сборщика и зависимостей: браузер читает разметку, применяет стили из <style> и запускает код из <script>. Это хороший формат для первой итерации с ИИ, потому что результат легко увидеть и целиком проверить.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Листок - студия домашних растений</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font: 18px/1.5 system-ui; color: #17352a; background: #f4fbf6; }
main, footer { width: min(1080px, 92%); margin: auto; }
.hero { min-height: 72vh; display: grid; align-content: center; gap: 20px; }
h1 { max-width: 760px; font-size: clamp(42px, 8vw, 82px); line-height: 1; margin: 0; }
.hero p { max-width: 650px; }
button { width: fit-content; border: 0; border-radius: 999px; padding: 15px 24px;
color: white; background: #176b4d; font: inherit; cursor: pointer; }
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
article { padding: 24px; border-radius: 24px; background: white; box-shadow: 0 12px 32px #17352a12; }
#contact { margin: 72px 0; padding: 34px; border-radius: 28px; background: #dff5e7; }
@media (max-width: 700px) { .services { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<main>
<section class="hero">
<small>Студия домашних растений</small>
<h1>Помогаем зелени чувствовать себя дома</h1>
<p>Подберём растения, пересадим и объясним уход без сложных терминов.</p>
<button id="book">Записаться на консультацию</button>
</section>
<section class="services" aria-label="Услуги">
<article><h2>Подбор</h2><p>Учитываем свет, питомцев и ваш ритм.</p></article>
<article><h2>Пересадка</h2><p>Выбираем грунт и подходящий горшок.</p></article>
<article><h2>Диагностика</h2><p>Ищем причину пятен и опавших листьев.</p></article>
</section>
<section id="contact"><h2>Расскажите о растении</h2><p>Напишите: hello@example.com</p></section>
</main>
<footer><p>Листок, 2026</p></footer>
<script>
document.querySelector('#book').addEventListener('click', () => {
document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
});
</script>
</body>
</html>- На широком экране три услуги стоят в ряд, а при ширине меньше 700 пикселей складываются в колонку.
- Размер главного заголовка меняется через
clamp(), поэтому не требует десятка медиазапросов. - Кнопка на первом экране плавно прокручивает страницу к контактному блоку.
ИИ быстро предлагает код, но смысл, факты, безопасность и приёмку контролирует человек.
Что обязательно проверить в коде от ИИ
Рабочий вид не доказывает качество. Страница может содержать несуществующие ссылки, нечитаемый контраст, четыре заголовка h1 или кнопку без обработчика. Проверяйте слоями: сначала смысл и структура, затем поведение, потом размеры и публикацию. Если находите ошибку, возвращайте модели конкретный симптом и минимальный фрагмент, а не просите «переделать всё красиво».
| Проверка | Нормальный признак | Тревожный признак |
|---|---|---|
| HTML | Один h1, секции имеют заголовки | Текст собран только из div |
| Кнопки | Каждая делает обещанное действие | Есть вид кнопки, но нет клика |
| Мобильный вид | Нет горизонтальной прокрутки при 360 px | Карточки обрезаются справа |
| Контент | Нет выдуманных фактов и контактов | ИИ придумал цены, отзывы или адрес |
| Консоль | Нет красных ошибок | Ошибка о null или неизвестной функции |
| Сеть | Нужные ресурсы отвечают 200 | Картинки и шрифты возвращают 404 |
Практика: улучшаем страницу и публикуем
Сделайте три короткие итерации. В первой меняйте содержание, во второй доступность и мобильный вид, в третьей готовьте публикацию. Так проще понять, какое изменение сломало результат. Для статической страницы подойдёт GitHub Pages: репозиторий хранит исходники, а сервис отдаёт их по публичному адресу. Перед загрузкой замените тестовую почту и проверьте каждую ссылку.
- Скопируйте исходную задачу в отдельный текстовый файл и добавьте своё название, аудиторию и действие.
- Попросите ИИ изменить только тексты и цвета, не меняя имена
bookиcontact. - Откройте
index.html, нажмите кнопку и проверьте консоль разработчика. - Включите режим устройства шириной 360 пикселей. Убедитесь, что текст читается, а страница не ездит в стороны.
- Проверьте навигацию с клавиатуры: Tab должен выделять кнопку, Enter должен запускать действие.
- Создайте репозиторий, загрузите
index.html, включите Pages и дождитесь публичного адреса. - Откройте опубликованный URL в приватном окне, чтобы исключить влияние локального кэша и расширений.
- По первому экрану понятно, что предлагает страница и куда нажать дальше.
- Кнопка, карточки и контактный блок работают одинаково локально и по публичному адресу.
- На ширинах 360 и 1280 пикселей нет обрезанного текста и горизонтальной прокрутки.
- Вы можете показать в коде секцию, стиль и обработчик, которые отвечают за каждый заметный элемент.
Четыре зоны проверки не дают красивому макету скрыть неработающую кнопку или мобильную версию.
Почему сайт от ИИ выглядит готовым, но остаётся черновиком
Главная ошибка заключается не в использовании ИИ, а в отказе от проверки. Модель уверенно заполняет пробелы: придумывает контакты, подключает лишние библиотеки, повторяет стили и меняет рабочие части вместе с нужным блоком. Сохраняйте предыдущую версию и просите небольшие правки. Тогда неудачную итерацию можно отменить одним шагом.
Модель сама выбирает аудиторию, структуру и действие. Добавьте критерии, по которым результат можно принять.
Просите изменить конкретную секцию или класс и сохранить остальное. Сравнивайте версии перед заменой.
Красная ошибка в Console и статус 404 в Network часто объясняют то, что визуально кажется загадкой.
Сетка из трёх карточек может не поместиться на телефоне. Тестируйте хотя бы 360, 768 и 1280 пикселей.
Для формы, оплаты, личного кабинета и хранения данных понадобится серверная логика, безопасность и отдельное тестирование.
Можно ли создать сайт одним запросом?
Можно получить черновик. Готовность наступает после проверки текста, кода, действий, мобильной версии и публичного URL.
Что лучше попросить для первого проекта?
Один index.html без библиотек. Его легко открыть, понять и опубликовать.
Как исправлять неудачный ответ ИИ?
Описать конкретный симптом, ожидаемый результат и небольшой фрагмент кода, который можно менять.
Что смотреть в инструментах разработчика?
Ошибки во вкладке Console и статусы запросов во вкладке Network.
Когда нужен сервер?
Когда появляются секреты, общие данные пользователей, авторизация, оплата или другая логика, которой нельзя доверять браузеру.
Разберите основу страницы в курсе HTML, оформление в курсе CSS и поведение в курсе JavaScript. Тогда вы сможете не только принять ответ ИИ, но и поправить его без нового запроса.
Для следующей итерации откройте разбор промптов для кода, проверьте страницу по гайду адаптивности и опубликуйте её по инструкции GitHub Pages. Больше базовых маршрутов собрано в хабе веб-разработки с нуля.