前言¶
产品想法往往先停留在文档或口头描述里。要验证流程和界面，常见做法是开 Figma、搭前端工程，或让设计排期出稿，周期偏长。若目标只是「能让人点一点、走通主路径」，一个可在浏览器直接打开的独立 HTML 往往够用。
下面介绍 SkillHub 社区 Skill「快速生成高保真的产品交互原型1」（坐标 @user_cc3f6cfc/product-prototype-design，当前版本 v1.0.1）。它面向 Agent 工作流：在对话里描述页面与交互，由 Agent 按 Skill 指引生成高保真、可交互原型，输出为单个 HTML 文件，便于产品经理、创业者和设计师做概念验证。
这是什么¶
定位：在 AI 编码助手（如 Cursor、Claude Code 等支持 Skills 的客户端）中，把「产品原型 / Demo / Landing Page」类需求转成可本地打开的单文件 HTML 交互页。
来源与维护：SkillHub 社区来源（community），发布者为 user_cc3f6cfc，分类为 design-media。页面标注 requires_api_key=false，即 Skill 本身不要求额外 API Key（具体生成效果仍取决于你所用的模型与客户端能力）。
解决的问题：缩短从想法到可点击界面的路径，减少为验证而单独搭前端或等设计稿的时间；交付物是单文件，分享与演示只需浏览器。
核心功能¶
以下能力均来自 SkillHub 官方简介与页面说明，未在资料中出现的细节不展开。
- 高保真交互原型：生成带界面与基础交互的产品原型，而非纯线框说明。
- 单文件 HTML 交付：输出为单个独立 HTML，便于保存、转发和在浏览器中预览。
- 意图识别指引：Skill 内写明触发场景——用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证等；即未明说「原型」，只要想快速做一个产品页面、界面或 Demo，也应启用此 Skill。
- 适用角色：产品经理、创业者、设计师等需要快速验证想法的场景。
安装与启用¶
安装 SkillHub CLI（若尚未安装）¶
先检查是否已安装：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档执行完整安装（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
说明与命令出处：SkillHub 安装与优先源配置。
安装本 Skill¶
安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认装到 ./skills/ 可能不会被客户端识别。
skillhub install @user_cc3f6cfc/product-prototype-design --dir <skills 目录>
各客户端常用 skills 目录（摘自官方安装文档）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
也可在 SkillHub 技能页将下列说明发给 AI，由其按安装文档完成安装：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_cc3f6cfc/product-prototype-design`。
安装后按你所用客户端的要求刷新或重启 Agent，使 Skill 生效。
典型用法¶
官方页面未提供逐步截图教程，可复现的流程如下。
- 确认本 Skill 已安装到当前 Agent 的 skills 目录。
- 在对话中说明要做的产品页面：目标用户、核心功能、主要页面或流程、是否需要 Landing Page 或 H5 形态等。描述越具体，生成结果越贴近预期。
- 使用与原型、Demo、Mock 相关的表述时，Agent 会按 Skill 说明优先走「单文件高保真 HTML 原型」路径。
- 在 Agent 完成生成后，将得到的
.html用浏览器打开，走一遍主流程，用于内部评审或对外演示。
示例请求方向（可自行改写，不必照搬）：
帮我做一个 SaaS 产品 Landing Page 的可交互原型：包含导航、功能介绍、定价三档和注册按钮，输出单个 HTML 文件。
适用场景与注意¶
适合谁
- 需要快速做 MVP 原型、概念验证页、活动 H5 或产品 Demo 的非工程角色。
- 需要在评审前用可点击页面对齐信息架构与关键交互的团队。
使用上需注意
- 产出是原型 HTML，不等同于可直接上线的生产代码；上线仍需工程化、安全与性能等方面的单独建设。
- Skill 标签为
requires_api_key=false，不表示零成本：模型调用与客户端能力仍由你当前环境决定。 - SkillHub 页面统计（以抓取资料为准）：评分 100000，下载 2836 次，安装数显示为 0——安装统计可能与各客户端本地安装方式有关，以你本机
skillhub install与 Agent 是否识别为准。
结尾¶
「快速生成高保真的产品交互原型1」把「描述产品 → 可交互单页 HTML」收敛进 Agent Skill 工作流，适合在想法早期用浏览器即可演示的路径做验证。安装与详情见 SkillHub：
- 技能页：https://www.skillhub.cn/skills/user_cc3f6cfc/product-prototype-design
- API 条目：https://api.skillhub.cn/user_cc3f6cfc/product-prototype-design
