再学 AI
第 13 课 / prototype
当前 · 工程阅读 → 对照 → 问答 → 场景

用可见结果回答一个设计问题

原型用于验证状态、逻辑或界面选择。读这一篇时先问:它究竟要帮助我们决定什么?

还不清楚 Skill、Agent、安装和调用?先读 从零开始的6节入门课

在关系图中查看 prototype 与其他技能的关联 →

先把必要的概念讲清楚

原型是一个把未知问题变得可观察的小试验。学习它时,先写要回答的问题,再限制原型只做到足以得到答案。看起来像成品,与具备正式工程质量是两回事。

下面是老师补充的入门说明;原作者的要求保留在中英对照正文中。所有例子均为帮助理解而构造的教学情境。

prototype|用来回答问题的原型

成本低、范围小、可观察的试验产物,目的在于消除某个未知,例如比较逐段中英对照是否易读。它可以是界面、算法或粗稿。能运行不等于具备生产所需的权限、容错和维护条件;应带走试验所得的决定与证据。

state machine|状态与允许的转换

列出对象可能处于哪些状态,以及什么事件允许它从一个状态变为另一个。例如工单从待澄清到可执行,再到实施中,最后验收完成。不能仅因为“写完代码”就跨过验收。状态机让进度含义明确,而不仅是漂亮的标签。

interface / API|接口

使用者与一项能力交互时遵循的约定,包括可调用什么、传入什么、得到什么、失败怎样表示。接口可以是程序函数,也可以是网络请求。创建收藏接口接收用户和课程信息、返回收藏结果;它不需要向调用者暴露数据库表结构。这里的接口通常不是指页面外观。 本教材涉及更广义的“接口”时,还包括错误、调用顺序和约束等使用约定;不能把接口一概等同于网络 API。

fixture / harness|测试样本与运行装置

fixture 是为复现或测试准备的已知输入和初始数据,例如固定课程清单。harness 是把代码、输入和检查串起来的运行装置,例如一次命令启动最小服务并断言结果。它们帮助每次在相同条件下比较,而不是凭上次页面看起来怎样判断。

读原文,理解每一步为什么这样做

左右内容按小节对应;窄屏先中文、后英文。两种语言均完整展示,对应讲解紧接在小节之后。译文传达原文要求;老师讲解补充概念、原因、例子与适用边界。

中文译文English · 英文原文
中文译文
name: prototype
description: "构建一次性原型来回答设计问题。用户希望验证状态模型或逻辑是否合理,或探索界面应该怎样时使用。"
English · 英文原文
name: prototype
description: Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
中文译文

制作用来回答问题的一次性原型

原型是为了回答一个问题而写、用完可以丢弃的代码。想回答的问题,决定原型应该做成什么样。

English · 英文原文

Prototype

A prototype is throwaway code that answers a question. The question decides the shape.

中文译文

选择要回答的问题类型

根据用户的请求、相关代码,或者在用户可以回应时直接询问,确定本次原型要回答哪一种问题:

  • “这套逻辑或状态模型是否合理?” 阅读 LOGIC.md。制作一个可分享的单一 HTML 文件,既有供用户自由操作的按钮,也有按标签页组织的引导步骤。让状态机实际走过那些仅在纸上推演时难以想清楚的情形,并使不懂开发的人也能够操作这个演示。
  • “这个界面应该是什么样?” 阅读 UI.md。在同一条页面路由上生成几种差异明显的界面方案,通过 URL 查询参数和页面底部的悬浮栏,在方案之间切换。

这两种方向产生的成果差别很大。如果一开始选错,整次原型可能都无法回答真正的问题。

如果问题确实含糊,而且暂时联系不上用户,就根据周围代码选择更符合情境的一类:后端模块通常偏向逻辑验证,页面或组件通常偏向界面探索。把这个选择所依据的假设,写在原型顶部。

English · 英文原文

Pick a branch

Identify which question is being answered, using the user's prompt, the surrounding code, or by asking if the user is around:

  • "Does this logic / state model feel right?"LOGIC.md. Build a single shareable HTML file (free-play buttons plus tabbed guided walkthroughs) that pushes the state machine through cases that are hard to reason about on paper, and that a non-developer can drive.
  • "What should this look like?"UI.md. Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar.

The two branches produce very different artifacts, so getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype.

老师讲解 · 对应上方原文 · 含教学举例

逻辑原型与界面原型,回答不同未知

逻辑原型用来观察状态和事件,例如先标已读、再答错题,课时应处于什么状态。让人按按钮触发事件并看状态变化,比长篇文字讨论更容易发现矛盾。

界面原型回答信息怎样排列、交互怎样发生。例如比较左右中英对照与逐段交替,你亲眼看过后才容易指出哪种适合阅读。

若你想弄清“未答题能否算掌握”,只做漂亮页面并没有回答规则;若想比较阅读体验,只做状态表也不够。必须根据问题选分支,信息不足时声明假设。

你想看的是逻辑是否成立,还是界面是否好用?

假设网站需要自动出题。你可能困惑“答错三次后怎样进入复习”,也可能困惑“题目和讲解怎样摆放容易阅读”。这是两种问题。

前者做状态演示,显示题号、剩余次数、是否进入复习,让你点击答对、答错、跳过,观察有没有卡住。后者做几种页面布局让你切换比较,暂时可以使用同一份固定题目,不必接好真实 AI 服务。

