页面、组件、样式和示例数据保存在项目的原型包里，用项目自己的方式构建。
公开示例 · 模拟数据
先打开一个原型，看看能做什么。
下面三个是 OpenFolio 项目自己的设计原型，以固定版本发布在 Cloudflare R2 上，链接会在新标签页打开。它们只用模拟数据演示界面和交互：其中的连接、登录都是模拟操作，不会连接真实的 GitHub 或 OpenFolio 服务，也不代表这些设计都已上线。
个人工作台
连接 GitHub、发现仓库、浏览工程与公开预览的设计流程。原型内可输入模拟凭据 demo，不是真实账号。
Token 工作台与多设备登录
同一 token 恢复工作台、不同 token 互相隔离、设备退出等设计方案的模拟演示。
工作台外壳
导航、项目上下文、内容区域和手机布局的设计。
启用原型管理
告诉 Agent，你需要设计原型。
前提：已完成 Skill 安装与项目接入。原型管理已随 Skill 安装，无需另外下载；使用原型功能需要 Node.js 24 或更新版本。
在项目的 Agent 对话中发送，例如：
使用 spec-trail 为当前项目启用原型管理。沿用现有 UI 规范，制作订单导出页面的交互原型，使用示例数据，并将固定版本关联到本次 Change。
接下来会发生什么：Agent 查看项目是否已经做过原型选择。你同意启用后，它在项目中建立一个原型包（默认 packages/prototype），整理一份设计规范（已有规范时直接引用），再用示例数据绘制原型。第一次发布时，它会询问托管方式。
你需要做：确认是否启用；告诉 Agent 托管方式和已有的发布地址（如果有）；打开预览，核对界面和关键交互。
启用后，大范围的界面改动会先画原型再实现；小的界面变化，Agent 会先问你是否需要原型。不想使用时直接拒绝，Agent 会记录这个选择，不再重复建议。
当前与历史版本
项目当前的原型，和每项改动的版本，分开保存。
默认分支上的清单（prototype.json）列出项目现在有哪些页面和组件原型。
每个 Change 记下交付时的原型版本、地址和源码提交，归档后也能回看（外部托管需持续保存该版本）。
更新当前原型不会替换旧 Change 的版本。页面原型可以声明桌面、iPad 和手机三种设备；组件原型可以声明自己的预览尺寸。
预览与验收
打开对应版本，核对关键交互。
有 OpenFolio 时，可以浏览项目当前原型，或从某个 Change 打开它关联的版本；没有工作台时，直接打开发布地址，或仓库中的单 HTML 文件。选择设备或尺寸，核对布局、状态切换和关键操作，验证结果随 Change 记录。
原型在浏览器中运行，只演示交互，不代表业务功能已经实现；正式实现仍按 Change 的流程完成验证和验收。
进阶 · 托管方式
选择原型发布到哪里。
第一次发布时 Agent 会询问，选择保存在项目的 docs/project/workflow.json 中，之后沿用，不会因为一次发布失败自动换方式。
| 方式 | 适合 | 如何交付 |
|---|---|---|
| OpenFolio 内置托管 | 团队已经部署了 OpenFolio 实例 | 使用管理员提供的上传地址发布，得到固定版本地址 |
| 自建静态托管 | 已有静态网站或对象存储 | 由项目自己的上传适配器发布，返回固定版本地址；上方示例由 OpenFolio 项目以这种方式发布到 Cloudflare R2 |
| Git 单 HTML | 不想依赖外部服务 | 生成一个内联全部资源的 HTML 文件保存在仓库中，并为对应 Change 复制一份快照 |
多文件的静态产物由项目自己构建。外部托管需要持续保存已发布的版本，历史 Change 才能一直打开同一份设计；SpecTrail 不保证外部版本永久可用。Git 单 HTML 随仓库和归档保存。
进阶 · 发布与登记
构建、发布、登记，再提交。
- 在原型包中维护页面、组件、示例数据和设计规范，先提交源码。
- 用项目原有方式构建，为每个入口声明设备或尺寸。
- 通过选定的托管方式发布完整产物，确认版本可以访问。
- 把版本登记到当前清单和对应 Change，提交并推送。
这些步骤通常由 Agent 用原型模块自带的命令完成。命令和数据格式见 原型模块文档。
发布成功后，才更新引用。
上传失败时保留原来的引用，已交付的版本不会被覆盖。归档时 Git 保留记录和源码；外部托管的文件由托管服务负责持续保存。