---
doc_id: DSG-001
title: "DESIGN_SYSTEM_RULES"
owner: 文档治理团队
approver: 业务与技术负责人
status: active
version: 1.0.0
classification: internal
last_reviewed: 2026-08-25
next_review: 2027-02-21
---

# 文件二：02_DESIGN_SYSTEM_RULES.md
# UI、视觉与设计系统永久规则
版本：1.0
状态：长期有效
作用：保证页面越做越多，但视觉不会失控，未来可以整体换字体、颜色、圆角、主题。
# 1. 设计必须系统化
禁止每个页面单独设计一套：
- 字体。
- 颜色。
- 按钮。
- 阴影。
- 圆角。
- 间距。
- 动画。
项目必须建立统一：
- Design Token。
# 2. 所有核心视觉参数必须集中管理
至少包括：
`
字体
字号
字重
行高
颜色
间距
圆角
边框
阴影
动画速度
层级
页面宽度
响应式断点
`
推荐：
`
:root {
  --font-primary: ...;
  --font-display: ...;

  --color-primary: ...;
  --color-bg: ...;
  --color-text: ...;

  --spacing-xs: ...;
  --spacing-sm: ...;
  --spacing-md: ...;

  --radius-sm: ...;
  --radius-md: ...;

  --shadow-sm: ...;
}
`
# 3. 字体永久规则
字体必须集中管理。
- 禁止在大量组件中重复：
`
font-family: xxx;
`
核心字体至少分：
`
Primary
Display
Mono
Fallback
`
必须做到：
- 修改一个配置，
- 即可切换全站主字体。
禁止：
- 字体URL散落。
- 字体文件路径散落。
- 页面自己加载字体。
- 组件自己定义字体来源。
# 4. 字体加载失败必须降级
例如：
`
font-family:
  var(--font-primary),
  system-ui,
  sans-serif;
`
# 5. 颜色规则
禁止业务组件大量直接写：
`
#FFFFFF
#000000
#6A5ACD
`
主题色应使用变量。
允许特殊艺术元素单独使用颜色。
- 但必须说明用途。
# 6. 间距规则
不得出现大量毫无体系的：
`
13px
17px
29px
43px
`
优先使用统一间距体系。
- 例如：
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
# 7. 组件一致性
项目应该形成基础组件：
- Button
- Input
- Modal
- Card
- Tooltip
- Dropdown
- Loading
- Toast
- Error
- Empty State
禁止：
- 五个页面写五个完全不同的按钮逻辑。
# 8. 公共组件与艺术组件分离
标准组件：
- 强调统一。
- 艺术展示组件：
- 允许特殊视觉。
- 不能为了设计系统统一，把所有创意视觉压成普通后台界面。
# 9. UI和业务逻辑分离
组件负责展示。
- 业务逻辑不应直接埋进：
- CSS。
- 动画文件。
- 视觉组件。
# 10. 动画规则
动画必须：
- 可控制。
- 可关闭。
- 不得阻塞主要交互。
- 不得导致页面无法使用。
- 不得造成明显性能问题。
进入动画不能阻止用户长时间访问功能。
# 11. 动画参数集中
例如：
`
fast
normal
slow
`
避免页面各写：
- 283ms
- 420ms
- 612ms
# 12. 响应式规则
任何正式页面必须考虑：
- 手机。
- 平板。
- 普通电脑。
- 大屏。
至少考虑：
- 320px
- 375px
- 768px
- 1024px
- 1366px
- 1920px
# 13. 禁止仅依赖Hover
因为手机没有传统Hover。
- 重要操作必须可点击触发。
# 14. 图片规则
图片：
- 不得无意义重复加载。
- 不得严重拉伸变形。
- 大图片需要合理压缩。
- 保持适当比例。
# 15. SVG/Icon规则
统一来源。
- 避免同一图标使用多个完全不同图库。
# 16. z-index规则
必须建立层级范围。
- 例如：
`
页面内容
浮层
导航
弹窗
Toast
系统级提示
`
禁止：
`
z-index: 999999999;
`
互相硬压。
# 17. Loading规则
异步功能必须有Loading状态。
- 不得用户点击后毫无反馈。
# 18. Error状态
任何异步模块必须考虑失败界面。
- 禁止：
- 白屏。
- 空白块。
- 无限Loading。
# 19. Empty状态
无内容时必须有合理状态。
- 禁止直接显示：
- undefined
- null
- []
# 20. 设计系统修改规则
修改：
- 字体。
- 颜色。
- 按钮。
- 圆角。
- 间距。
- 主题。
- 先改Design Token或公共组件。
- 不得优先全项目搜索替换。
# 21. 禁止AI擅自“美化”
没有明确设计任务时：
- 不得自主改变：
- 布局。
- 配色。
- 字体。
- 角色形象。
- 动画。
- 交互。
修Bug ≠ 改设计。
# 22. UI修改完成必须检查
Desktop。
- Mobile。
- 主要页面。
- 相关组件。
- Loading。
- Error。
- Hover/Active。
# 23. 每次设计改动输出
改了什么：
- 为什么：
- 修改了哪些Token：
- 修改了哪些组件：
- 影响哪些页面：
- 是否影响响应式：
- 是否影响动画：

