查看前端示例

构建 API 后，工作空间中会自动生成示例前端文件夹和文件。可以直接使用这些产物，也可以借助 AI 将其完善为适合团队的界面。

示例前端文件夹

index.html — 初始界面

这是一个在同一界面中处理列表查询、详情查看、创建、修改、删除的基本 CRUD 界面。已一并应用了 style.css，以可直接使用的完整形态提供。

如果工作空间阻止了脚本，可以点击 始终允许此文件 来启用脚本。

test.html — API 测试界面

类似 Swagger、Postman、Insomnia，这是一个可以在界面上直接调用自动生成的 API 并查看响应的测试界面。

style.css / README.md

按需修改 index.html 和 style.css，就能把自动生成的默认界面打造成适合团队的网站。

用 AI 完善 index.html

README.md 中详细整理了表结构和 API 规范，因此将该文件原样提供给 AI（Claude、ChatGPT 等），无需额外说明即可直接请求修改 index.html 的逻辑或设计。

1. 复制 README.md 的内容并提供给 AI。
2. 一并说明想要的界面布局或设计。（例：“把列表显示为卡片形式，并根据状态值显示不同颜色”）
3. 用 AI 修改后的 index.html 覆盖同一文件夹中的文件。
4. 通过 test.html 重新确认 API 运行情况。

使用完成的界面

将 index.html 完善为团队专属系统后，可以通过两种方式使用。

相关文档

• 创建架构文件（.sfn）
• 构建 API 并部署数据库
• 创建团队内部 Web 服务
• 创建对外公开的 Web 服务