前言¶

产品讨论里常见两种做法：要么在白板或文档里写功能说明，界面长什么样要靠口头补；要么交给设计工具出静态稿，改一版就要重新导出。两边来回对齐，成本高。prototype-html 是 SkillHub 上的一条社区 Skill（design-media 分类），面向「先要把界面和说明放在一起、还要能点一点看交互」的阶段：你用自然语言写清需求，Agent 调用该 Skill 后产出单文件 HTML，左侧是界面、右侧是说明，元素和文档之间用交互连线关联。

这是什么¶

一句话定位：描述产品需求，生成可交互的单文件 HTML 产品原型页面。

来源与维护：社区来源（community），发布者为 user_d5a027ad，坐标 @user_d5a027ad/prototype-html，当前页面标注版本 1.0.0。SkillHub 展示页：https://www.skillhub.cn/skills/user_d5a027ad/prototype-html；Skill 资源地址：https://api.skillhub.cn/user_d5a027ad/prototype-html。标签标明 requires_api_key=false，不依赖额外 API Key。

解决什么问题：把「界面原型」和「原型说明」放在同一页里动态关联，减少文档与 Demo 脱节；输出是单文件 HTML，便于本地打开、转发或在评审里演示。

核心功能¶

以下能力均来自官方简介与用法说明，未超出已核实范围。

1. 单文件 HTML 原型：根据你给出的产品需求描述，生成可直接打开的可交互页面。
2. 左右分栏布局：一侧展示 UI 界面，另一侧展示与功能对应的说明文档。
3. 交互式连线：界面元素与右侧说明通过连线动态关联，点击或交互时可对照阅读，实现一体化展示。
4. 与 Agent 工作流衔接：官方用法把「头脑风暴写需求 → 生成原型 → 对话迭代 → 再出 PRD」串成固定步骤，Skill 本身负责中间的 HTML 原型生成环节。

安装与启用¶

官方资料未给出 npx skills 一类的一行安装命令，只说明需要把 Skill 目录交给 Agent 安装。可按下面步骤操作。

1. 从 SkillHub 对应条目获取 Skill 包（页面坐标 @user_d5a027ad/prototype-html，资源根地址为 https://api.skillhub.cn/user_d5a027ad/prototype-html）。
2. 将下载得到的 skill 目录 放到你当前 Agent 支持的 Skills 安装位置（具体路径以你所用客户端的 Skills 文档为准；本资料未区分 Cursor、Codex CLI、Claude Code 的差异命令）。
3. 确认 Skill 已被 Agent 识别后，在对话中按触发场景调用（见下一节）。

无需配置 API Key（requires_api_key=false）。

典型用法¶

下面步骤摘自官方「用法」说明，可按顺序复现。

1、安装 Skill

把 skill 目录下载下来，交给你的 Agent 去安装。

2、生成需求

用 brainstorming（头脑风暴）产出精确、完整的需求描述，避免原型阶段反复猜意图。

3、生成原型

在对话中明确调用 Skill，并附上需求正文。官方示例句式如下：

使用 prototype-html 技能帮我生成以下需求的原型：<这里粘贴完整需求描述>

4、调整原型

与 Agent 持续对话，修改布局、交互和文案，直到界面符合预期；同步调整页面右侧的原型说明，保证连线关联的文档与界面一致。

5、生成 PRD

在原型定稿后，可让 Agent 根据当前原型输出 PRD 文档（这一步属于工作流延伸，具体 prompt 以你团队规范为准）。

6、收尾

手动修订 PRD 后结束流程。

触发场景（官方简介）：当需要创建产品原型、UI 界面原型、可交互的 HTML 演示页、产品功能展示页，或对话中出现「原型」「prototype」「产品界面」「UI 原型」「交互原型」「演示页面」等表述时，适合启用本 Skill。

适用场景与注意¶

适合谁

• 产品经理、业务方：在评审前快速做出可点击的 HTML Demo，并自带说明侧栏。
• 研发或全栈同学：需要把需求可视化给非技术同事，又不想先搭完整前端工程时。

限制与注意

• 产出是 单文件 HTML 原型，不是生产级前端工程；复杂业务状态、后端联调、设计系统一致性需自行评估。
• 质量高度依赖 需求描述是否完整；官方明确建议先用 brainstorming 写清需求再生成。
• SkillHub 页面统计（以抓取时为准）：评分 100000，下载 885，安装 0——安装数为 0 可能表示统计口径或上报方式与「本地下载目录安装」不一致，以你本地 Agent 是否成功加载 Skill 为准。
• 迭代靠 多轮对话；右侧说明需与左侧界面一起改，否则连线关联的内容会失真。

结尾¶

prototype-html 把「可交互界面」和「结构化说明」压进一个 HTML 文件，适合需求澄清、评审演示和向 PRD 过渡。若你要在 Agent 里做产品向的原型而不是静态截图，可从 SkillHub 条目入手安装并在对话中按官方句式调用。

• SkillHub 展示页：https://www.skillhub.cn/skills/user_d5a027ad/prototype-html
• Skill 资源：https://api.skillhub.cn/user_d5a027ad/prototype-html