---


# 六大规则共同执行协议
以下内容同时适用于全部六份文件。
## A. AI每次任务开始前
先阅读：
- 与当前任务有关的规则文件。
- 如果任务涉及多个领域：
- 全部读取。
例如：
- 修改登录：
- 必须读取：
- 01_REQUIREMENTS_RULES.md
- 03_ENGINEERING_RULES.md
- 04_SECURITY_RULES.md
- 05_TESTING_RULES.md
修改视觉：
- 读取：
- 01_REQUIREMENTS_RULES.md
- 02_DESIGN_SYSTEM_RULES.md
- 05_TESTING_RULES.md
准备上线：
- 六份全部读取。
# B. 规则冲突优先级
如发生冲突：
- 安全与数据完整性
明确用户需求
产品规则
架构规则
设计规则
优化建议
# C. AI不能自行修改规则
除非用户明确要求：
- “修改规则文件”。
- 否则：
- 这些文件只读。
# D. 现有项目与规则冲突怎么办
不得为了符合规则立即大规模重写。
- 先输出：
- 规则：
- 当前实现：
- 差异：
- 严重程度：
- 建议迁移方式：
再决定是否修复。
# E. 每次修改之前
先回答自己：
- 我正在解决什么问题？
- 哪些文件必须修改？
- 哪些文件不应该碰？
- 是否涉及数据？
- 是否涉及权限？
- 是否影响API？
- 是否影响UI？
- 如何验证？
# F. 每次修改之后
必须检查：
- 代码是否能运行。
- 是否引入新错误。
- 相关功能是否正常。
- 是否影响其他模块。
- 是否需要更新文档。
# G. 禁止假完成
以下情况不得说：
- “全部完成”。
- 仍有未测试。
- 仍有报错。
- Build失败。
- 接口未验证。
- 缺少环境。
- 第三方服务没测试。
应明确：
- 已完成：
- 未完成：
- 无法验证：
- 风险：
# H. 修改范围原则
永远优先：
- 小范围。
- 可验证。
- 可回滚。
- 低耦合。
而不是：
- 一次改几十个无关文件。
# I. 项目长期目标
本项目必须尽量保持：
- 可理解。
- 可修改。
- 可维护。
- 可测试。
- 可部署。
- 可恢复。
- 可扩展。
- 安全。
最终目标不是：
- “AI这次把它跑起来了。”
- 而是：
- “即使换一个AI、换一台电脑、换一个开发者，这个项目依然能够继续维护。”
# AI任务统一结束报告模板
每一次AI开发任务结束，都使用：
## 本次任务
## 修改文件
## 新增文件
## 删除文件
## 修改功能
## 配置变化
## 依赖变化
## 数据库变化
## 安全影响
## 实际测试
## Build状态
## 未验证内容
## 已知问题
## 后续建议
最后只能使用：
- ✅ 完成并验证
- ⚠️ 完成但仍有未验证项目
- ❌ 未完成
- 三种结论之一。