输入四份简报，得到一套设计系统

ux-skill 是我做的开源设计引擎。给它一个品牌色和一份简报，它就会构建设计系统：颜色、字体、间距、圆角和动效。我做它，是因为 AI 工具做出的页面都长得一样，我想让这种情况停下来。

2026 年 9 月 25 日，4.0 版本快做好了。引擎能构建系统，每套系统都通过了全部 324 项对比度检查。这些检查用来确认背景上的文字能不能读清。当时的演示都很小：让引擎处理一张卡片。一张卡片证明不了品牌的事。

所以在继续之前，我让它先在真正的网站上试一遍。这就是那次试验，你可以把这条提示词用在自己的工具上：

发布前，根据四份本该毫无共同之处的简报构建四套设计系统：面向店主、以阿拉伯语为主的支付应用，面向后端工程师、默认深色的数据库工具，温暖活泼的家庭餐厅，以及许多患者超过 60 岁的诊所。把四套系统并排放，列出所有相同的地方。

这篇文章写给开发生成工具的人，无论生成的是设计系统、布局、文案还是代码。你不需要懂代码也能读下去。

哪些地方相同？

几乎全部。

我测量了那个版本构建的四套系统：

面向超过 60 岁人群的诊所，用的是和工程师工具相同的 16px 文字。活泼的餐厅，用的是支付应用的字体。每套系统的标题和正文都用同一种字体。信息提示的蓝色在四套系统里也是同一个颜色。

实际情况比表格显示的更糟：

• 简报读了，却被丢在一边。 引擎打印出它不认识“很多人超过 60 岁”，忽略这条信息，随后报告没有需要处理的事。
• 字体只有名字。 每套系统都给出了字体名，却没有提供加载方法。真正的页面只能用电脑上现有的字体。这就是上面四个页面用同一种字体的原因。
• 品牌色被改了。 餐厅的橙色 #E85D04 在按钮上变成了 #BB4900，好让白字通过对比度检查。在原本的橙色上用深色文字也能通过。

四套系统通过了每一项对比度检查。这些检查问的是每套系统是否正确。没有一项问两套系统是否不同。

错误的修复是什么？

最快的修复是一张表。餐厅就用圆角和亲切的字体。诊所就用大字。开发者工具就用直角和深色。

这是一条死路。表格只是多了几行的模板。碰上第一份没人列过的简报，它就失效了。它还会把世界上所有餐厅做成同一家餐厅。这正是我做这个工具想消除的雷同。

我看到了问题清单。我的决定只有一行：

全都对。灵活计算，别写死。

写死就是那张表。灵活计算，就是根据眼前这份简报和这个品牌算出每个值，取值范围要大到让人看得出差别。把同一条规则展开，就能交给你自己的工具：

不要为每个行业或类别添加查找表。根据眼前这份简报和这个品牌，算出每个值：字号、字体、圆角、间距、颜色的用途和动效。取值范围要大到肉眼能看出差别。读清产品面向谁：年龄、语言、哪种文字优先、默认浅色还是深色、在桌前阅读还是在路上阅读。在报告里写出每个值的理由。如果简报里有什么没读懂，说清是什么，以及该怎样提供给你。绝不要报告没有需要处理的事。

怎么测试“不同”？

“让它们不同”没办法让工具判定通过还是失败。数字可以。

所以我把差异变成了测量。引擎对每一对系统比较人一眼能看到的东西：颜色、字体、尺寸、圆角、阴影和间距，然后返回一个距离：0 表示完全相同，1 表示所有方面都不同。我把下限定在 0.20。试验简报中的任何一对距离低于它，测试就失败。测试失败的改动不能合入。

对每一对输出，测量它们在人一眼能看到的地方相差多远：颜色、字体、尺寸、圆角、阴影和间距。每对给我一个数字，0 表示完全相同，1 表示所有方面都不同。设一个下限。任何一对距离低于下限，就让测试失败。

让系统各有特点的改动当天就加进去了：09:22 到 16:31 之间，44 次改动。4.0 的其余工作又用了五周。

现在这四套是什么样？

诊所的文字变大了，因为简报写明了谁来读，报告里也说明了这个原因。数据库工具打开就是深色，因为简报要求如此。每套系统的标题字体和正文字体都不同，也都提供了加载两种字体的方法。信息提示的蓝色现在是四种不同的蓝色，每一种都按各自的品牌调整。

其中两套仍然用 16px 文字和 2px 圆角：数据库工具和支付应用。它们的字体、颜色和布局不同，所以距离是 0.46，并非零。

六个距离都高于 0.20 的下限：

有一件事仍然不对。餐厅按钮在 4.0.0 里的颜色是 #CA5000。它比 9 月的 #BB4900 更接近品牌色 #E85D04，但仍然不是品牌的橙色。

这四个页面还可以。没有一个能让你停下来细看，我接受这个版本做到这里：4.0 叫 Foundations，因为它做的是打基础。试验那天早上，引擎有 3,315 项测试。4.0.0 发布时有 13,059 项。

我说发布时，它真的发布了吗？

没有。同样的检查也能发现这个问题。

11 月 2 日，我给 4.0.0 打上了发布标签。11 月 11 日，我去看了一个陌生人安装它时会得到什么。公共软件包仓库，也就是安装命令下载软件包的地方，仍然提供 9 月 23 日发布的 3.2.0。发布说明写着 4.0。安装得到的是 3.2。这个状态持续了十天，直到 11 月 12 日我把 4.0.0 传上去。

9 月的失败又发生了。我检查了自己这一边：代码、标签、说明。我没有检查人们实际收到什么。现在，每次发布都会做这项检查：

每次发布后，在干净的机器上从公共软件包仓库安装软件包，像新用户那样操作。打印版本号。如果和发布的版本不一致，就说明还没有发布。在别人发现之前告诉我。

如果你在做生成工具

• 不要只测试一个输出是否正确，把四个输出放在一起互相比较。
• 不要选简单的测试输入，选本该毫无共同之处的输入。
• 不要用每类一张表来修复雷同，根据输入算出每个值。
• 不要只要求“更多变化”，测量输出之间的距离，设一个下限。
• 不要让工具跳过没读懂的内容，让它说清跳过了什么。
• 不要相信自己的发布说明，像新用户一样安装自己的产品。

我预料到的问题：四份简报样本很小，为什么信它？我不用它衡量整体表现。四份本该毫无共同之处的简报，足以抓出把一切都做成一样的工具。它们又足够少，可以放在一个屏幕里，用眼睛判断。其余由下限把关：每次有人给引擎提交改动，都会跑这项测试。

ux-skill 免费开源。项目页面 有详细介绍和代码链接。