# 文件二：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状态

未验证内容

已知问题

后续建议

最后只能使用：

• ✅ 完成并验证
• ⚠️ 完成但仍有未验证项目
• ❌ 未完成
• 三种结论之一。