别再手动修复损坏的 AI UI 了

你的 AI 编程工具在设计方面经常表现不佳。

你想要一个按钮，AI 给了你一种蓝色。你想要另一个组件，AI 又给了你另一种蓝色。这种情况之所以发生，是因为 AI 缺乏严格的设计系统。

Google Labs 发布了 design.md 来解决这个问题。

这是一份规范，可以让 Cursor、Claude Code 和 GitHub Copilot 等工具读取你的设计规则。这可以防止间距不一致、字体错误以及颜色偏差。

工作原理：

design.md 是一个包含两个部分的 Markdown 文件。

  • YAML Front Matter：包含精确的设计令牌 (design tokens)。你可以在这里定义颜色、排版、间距和圆角。
  • Markdown Body：包含设计原理。它解释了为什么要使用某种颜色以及何时应避免使用。

这种结构有助于 AI 同时理解数据和逻辑。它不仅仅是看到一个十六进制代码，它还能理解某种特定颜色是用于标题的，而不应用于正文。

design.md CLI 的核心功能：

  • Linting（校验）：检查你的令牌是否正确。它甚至会检查是否符合 WCAG AA 无障碍对比度标准。
  • Diffing（差异对比）：当你更新设计时，它会准确显示哪些令牌发生了变化。
  • Exporting（导出）：将你的设计文件转换为 Tailwind CSS、JSON 或 W3C Design Tokens。
  • Spec（规范生成）：生成一份指南，你可以将其提供给 AI，教它如何读取你的文件。

为什么这很重要：

大多数开发者使用 CLAUDE.md 或 AGENTS.md 来设定通用规则。虽然这些文件很有帮助，但它们大多是自然语言，AI 仍然需要猜测具体数值。

design.md 将你的设计系统转化为机器可读的数据。

如何使用：

  1. 将 DESIGN.md 放在项目根目录下。
  2. 在你的 CLAUDE.md 或 Cursor rules 中添加这一行：“对于 UI 任务，请先阅读 DESIGN.md，并严格遵守其中的令牌 (tokens) 和设计原理 (rationale)。”

别再对你的 AI 重复“颜色错了”。给它一个单一事实来源 (single source of truth)。

来源：https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

可选学习社区：https://t.me/GyaanSetuAi