ГайдыОбновлено · 09.2026

Создание веб-приложения с использованием ChatGPT

26 мая 2023 · 18 минут чтения

Проверка фактов

Юлия Найпак

Методист по автоматизации. Сверяет паспорт инструмента с документацией вендора.

Автор Р

Редакция

Коллектив авторов, редакторов и иллюстраторов статей на сайте блога онлайн-университета «Зерокодер». Пишем…

Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.

Обновлено 23 августа 2026 года.

Создать сайт через чат GPT можно за один вечер и без навыка программирования. Вы описываете страницу словами, ChatGPT отдаёт готовый код в блоке кода, в поддерживаемых блоках кнопка Preview показывает результат прямо в чате, дальше вы сохраняете файл index.html и выкладываете его на бесплатный хостинг статики. Набор доступных действий справка OpenAI оговаривает отдельно: он зависит от плана, устройства, настроек рабочего пространства, модели и стадии раскатки, — то есть переключатель предпросмотра есть не в каждом аккаунте. Дальше начинается настоящая работа: правки, проверка и подключение API, если сайту нужен ум нейросети.

• Простую страницу — лендинг, визитку, портфолио — Chat GPT собирает целиком: HTML, CSS и JavaScript в одном файле.
• Предпросмотр встроен в сам чат: по официальной справке OpenAI код-блоки поддерживают предпросмотр HTML-страниц, React-компонентов, SVG, диаграмм Mermaid и графиков Vega.
• Сайт с личным кабинетом, оплатой или базой данных — это уже веб-приложение: нужен бэкенд. Ниже под него отдельный маршрут — промпт, файлы, виртуальное окружение, запуск на http://127.0.0.1:5000 и вывод на площадку.
• Чтобы сайт сам отвечал посетителю, подключают ChatGPT API: ключ, переменная окружения, серверный запрос.
• Публикация статичного сайта стоит ноль рублей: GitHub Pages раздаёт HTML, CSS и JavaScript прямо из репозитория.

Разбор ниже — двумя маршрутами: страница из одного файла и веб-приложение с бэкендом. Каждый доведён до работающего адреса, с проверенными командами и с местами, где такой сайт обычно ломается.

Три маршрута: что именно вы называете «сайт через чат GPT»

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

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

Как создать сайт через чат GPT: шесть шагов

Это первый маршрут: страница из одного файла. Порядок ниже проверяется на любой странице-визитке. Схема-путь после раздела повторяет его в одном кадре. Маршрут веб-приложения с бэкендом идёт следом, в разделе «Как написать веб-приложение с использованием ChatGPT».

Шаг 1. Соберите техзадание в одном сообщении. Модель отвечает ровно на то, что вы описали, поэтому первое сообщение должно содержать пять вещей: кто вы, что продаёте, какие блоки нужны, что делает кнопка и в каком стиле оформление. Рабочий шаблон промпта:

«Сделай одностраничный сайт для студии керамики. Один файл HTML со встроенными CSS и JavaScript, без внешних библиотек. Блоки: первый экран с названием и кнопкой «Записаться», три курса с ценой, галерея на шесть плейсхолдеров, форма с именем и телефоном, подвал с адресом. Шрифты системные, палитра тёплая песочная, адаптив от 360 пикселей. Верни весь код целиком».

Шаг 2. Заберите код из блока и посмотрите предпросмотр. Ответ приходит в код-блоке. В справке OpenAI перечислены доступные действия: скопировать код, увидеть ярлык языка, редактировать код прямо в блоке, открыть его на весь экран и переключаться между Code и Preview. Для поддерживаемых блоков нажатие Preview показывает результат внутри ChatGPT — HTML-страница как раз в списке поддерживаемых предпросмотров.

Шаг 3. Сохраните файл и откройте его локально. Скопированный код положите в обычный текстовый редактор и сохраните как index.html в кодировке UTF-8. Двойной клик по файлу открывает сайт в браузере: это уже полноценная страница, просто пока на вашем компьютере. Удобнее сразу работать в редакторе кода — например, Visual Studio Code.

