Skill Learning

prototype

1. Bilingual SKILL.md

左右滑动可直接切换英文版与中文版;两种语言按段落自动对齐。英文中的蓝色虚线词语可点击查看解释。共标记 13 处。

入口 skill:prototype左右滑动切换语言 · 段落位置自动对齐
# Prototype
A prototype is ****. .
##
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](LOGIC.md). Build a single shareable HTML file (free-play buttons plus tabbed guided walkthroughs) that pushes the state machine through cases that are , and that a non-developer can drive. - **"What should this look like?"** → [UI.md](UI.md). Generate several on a single route, switchable via a URL search param and a floating bottom bar.
The two branches produce very different artifacts, so . 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.
## Rules that apply to both
1. **, 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. **.** 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, . 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. **.** 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 ****: commit it to a throwaway branch, out of main, and leave a 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.
# 原型
原型是**用来回答一个问题的一次性代码**。问题决定它的形态。
## 选择分支
确定要回答的是哪一个问题,依据用户的提示、周边代码,或者在用户在线时直接询问:
- **“这套逻辑 / 状态模型感觉对吗?”** → [LOGIC.md](LOGIC.md)。构建一个可分享的单 HTML 文件(自由操作按钮加上分标签的引导式演练),推动状态机经历那些很难在纸面上推演的情况,并让非开发者也能操作。 - **“它应该长什么样?”** → [UI.md](UI.md)。在同一个路由上生成若干结构上截然不同的 UI 变体,通过 URL 查询参数和底部悬浮栏切换。
两个分支产出的工件非常不同,所以选错分支会让整个原型白做。如果问题确实含糊且联系不上用户,就默认选择更符合周边代码的分支(后端模块 → 逻辑;页面或组件 → UI),并在原型顶部说明这一假设。
## 两个分支都适用的规则
1. **从第一天起就是一次性的,并清楚标明。** 把原型代码放在接近它未来实际用途的位置(紧邻它所原型化的模块或页面),让上下文一目了然,但命名必须让随意浏览的人看出它是原型,而不是生产代码。对于一次性 UI 路由,要遵守项目已有的路由约定;不要发明新的顶层结构。 2. **运行极其简单。** UI 原型通过项目任务运行器中的一条命令启动:`pnpm <name>`、`python <path>`、`bun <path>` 等。逻辑演示是用户双击即可打开的单个 HTML 文件。无论哪一种,启动都不需要思考。 3. **默认不做持久化。** 状态保存在内存中。持久化是原型要_检验_的对象,而不该成为原型运行的依赖。如果问题明确涉及数据库,就使用临时数据库或带有清楚“PROTOTYPE, wipe me”名称的本地文件。 4. **跳过打磨。** 不写测试,不做超出让原型_可运行_所需的错误处理,也不做抽象。重点是快速学到东西。 5. **把状态显露出来。** 每次操作后(逻辑分支)或每次切换变体时(UI 分支),打印或渲染完整的相关状态,让用户看见发生了什么变化。 6. **完成后把它留作证据。** 把任何已验证的决定折叠进真实代码,然后把原型本身保存为**一手资料(primary source)**:提交到 main 之外的一次性分支,并在实现 issue 上留下指向该分支的上下文指针。答案也要保存(包括结论以及它解决的问题),写入 issue 或 commit。main 分支只保留已验证的决定。

Entry SHA-256: 714de632d116bb73f65cdb5a882db15b9369a6713b9a47c0fad827848f0bfbe3

2. Why This Skill Is Clever

一句话核心机制

先把尚未解决的设计问题路由到“逻辑可操作演示”或“多方案 UI 对照”之一,再用刻意低成本、可观察、不可误认成生产代码的原型换取答案,最后把答案并入 main、把原型留在旁支作为一手证据。

触发与边界

直接来源(Direct source): frontmatter 将触发场景限定为两类:快速检验状态模型 / 逻辑是否合理,或探索 UI 应该是什么样子。正文把原型定义为 throwaway code that answers a question,因此它不适用于已经确定做法、只剩正式实现的任务,也不适用于无明确停止点的整套产品建设。

支撑上下文(Supporting context): LOGIC.md 把逻辑分支细化为单文件、可由非开发者操作的状态演示;UI.md 把 UI 分支细化为同一路由上的结构性变体。仓库的人类文档还明确区分了 prototyping 与 diagnosing-bugs:前者探索该构建什么,后者解释已构建内容为何出错。

