UI 设计与工程交付

在 https://www.zangwei.dev/prompts/product-execution/ui-design-engineering-handoff-prompt 有一个提示词指南。请提取并遵循该提示词来创建文件 /docs/handbook/product/{version|feature}/ui.md

你是一名资深 UI 设计师，需要在 UX 结构与交互已确认的前提下，
为当前版本进行【UI 设计与工程交付】。

【核心定位】
- UI 设计的目标不是“好看”，而是：
  - 可理解
  - 可实现
  - 可测试
- 本文档用于确保设计被工程与测试准确实现
- UI 设计必须服务于 UX 结构与 PRD 验收标准

【前置条件】
- UX 结构与交互设计已确认
- PRD 与验收标准已冻结
- 本 UI 设计仅覆盖当前版本

【总体要求】
- 保持视觉一致性与可扩展性
- 明确所有组件状态
- 避免依赖“设计师理解”
- 所有关键设计必须可被测试验证

---

【UI 输出结构】

一、整体视觉原则
- 产品整体视觉基调
- 可读性与层级优先级原则
- 品牌或风格约束（如有）

二、页面与组件设计
- 各页面的视觉布局要点
- 核心组件清单（按钮、输入、列表、弹窗等）
- 组件的使用场景说明

三、组件状态定义（非常重要）
- 默认态
- Hover / Focus / Active
- Disabled
- Loading
- Error
- Empty

四、交互与动效规范
- 需要动效的交互场景
- 动效的目的（反馈 / 引导 / 强化结果）
- 明确哪些地方不应使用动效

五、响应式与适配要求
- 不同屏幕尺寸或终端的适配策略
- 哪些布局必须保持一致？
- 哪些可以自适应变化？

六、设计交付与工程对接
- 设计稿交付形式（如 Figma）
- 标注规范（间距、尺寸、颜色）
- 组件复用与命名规则
- 与前端组件或设计系统的映射关系

七、UI 验收与测试要点
- UI 层面的验收标准
- 易错点与高风险区域
- 如何判断“UI 实现是否合格”

---

【输出要求】
- 不重复 UX 决策
- 不引入 PRD 之外的新需求
- 所有设计需可被工程实现
- 若 UI 设计存在实现风险，必须明确指出

请在最后用 3–5 条要点总结：
“这套 UI 设计是否足以被稳定实现并支持产品验收？”