Шаг 4. Правьте по одной вещи за сообщение. Запрос «сделай красивее и добавь анимации, а ещё поправь форму» возвращает переписанный с нуля файл, в котором сломано то, что работало. Формулировка «в блоке с курсами увеличь отступ между карточками до 32 пикселей, остальное не трогай» даёт предсказуемый результат. Каждую версию сохраняйте отдельным файлом — откат к предыдущей занимает секунду.

Шаг 5. Проверьте на телефоне. Откройте страницу в браузере и сузьте окно до ширины смартфона. Типовые поломки одностраничника из чата: горизонтальная прокрутка из-за фиксированной ширины блока, мелкий шрифт в форме, кнопка, уезжающая за край экрана. Каждая лечится отдельным сообщением с описанием того, что видите.

Шаг 6. Опубликуйте. Пока файл лежит на вашем диске, сайта в интернете нет. Публикация — отдельный раздел ниже.

Мини-вывод: качество сайта определяется первым сообщением и дисциплиной правок. Один диалог — один экран, одна правка — одно сообщение.

Основные компоненты веб-приложения

Для создания веб-приложения нужны две основные компоненты: фронтэнд и бэкэнд. Фронтэнд отвечает за интерфейс пользователя и взаимодействие с ним, а бэкэнд — за обработку запросов и взаимодействие с Chat GPT API.

• Фронтэнд. HTML отвечает за структуру страницы, CSS — за оформление, JavaScript — за динамическое изменение страницы и связь с бэкэндом. Готовые наборы стилей вроде Bootstrap или Materialize экономят время на сетке и кнопках.
• Бэкэнд. Серверная часть принимает запросы от фронтэнда, ходит в базу данных и обращается к ChatGPT API через официальный клиент. Типовой выбор для старта — Flask или Django на Python.

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

Как написать веб-приложение с использованием ChatGPT: от промпта до сервера

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

Шаг 1. Опишите приложение одним сообщением — со стеком, маршрутами и файлами. Странице хватало перечня блоков. Приложению нужно задать серверную часть явно, иначе модель вернёт красивую форму, которая никуда не отправляет. Рабочий шаблон промпта:

«Сделай веб-приложение на Flask. Главная страница с формой: имя, телефон, комментарий. Обработчик POST /lead сохраняет заявку в базу SQLite и показывает страницу «спасибо». Страница /leads выводит список сохранённых заявок таблицей. Раздели код по файлам: app.py, templates/index.html, templates/thanks.html, templates/leads.html, requirements.txt. Верни каждый файл отдельным блоком кода и подпиши путь к нему. Код приводи целиком, без сокращений и многоточий».

Шаг 2. Проверьте состав ответа до запуска. Разобранный по файлам ответ проверяется за минуту по квикстарту документации Flask. Минимальное приложение там выглядит так: from flask import Flask, затем app = Flask(__name__), затем декоратор @app.route("/") над функцией, которая возвращает ответ браузеру. Три места, где сгенерированный код чаще всего расходится с документацией: шаблоны Flask ищет в папке templates, поэтому HTML рядом с app.py не найдётся; маршрут по умолчанию отвечает только на GET, и приём формы объявляется аргументом methods декоратора route(); данные отправленной формы читаются из атрибута form объекта запроса. Если чего-то из этого в коде нет, попросите дописать это отдельным сообщением, назвав файл.

Шаг 3. Соберите окружение под проект. Flask поддерживает Python 3.9 и новее и просит держать зависимости проекта в отдельном виртуальном окружении. По документации: создать папку проекта и окружение внутри неё — python3 -m venv .venv в macOS и Linux, py -3 -m venv .venv в Windows; активировать его — . .venv/bin/activate либо .venv\Scripts\activate; и уже внутри активированного окружения выполнить pip install Flask. Остальные пакеты из сгенерированного requirements.txt ставятся одной командой — в документации pip она записана как python -m pip install -r requirements.txt (в Windows py -m pip install -r requirements.txt).

