构建可点击原型

第4步 · 可点击原型

原型让利益相关者在工程开始前感受行为树。它是合同的演示，而非设计规范：必须展示每个分支，包括错误和边缘情况，而不仅仅是快乐路径。

先阅读：work/<item>/03-trees/中的已审批树、概念、context/product.md和context/writing-style.md。使用../../examples/price-alerts/04-prototype/index.html（相对于本技能）作为以下结构的参考实现。

要求

1. 一个自包含文件： work/<item>/04-prototype/index.html。内联所有CSS和JS。无需构建步骤，无外部请求（可选网络字体除外），因此可从磁盘打开、附加到工单或以链接形式发布。

2. 屏幕： 每个不同状态是一个带有data-screen="<id>"的元素。一次只显示一个。导航通过原型自身的按钮进行，类似于真实产品。

3. 场景控制： 一个与产品UI清晰分离的侧面板，为树中的每个while状态和if条件提供切换开关（已验证/未验证、达到限制、通知关闭、模拟价格变动……）。更改切换必须改变产品UI的行为，使得每个分支都可访问。

4. 覆盖率映射： 一个<script type="application/json" id="tree-coverage">块，映射每个树的每个then和and行到演示该行的屏幕：

   {
     "trees": {
       "functional/price-alert-creation": [
         { "line": "then the alert is saved as active", "screen": "alerts" },
         { "line": "and the alert's direction is set to above or below the current price", "screen": "alerts" }
       ],
       "functional/price-alert-trigger": [
         { "line": "then no further notification is sent", "screen": null, "reason": "Not visible: absence of a notification" }
       ]
     }
   }
   

   仅当有reason（仅后端或“无任何操作”的结果）时，才允许screen: null。

5. 可见覆盖率面板： 在侧面板中将覆盖率映射渲染为树行的检查列表；点击某行跳转到其屏幕并设置正确的场景。这使原型成为审阅工具。

6. 真实文案： 使用树中的确切消息。将示例数据标记为示例数据。

7. 品牌： 遵循context/product.md中的任何设计令牌；否则使用中性、可访问的风格。适配手机宽度。键盘焦点可见。

检查

运行python3 .pm-harness/pm_check.py prototype work/<item>/03-trees work/<item>/04-prototype/index.html。如果任何树行在覆盖率映射中缺失或指向不存在的屏幕，则检查失败。修复直到通过。

审批

带PM浏览原型中的Journey树，然后浏览他们选择的任何分支。收集反馈。如果反馈改变了行为，首先更新树，重新运行树检查，然后更新原型。当PM批准时，在01-idea.md中设置stage: prototype并提供/pm-harness:create-eng-tickets。如果PM的团队使用Figma进行最终设计，说明哪些屏幕设计师应进一步推进。