前言¶
移动端产品从想法到可演示界面，常见路径是画低保真线框、再交给设计出稿、最后前端搭壳子。评审和立项阶段往往只需要「看起来像真 App」的交互壳，却又要占掉设计和前端不少时间。若你已经在用带 Skills 的 AI 编码助手，可以把「按 App 名称出一版高保真手机页」交给专门 Skill，而不是每次从零写 Tailwind 和 Tab 结构。
下面介绍 SkillHub 上的 手机端-高保真产品原型交付（@user_52a81e7a/uiux-prototype-generator），说明它做什么、如何安装，以及典型触发方式。
这是什么¶
手机端-高保真产品原型交付 是 SkillHub 社区来源（community）的技能，坐标 @user_52a81e7a/uiux-prototype-generator，当前版本 v1.0.8，分类为 design-media，发布者为 user_52a81e7a（SkillHub 页面标注作者为江枫）。官方页面标明 requires_api_key=false，不依赖额外 API Key。
定位在官方简介中写得很直接：扮演产品经理、UI/UX 设计师与前端工程师三重角色，基于 ROSES 框架，输入任意 APP 名称，输出 iPhone 15 Pro 视口尺寸（375×812） 的高保真移动端 HTML 原型。技术栈为 Tailwind CSS 与 FontAwesome。
核心功能¶
以下能力均来自 SkillHub 官方简介与技能页，未在资料中出现的细节不展开。
- 固定手机画布：按 375×812 生成页面，贴近 iPhone 15 Pro 逻辑分辨率，便于浏览器内预览和截图评审。
- 四个核心界面：登录、主页、发现、个人中心，覆盖常见消费类 App 的主路径。
- 视觉与交互壳：玻璃拟态、多层阴影、iOS 风格状态栏、底部 Tab 导航；采用 iframe 架构、涟漪动画，并使用 真实图片（而非纯占位色块）。
- 按名称定制：以你提供的 APP 名称为输入，由 Skill 推导界面文案与结构，而不是固定模板名。
- 自然语言触发：官方列出的触发词包括「手机端原型设计」「高保真原型」「APP 原型设计」「APP 原交互设计」「生成 APP 界面」「APP 界面」「手机交互原型」等，在对话里用这些表述即可唤起技能逻辑。
SkillHub 统计（以抓取资料为准）：评分 100000，下载 4231 次。
安装与启用¶
SkillHub 推荐让 AI 按官方安装文档操作，或在本机用 skillhub CLI 安装到当前 Agent 的 skills 目录。
方式一：对话安装（官方页提示）¶
将下面提示发给支持 SkillHub 的 AI 助手即可：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_52a81e7a/uiux-prototype-generator`。
方式二：CLI 安装¶
先确认是否已安装 SkillHub CLI：
command -v skillhub && skillhub --version
未安装时，可按官方文档执行完整安装（示例为文档中的推荐命令）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安装技能时，必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/，可能不会被助手加载。官方文档给出的常见路径包括：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
示例（将 <skills 目录> 换成你环境对应路径）：
skillhub install @user_52a81e7a/uiux-prototype-generator --dir <skills 目录>
安装后按你所用客户端要求重启或刷新技能列表。Cursor、Claude Code、Codex 等差异仅在于 skills 目录位置；安装命令本身以 SkillHub 文档为准。
典型用法¶
启用技能后，在对话中说明要做的移动端 App，并带上官方触发词之一。可复现的示例表述如下：
用手机端原型设计，为「每日记账」生成高保真 APP 界面：iPhone 15 Pro 尺寸，包含登录、主页、发现、个人中心，玻璃拟态风格和底部 Tab。
经过上面的步骤，助手应按 Skill 约定产出可在浏览器打开的 HTML 原型（含 iframe 结构与 Tailwind + FontAwesome 资源引用）。具体文件名与目录结构由 Skill 内 SKILL.md 指导生成，以你本地安装后的技能包为准。
若需检索或核对版本，可在 SkillHub 搜索：
skillhub search uiux-prototype-generator
适用场景与注意¶
适合谁
- 产品经理或独立开发者，需要在立项、路演、内审前快速展示移动端信息架构与视觉层次。
- 前端或全栈同学，希望先拿到一版可点击的 HTML 壳，再决定是否接入真实 API 或设计系统。
限制与注意
- 输出是 高保真 HTML 原型，不是生产级 React Native / Flutter 工程；上线前仍需设计规范、无障碍与性能等工程化工作。
- 界面固定为官方描述的 四个核心页 与 375×812 画布；超出该范围的复杂业务流需你在对话中补充，Skill 是否扩展以实际生成为准。
- 使用真实图片时，注意版权与图源；评审环境若离线，需自行确认外链资源是否可访问。
- 资料中 安装 计数为 0、下载 为 4231，反映的是 SkillHub 侧统计口径，与你本机是否已安装无关。
结尾¶
手机端-高保真产品原型交付 把「输入 APP 名称 → 输出 iPhone 尺寸、四 Tab 高保真 HTML」收敛成一条 Skill 工作流，适合在设计和前端排期紧张时先拿出一版可演示界面。安装与坐标以 SkillHub 为准。
- 技能 API 地址：https://api.skillhub.cn/user_52a81e7a/uiux-prototype-generator
- SkillHub 页面：https://www.skillhub.cn/skills/user_52a81e7a/uiux-prototype-generator
- 安装说明：https://skillhub.cn/install/skillhub.md
