前言¶
产品讨论里常见两种落差：口头描述和最终界面不一致，静态线框又说不清点击后的状态。正式开工后改布局、改交互，成本会叠在前后端和测试上。若能在开发前拿出一版可点开、可操作的页面，和干系人把路径和状态先对齐，后面的实现会更稳。
下面介绍 SkillHub 上的社区 Skill「软件开发-原型生成器（html）」：它面向「正式开发前」这一阶段，目标是生成可交互的高保真 HTML 原型，而不是直接替代生产代码。
这是什么¶
一句话定位：由 Agent 按需求生成可交互的高保真 HTML 原型页面，用于开发前与用户对齐需求。
- 坐标：
@user_97585ae3/prototype-html-skill - 版本：1.0.0
- 分类：
dev-programming - 来源：community（社区）
- 发布者：
user_97585ae3（SkillHub 页面展示作者为「宁天下人负我」） - 标签：
requires_api_key=false（按 SkillHub 标注，不依赖额外 API Key）
Skill 本体遵循通用的 SKILL.md 格式，安装后由支持 Skills 的 AI 客户端在对话中加载并执行其中的指引。
官方入口：
- SkillHub 页面：https://www.skillhub.cn/skills/user_97585ae3/prototype-html-skill
- API 地址：https://api.skillhub.cn/user_97585ae3/prototype-html-skill
核心功能¶
以下能力均来自 SkillHub 公开简介，未在资料中出现的细节不作延伸：
- 高保真 HTML 原型：输出为 HTML 页面形态，便于在浏览器中直接查看。
- 可交互：强调「可交互」，适合表达按钮、跳转、简单状态切换等，而不只是静态截图式示意。
- 需求对齐用途：定位在「正式开发前」，用于与产品、业务或客户确认界面与流程，再进入实现阶段。
安装与启用¶
SkillHub 推荐通过 SkillHub 安装说明 使用 skillhub CLI，并把技能安装到当前 Agent 实际读取的 skills 目录；装到错误目录时，客户端可能无法识别，需自行核对路径。
1、检查 CLI¶
command -v skillhub && skillhub --version
若未安装，可按官方文档执行完整安装或仅安装 CLI（节选）：
# 完整安装（CLI + 默认 Skill，推荐）
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
# 仅安装 CLI
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安装本 Skill¶
将 @user_97585ae3/prototype-html-skill 安装到当前环境的 skills 目录，例如：
skillhub install user_97585ae3/prototype-html-skill --dir <skills 目录>
常用客户端的 skills 路径（摘自 SkillHub 安装文档）：
| 客户端 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
不同客户端目录不同，以你当前使用的 Agent 为准；部分环境安装后可能需要重启客户端才能加载新 Skill。
3、让 AI 代为安装（官方提示词）¶
SkillHub 页面提供的安装提示词如下，可复制给支持联网与终端的 Agent：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_97585ae3/prototype-html-skill`。
典型用法¶
安装：按上一节完成 skillhub install，或把官方提示词发给 AI，让其按 skillhub.md 完成安装并指向正确的 --dir。
使用：安装并启用后，在对话中说明要做的页面或流程（模块、主要界面、关键交互），由 Agent 依据 Skill 内 SKILL.md 的指引生成 HTML 原型文件；具体产出文件名、目录结构以安装包内 Skill 说明为准。生成后在浏览器打开 HTML，与干系人走查并记录修改点，再进入正式开发。
公开资料未提供单独的「示例 prompt」全文；可复现的官方示例即上述安装提示词与 skillhub install 命令。
适用场景与注意¶
更适合：
- 需要在编码前快速验证信息架构、主流程和关键交互的团队。
- 希望用浏览器可点的原型替代纯文档描述，减少「理解不一致」的场景。
- 已使用 Cursor、Claude Code、Codex 等支持 Skills 的工具链。
需要注意：
- 这是原型 Skill，产出用于对齐需求，不应默认等同于可上线的生产前端（安全、性能、可维护性、与设计系统绑定等需另行处理）。
- 社区来源（
community），维护节奏与 Skill 内规范以发布者为准；升级时可使用skillhub的更新能力并再次确认SKILL.md。 - SkillHub 页面数据（截至查阅）：评分 100000，下载 3427；
requires_api_key=false表示按平台标注无需额外 Key，仍取决于你本地 Agent 与模型的配置。
结尾¶
「软件开发-原型生成器（html）」把「可交互的高保真 HTML」和「开发前对齐需求」绑在一起：先在同一套可点击页面上达成一致，再写业务代码，通常比事后大改界面更省事。若你要从 SkillHub 安装或查看说明，可从官方页面入手：https://www.skillhub.cn/skills/user_97585ae3/prototype-html-skill 。
