用DESIGN.md明确AI写界面的设计规则
作者指出，截图和色值列表难以传达颜色用途、强调频率等设计决策，容易导致多页面风格漂移。文章主张通过DESIGN.md向编程Agent提供这些规则，减少反复描述设计的成本。
AI 深度解读
让 AI 写落地页，代码能跑，视觉却总是居中标题、紫色渐变、三张卡片。原文作者认为，问题不只在提示词，而在于项目缺少一份能持续约束设计决策的文件。
他的做法是把颜色用途、字号、间距和组件规则写进 DESIGN.md，再让 Claude Code、Codex 等工具按它实现页面。值得借鉴的不是某套配色，而是如何让第五个页面仍然遵守第一个页面的设计规则。不过，原文提供的是使用经验，没有对照实验。
为什么给了截图，页面还是越写越散
作者说，自己使用 Claude Code 和 Codex 构建项目已有 2 到 3 年。过去，他会提供完整页面截图、参考网站 URL，或者要求工具做出某个网站的感觉。这些办法在第一屏往往有效，页面一多就开始失控。
原因是截图展示了结果，却没有交代规则。
AI 能看到灰色文字，却未必知道这种灰色只用于次要标签，不能拿来排正文；能看到紫色按钮，却不知道紫色可能只承担页面上唯一的主要行动入口。只给十六进制色值也不够。缺少用途说明后，强调色容易扩散到边框、图标、链接和背景，原站克制的感觉就消失了。
「极简」「高级」更难稳定执行。它们表达了期待，没有明确到足以指导组件实现。
需要交给 AI 的，是设计选择背后的使用规则。
这接近设计师交付给开发者的说明：每种颜色负责什么，标题如何分级，区块间隔多大，以及哪些组合不能出现。
DESIGN.md 怎样变成项目里的共同依据
作者为此开发了 GradientDeck UI。它最初提供渐变、配色、阴影和玻璃效果生成器，后来扩展为从真实网站整理完整视觉语言的资料库。按原文描述，库中已有 1,239 份 DESIGN.md。
Railway 示例最有价值的部分，是色值旁边的用途：
#13111c用于页面背景、顶栏和未着色的章节。#a1a0ab用于引导段落、功能说明和次要标签。#553f83用于首屏 Deploy 按钮的填充。#a78bfa用于行内强调短语和当前 dock 标签文字。
这些规则限定了颜色出现的位置。文件还会覆盖字体、间距、组件、表面、图像、布局，以及应该做和不该做的事。
每套风格有两个版本：Compact 平均约 3k tokens，作者认为足够应付多数工作；Extended 约 5k tokens，增加设计令牌表、面向代理的提示指南和快速入门。同一套系统还支持导出为 Tailwind v4、CSS variables 或 design tokens JSON，方便接入已有项目。
把参考文件放进项目根目录，只需要这条命令：
curl -o DESIGN.md https://ui.gradientdeck.com/styles/railway/design.md
这里要看的是 -o DESIGN.md：下载结果成为仓库中的普通 Markdown 文件，后续可以直接修改。作者也提供页面复制入口，每份文件都有可直接获取的 URL。
接着，在 CLAUDE.md、AGENTS.md 或 .cursor/rules 中加入规则：
Follow DESIGN.md for all colour, type, spacing and component decisions.
关键是这行把颜色、字体、间距和组件决策都指向同一个文件。作者感受到的收益主要出现在第五个页面：设置页和定价页仍能保持一致。
资料库还提供原站画面，多数是短视频，供使用者观察动态表现。按作者介绍，它免费、无需注册，也不要求安装常驻本机的 MCP。不过，文件能被读取，不等于每次生成都会严格执行，原文没有给出这方面的验证结果。
我的判断
这个思路成立，因为它补上了「看起来像什么」与「具体怎么实现」之间的缺口。对多页面项目而言，一份可修改、可随代码提交的设计说明，通常比反复补充形容词更便于维护。
但要分清两件事：设计规则更明确，是可以直接检查的；生成质量因此提高多少，原文没有数据。作者没有提供页面对照、执行成功率或返工时间，因此「第五屏更一致」应当视为经验之谈。
它也不能替代现有组件库。成熟项目如果已经用组件和设计令牌限制了按钮、字体和间距，优先复用这些实现更直接。DESIGN.md 适合补充代码难以表达的意图，例如强调色该多克制、哪些信息应该弱化。文档还需要与实现同步，否则也会成为过期依据。
参考站点同样有边界。作者明确提醒，直接使用 Railway 文件交付，会做出一个像 Railway 的网站。他建议调整强调色、替换字体，同时保留间距规则和克制感。站点注明来源有助于追溯，但自己的内容层级和产品身份，仍需要自己决定。
可以借用设计规则，不能省掉产品自己的设计判断。
能拿来做什么
- 在多页面前端项目里，整理一份最小
DESIGN.md，先写清颜色用途、标题层级、区块间距和主要按钮规则，再让 AI 扩展页面。 - 给 Claude Code 或 Codex 提供截图时，同时补充截图看不出的限制，例如强调色允许出现的位置，以及灰色文字适用的信息层级。
- 已有 Tailwind v4、CSS variables 或设计令牌的项目，可以检查文档与代码中的值是否一致，把说明连接到实际组件，减少两套规则并存。
- 用设置页、定价页等不同结构的页面检查一致性；采用参考站风格后，先调整字体和强调色，再检查它是否适合自己的内容。