Шаг 4. Запустите приложение локально. Файл с приложением документация предлагает сохранить как hello.py или подобный и запускать командой flask --app hello run; для файла с именем app.py или wsgi.py опцию --app указывать не нужно, достаточно flask run. В ответ терминал печатает строку * Running on http://127.0.0.1:5000 (Press CTRL+C to quit) — по этому адресу приложение и открывается в браузере. Занятый порт виден сразу: сервер не стартует и выдаёт OSError: [Errno 98], в Windows — OSError: [WinError 10013]. Проверка шага: главная страница открылась именно по адресу с портом 5000 — приложение теперь обслуживает браузер само.

Шаг 5. Правьте с включённым отладчиком и проверяйте по данным. Режим отладки включается опцией --debug: flask --app hello run --debug. В нём сервер сам перезапускается при изменении кода и показывает интерактивный отладчик в браузере, когда запрос падает с ошибкой. Текст ошибки из терминала или отладчика копируйте в чат целиком, вместе с именем файла и строкой — так модель чинит с первого раза заметно чаще, чем по описанию «форма не работает». Приложение проверяется по данным: отправьте заявку и откройте /leads. Показанная страница «спасибо» без записи в списке означает, что обработчик отработал вхолостую.

Шаг 6. Выведите приложение на площадку, где процесс работает постоянно. Встроенный сервер для этого не годится, и документация Flask говорит об этом прямо: «Do not use the development server when deploying to production. It is intended for use only during local development» — сервер разработки предназначен только для локальной работы. В прод приложение выводят через отдельный WSGI-сервер либо через хостинг-платформу. Ходовой WSGI-сервер — Gunicorn: он ставится в то же виртуальное окружение командой pip install gunicorn и запускается как gunicorn -w 4 'hello:app', где до двоеточия имя модуля, после — переменная с приложением. Ключ -w задаёт число процессов, стартовое значение в документации — CPU * 2. Gunicorn слушает http://127.0.0.1:8000, Windows не поддерживает и работает там только под WSL. Наружу его не выставляют напрямую: под root запускать нельзя, поэтому впереди ставят обратный прокси — nginx или Apache httpd. Проверка та же, что у визитки: открыть внешний адрес с другого устройства, отправить заявку и увидеть её в списке.

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

Подготовка окружения и работа с ChatGPT API

Этот шаг нужен, когда сайт должен сам генерировать текст: отвечать в чате поддержки, собирать описание товара, подсказывать ответ в форме. Работа с моделью идёт через платный API, отдельный от подписки на чат.

Порядок из квикстарта документации OpenAI для разработчиков:

• Создать API-ключ в дашборде и сохранить его в надёжном месте — документация прямо предлагает файл вроде .zshrc или другой текстовый файл на компьютере.
• Экспортировать ключ переменной окружения OPENAI_API_KEY: в macOS и Linux командой export OPENAI_API_KEY="your_api_key_here", в PowerShell — setx OPENAI_API_KEY "your_api_key_here". Каждый SDK читает ключ из окружения сам.
• Поставить клиент: pip install openai для Python, npm install openai для Node.js.
• Сделать первый запрос. В примере документации вызов выглядит так: client.responses.create(model="gpt-5.6", input="..."), ответ читается из response.output_text.

Модель в вызове указывается явно. На странице моделей OpenAI сейчас три фронтир-варианта: GPT-5.6 Sol — «Frontier model for complex professional work», GPT-5.6 Terra — модель, балансирующая интеллект и стоимость, и GPT-5.6 Luna — вариант под задачи, чувствительные к цене. Идентификатор gpt-5.6 в примерах указывает на Sol.

Редактор для этой части подойдёт любой — Visual Studio Code или PyCharm. Если вы предпочитаете держать помощника прямо в терминале, посмотрите инструкцию по установке приложения Codex для macOS.

