Web UI 产品原型设计

问题在哪

很多 Web 产品需求一开始只有几句描述：要做什么页面、给谁用、能不能批量操作——评审时却缺少可点击的信息架构和桌面端交互细节，设计和前端往往各自脑补，返工集中在导航、表格状态、空态和危险操作确认上。

技能如何工作

本技能按产品经理视角先收敛目标用户、核心场景、任务链路与 Must/Should/Could，再落到信息架构（全局导航、页面清单、页面关系与每页核心行动）。交互侧强调宽屏信息密度、筛选排序、表格与批量操作、弹窗/抽屉分工，以及默认/加载/空/成功/失败等状态。

交付物包含简洁的产品设计摘要、关键假设，以及可独立打开的 UI.html：从 assets/browser-ui-shell.html 复制浏览器画板骨架（不改动资产原件），画板固定 1280×720，用 Tailwind CSS CDN 与 Remix Icon 实现统一视觉（柔和蓝渐变、黑白文字约束、模块化卡片）。多页面流程按任务顺序纵向排列；条件允许时在浏览器中渲染检查布局溢出与操作链路后迭代。

边界与注意点

• 不虚构复杂后端能力，也不随意扩大业务范围；删除、支付、发布、权限变更等高风险操作需确认、反馈与可恢复路径。
• 原型是桌面端方案与前端可实现性导向，画板尺寸固定，真实产品的响应式策略需在说明或注释中单独交代。
• 用户提供品牌规范、技术栈或现有组件时，技能会优先遵循这些约束，再在不冲突处套用本技能的视觉与交互规范。