Как создать сайт с ChatGPT: пошаговая инструкция и пример

В этой статье

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

Ниже — полный минимальный пример одностраничного сайта книжного клуба «Лист». Он работает локально: браузер открывает HTML-файл с диска, CSS отвечает за оформление, а JavaScript добавляет интерактивность. Сервер, домен и публикация в интернете для такого прототипа не нужны. Если захотите разобраться в ролях технологий глубже, пригодятся справки MDN о структуре HTML, основах CSS и JavaScript.

Что попросить у ChatGPT

Хороший промпт сразу задаёт границы работы. В нём полезно разделить исходные данные, ограничения и критерии приёмки:

Создай простой одностраничный сайт книжного клуба «Лист».

Исходные данные:
- название: «Лист»;
- описание: встречи для тех, кто хочет читать внимательнее и обсуждать книги без спешки;
- следующая встреча: 24 октября, 19:00;
- адрес: Москва, ул. Печатников, 12;
- три преимущества: небольшие группы, список книг заранее, спокойное обсуждение;
- кнопка «Показать программу», раскрывающая скрытый блок на этой же странице.

Ограничения:
- выдай три отдельных файла: index.html, styles.css и script.js;
- используй только HTML, CSS и обычный JavaScript без фреймворков;
- не подключай CDN, внешние изображения, шрифты и API;
- не добавляй формы, отправку данных, fetch и серверную обработку;
- страница должна открываться локально из файла index.html;
- добавь адаптацию для узкого окна браузера.

Критерии приёмки:
1. В HTML есть название, описание, дата и адрес.
2. На странице видны три преимущества.
3. До нажатия программа скрыта, после нажатия появляется.
4. У каждого файла понятное имя, а HTML подключает CSS и JavaScript.
5. Код можно сохранить в UTF-8 и открыть двойным щелчком по index.html.

Покажи содержимое каждого файла отдельно и кратко объясни, как его проверить.

Такой формат соответствует базовой рекомендации OpenAI по составлению запросов: у запроса есть конкретный результат, входные данные и ограничения. Важна и последующая итерация: сначала получите прототип, потом проверяйте его по критериям, а не пытайтесь предусмотреть каждую мелочь в первом сообщении.

Первую версию можно сделать бесплатно. Если после этого вы захотите собирать с ChatGPT более крупные проекты и вам не хватит лимитов, можно отдельно рассмотреть месячную подписку ChatGPT — на карточке доступны варианты Go, Plus, PRO x5 и PRO x20; перед оплатой проверьте актуальный тариф и его условия. Покупка подписки не является необходимым шагом для создания этого локального примера.

Как сохранить три файла

Создайте отдельную папку, например list-club. В ней должны находиться ровно такие файлы:

list-club/
├── index.html
├── styles.css
└── script.js

В ответе ChatGPT попросите показать каждый файл в отдельном блоке кода. Создайте файлы в любом текстовом редакторе, вставьте соответствующее содержимое и сохраните в кодировке UTF-8. Следите, чтобы редактор не добавил второе расширение: нужен index.html, а не index.html.txt.

Файл index.html

HTML задаёт структуру документа: заголовок, описание, карточки преимуществ и кнопку. Он также подключает два соседних файла.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Книжный клуб «Лист»</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="page-shell">
    <section class="hero">
      <p class="eyebrow">Книжный клуб</p>
      <h1>«Лист»</h1>
      <p class="intro">
        Встречи для тех, кто хочет читать внимательнее
        и обсуждать книги без спешки.
      </p>
      <div class="meeting-card">
        <strong>Следующая встреча</strong>
        <span>24 октября, 19:00 · Москва, ул. Печатников, 12</span>
      </div>
    </section>

    <section class="benefits" aria-labelledby="benefits-title">
      <h2 id="benefits-title">Почему приходят к нам</h2>
      <div class="benefit-grid">
        <article class="benefit"><h3>Небольшие группы</h3><p>У каждого есть время высказаться.</p></article>
        <article class="benefit"><h3>Книги заранее</h3><p>Можно прочитать текст и подготовить вопросы.</p></article>
        <article class="benefit"><h3>Спокойный разговор</h3><p>Обсуждаем идеи, а не соревнуемся в громкости.</p></article>
      </div>
    </section>

    <section class="program-section">
      <button id="program-button" type="button" aria-expanded="false" aria-controls="program">
        Показать программу
      </button>
      <div id="program" class="program" hidden>
        <h2>Программа встречи</h2>
        <ol>
          <li>Знакомство и короткое впечатление о книге.</li>
          <li>Разговор о героях и решениях автора.</li>
          <li>Выбор следующей книги клуба.</li>
        </ol>
      </div>
    </section>
  </main>
  <script src="script.js"></script>
</body>
</html>

