ChatGPT Sites может собрать, разместить и опубликовать интерактивный сайт или небольшое веб-приложение прямо из режима Work. Для первого прототипа не нужен отдельный хостинг и ручная сборка проекта.
Чтобы результат не выглядел очередным ИИ-лендингом, начинайте не с цветов и блоков, а с одного действия посетителя. Сразу укажите, какие данные нужно сохранять, кто должен их видеть и как проверить работу перед публикацией.
Сайт за 5 минут возможен, но есть важная оговорка
Буквально за 5 минут я собрала общественный сайт, на котором любой посетитель может испортить макет своими правками. Люди увеличивают логотип, играют со шрифтами, требуют больше воздуха, премиальности и котов, потому что среднестатистическому заказчику всегда чего-нибудь не хватает.
Проект получил название ЧётоНеТо – всенародное согласование макета в духе самых придирчивых клиентов. Каждое нажатие меняет страницу, увеличивает общий счётчик и оставляет след в публичном протоколе.
Шутка про заказчиков здесь вторична. Главное заключается в другом: ChatGPT теперь способен собрать, разместить и опубликовать рабочий интерактивный сайт.
5 минут обычно хватает на первую версию простой механики. Для публичного запуска всё равно придётся проверить мобильную адаптацию, сохранение данных, тексты, доступы и безопасность пользовательского ввода. Тут магии уже поменьше, зато появляется рабочий продукт.
Что такое ChatGPT Sites и чем он отличается от обычной генерации кода
Sites работает внутри ChatGPT и создаёт размещённые сайты, веб-приложения, игры, дашборды, калькуляторы и внутренние инструменты. Пользователь описывает нужный результат обычным языком, получает предпросмотр, вносит изменения и публикует готовую версию.
Раньше фраза «ChatGPT сделал мне сайт» означала, что модель выдала несколько файлов с кодом. Дальше человеку требовалось разобраться с хостингом, настройками, зависимостями и публикацией. На этом месте креативный эксперимент превращался в поток вопросов: куда положить файлы и почему ничего не открывается.
Sites сокращает этот разрыв. ChatGPT берёт на себя сборку, размещение и выпуск сайта по готовой ссылке. Проект сохраняется в отдельном разделе, поэтому к нему можно вернуться, внести правки и опубликовать новую версию.
Sites не отменяет работу над продуктом. Он убирает техническую возню между идеей и первой рабочей версией.
Кому доступен ChatGPT Sites
На момент написания статьи Sites работает в публичной бете. Инструмент доступен для подходящих рабочих пространств, а также аккаунтов Plus и Pro. Развёртывание идёт постепенно, поэтому функция может появиться у двух пользователей одного тарифа в разное время. Администратор рабочего пространства также может ограничить создание или публичную публикацию сайтов.
Режим Work доступен в веб-версии и мобильном приложении на подходящих платных тарифах. В приложении для компьютера Sites можно использовать через Work или Codex.
Если кнопки Sites пока нет, проверьте три вещи:
- Обновлено ли приложение ChatGPT до актуальной версии.
- Поддерживает ли ваш тариф режим Work и Sites.
- Не отключил ли функцию администратор рабочего пространства.
В Enterprise публичная публикация по умолчанию выключена. Кроме того, некоторые функции Sites зависят от тарифа, региона и настроек конкретного рабочего пространства.
Как открыть Sites и создать первый сайт
В браузере откройте ChatGPT и переключитесь из обычного чата в режим Work. В приложении для компьютера сначала выберите ChatGPT, затем включите Work в верхней части окна.
Рабочий маршрут выглядит так:
ChatGPT → Work → новый чат → @Sites → промпт → Preview → Edit → Share → Publish
Можно не искать отдельную кнопку запуска. Достаточно упомянуть @Sites или написать в запросе слово website, чтобы ChatGPT понял: вам требуется размещённый сайт, а не текстовое описание страницы.
Для сложной логики разумно выбрать уровень рассуждения High, если он доступен на вашем тарифе. Сейчас Medium и High работают на GPT-5.6 Sol, который OpenAI позиционирует для программирования, дизайна, исследований и сложной многошаговой работы.
Однако модель здесь не важнее постановки задачи. Даже самый мощный режим соберёт пластиковый и весьма примитивный лендинг, когда получает запрос уровня «сделай красивый сайт про мой бизнес».
Начинайте с действия посетителя
Первая ошибка возникает ещё до выбора цветов. Пользователь просит сделать сайт, но не объясняет, что человек должен на нём совершить. В результате ChatGPT собирает знакомую конструкцию: крупный заголовок, несколько карточек, преимущества, отзывы и кнопка «Узнать больше». Выглядит как у всех, работает никак.
Сначала выберите одно главное действие. Посетитель должен:
– посчитать стоимость или потери;
– выбрать подходящий вариант;
– пройти диагностику;
– сравнить несколько сценариев;
– проголосовать;
– изменить объект и увидеть результат;
– загрузить данные для проверки;
– получить персональную рекомендацию.
В «ЧётоНеТо» основное действие предельно простое: человек нажимает кнопку с типичной правкой заказчика. После нажатия макет меняется, счётчик растёт, а действие попадает в общий протокол.
У хорошего мини-приложения обычно есть четыре свойства:
- Посетитель сразу понимает происходящее на странице.
- Основное действие выполняется одним или двумя нажатиями.
- Результат появляется без долгого ожидания.
- Получившийся результат хочется сохранить или переслать.
Последний пункт отвечает за распространение. Обычный калькулятор закрывают после получения цифры. Персональный диагноз, рейтинг, карточку результата или коллективно испорченный макет чаще отправляют другому человеку.
Как написать промпт для рабочего сайта
Промпт для Sites должен описывать не только внешний вид. Нужны аудитория, основное действие, логика интерфейса, данные, правила хранения, ограничения и критерии проверки.
Слабая формулировка выглядит так: Создай современный и красивый сайт для моего проекта.
Здесь нет продукта, сценария и результата. Модель начнёт заполнять пустоту привычными шаблонами.
Сильный промпт отвечает минимум на 7 вопросов:
- Для кого создаётся сайт.
- Какую задачу решает посетитель.
- Какое действие считается главным.
- Что должно произойти после нажатия.
- Какие данные нужно сохранять.
- Что запрещено в дизайне и логике.
- Как проверить готовую версию.
Готовый промпт для ChatGPT Sites
@Sites Создай рабочий сайт или веб-приложение по следующему техническому заданию.
НАЗВАНИЕ ПРОЕКТА
[Название сайта или приложения]
ЗАДАЧА
Сайт должен помогать пользователю:
[Какую конкретную задачу решает сайт]
ЦЕЛЕВАЯ АУДИТОРИЯ
Основные пользователи:
[Кто будет пользоваться сайтом]
Их главная проблема или потребность:
[Что пользователь хочет решить, получить, проверить, выбрать или сделать]
ГЛАВНОЕ ДЕЙСТВИЕ
Основное действие пользователя:
[Рассчитать, выбрать, сравнить, проверить, заполнить, проголосовать, загрузить, изменить, получить результат]
Пользователь должен выполнить это действие максимум за:
[Количество шагов или минут]
После действия сайт должен:
[Показать результат, сформировать рекомендацию, сохранить данные, отправить заявку, изменить состояние страницы]
СТРУКТУРА САЙТА
Создай следующие разделы или экраны:
1. [Первый экран и его задача]
2. [Основной рабочий раздел]
3. [Экран результата]
4. [Дополнительный раздел]
5. [Контакты, справка, правила или другой необходимый блок]
Не добавляй разделы без понятной функции.
ЛОГИКА РАБОТЫ
Опиши и реализуй поведение каждого интерактивного элемента.
Для каждой кнопки, формы, фильтра или переключателя должно быть понятно:
– что происходит после действия;
– какие данные меняются;
– что видит пользователь;
– можно ли отменить действие;
– сохраняется ли результат после обновления страницы.
Не создавай кнопки и элементы, которые выглядят рабочими, но ничего не делают.
ДАННЫЕ И ХРАНЕНИЕ
Нужно сохранять:
[Перечень данных]
Данные должны быть доступны:
[Только конкретному пользователю / всем посетителям / администратору / выбранной группе]
Состояние должно сохраняться:
[Только во время сеанса / после обновления страницы / между повторными посещениями]
При необходимости используй постоянное хранилище.
Не собирай персональные данные, если они не нужны для работы сайта.
ПОЛЬЗОВАТЕЛЬСКИЙ ВВОД
Пользователь сможет вводить:
[Текст, числа, файлы, ответы, комментарии или другие данные]
Для каждого поля:
– установи ограничение длины или размера;
– проверяй формат данных;
– блокируй опасный ввод;
– показывай понятное сообщение об ошибке;
– не допускай поломки интерфейса длинным текстом.
Если пользователь загружает файлы, укажи допустимые форматы и максимальный размер.
ДИЗАЙН
Желаемый визуальный характер:
[Редакционный, минималистичный, технологичный, игровой, деловой, экспериментальный или другой]
Используй:
– понятную визуальную иерархию;
– крупный и читаемый основной заголовок;
– заметное главное действие;
– контрастные состояния кнопок;
– удобную типографику;
– достаточные отступы;
– адаптивную компоновку.
Основное действие должно быть видно на первом экране.
Не используй без необходимости:
– типичные ИИ-градиенты;
– стеклянные карточки;
– неоновые свечения;
– одинаковые блоки;
– декоративные графики без данных;
– стоковые иллюстрации;
– стандартный набор «о нас», «преимущества», «отзывы»;
– элементы, не помогающие пользователю решить задачу.
ВИЗУАЛЬНЫЕ РЕФЕРЕНСЫ
Ориентируйся на следующие примеры:
[Ссылки, изображения, скриншоты или описание визуального направления]
Переноси общие принципы композиции и типографики, но не копируй чужой сайт буквально.
АДАПТИВНОСТЬ
Сайт должен корректно работать:
– на телефонах;
– на планшетах;
– на ноутбуках;
– на широких экранах.
На мобильной версии:
– кнопки должны удобно нажиматься пальцем;
– текст не должен выходить за пределы экрана;
– формы не должны ломать страницу;
– главное действие должно оставаться заметным;
– горизонтальная прокрутка запрещена.
ДОСТУПНОСТЬ
Добавь:
– понятные подписи полей;
– заметные состояния фокуса;
– достаточный контраст текста;
– alt-тексты для содержательных изображений;
– понятные сообщения об ошибках;
– управление основными элементами с клавиатуры.
SEO И ПУБЛИКАЦИЯ
Для публичного сайта подготовь:
– понятный заголовок страницы;
– метаописание;
– человекочитаемый адрес;
– заголовок H1;
– корректную структуру H2 и H3;
– Open Graph-заголовок;
– Open Graph-описание;
– изображение для социальных сетей;
– favicon.
Не добавляй SEO-текст, который не помогает посетителю.
АНАЛИТИКА
Предусмотри события для следующих действий:
– открытие сайта;
– начало основного сценария;
– завершение сценария;
– получение результата;
– отправка формы;
– использование ключевых кнопок;
– повторное посещение;
– переход к следующему шагу.
Для каждого события используй понятное название.
ПРОВЕРКА ПЕРЕД ПУБЛИКАЦИЕЙ
После сборки самостоятельно проверь:
1. Все кнопки и интерактивные элементы.
2. Формы и сообщения об ошибках.
3. Сохранение данных после обновления.
4. Работу в другом браузере.
5. Мобильную версию.
6. Длинный пользовательский ввод.
7. Пустые и некорректные значения.
8. Скорость прохождения основного сценария.
9. Настройки доступа.
10. Отсутствие служебных данных и секретной информации.
Сначала создай рабочую проверочную версию.
Не публикуй сайт, пока не завершишь проверку и не перечислишь найденные проблемы.
ФОРМАТ РЕЗУЛЬТАТА
После сборки покажи:
1. Краткое описание реализованной логики.
2. Перечень готовых функций.
3. Какие данные сохраняются.
4. Какие ограничения добавлены.
5. Что было проверено.
6. Какие проблемы ещё требуют решения.
7. Что рекомендуется проверить вручную перед публикацией.
Если для реализации не хватает критически важной информации, сначала задай не более пяти конкретных вопросов. Не заполняй неизвестные бизнес-правила случайными предположениями.
Как избежать пластмассового ИИ-дизайна
Фраза «не делай шаблонно» почти ничего не меняет. Модель не знает, какие именно решения вы считаете шаблонными. Рабочий способ заключается в коротком антиреференсе. Перечислите элементы, появление которых сразу испортит результат:
– градиентный фон без функционального смысла;
– сетка из одинаковых карточек;
– круглые кнопки на каждом экране;
– декоративные графики без данных;
– блоки «О нас» и «Почему выбирают нас»;
– стоковые персонажи с ноутбуками;
– абстрактные заголовки без действия;
– пять оттенков фиолетового ради технологичности.
После запретов укажите замену. Например:
Используй плотную редакционную компоновку, крупную типографику, асимметрию и один заметный акцент. Не разбивай информацию на одинаковые карточки. Каждый блок должен выполнять конкретную функцию.
В режиме предпросмотра откройте Edit и описывайте изменения через наблюдаемый результат. Вместо «сделай веселее» лучше написать:
Увеличь основной заголовок примерно вдвое, нарушь симметрию первого экрана, убери четыре декоративные карточки и добавь одну конфликтующую типографическую деталь.
Sites позволяет прикладывать изображения, скриншоты и файлы прямо к запросу на правку. Это полезнее длинного рассказа о том, что дизайн должен быть «смелым, современным и атмосферным».
Как опубликовать сайт и открыть доступ
Когда проверка закончена, откройте настройки доступа и выберите подходящую аудиторию.
Возможные варианты зависят от тарифа и рабочего пространства:
– только владелец и администраторы;
– выбранные пользователи или группы;
– участники рабочего пространства;
– любой человек в интернете.
Публичный режим работает только там, где администратор разрешил открытую публикацию. В Enterprise эта возможность по умолчанию отключена.
После публикации Sites выдаёт производственный адрес. Ссылку можно отправить клиентам, коллегам или разместить в социальных сетях.
При этом доступ к просмотру не даёт человеку права редактировать проект. Посетитель взаимодействует только с теми функциями, которые вы предусмотрели внутри сайта.
Где смотреть посещаемость
Sites автоматически собирает базовую статистику по опубликованным проектам. В разделе Analytics доступны уникальные посетители, просмотры страниц и изменение показателей во времени. Открывается статистика через маршрут Sites → More actions → Analytics.
Для простого эксперимента этого достаточно. Для полноценного продукта двух показателей маловато.
Поэтому заранее заложите внутренние события:
– сколько человек начали сценарий;
– сколько дошли до результата;
– какие варианты выбирали чаще;
– где люди прекращали взаимодействие;
– сколько посетителей сохранили или отправили результат.
Так сайт превращается из забавного прототипа в инструмент проверки спроса и поведения аудитории.
Аналитика Sites пока недоступна проектам, принадлежащим Enterprise-пространствам.
Что можно собрать в ChatGPT без программиста
Для первого проекта не нужен многостраничный сервис с сорока функциями. Выберите одну проблему и превратите её в короткое интерактивное действие.
Через Sites можно собрать:
– калькулятор стоимости ошибки или потерь;
– диагностику слабых мест проекта;
– голосование за продуктовую идею;
– подборщик услуги по ответам пользователя;
– генератор персонального предложения;
– интерактивный лид-магнит с ветвлением;
– план запуска проекта по дням;
– публичный рейтинг идей;
– проверку текста по заданным критериям;
– симулятор разговора с клиентом;
– внутренний трекер задач;
– небольшой обучающий тренажёр;
– портфолио с интерактивным сценарием;
– страницу мероприятия или сообщества.
OpenAI прямо относит к типичным сценариям Sites дашборды, трекеры, календари запусков, прототипы, внутренние порталы и отчёты.
Для первого запуска выбирайте механику, прохождение которой занимает не больше трёх минут. Чем больше полей, регистраций и объяснений вы навалите, тем быстрее человек найдёт единственную понятную кнопку браузера и закроет вкладку.
Как подключить собственный домен
Технический адрес Sites можно заменить доменом или поддоменом, принадлежащим владельцу проекта. Сам сайт остаётся на инфраструктуре Sites, а фирменный адрес направляет посетителя на опубликованную версию.
Порядок подключения выглядит так:
- Откройте раздел Sites и выберите проект.
- Перейдите в More actions, затем откройте Settings.
- Нажмите Add domain.
- Введите домен или поддомен.
- Скопируйте выданные DNS-записи.
- Добавьте их в кабинете регистратора домена.
- Вернитесь в настройки Sites и обновите статус.
Можно подключить основной домен или отдельный поддомен. Когда на основном адресе уже работает сайт компании, безопаснее использовать app, test, quiz, promo или tool.
Собственные домены доступны не во всех аккаунтах и пока не поддерживаются в Enterprise-пространствах. ChatGPT не регистрирует домены, поэтому доступ к управлению DNS остаётся обязательным.
Можно ли действительно создать сайт за 5 минут в ChatGPT?
Простую первую версию можно собрать за несколько минут. Проверка, исправление ошибок, настройка данных и публикация обычно требуют дополнительного времени.
Нужны ли знания программирования?
Для простого сайта или мини-приложения можно обойтись без ручного написания кода. Понимание логики продукта всё равно потребуется, потому что ChatGPT не решит за вас, что именно должно происходить на странице.
Чем Sites отличается от обычного промпта на создание сайта?
Обычный чат может выдать код или описание. Sites создаёт размещённый проект с предпросмотром, версиями, доступами и публикацией.
Можно ли сохранять результаты посетителей?
Да, когда в запросе явно указана необходимость постоянного хранения. Для структурированных данных используется долговременное хранилище, а для загружаемых файлов предусмотрено отдельное объектное хранилище.
Можно ли открыть сайт людям без аккаунта ChatGPT?
Публичный сайт доступен без доступа к рабочему пространству ChatGPT, когда для проекта разрешена открытая публикация.
Можно ли собирать заявки через Sites?
Технически можно создать форму, но владелец отвечает за обработку персональных данных и содержание пользовательских материалов. Перед запуском нужно проверить требования законодательства и подготовить понятную политику конфиденциальности.
Можно ли принимать оплату на таком сайте?
Sites не предназначен для проведения финансовых транзакций или обработки данных платёжных карт. Для оплаты потребуется отдельный разрешённый сервис и архитектура, соответствующая правилам платформы.
Можно ли вернуться к проекту после публикации?
Да, сайт сохраняется в разделе Sites. Его можно открыть, изменить, сохранить новую версию и повторно опубликовать.
Какой сайт стоит собрать первым
Не начинайте с корпоративного портала, сложного маркетплейса или сервиса на 20 разделов. Выберите одну задачу, где человек должен получить понятный результат после нескольких действий.
Сформулируйте аудиторию, главное действие, данные для сохранения, ограничения и критерии проверки. Соберите первую версию через @Sites, откройте её с телефона, проверьте через другой браузер и только потом публикуйте.
Лучший первый проект занимает несколько минут у посетителя, решает одну конкретную проблему и даёт результат, который можно измерить. Именно такой сайт стоит собирать сегодня, а не очередную красивую главную страницу, на которой ничего не происходит.