UI Brief Template Tool

01 输入模板

先确定产品、界面、目标和边界。

0/16

项目 / 品牌名称

产品类型

平台

分辨率基准

用户场景

本次目标

要生成的界面（同步自 02）

这里不再单独编辑，界面名单直接跟随 02 的模块选择。

风格方向

整体风格参考

素材 / 插图方向

03 设计语言控制

可选高级项。开启后把枚举参数和描述词写入生成提示。

已关闭

颜色模式颜色变体圆角枚举

颜色种子主色覆盖辅色覆盖强调色覆盖中性色覆盖

字体家族字号字重

字距行高

间距自定义键值

硬参数会按生成工具能识别的键名写入输出；描边、阴影、模糊、玻璃态、布局、动效用下面的中文选项选择，复制时自动转成生成工具更容易理解的描述词。

05 知识库审核

沉淀可复用的 UI 设计规则，供生成前审核和输出时引用。

已开启

知识库正文

# UI 设计知识库

## 1. 核心交互规则
- 每个屏幕的一个区域里，只保留一个最明确的主动作。
- 次要动作用渐进方式出现，不要一开始全部铺开。
- 让用户看见，而不是记住：按钮、标签、选项都要可见。
- 常用默认值、限制条件和确认流程要提前暴露，减少出错。
- 系统状态必须清楚可见：加载、成功、进度、选中、错误都要有反馈。

## 2. 布局与层级
- 按扫描顺序设计，而不是按装饰顺序设计。
- 最重要的信息优先：金额、状态、进度、动作。
- 用字号、对比、间距和位置建立层级。
- 保留必要信息，移除无意义噪音，但不要删到失去语义。
- 相关元素靠近，不相关元素拉开。

## 3. 触控与可访问性
- Android 触控目标建议至少 48 x 48 dp。
- iOS 和 Web 触控目标建议至少 44 x 44。
- 控件之间要留足间距，减少误触。
- 关键功能不要只靠 hover 表达。
- 交互元素要一眼可识别、容易点击、容易理解。

## 4. 字体与排版
- 字体的作用是建立层级，不只是好看。
- 正文要清晰稳定，移动端尤其如此。
- 关键金额、标题、主数字可以更大、更重。
- 标签要短、稳、可读。
- 控制行长和行距，避免信息挤成一团。

## 5. 颜色与对比
- 颜色要表达含义，不只是做装饰。
- 文本对比度要足够高。
- 强调色只留给主动作、选中态和关键值。
- 状态色要有语义：成功、警告、错误、主色、辅助色。
- 不要只依靠颜色传达状态。

## 6. 反馈、状态与错误
- 任何有意义的操作都应该有反馈。
- 加载态要预留空间，并清楚显示进度或骨架。
- 成功和完成状态要明确，但不要喧宾夺主。
- 错误信息要说明哪里错了、怎么改。
- 风险操作要适合确认，但不要无意义打断。

## 7. 移动端技巧
- 先做移动端，再逐步扩展复杂度。
- 首屏不要塞太多内容，要让用户立刻知道主任务是什么。
- 核心内容尽量靠前。
- 尽量避免横向滚动。
- 重要按钮要放在容易触及的位置。

## 8. 动效与微交互
- 动效的作用是说明变化，不是为了炫技。
- 动效可用于状态切换、反馈、连续性和层次感。
- 动画要克制、顺滑、不过度。
- 优先使用 transform 和 opacity。

## 9. Prompt 写法
- 说明屏幕目的、层级、状态和约束。
- 说明第一眼必须看到什么。
- 说明哪些内容必须保留，哪些可以复用，哪些必须变化。
- 说明需要的状态：加载、选中、空、错误、禁用、完成。
- 生成移动端界面时，把视口、触控目标和扫描顺序写清楚。

UI Brief Template Tool

01 输入模板

03 Stitch 工作流

02 界面模块选择

03 设计语言控制

04 设计规范

06 DESIGN.md 合并区

05 知识库审核

07 Skill 栈

08 输出质量

09 资源库