AppUI原型设计

要解决什么问题

需求方常说"做个打车应用"或"加个后台管理页"，没有交互稿、没有信息架构，甚至没有业务规则。设计稿与研发实现之间还隔着一次口头转述：研发拿到的是几张截图，产品经理拿到的是一段描述，双方对状态、边界、异常的理解经常不一致。

这个技能解决的是从模糊需求直接产出可评审、可预览、可落地的手机端 UI 原型：不只画几张好看的图，而是把业务闭环、交互状态和前端可实现性一起补齐。

技能如何工作

核心能力

• 产品经理视角拆解需求：目标用户、核心场景、用户目标、业务目标、范围边界、核心任务链路、功能优先级。
• 信息架构建模：页面清单、导航模型、内容层级、页面跳转与每页核心行动，避免生成没有业务价值的"展示页"。
• 视觉系统先行：统一的间距、圆角、阴影、色彩、组件与交互反馈，而不是逐页堆样式。
• 基于 assets/mobile-ui-shell.html 骨架生成 UI.html，不修改资产原件。

关键步骤

1. 读取需求与现有上下文；只在关键业务选择会显著改变方案且无法合理推断时提问。
2. 梳理产品目标、角色场景、Must/Should/Could 功能排序、业务规则与状态。
3. 建立信息架构，列出页面与导航关系。
4. 先定视觉系统，再实现页面。
5. 复制骨架生成 UI.html：单页至少一个手机画板，多页面流程按任务顺序横向排列。
6. 检查 HTML 结构、画板尺寸、内容溢出、导航一致性与关键状态，条件允许时在浏览器渲染截图迭代。
7. 交付产品设计摘要、关键假设与 UI.html；用户只要文件时，把说明写入 HTML 顶部注释。

实现规范

• 画板固定 w-[375px] h-[812px]，带描边模拟手机边框，overflow-hidden。
• 主要样式用 Tailwind CSS CDN，玻璃效果、滚动条、关键帧等少量手写 CSS。
• 图标用 Remix Icon 在线矢量，图标本身不带底板或外框。
• 图片必须是开源图片站 HTTPS 链接，带 alt、object-cover，加载失败时布局仍可理解。
• 保留安全区：内容从 pt-12 起、底部留 pb-20；状态栏、底部导航、Home Indicator 全套一致。
• 所有可见文字只允许纯黑或纯白，可用透明度做次级层级。

适用边界与注意点

• 不虚构后端能力与额外业务范围；敏感、支付、删除等高风险动作必须提供确认与可恢复反馈。
• 用户给出品牌规范、技术栈或现有组件时优先遵循用户约束，只在不冲突处套用本技能风格。
• 产出是高保真原型而非可上线的生产代码，状态管理与数据请求仍需研发补齐。