解读(Interpretation): 这个 skill 的核心不是“快速写代码”,而是选择一个能最快制造有效反馈的实验装置。若问题能靠一句澄清解决,使用原型反而浪费;若问题已收敛,则应进入正式实现。

信息架构 / 执行顺序

  1. 先写出问题。 原型必须服务于一个可回答的设计问题。
  2. 选择实验分支。 状态 / 逻辑问题进入 LOGIC.md;外观 / 信息架构问题进入 UI.md。
  3. 歧义时做有证据的默认。 用户离线时,根据周边代码选择分支,并在原型顶部公开假设。
  4. 用共同规则约束成本。 从第一天标成一次性、启动简单、默认内存状态、跳过测试与抽象、持续呈现状态。
  5. 让用户操作并形成结论。 工件的价值来自暴露“这不该发生”或“我原以为会不同”之类认知差异。
  6. 分离答案与证据。 已验证决定进入真实代码和 main;原型进入不合并的旁支,并由 issue 上的上下文指针保持可追溯。

这条顺序把“做什么实验”“如何压低实验成本”“实验结束后留下什么”分成三个独立决策,避免原型靠惯性演变成生产代码。

最巧妙的设计点

  1. “The question decides the shape.” — 用未知问题反向选择工件。
    直接来源: 状态 / 逻辑与 UI 外观被拆成两个产出完全不同的分支。
    解读: 先选框架再找问题常会产出漂亮但无效的 demo;这里把分支判断设为最早的高杠杆决策。

  2. “getting this wrong wastes the whole prototype” — 明示分流错误的总成本。
    直接来源: 在用户不可达且问题含糊时,必须读取周边代码并公开假设。
    解读: 默认策略不是偷偷猜测,而是让猜测可见、可纠正;这让异步工作既能继续,又不会把假设伪装成事实。

  3. “Throwaway from day one” — 把临时性设计成可见属性。
    直接来源: 代码靠近未来用途放置以保留上下文,但命名必须阻止读者误认成生产代码,并遵守已有路由约定。
    解读: 这是一个双重约束:既不能把原型藏进脱离语境的角落,也不能让它以“临时”之名污染架构。

  4. “No persistence by default” — 把被验证的变量与运行依赖分开。
    直接来源: 状态默认只在内存;只有问题明确涉及数据库时才使用临时存储。
    解读: 原型应尽量减少无关变量。若要检验状态模型,却先引入真实数据库,反馈会同时混入部署、数据和权限问题。

  5. “Surface the state” — 把不可见推理变成可观察反馈。
    直接来源: 逻辑操作后或 UI 变体切换时,都必须展示完整相关状态。
    支撑上下文: LOGIC.md 进一步要求可读状态面板、自由操作与按场景引导的演练;UI.md 要求可分享且重载稳定的变体参数。
    解读: 这个规则把原型从“演示作者想展示的 happy path”变成用户能主动施压的可检查系统。

  6. “capture the prototype itself as a primary source” — 不合并原型,也不销毁证据。
    直接来源: 答案进入 issue / commit 和真实代码;原型提交到 main 之外的一次性分支,并从实现 issue 链接过去。
    解读: 它解决了常见二选一:合并会留下低质量负担,删除又会丢失促成决定的可运行证据。旁支充当决策档案,而 main 只承载结论。

防失败机制与 trade-off

原文明确的不变量:

防失败价值: 这些规则分别防止答错问题、隐性猜测、原型冒充生产、基础设施吞噬实验时间、反馈不可观察,以及探索证据在清理时消失。

权衡与可移植性风险:

可迁移原则

  1. 用一句可证伪的问题定义实验。 工件不是目标,答案才是目标。
  2. 让实验形态匹配不确定性的类型。 状态问题需要可操作转换;视觉问题需要结构性对照。
  3. 把默认假设公开。 无法同步澄清时可以前进,但必须让用户一眼看见猜测。
  4. 主动移除与问题无关的生产约束。 少依赖、少持久化、少抽象,同时设硬边界防止直接上线。
  5. 分开保存结论与证据。 主线承载验证后的决定,旁路保留可重现的探索过程。

今日实践题

如果团队对结账页既不确定“优惠状态机是否正确”,也不确定“错误信息应该如何布局”,你会如何把它拆成两个问题,并为每个问题选择一个最小、可操作、不会误入生产的原型?

Evidence note

Source & provenance
Repository path
skills/engineering/prototype/SKILL.md
Generated
2026-09-05 08:21 Asia/Shanghai
Upstream commit
3cca18b368ae95cdbdebbff572ccafa662551015
Source
View on GitHub