📊 页面导航

适用角色与上手难度

🎯 学习产出： 掌握原型设计方法，能用一次性代码快速验证状态模型和 UI 方向

🚀 AI 能力提升： 设计验证、快速迭代

prototype

预计阅读时间: 4 分钟

一次性原型。原型是回答一个问题的临时代码——问题决定形状。这是主流程步骤 2 的绕道，但任何设计问题难以在纸上决定时都可以用。

概述

两个分支产出完全不同的东西，选错分支浪费整个原型：

问题	分支	产物
"这个逻辑/状态模型感觉对吗？"	LOGIC	单个可分享 HTML 文件：自由操作按钮 + 分步导览，非开发者也能驱动
"这个 UI 应该长什么样？"	UI	单路由上几个风格迥异的 UI 变体，URL 搜索参数 + 悬浮底栏切换

问题真正模糊且用户不在时，默认选更匹配周边代码的分支（后端模块 → 逻辑；页面/组件 → UI），并在原型顶部声明这个假设。

> 帮我验证一下这个状态机在边界情况下会不会出问题
> 这个结算页给我出三个不同风格的 UI 方案

从第一天就是临时的，并明确标注。代码放在实际使用位置附近（上下文明显），但命名让人一眼看出是原型不是生产代码。UI 原型遵守项目现有路由约定，不发明新的顶层结构
容易运行。UI 原型从项目任务运行器的一个命令启动（pnpm <name>、python <path>）；逻辑演示是双击就开的单个 HTML 文件。启动不需要思考
默认无持久化。状态在内存里。持久化是原型要检查的东西，不是它该依赖的。问题明确涉及数据库就用临时 DB 或本地文件，命名带 "PROTOTYPE, wipe me"
跳过打磨。不写测试，错误处理只到能跑的程度，不写抽象。重点是快速学到东西
暴露状态。每个动作后（逻辑）或每次变体切换后（UI），打印或渲染完整相关状态让用户看到变化
完成后归档。验证过的决策折进真实代码；原型本身作为 primary source 提交到 prototype/<name> 分支（远离 main），在实现 issue 上留指向分支的上下文指针；答案（结论 + 它解决的问题）也记录在 issue 或 commit 里。main 分支只保留验证过的决策

Tip

"一次性"是约束代码怎么写，不是承诺要销毁它——答案折进真实代码，原型本身保留在分支上作为一手来源。