Ключ на фронтенде: ошибка, которая стоит денег

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

Правильная схема ровно та, что описана выше: браузер отправляет текст на ваш бэкенд, бэкенд берёт ключ из переменной окружения, обращается к API и возвращает готовый ответ. Ключ не покидает сервер. Поэтому запрос к модели формулируют иначе: «напиши серверный обработчик на Flask, который принимает сообщение от фронтенда, читает ключ из переменной окружения и возвращает ответ модели». Схема архитектуры после этого раздела показывает три звена и место ключа.

Второй по частоте промах — форма без получателя. Сгенерированная форма выглядит рабочей, но при отправке данные никуда не уходят. Нужен либо обработчик на бэкенде, либо внешний сервис приёма заявок.

Мини-вывод: всё, что можно прочитать в исходном коде страницы, считается публичным. Ключи, пароли и токены живут на сервере.

Чем нейросеть помогает уже внутри сайта

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

• Интерактивный чат-бот. Обрабатывает вопросы и команды посетителей, отвечает на основе введённых сообщений и снимает нагрузку с первой линии поддержки.
• Автоматическое дополнение текста. Предлагает варианты завершения фраз в поле ввода, ускоряя заполнение форм и поиск.
• Генерация контента. Описания товаров, новости, персональные рекомендации и поздравления собираются из данных вашей базы.
• Обработка и анализ текста. Анализ тональности отзывов, извлечение ключевых фраз, категоризация обращений — задачи, где текст приходит от пользователя и его нужно понять.

Формулировать запрос к боту стоит так же конкретно, как техзадание: «как реализовать автоматическое дополнение текста при помощи ChatGPT на фронтенде» даёт шаги интеграции и логику работы кода, а просьба написать код по этой логике — архитектурно независимый фрагмент с комментариями под вашу доработку. Для текстов на сайте пригодится и разбор того, как ИИ формирует tone of voice компании.

Тестирование и отладка сайта, собранного нейросетью

Код из чата выглядит аккуратно и потому проверяется хуже написанного руками. Проверять его стоит по фиксированному списку.

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

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

Мини-вывод: генерация экономит время написания, проверка остаётся на вас целиком.

Развертывание: как выложить сайт в интернет

Для статичной страницы платить не нужно. По документации GitHub, «GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website» — то есть сервис забирает файлы прямо из репозитория и публикует сайт.

Что важно знать до публикации, по той же документации GitHub Pages:

• Сервис доступен в публичных репозиториях на бесплатных планах GitHub Free и GitHub Free for organizations, а в приватных — на GitHub Pro, Team, Enterprise Cloud и Enterprise Server.
• Сайтов два типа. Для аккаунта пользователя или организации файлы должны лежать в репозитории с именем <owner>.github.io, адрес получается http(s)://<owner>.github.io. Для проекта файлы лежат в папке внутри репозитория с кодом, адрес — http(s)://<owner>.github.io/<repositoryname>.
• Источником публикации при сборке из ветки служит либо корень репозитория, либо папка /docs в этой ветке.
• Свой домен подключается вместо адреса на github.io.

Веб-приложению с бэкэндом статичного хостинга мало: серверная часть требует площадки, где постоянно работает процесс. Развилка по документации Flask — свой сервер либо хостинг-платформа. Свой сервер: WSGI-сервер из списка документации (Gunicorn, Waitress, mod_wsgi, uWSGI) и обратный прокси перед ним, команды запуска — в шаге 6 маршрута выше. Платформа: документация Flask перечисляет PythonAnywhere, Google App Engine, Google Cloud Run, AWS Elastic Beanstalk и Microsoft Azure как сервисы, у которых есть инструкции для Flask, WSGI или Python, и оговаривает, что часть сервисов даёт бесплатный уровень до определённого времени или объёма трафика. Приложению на платформе почти всегда нужно сообщить, что оно работает за прокси, — в документации это отдельный шаг «Tell Flask it is Behind a Proxy».

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

