只需一个 Design.md 文件，解决 AI 编程工具的设计债务
makedream2026년 5월 8일
0
Computing/SoftwareRelated Video
5:36你的 AI 界面太普通了……用这个来优化 (DESIGN.md)
Better Stack
Comments (0)
Log in to leave a comment
No posts yet
makedream5:36makedream5:36Better Stack
Log in to leave a comment
No posts yet
通过 AI 编程工具丢出几次提示词，就能生成一个看起来还不错的页面。但问题接踵而至：新生成的按钮圆角与相邻页面不一致，品牌色的饱和度有细微偏差。开发速度虽快，结果却显得粗糙。这是因为 AI 在缺乏语境时，往往会给出最通用的平均值。要解决这个问题，必须在项目根目录放入 Design.md 文件，对 AI 施加严格的约束条件。
告诉 AI “使用高级的蓝色”是在浪费时间。AI 不靠形容词生存，而是靠规范化的数据。请将设计系统拆分为原始 (Primitive)、语义 (Semantic) 和组件 (Component) 三层进行规范。
blue-500: #3B82F6。bg-primary: var(--blue-500)。[category]-[property]-[modifier] 格式，使其生成类似 $color-background-hover 的名称。根据 2025 年 UI 协作案例研究，使用此类结构化令牌的团队将每个迭代 (Sprint) 的 UI Bug 发生率从 14 个降低到了 4 个。当 AI 开始根据功能而非颜色代码选择类名时，70% 的设计修改时间将会消失。如果你使用 Tailwind CSS，请命令 AI 将这些令牌与 tailwind.config.js 进行一一映射。
AI 的自由度越高，做出的选择就越愚蠢。为了统一每个页面各不相同的边距，必须将数值以表格形式写入规范中。
| 属性 | 数值 | 应用规则 |
|---|---|---|
| 按钮圆角 | 8px | 固定为 rounded-lg，禁止随意更改 |
| 断面间距 | 64px | 所有主要断面之间的垂直间距 |
| 最大宽度 | 1280px | 主内容的居中对齐边界线 |
将间距单位限制为 8px 的倍数，并将卡片内边距 (Padding) 固定为 24px。特别地，建立“反面模式 (Anti-pattern)”章节非常有效。加入诸如“一个屏幕内不得放置超过 3 个 CTA 按钮”、“使用 1px 边框代替阴影”等禁止条款，AI 会在开工前先排除错误选项。这一张简单的表格就能减少一半以上的后续手动修改工作。
如果每个功能的语气不同、图标风格混杂，应用就会显得廉价。请在 Design.md 中明确品牌人格 (Persona)。你需要预先设定成功消息是使用“更新完成”还是“准备就绪！”。
图标应遵循以下协议：
stroke-width 固定为 1.5px。深色模式也是如此。简单地反转颜色会破坏易读性。正如 Google Material Design 指南所建议的，明确要求背景使用深灰色 (#121212) 而非纯黑色，并加入对比度保持 的公式，这样就能自动规避无障碍性 (Accessibility) 相关的 Bug。
规范写得再好，如果 AI 不读也毫无意义。在 .cursor/rules/ 目录下创建 UI 专用规则，并强制要求在执行任何任务前必须参考 Design.md。根据 2025 年的开发数据，引入该流程的团队将功能开发时间从平均 12.5 小时缩短至 8.1 小时。
现在，开发者不再是修改代码，而是通过调整文档中的数值来改变整个服务的观感。只有当设计不再是感性领域，而是精密工程领域时，速度才能提升。前期 30 分钟的文档工作，可以避免后续数十小时的徒劳。