别再骂 ClaudeCode/Codex 配色丑了，这些Design.md可以直接抄

用 Claude Code 或 Codex 写前端的人，大概都重复过这套对话：颜色看着不对，字体丑，间距怪。然后一遍遍返工，每次构建都挑刺。

这里有一个被忽略的根源，就是从没给它一份设计系统，哪怕是一些高级Skill，所以它只能出默认值，然后就是一些平庸的设计。这不怪模型，在之前文章里也介绍过DESIGN.md，它可以约束模型的行为，让它按照设计原则走。

DESIGN.md 是什么

这是 Google Stitch 提出的概念，本质就是一个 markdown 文件，把设计系统写成纯文本：配色、字号梯度、间距、圆角、阴影、组件规则，全列清楚。agent 在每次画 UI 之前先读它，风格就不会飘。

一句话区分：AGENTS.md 管怎么搭项目，DESIGN.md 管它该长什么样。

好处是不用 Figma 导出，不用 JSON schema，不用任何额外工具。markdown 恰好是大模型读得最顺的格式，丢进项目根目录，agent 立刻就懂你的界面该是什么调性。

不想自己写？直接抄

最近，笔者在开发一款token管理工具tokenbank（https://tokenbank.wink.run），这是之前中转站逻辑的升级版，专为笔者这样token焦虑的个人用户设计，不用安装配置什么cc-switch，oneapi，sub2api等服务，一键纳管Agent和应用，可以跨端管理订阅，还能够P2P互助存换token，能力很强，但问题来了，视觉交互一直感觉很土鳖。想让AI帮忙优化，但具体怎么写DESIGN.md却犯难。

找了一圈，发现有人把现成可直接抄的扒了出来。

styles.refero.design (http://styles.refero.design)，它 收了 2000 多个设计，每个都是从真实产品里提取的完整设计系统，能直接喂给 Cursor、Claude Code、Codex、v0 或 Lovable。

另一个是 GitHub 上的 awesome-design-md (http://github.com/VoltAgent/awesome-design-md)，收录了 73 个，从 Stripe、Linear、Airbnb、Vercel 到 Notion、ElevenLabs，几乎是照着真实产品的视觉语言扒下来的。

每个文件里通常包含九块内容：整体氛围与设计哲学、带语义命名和 hex 的配色、完整的字体层级表、按钮卡片输入框等组件状态、间距与栅格、阴影层级、该做和不该做的清单、响应式断点，外加一份给 agent 用的快速提示词。除了 DESIGN.md 本身，还附带 preview.html 预览页，能直接看到色块、字号和组件长什么样。

怎么用

流程简单到有点反高潮：把某个站点的 DESIGN.md 复制进你的项目根目录，然后告诉 agent，所有 UI 都按这份文件来。

发布者补了一句经验，模型够强、DESIGN.md 够扎实，基本能还原出原产品的观感。验证办法是先拿一个简单页面试水，如果颜色、间距、字体和整体感觉都对了，说明这份文件起作用了，另外建议截图和 DESIGN.md 两个可以一起用，让模型充分理解意图。

顺带几条能直接抄的提示词

他还整理了一批可以复制粘贴的任务提示，思路都是先定风格、再动手，且只改视觉不加功能。比较实用的几条：

• 把项目里散落的组件和样式 token 抽象成一套统一的设计系统，做成可复用的组件库，所有新 UI 都走库，不许绕过。
• 让 agent 扮演资深 UX 设计师，把核心流程从头到尾走一遍，找出信息层级弱、有摩擦、缺反馈、没做的空状态和错误状态，按严重程度打分并给出具体修法。
• 重做某个页面，要求做出 Linear 或 Stripe 的质感：克制的配色、清晰的字号梯度、足够留白、一致的圆角和阴影。
• 把所有交互和状态做对：加载骨架屏、空状态、错误态、hover/focus/disabled，以及关键操作的过渡和反馈。

说到底，与其每次构建后挑刺，不如一开始就把"什么叫好"写下来给它看。