代码写得飞起，UI却像拼凑的？别怪AI，是你没给它设计语言
关注硅基力量，第一时间掌握AI工具的深度评测与实战心得。回复「ClaudeCode」即可获取全套教程合集。
半年前我启动了 Hermes Agent 项目——一个具备自主规划、多步执行及自我纠错能力的 AI 智能体框架。在与 Claude Code 进行结对编程时，代码编写得十分顺畅，架构清晰、测试完备、逻辑严谨。
然而，当我初次打开页面审视时——不禁愣住了。
导航栏的蓝色是 Claude 上周选定的 #4A90D9，侧边栏则是本周它“自认为合适”的 #5B8DEF，按钮圆角在 4px 至 12px 之间随机分布，字体在 Inter 和 system-ui 之间反复切换。
程序虽然能跑通，但界面却看起来像是一个拼凑出来的半成品。
这并非 Claude 的过错。当时我给出的提示词是：“帮我创建一个控制面板，用于展示 Agent 运行状态、任务列表和日志输出。”——它确实完成了这些功能，但在缺乏任何设计约束的情况下，它只能依赖“猜测”来做出视觉决策。
问题的核心在于：并非 AI 擅长设计，而是你没有赋予它设计语言。
后来我在 GitHub Trending 上发现了 awesome-design-md，这是一个拥有 76K Star 的开源仓库。乍看之下它似乎只是某种设计资源合集，但深入查看后我才意识到，它解决的是 AI 编码时代一个被严重低估的问题。
该仓库收录了 70 多个顶级产品的完整设计系统——包括 Linear、Vercel、Stripe、Notion、Apple、Spotify 等——每一个都被整理成了一个名为 DESIGN.md 的标准 Markdown 文件。
这不是 Figma 导出文件，不是 JSON Schema，也不是任何需要特殊工具才能读取的格式。它仅仅是一个 Markdown 文件，而 Markdown 恰好是 LLM 理解能力最强的格式。
以 Linear 为例，它的 DESIGN.md 大致如下：
这不是“建议”，而是约束。AI 在看到这些内容后，生成的每一个按钮、每一行文字、每一个间距都有了明确的规则可供遵循。
理解 DESIGN.md 的最佳方式，是将其与传统设计工具进行对比。
这就是其精髓所在。Figma 提供了视觉，JSON Token 提供了数值，但它们都没有告诉 AI 设计决策背后的逻辑。DESIGN.md 补全了这一环——例如“主色调 #5E6AD2 用于主操作按钮和导航高亮，悬停态加深 10%，禁用态降低饱和度至 30%”。AI 读到的不是孤立的色值，而是一套可推理的设计规则。
获得这一思路后，我在 Hermes Agent 项目中进行了实验。
Hermes Agent 需要一个 Web 控制面板，功能包括 Agent 状态监控、任务队列可视化、执行日志和配置管理。在此之前，Claude 帮我生成的 UI 一直面临三个痛点：
我从 awesome-design-md 仓库中选择了 Vercel 的 DESIGN.md——黑白色调、几何精准、极简但信息密度高，非常契合开发者工具的气质。将文件复制到项目根目录后，我只对 Claude 说了一句话：
“请参考根目录下的 DESIGN.md，帮我将现有控制面板的所有组件按照设计规范统一重构。”
它仅用两轮对话就完成了以下工作：
最关键的是，这仅进行了一次。此后每次让 Claude 创建新页面或组件时，它都会自动遵循 DESIGN.md 的规范，UI 的一致性不再需要反复提醒。
这不是魔法，而是为 AI 提供了一个明确的坐标系。
awesome-design-md 收录了 70+ 个品牌，选择哪一个取决于你的产品气质：
无需严格匹配你的行业，气质匹配远比品类匹配更重要。如果你的产品追求“高效、专业、不废话”，那么 Linear 或 Vercel 的 DESIGN.md 就比 Apple 的更合适。
上手非常简单，只需三步：
无需安装任何工具，无需配置，也无需学习新技能。
过去一年，AI 编程工具在代码生成能力上的进步有目共睹——Claude Opus 4.8 的基准测试成绩不断刷新，Codex 在复杂架构任务上的表现日益精进。但一个尴尬的事实是：程序员对 AI 生成 UI 的满意度远低于后端代码。
问题不在于 AI 的“品味”不足，而在于我们习惯给 AI 提供详细的代码约束（类型系统、测试用例、架构规范），却很少给它任何设计约束。我们默认 AI“应该知道”好看的 UI 长什么样，但这本身就是个伪命题——连人类设计师都需要设计系统来对齐一致性，为什么要求 AI 凭直觉做到？
awesome-design-md 的价值，就是将“设计规范”从 Figma 搬到了 Markdown——搬到了 LLM 最擅长的领域。
不是 AI 不会设计，是你没给它设计语言。一个 Markdown 文件足矣。
关注硅基力量，用 AI 将想法转化为产品。回复「ClaudeCode」获取从零开始的实战教程，涵盖 CLAUDE.md 配置、技能搭建、Agent 设计模式等全套内容。