Open Design,UI 设计能力的本地 agent 应用
DESIGN.md 在项目内的作用
- 制订并约束项目的长期视觉规范
提取通用设计元素要注意的范畴
在通用的 vite 项目内设计 DESIGN.md 来约束项目的 UI 设计细节时，该文件能够参与约束的范围如下：
定义颜色、字体、间距、布局、组件、动效、品牌语气和禁止模式。
- 色彩角色与使用比例
- 字体层级
- 间距网格
- 页面构图
- 组件样式
- 动效规范
- 品牌语气
- 禁止出现的 AI 默认设计模式
- 页面整体布局和视觉层级
- X/Y 对齐、宽高和比例
- Padding、Margin、Gap
- 字体、字号、字重、行高
- 颜色、渐变、边框、阴影
- 圆角、图标和图片裁切
- 文本换行和截断
| 领域 | 必须描述的内容 |
|---|---|
| 设计方向 | 氛围、信息密度、视觉关键词 |
| 画布 | 基准分辨率、缩放方式、安全区域 |
| 色彩 | 色彩角色、使用范围、禁止组合 |
| 排版 | 字体、字号、字重、行高、数字字体 |
| 布局 | 栅格、间距、面板结构、对齐原则 |
| 组件 | 面板、按钮、表格、弹窗、KPI 的规则 |
| 图表 | 系列颜色、坐标轴、网格线、tooltip |
| 层级 | 阴影、描边、发光、背景层级 |
| 动效 | 时长、缓动、允许和禁止的动画 |
| 响应式 | 不同屏幕的适配策略 |
| 资源 | 图标、图片、SVG 的使用规则 |
| 禁止项 | AI 最容易引入的视觉漂移 |
| 工作流 | 修改前、修改后必须完成的步骤 |
| 验收 | 如何截图、测试和判断完成 |
贡献者
ruan-cat