В этой статье
ChatGPT умеет быстро собрать каркас небольшого сайта, но результат зависит не столько от удачной формулировки «сделай красиво», сколько от входных данных. Если не описать страницы, поведение кнопок и ограничения, модель начнёт додумывать проект за вас. Иногда полезно, иногда — источник лишнего кода.
Для простого статического сайта достаточно пройти четыре этапа: подготовить требования, запросить структуру и код, сохранить файлы, затем проверить их в браузере.
1. Сначала опишите сайт, а не технологию
Перед первым запросом зафиксируйте минимальные исходные данные:
- цель страницы;
- кто её посетитель;
- какие блоки должны быть на экране;
- текст, адреса, цвета и другие известные материалы;
- что должно происходить по нажатию на кнопку;
- чего в первой версии быть не должно.
Для примера возьмём одностраничный сайт кофейни «Север». На нём будут главный экран, меню, адрес и кнопка «Заказать столик». Реальной отправки формы пока нет: кнопка только показывает сообщение. Это важное ограничение. Без него ChatGPT может начать проектировать сервер, базу данных и обработку персональных данных, хотя для первой версии они не нужны.
Полезно также заранее попросить модель перечислить допущения. Если адрес, часы работы или состав меню неизвестны, в макете лучше увидеть явную заглушку, чем случайное правдоподобное значение.
2. Дайте ChatGPT запрос с понятным результатом
Запрос можно составить так:
Создай простой одностраничный сайт кофейни «Север» для русскоязычных посетителей.
Сначала:
1. предложи структуру страницы;
2. перечисли допущения и данные, которых не хватает;
3. кратко объясни, как будет работать кнопка.
Затем выдай полный код трёх отдельных файлов:
- index.html — семантическая разметка;
- styles.css — стили и простая адаптация для узкого экрана;
- script.js — обработчик кнопки «Заказать столик» без реальной отправки формы.
Требования к странице:
- один главный экран с названием, описанием и кнопкой;
- блок меню с тремя позициями;
- адрес кофейни: «ул. Лесная, 12»;
- кнопка должна показать понятное сообщение о том, что форма пока демонстрационная;
- не подключай фреймворки, сборщик, сервер и внешние библиотеки;
- не выдумывай цены, если помечаешь их как примеры.
После кода дай чек-лист: как сохранить файлы, открыть страницу и проверить стили, кнопку, клавиатурную навигацию и работу без JavaScript.
Такой запрос задаёт границы и порядок ответа. Сначала вы проверяете замысел, потом принимаете код. Если сразу попросить только HTML, модель может смешать структуру, стили и логику в один длинный фрагмент — отлаживать его неудобно.
Для повторяющегося проекта можно создать в ChatGPT отдельный проект и держать там требования, файлы и инструкции. Это помогает сохранять общий контекст между итерациями. Доступность проектов и ограничения по файлам зависят от плана и настроек рабочего пространства, поэтому проверяйте их в своём аккаунте. Подробнее о проектах ChatGPT.
Если бесплатных лимитов недостаточно для нескольких циклов «сгенерировать → проверить → исправить», можно отдельно рассмотреть месячный доступ к ChatGPT для России. В карточке доступны планы Go, Plus и Pro на один месяц; перед заказом проверьте выбранный план и итоговую сумму. Подключение выполняется вручную на аккаунте покупателя, нужен аккаунт без действующей подписки, оплата — через СБП, автоматических списаний нет. Для создания простого сайта это не обязательное условие.
3. Сохраните ответ как три локальных файла
Создайте одну папку, например coffee-north, и сохраните в неё:
coffee-north/
├── index.html
├── styles.css
└── script.js
Попросите ChatGPT показывать имя файла перед каждым блоком. Затем скопируйте содержимое без тройных обратных кавычек из Markdown.
Минимальная связка файлов в index.html выглядит так:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Кофейня «Север»</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<section class="hero">
<p class="eyebrow">Кофейня «Север»</p>
<h1>Тёплый кофе в центре города</h1>
<p>Загляните на завтрак, короткую встречу или чашку кофе с собой.</p>
<button id="booking-button" type="button">Заказать столик</button>
</section>
<section aria-labelledby="menu-title">
<h2 id="menu-title">Меню</h2>
<ul>
<li>Фильтр-кофе</li>
<li>Капучино</li>
<li>Чизкейк</li>
</ul>
</section>
<section aria-labelledby="address-title">
<h2 id="address-title">Где мы</h2>
<p>ул. Лесная, 12</p>
<p id="booking-message" role="status" aria-live="polite"></p>
</section>
</main>
<script src="script.js" defer></script>
</body>
</html>
Здесь HTML отвечает за содержание и структуру, CSS — за внешний вид, JavaScript — за изменение страницы после действия пользователя. Внешние CSS и JavaScript-файлы удобнее поддерживать отдельно, чем искать нужную строку в большом HTML-файле. Такой подход описан в руководствах MDN по подключению CSS и JavaScript.
Пример script.js для демонстрационной кнопки:
const button = document.querySelector('#booking-button');
const message = document.querySelector('#booking-message');
button.addEventListener('click', () => {
message.textContent = 'Форма бронирования пока работает в демонстрационном режиме.';
});
Если после сохранения ничего не происходит, сначала проверьте имена файлов и пути. styles.css и script.js должны лежать рядом с index.html, а имена в атрибутах href и src должны совпадать с ними посимвольно. На Windows особенно легко получить файл script.js.txt, если расширения скрыты.
4. Откройте страницу и проверьте результат
Дважды откройте index.html в браузере. Для первой статической страницы локального файла достаточно. Затем пройдите проверку по слоям.
Сначала убедитесь, что виден весь текст: заголовок, меню и адрес. Если HTML не отображается как страница, а показывается обычным текстом, файл сохранён не с расширением .html.
Потом проверьте стили: есть ли отступы, цветовая схема и нужная ширина блоков. Если структура есть, но страница выглядит как голый текст, откройте инструменты разработчика браузера и посмотрите вкладку Console или Network. Частая причина — неверный путь к styles.css.
После этого нажмите «Заказать столик». Сообщение должно появиться под адресом. Если этого не произошло, проверьте консоль и подключение script.js. Браузер загружает страницу, строит DOM, применяет CSS и затем выполняет JavaScript; ошибка на любом из этих этапов ломает только соответствующий участок или последующее поведение. Как браузер загружает сайт и подключение JavaScript.
Проверьте кнопку с клавиатуры: нажимайте Tab, пока фокус не окажется на ней, затем нажмите Enter или пробел. Текст должен быть читаемым, а активный элемент — заметным. Это не полный аудит доступности, но хороший первичный фильтр; рекомендации по подключению JavaScript также учитывают проверку интерактивности и поведение без сценария (MDN).
Наконец, временно переименуйте script.js или отключите JavaScript в инструментах разработчика. Заголовок, меню, адрес и объяснение страницы должны оставаться доступными. Основная информация не должна исчезать только потому, что сценарий не загрузился.
Что попросить исправить после проверки
Не отправляйте ChatGPT общий отчёт «не работает». Передайте наблюдение и ожидаемое поведение:
При открытии index.html HTML отображается, но сообщение после нажатия кнопки не появляется.
Файлы index.html и script.js лежат в одной папке. В консоли браузера ошибка:
Uncaught TypeError: Cannot read properties of null.
Найди причину по этому коду. Сначала объясни, какой селектор не нашёл элемент,
затем предложи минимальное исправление только для script.js.
Так модель получает фактическую точку отказа и не переписывает весь проект без необходимости. После каждого исправления снова откройте страницу и повторите тот же сценарий.
Этот процесс подходит для небольшого статического сайта. Серверная часть, база данных, авторизация, реальные формы и платёжные данные требуют отдельных требований, окружения и проверки безопасности. ChatGPT может подготовить заготовку, но не гарантирует без проверки человека корректность, безопасность, адаптивность или готовность сайта к публикации. Не смешивайте задачу сайта с пополнением OpenAI API: ChatGPT и API — разные продукты и разные сценарии использования.
Источники
- Projects in ChatGPTOpenAI Help Center
- Getting started with CSSMDN Web Docs
- Add JavaScript to your web pageMDN Web Docs
- How browsers load websitesMDN Web Docs