原型应有明确问题和结束结论。用完以后保留决定及可追溯依据,再按正式工程要求实现。原型阶段省略测试和完善错误处理,是为了快速探索,不能当成上线代码的质量标准。

中文译文

两类原型共同遵守的规则

  1. 从一开始就把它当作一次性代码,并明确标注。 把原型放在它对应的模块或页面附近,让人容易看懂它与实际项目的关系。同时,通过文件或目录名称,让随手打开代码的人也能发现这是一份原型,而不是正式生产代码。对于临时界面路由,遵守项目已有路由约定,不要另造一套顶层目录结构。

  2. 让启动过程非常简单。 界面原型应能通过项目任务工具中的一条命令启动,例如 pnpm <name>python <path>bun <path>。逻辑演示则是一个用户双击就能打开的 HTML 文件。不论哪一类,都不要让用户还得研究怎样启动。

  3. 默认不把状态长期保存下来。 状态保留在内存中。数据持久化应当是原型可能要验证的对象,而不应成为原型默认依赖的前提。如果待回答的问题明确涉及数据库,就使用临时数据库,或使用名称清楚标着“PROTOTYPE, wipe me”的本地文件,让人知道它是原型数据、可以清理。

  4. 省去与回答问题无关的完善工作。 不写测试,不增加超出“让原型能够运行”所需范围的错误处理,也不进行抽象设计。原型的目的,是尽快获得一个问题的答案。

  5. 把状态显示出来。 逻辑原型每次执行操作后,或者界面原型每次切换方案时,都打印或展示完整的相关状态,让用户能够看出这一步改变了什么。

  6. 结束时同时保存结论和依据。 把已经验证成立的决定落实到正式代码中。原型本身则作为一手材料,提交到主分支之外的一条临时分支,并在实现工单中留下指向该分支的资料引用。原型回答了什么问题、最终判断是什么,也应记录在工单或提交中。主分支只保留经过验证的决定。

English · 英文原文

Rules that apply to both

  1. Throwaway from day one, and clearly marked as such. Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious, but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure.
  2. Trivial to run. A UI prototype starts from one command in the project's task runner: pnpm <name>, python <path>, bun <path>, etc. A logic demo is a single HTML file the user double-clicks. Either way, no thinking required to start it.
  3. No persistence by default. State lives in memory. Persistence is the thing the prototype is checking, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE, wipe me" name.
  4. Skip the polish. No tests, no error handling beyond what makes the prototype runnable, no abstractions. The point is to learn something fast.
  5. Surface the state. After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed.
  6. Capture it when done. Fold any validated decision into the real code, then capture the prototype itself as a primary source: commit it to a throwaway branch, out of main, and leave a context pointer to that branch on the implementation issue. Capture the answer too (the verdict and the question it settled) in the issue or a commit. The main branch keeps only the validated decision.
老师讲解 · 对应上方原文 · 含教学举例

一次性意味着降低非必要投入,而非忽视试验问题

内存状态、临时数据库、少量错误处理都为了减少启动成本。原型通常不用建立正式系统的全部测试、抽象和持久化,因为它首先要检验设计想法。

**例子:**用三条假课程数据比较页面布局是合理的;拿它证明百万条真实记录的性能就超出了证据范围。若研究问题本身是保存和恢复,临时持久化则是试验必要部分,不能因“默认内存”而省略。

显示相关状态让观察更清晰,例如操作前后实际保存的学习状态,不只显示一个成功提示。

带走决定和证据,别把试验代码悄悄留成正式系统

问题回答后,应记录测试了什么、看到了什么、选择了什么。作者此版本允许把原型保留在主分支以外的临时分支,供后来查看证据,正式实现工单链接它。

因此“一次性”不是一概销毁所有历史。它强调主分支承载经过验证和正式实现的决定,试验产物不被误认成维护中的产品。

某段状态转换代码若最精确表达决定,可以作为后续规格的依据;但正式实现仍需补齐适用的权限、错误处理、数据和检查。

原作者:Matt Pocock · 中文翻译为非官方译本

来源:skills/engineering/prototype/SKILL.md ↗

固定版本:3cca18b368ae95cdbdebbff572ccafa662551015

配套参考资料(英文)

先作答,再看参考思路

Q1 · 理解

用自己的话说明:它解决什么问题,完成后会留下什么?

请各用一句话回答。若它只做规划或解释,不要把“已开发”“已部署”写成产物。

Q2 · 判断

原型保存在独立分支,会违背 throwaway 的原则吗?

我已思考,查看参考思路

不会。throwaway 限制投入和复用方式;独立保存是为了保留决策证据,正式实现不承担原型的临时结构。

Q3 · 追问

原文中哪条要求在你的环境下可能不成立?

说出具体一句及其前提,例如工具不可用、资料缺失、已有项目约定冲突,或它只是作者偏好。把你的答案带回课堂,我们据此继续讨论。

课堂回传格式:第 13 课 / 我的理解 / Q2 回答 / 仍不理解的原句。这里是阅读教材;实时问答在我们的对话中进行。

把方法放进一个具体情境

教学案例:不知道章节原文应并排还是折叠展示,可以做两种可阅读的样例来比较。若问题是教材解释是否准确,增加华丽界面不能回答它,应回到原文核验。

边界与容易误读的地方

可运行原型不等于生产软件。保留证据也不等于将临时代码混入正式实现。

讨论后再实践:先判断上述情境是否适用,再选择真实任务。现在无需安装、运行命令或修改现有项目。

关联阅读