创建网站

首先，在 ChatGPT 或 Codex 中描述你想构建的内容。然后审阅初始版本，并逐步完善。

开始使用 sites

在网页或桌面应用中打开 ChatGPT。在提示词中包含“website”一词，或提及 @Sites，即可启动 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 构建的 Web 应用示例。

提示词示例

对于资源中心，可以从一段简短的提示词开始：

提示词：

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.