Чек-лист перед запуском

• Техзадание собрано в одно сообщение целиком: блоки, кнопка, стиль.
• Код сохранён как index.html, страница открывается локально.
• Вёрстка проверена на ширине телефона, горизонтальной прокрутки нет.
• Форма доходит до получателя, консоль браузера чистая.
• API-ключ лежит в переменной окружения на сервере, в коде страницы его нет.
• Каждая версия файла сохранена отдельно — есть куда откатиться.
• Сайт опубликован и открывается по внешнему адресу с другого устройства.
• Для приложения: зависимости описаны в requirements.txt и ставятся в чистое виртуальное окружение одной командой.
• Для приложения: заявка из формы видна в хранилище, а сервер разработки в прод не вынесен — работает WSGI-сервер за обратным прокси.

Частые вопросы

Можно ли создать сайт через чат GPT без знания программирования?

Да, для страницы-визитки или лендинга. Вы описываете задачу словами, получаете готовый код одним файлом, сохраняете его как index.html и публикуете на статичном хостинге. Знание HTML не требуется, но нужно уметь точно ставить задачу и проверять результат: править вёрстку и находить ошибки всё равно придётся вам.

Показывает ли ChatGPT, как выглядит сайт, прямо в чате?

Да. По справке OpenAI код-блок позволяет переключаться между режимами Code и Preview, и для поддерживаемых блоков выбор Preview показывает результат внутри ChatGPT. В списке поддерживаемых предпросмотров есть HTML-страницы, React-компоненты, SVG-изображения, диаграммы Mermaid и графики Vega или Vega-Lite. Если кнопка Preview не появилась, предпросмотр для этого блока не поддерживается.

Сколько стоит сайт, сделанный через чат GPT?

Статичная страница обходится бесплатно: сам чат доступен по подписке или в бесплатном режиме, а GitHub Pages публикует сайт из публичного репозитория на бесплатном плане GitHub Free. Платить придётся за домен, если нужен свой адрес, за хостинг серверной части и за обращения к API, если сайт сам генерирует текст.

Чем сайт отличается от веб-приложения в этой задаче?

Сайт из одного файла показывает информацию и живёт на статичном хостинге. Веб-приложение обрабатывает данные: у него есть бэкэнд на Flask или Django, база данных и, при необходимости, обращение к ChatGPT API. Первое собирается за вечер, второе требует развертывания и постоянно работающего сервера.

Как подключить ChatGPT к готовому сайту?

Через API. В документации OpenAI порядок такой: создать API-ключ в дашборде, экспортировать его переменной окружения OPENAI_API_KEY, установить клиент командой pip install openai или npm install openai и вызвать client.responses.create с указанием модели. Запрос отправляет серверный код, чтобы ключ не попал в исходный код страницы.

Как запустить веб-приложение из ChatGPT на своём компьютере?

Приложению на Flask нужно виртуальное окружение и установленный пакет: команда pip install Flask выполняется внутри активированного окружения. Файл с приложением сохраняют как app.py и запускают командой flask run — для такого имени опция —app не требуется. Терминал печатает адрес http://127.0.0.1:5000, по нему приложение открывается в браузере. Опция —debug перезапускает сервер при изменении кода и показывает отладчик при ошибке. Встроенный сервер годится только для разработки: в прод приложение выводят через WSGI-сервер вроде Gunicorn.

Итог

Chat GPT снимает с задачи «нужен сайт» самую долгую часть — написание кода с нуля. Остаётся то, что нейросеть не сделает: решить, что именно вы строите, точно это описать, проверить результат на реальных устройствах и вывести в интернет. Маршрута два, и оба доведены выше до работающего адреса: страница из одного файла — через index.html и GitHub Pages, веб-приложение — через виртуальное окружение, запуск на http://127.0.0.1:5000 и WSGI-сервер на площадке. Выбор между ними решает один вопрос: нужно ли принимать и хранить данные посетителя.