交互式原型
探索真正的备选方案，让用户挑选，然后将选中的方案在浏览器中运行起来——且不悄悄重新设计。
适用场景
- 当用户要求“做个原型”、“演示几个方向”、“让这个可点击”。
- 设计评审已产生规范，用户想“感受”一下效果。
- 绿色场屏幕，信息架构仍在探索中。
不适用场景
- 仅做评论而不构建——请使用设计评审流程。
- 在应用的真正框架中进行生产实现。
- 仅修改内边距、颜色或文案。
- 任何需要真实用户或生产数据的场景。原型只使用合成数据。
输入
- 任务与约束（平台、视口、令牌（如可用））。
- 具有代表性的合成数据。在UI中必须标注为合成数据。绝不粘贴生产数据或个人数据。
- 可选：需尊重的设计评审或规范。
- 可选：用户已选择的方向。如果有，则跳过发散阶段，直接进入步骤3。
工作流程
1. 发散：两到三个方向简介
使用templates/direction-brief.md为每个方向编写简介。所有方向共享相同的约束、数据和任务。它们必须在信息架构或交互模型上有所不同——例如列表优先 vs 焦点模式 vs 看板——而不仅仅是配色方案。
- 如果你的运行环境支持真正独立的工作者（子代理或独立会话），则独立生成方向并注明。
- 否则，按顺序生成方向，并标注：“方向由一个代理按顺序生成。”
每个方向构建为一个独立的HTML文件，基于templates/direction.html模板。静态意味着具有代表性的布局和状态；交互功能暂不要求。
2. 对比并让用户选择
基于templates/comparison.html创建一个对比页面，链接每个方向，并陈述有意义的权衡（每个方向优化了什么、牺牲了什么、适合谁）。停下来，让用户选择。 除非用户明确委托你代为选择，否则不要在他们选择之前构建交互版本。
3. 严格嫁接：构建交互式原型
遵循references/graft-rules.md。简而言之：
- 读取所选方向的HTML源代码。
- 保留其标记结构、CSS和视觉决策。
- 对任何可能冲突的新类名或ID进行命名空间处理。
- 使用原生JavaScript添加交互功能。
- 使用templates/change-ledger.md将每次变更记录到变更日志中。任何非纯新增的改动都必须说明理由。
不得进行静默重新设计。如果所选方向存在缺陷，将其记录在变更日志中，在修改前征求用户同意。
4. 质量检查
对照references/prototype-quality.md检查原型：离线可用、视口meta标签、响应式设计、键盘支持、可见焦点、减少动效、空/加载/错误状态、无死的主操作、合成数据已标注。
默认设置
- 每个工件为一个独立的
.html文件：内联CSS和JS，无CDN，无Web字体，无外部图片（使用内联SVG或CSS）。 - 系统字体堆栈。
- 从
file://协议即可工作，无需服务器。 - 永不自动发布、部署或上传。
输出
<output-dir>/
├── directions/
│ ├── a-<name>.html
│ ├── b-<name>.html
│ └── c-<name>.html （可选）
├── comparison.html
├── prototype.html
└── change-ledger.md
诚实声明
原型用于展示交互和布局。它不代表原生实现的可行性、性能、无障碍合规性或生产就绪程度。在交接时需明确说明。
许可声明
以下声明随此独立技能及其支持文件一同传播。
MIT License
Copyright (c) 2026 jamesonedge
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.