产品原型模板
这是一个面向 ToB 后台管理系统的原型项目模板。它适合产品经理把业务目标、页面范围和评审口径快速沉淀为 PRD、可评审页面和可部署预览链接。
快速开始
安装依赖并启动本地预览：
浏览器访问：
然后把这段话发给 Codex，让它先补齐产品交付所需的信息：
请使用本项目的 prototype-agent skill，帮我把这个模板改成【项目名称】原型。这个原型给【用户/评审对象】评审，主要验证【业务目标/流程方案】。请先整理需要我确认的最少信息，再帮我更新 PRD、页面、菜单、文档入口，并在完成后运行 npm run build。
文档分工
| 文档 | 什么时候看 |
|---|---|
docs/getting-started.md |
不确定怎么把业务目标拆成可执行原型任务 |
docs/product/ |
查看每个菜单或模块的 PRD、规则和验收口径 |
docs/ui-guidelines.md |
评审页面是否符合后台产品的基本 UI 方向 |
docs/vercel-deployment.md |
准备把原型发布到 Vercel |
已经准备好的能力
| 能力 | 它能帮你做什么 |
|---|---|
| 后台外壳 | 把菜单、页面内容、当前位置和顶部操作放进一套管理后台框架里。 |
| 上手工作台 | 帮你把业务背景、评审对象、页面范围和反馈点整理成可执行任务。 |
| 文档抽屉 | 评审页面时随手打开当前 PRD、规则说明和相关指南，不用在文件里来回找。 |
| PRD 索引 | 让每个菜单都有对应需求说明，后续新增、调整和验收都有依据。 |
| 发布准备 | 保留 Vite 构建、Vercel 路由、访问码环境变量和可选自有域名接入说明，方便把预览链接发给评审团队。 |
| 访问保护 | 出于隐私考虑，用访问码限制内部评审链接访问，避免未公开原型被外部查看。 |
打开后会看到什么
通过访问页后，会进入一套后台管理界面。左侧菜单承载业务模块，中间区域展示当前页面，顶部“文档”入口会把页面和 PRD 绑在一起。
模板初始只有“开始使用”页面，它会告诉你需要准备哪些产品信息、Codex 可以接手哪些交付。后续新增业务模块时，菜单、页面和对应 PRD 会一起增长，评审时可以从页面直接打开需求说明和验收口径。
常用命令
npm run dev # 本地设计和预览 npm run build # 发布前检查并生成 dist npm run preview # 预览构建后的版本 npm run typecheck # 只做类型检查
技术组成
- React + TypeScript + Vite
- Ant Design 5 后台组件体系
- React Router 单页路由
- Markdown 文档抽屉
- Vercel SPA 路由配置
- 可选访问码隐私保护能力