ChatGPT Sites может собрать, разместить и опубликовать интерактивный сайт или небольшое веб-приложение прямо из режима Work. Для первого прототипа не нужен отдельный хостинг и ручная сборка проекта.
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. Что рекомендуется проверить вручную перед публикацией.
Если для реализации не хватает критически важной информации, сначала задай не более пяти конкретных вопросов. Не заполняй неизвестные бизнес-правила случайными предположениями.