GitHub - weidsfsdwgf/ai-prototype-demo · GitHub
/" data-turbo-transient="true" />
Skip to content
Type / to search
Sign in<br>Sign upAppearance settings
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
weidsfsdwgf
ai-prototype-demo
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>4 Commits<br>4 Commits
.agents/skills/prototype-agent
.agents/skills/prototype-agent
api
api
docs
docs
logs
logs
scripts
scripts
src
src
.gitignore
.gitignore
README.md
README.md
index.html
index.html
middleware.js
middleware.js
package-lock.json
package-lock.json
package.json
package.json
tsconfig.app.json
tsconfig.app.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
vercel.json
vercel.json
vite.config.ts
vite.config.ts
View all files
Repository files navigation
产品原型模板
这是一个面向 ToB 后台管理系统的原型项目模板。它适合产品经理把业务目标、页面范围和评审口径快速沉淀为 PRD、可评审页面和可部署预览链接。
快速开始
安装依赖并启动本地预览：
npm install<br>npm run dev
浏览器访问：
http://localhost:5173
然后把这段话发给 Codex，让它先补齐产品交付所需的信息：
请使用本项目的 prototype-agent skill，帮我把这个模板改成【项目名称】原型。这个原型给【用户/评审对象】评审，主要验证【业务目标/流程方案】。请先整理需要我确认的最少信息，再帮我更新 PRD、页面、菜单、文档入口，并在完成后运行 npm run build。
文档分工
文档<br>什么时候看
docs/getting-started.md<br>不确定怎么把业务目标拆成可执行原型任务
docs/product/<br>查看每个菜单或模块的 PRD、规则和验收口径
docs/ui-guidelines.md<br>评审页面是否符合后台产品的基本 UI 方向
docs/vercel-deployment.md<br>准备把原型发布到 Vercel
已经准备好的能力
能力<br>它能帮你做什么
后台外壳<br>把菜单、页面内容、当前位置和顶部操作放进一套管理后台框架里。
上手工作台<br>帮你把业务背景、评审对象、页面范围和反馈点整理成可执行任务。
文档抽屉<br>评审页面时随手打开当前 PRD、规则说明和相关指南，不用在文件里来回找。
PRD 索引<br>让每个菜单都有对应需求说明，后续新增、调整和验收都有依据。
发布准备<br>保留 Vite 构建、Vercel 路由、访问码环境变量和可选自有域名接入说明，方便把预览链接发给评审团队。
访问保护<br>出于隐私考虑，用访问码限制内部评审链接访问，避免未公开原型被外部查看。
打开后会看到什么
通过访问页后，会进入一套后台管理界面。左侧菜单承载业务模块，中间区域展示当前页面，顶部“文档”入口会把页面和 PRD 绑在一起。
模板初始只有“开始使用”页面，它会告诉你需要准备哪些产品信息、Codex 可以接手哪些交付。后续新增业务模块时，菜单、页面和对应 PRD 会一起增长，评审时可以从页面直接打开需求说明和验收口径。
常用命令
npm run dev # 本地设计和预览<br>npm run build # 发布前检查并生成 dist<br>npm run preview # 预览构建后的版本<br>npm run typecheck # 只做类型检查
技术组成
React + TypeScript + Vite
Ant Design 5 后台组件体系
React Router 单页路由
Markdown 文档抽屉
Vercel SPA 路由配置
可选访问码隐私保护能力
About<br>ai-prototype-demo-fawn.vercel.app<br>Resources<br>Readme<br>Activity<br>Stars<br>5 stars<br>Watchers<br>0 watching<br>Forks<br>7 forks<br>Report repository
Releases
Packages
Contributors
Languages
You can’t perform that action at this time.