Создание сайта

Начните с описания того, что хотите создать, в ChatGPT или Codex. Затем просмотрите первую версию и постепенно дорабатывайте её.

Начало работы с сайтами

Откройте ChatGPT в браузере или настольном приложении. Включите слово «website» в запрос или упомяните @Sites, чтобы запустить процесс создания сайта. Например, можно попросить создать панель заявок на проекты для операционной команды:

Запрос:

Build a project request dashboard website for my operations team. Let team members submit requests, see who owns each one, update the status, and filter the list. Require people to sign in with their workspace account, and keep the request data saved between visits.

Панель заявок — лишь один из примеров. Вы можете адаптировать следующий процесс под сайт, который хотите создать.

1. Опишите сайт

   Расскажите ChatGPT, для кого предназначен сайт и что пользователи должны на нём делать. Предоставьте необходимые документы или данные. Для панели заявок можно добавить примеры заявок, ответственных и меток статуса.

2. Проверьте сайт

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

3. Доработайте сайт

   Сообщите ChatGPT, что хотите изменить, и при необходимости приложите снимок экрана или сайт-образец. Для панели заявок можно попросить: «Разместите фильтры по ответственному и статусу над списком заявок».

4. Управляйте сайтом и делитесь им

   Вернитесь в sites, чтобы снова открыть или отредактировать сайт. Перед публикацией выполните проверки перед предоставлением доступа. Выберите, кто сможет посещать сайт, и проверьте опубликованную ссылку от имени предполагаемого посетителя.

Сохранение записей и прогресса

Сохранение версии сайта сохраняет его содержимое, оформление и поведение. Для заявок посетителей, обновлений статуса, загруженных файлов и личного прогресса нужно отдельное хранилище. Сообщите ChatGPT или Codex, что нужно сохранять и кто должен иметь право читать или изменять эти данные.

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

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

Варианты хранения данных и входа описаны в разделе Данные и подключения.

Советы по созданию сайта

• Используйте исходные материалы. Приложите файлы, ссылки, определения и формулы, которые должен использовать сайт. Попросите ChatGPT или Codex отмечать недостающую информацию вместо того, чтобы додумывать её.
• Опишите состояния при отсутствии данных и ошибках. Объясните, что должны видеть посетители, если поиск не дал результатов, форма заполнена не полностью или подключённое приложение недоступно. Предусмотрите способ повторить попытку или исправить проблему.
• Поделитесь визуальным образцом. Приложите снимок экрана или ссылку на страницу и укажите детали, которые хотите использовать, например компактные карточки или расположение поиска. Добавьте фирменные цвета, шрифты и рекомендации по стилю текста, если они есть.
• Учитывайте телефоны. Опишите, как карточки, таблицы и формы должны размещаться на узком экране. Проверьте, что навигацией, фильтрами и элементами форм удобно пользоваться без горизонтальной прокрутки.
• Помечайте демонстрационные данные. Если окончательное содержимое ещё не готово, попросите добавить демонстрационные записи с пометкой «пример». Замените их перед предоставлением доступа к сайту.
• Вносите изменения по одному. Запрашивайте одно изменение за раз и указывайте, что нужно сохранить. Например, переместите фильтр, не меняя сохранённые записи, правила доступа и существующие действия. Проверяйте затронутое взаимодействие после каждого изменения.

В галерее Sites представлены примеры веб-приложений, которые можно создать с помощью Sites.

Примеры запросов

Для центра ресурсов начните с короткого запроса:

Запрос:

Build a resource hub website where project leads can search our kickoff resources by task. Use the resource list I attach. Save a version without deploying it so I can review it.

Вы можете дополнить этот запрос действиями посетителей, правилами поиска и предпочтениями по оформлению:

Запрос:

Build a resource hub website for project leads preparing a kickoff. Use the resource list I attach, with its titles, descriptions, task labels, and source links.

Visitor actions:

- Choose a task, such as preparing an agenda.
- Search within that task's resources.
- Select a result to open its source link.

Search rules:

- When the search is empty, show all resources for the selected task.
- If no task is selected, show the full list.
- If there are no matches, offer a way to clear the filters and show the help contact from my list.
- Flag entries with missing titles or links for my review.
- Search filters can reset when the visitor returns.

Design preferences:

- Use a white background and dark text. Keep descriptions to one sentence, with a layout that works on a phone.
- If I provide a reference screenshot, use it for the search placement and compact resource cards.
- If I provide a brand guide, use its accent color.

Save a version without deploying it so I can review the layout and try the search.

Для существующего проекта попросите ChatGPT проверить совместимость и подготовить его к публикации:

Запрос:

Deploy this project with sites. Check whether it is compatible, make any required changes, and give me the deployment URL.

Если сайту нужно сохранять записи или загруженные файлы, укажите это в запросе:

Запрос:

Add player scores and avatar uploads to this game. Keep the scores and uploaded avatars between visits.