Файл styles.css

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

:root {
  color: #253229;
  background: #f3f0e8;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body { margin: 0; }

.page-shell {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
  padding: 56px 0;
}

.hero, .benefit, .program {
  background: #fffdf8;
  border: 1px solid #ded8c9;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgb(57 62 45 / 8%);
}

.hero { padding: 48px; }
.eyebrow { color: #7c5d2e; text-transform: uppercase; letter-spacing: .12em; }
h1 { margin: 8px 0; font-size: clamp(3rem, 10vw, 6rem); line-height: .95; }
.intro { max-width: 560px; font-size: 1.25rem; line-height: 1.5; }
.meeting-card { display: grid; gap: 8px; margin-top: 32px; padding: 20px; background: #e7eddf; border-radius: 12px; }
.benefits { padding: 40px 0; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefit { padding: 24px; }
.benefit p { line-height: 1.5; }
.program-section { display: grid; gap: 20px; }
button { width: fit-content; padding: 13px 18px; border: 0; border-radius: 999px; color: #fffdf8; background: #526c48; font: inherit; cursor: pointer; }
button:hover { background: #3f5838; }
.program { padding: 28px; line-height: 1.6; }

@media (max-width: 640px) {
  .page-shell { width: min(100% - 20px, 960px); padding: 20px 0; }
  .hero { padding: 28px 22px; }
  .benefits { padding: 28px 0; }
  .benefit-grid { grid-template-columns: 1fr; }
}

Файл script.js

JavaScript получает кнопку и скрытый блок по их идентификаторам. При нажатии он меняет свойство hidden, текст кнопки и значение aria-expanded. Состояние остаётся внутри страницы и никуда не отправляется.

const button = document.querySelector('#program-button');
const program = document.querySelector('#program');

button.addEventListener('click', () => {
  const isOpen = button.getAttribute('aria-expanded') === 'true';

  button.setAttribute('aria-expanded', String(!isOpen));
  button.textContent = isOpen ? 'Показать программу' : 'Скрыть программу';
  program.hidden = isOpen;
});

Как проверить результат в браузере

Проверяйте не только то, что файл открылся. Пройдите короткий список:

Откройте папку и дважды щёлкните index.html. В адресной строке будет локальный путь вроде file:///.../list-club/index.html. Это означает, что страница открыта с компьютера, а не опубликована в интернете.
Убедитесь, что видны заголовок «Лист», описание, дата, адрес и три преимущества.
Проверьте оформление: светлый фон, карточки и зелёная кнопка должны появиться благодаря styles.css.
Нажмите «Показать программу». Должен появиться блок с тремя пунктами, а текст кнопки должен измениться на «Скрыть программу». Повторное нажатие скрывает блок.
Уменьшите ширину окна браузера. Карточки преимуществ должны выстроиться в один столбец, а текст — оставаться читаемым.
Откройте инструменты разработчика клавишей F12 и вкладку Console. Ошибок загрузки styles.css или script.js быть не должно. Если файл переименован или лежит в другой папке, браузер покажет такую ошибку.
Вкладка Network при перезагрузке должна показывать только локальные ресурсы проекта. В примере нет fetch, API-ключей, форм и отправки данных.

Если результат отличается от критериев, не переписывайте проект вслепую. Скопируйте в ChatGPT конкретную ошибку, укажите имя файла и попросите вернуть только исправленную версию этого файла. Например: «После нажатия блок не появляется. Проверь связь program-button и program в script.js, сохрани остальные условия и покажи полный исправленный файл».

Что можно делать дальше

У этого прототипа есть понятная граница. Он показывает структуру страницы и локальную интерактивность, но не принимает заявки, не хранит данные и не становится доступным другим людям автоматически. Для публикации понадобится отдельный хостинг, а для отправки формы — сервер или внешний сервис. Это уже следующая задача с другими требованиями безопасности и хранения данных.

Если нужен только простой текстовый экран без оформления и JavaScript, достаточно инструкции по созданию чистого HTML. Если же требуется именно форма опросника, используйте специализированный пример промпта для сайта-опросника, а не добавляйте отправку данных в этот локальный демо-проект.

Источники

Prompt engineering best practices for ChatGPTOpenAI
Basic HTML syntaxMDN Web Docs
Getting started with CSSMDN Web Docs
What is JavaScript?MDN Web Docs

Есть следующая задача?Ещё по теме «Программирование» →

Что попросить у ChatGPT

Как сохранить три файла

Файл index.html

Файл styles.css

Файл script.js

Как проверить результат в браузере

Что можно делать дальше

Источники

Может пригодиться

Как отладить код с ChatGPT на примере Python

ChatGPT и Python на GitHub: как разобрать код репозитория

ChatGPT для 1С: как программисту использовать нейросеть