手机端高保真产品原型交付
将以下提示词粘贴到你的 AI 对话框中：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_52a81e7a/uiux-prototype-generator。
技能介绍
解决的问题
产品经理或前端在早期需要快速展示 APP 的视觉风格、页面层级和关键交互，但纯静态图难以演示登录、Tab 切换和弹窗流程；普通前端模板也常留下占位图、emoji、横向滚动条和不可维护代码。尤其在需求评审、用户测试或开发启动前，团队需要一个可直接打开、可继续修改的移动端原型。
工作方式
该技能按 ROSES 框架推进：先确认 APP 中文名、英文目录名和主题基调，再进入规划、设计、开发与交付四层。核心产出是 index.html 手机外壳容器，以及 login.html、home.html、discover.html、profile.html 四个页面；页面采用 iframe 切换，外层 index.html 作为手机外壳，shared/ 存放公共样式与脚本。样式使用 Tailwind CSS，图标使用 FontAwesome，交互包含涟漪动画、悬停、页面切换和弹窗。流程强调真实图片、行为结构分离、addEventListener 绑定事件，并在最后执行样式、布局、图片可达、图标规范和作者署名自检。
适用边界
适合 iOS 风格的高保真前端原型与演示，不是生产系统：登录等交互是前端模拟，不含后端、鉴权、性能与安全优化。使用时应确认主题、图片版权和交付目录；若用于对外演示，还应替换作者署名、二维码与品牌资源。
使用场景
- 需求评审前，用登录、主页、发现、个人中心四个页面演示运动健康 APP 的页面层级与交互。
- 给前端交接一个基于 Tailwind、FontAwesome 和 shared 脚本的 iPhone 尺寸 HTML 原型，便于继续修改。
- 原型验收时检查 CSS 选择器、iframe 横向滚动、真实图片可达、FontAwesome 图标和作者署名弹窗。
- 把产品草图整理成可独立打开，也能通过 index.html iframe 联动的双模式移动端演示页面。
适合人员
- 需要在评审前快速产出 iOS 风格高保真界面，并说明登录、Tab 与弹窗交互的产品经理。
- 要把交互原型拆成 login、home、discover、profile 页面，并维护 shared 组件的前端工程师。
- 需要在交付前检查横向滚动、图片 404、emoji 残留和作者署名弹窗的 UI 设计师。
- 希望用 HTML 与 Tailwind 原型向团队说明移动端流程、配色与信息架构的全栈工程师。
相关技能
通过分步选择题确认业务、配色与布局，输出可编辑的 .drawio 专业技术架构图。
基于妙音 AI REST API 的音乐助手，支持调用 SUNO/Mureka 模型生成歌曲、续写、翻唱、生成视频、WAV 与音频分轨。
将文字、文件或图片提炼为结构化知识，生成绘图工具可用的知识卡片提示词，支持3:4竖版与16:9横版，并按内容量拆分为多张独立图片。
基于 Playwright 捕获整页、视口或指定元素截图，自动处理懒加载、内部滚动、移动布局及 Linux CJK 字体。