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

发布 ux-skill 4.0 前，我让它处理四份本该毫无共同之处的简报。它却把同一套系统做了四遍。这里是我定下的修复规则，以及可以直接复制的提示词。

https://laithjunaidy.com/zh/writing/four-briefs-one-design-system
作者 Laith Aljunaidy. 发布于: 2026-11-14.

---

![概括这件事的五张卡片：四份简报，四套系统的正文都是 16 像素，规则是“灵活计算，别写死”，最接近的一对距离为 0.41，高于 0.20 的下限，以及版本 4.0.0](https://laithjunaidy.com/writing/four-briefs/bento.jpg)

*五张卡片看这件事。*

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

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

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

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

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

## 哪些地方相同？

几乎全部。

![9 月 25 日的引擎生成的四个页面，分别属于诊所、数据库工具、餐厅和支付应用：相同的字体和尺寸，四种颜色](https://laithjunaidy.com/writing/four-briefs/before.jpg)

*9 月 25 日的引擎，我这周重新构建了一遍。我特意让每份简报用相同的页面和文字，这样只有系统会不同。结果只有颜色不同。*

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

| 简报 | 正文字号 | 标题字体 | 正文字体 | 按钮圆角 |
| :- | -: | :- | :- | -: |
| 诊所，患者超过 60 岁 | 16px | Source Sans 3 | Source Sans 3 | 10px |
| 数据库工具，深色优先 | 16px | Manrope | Manrope | 6px |
| 家庭餐厅，活泼 | 16px | IBM Plex Sans | IBM Plex Sans | 8px |
| 支付应用，阿拉伯语优先 | 16px | IBM Plex Sans | IBM Plex Sans | 6px |

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

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

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

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

## 错误的修复是什么？

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

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

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

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

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

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

## 怎么测试“不同”？

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

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

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

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

## 现在这四套是什么样？

![4.0.0 版本生成的同样四个页面：四种不同的标题字体，不同的字号和圆角，数据库工具是深色](https://laithjunaidy.com/writing/four-briefs/after.jpg)

*同样四份简报，交给 4.0.0 版本。相同的页面，相同的文字。现在系统不同了。*

| 简报 | 正文字号 | 标题字体 | 正文字体 | 按钮圆角 |
| :- | -: | :- | :- | -: |
| 诊所，患者超过 60 岁 | 18px | Newsreader | Source Sans 3 | 9px |
| 数据库工具，深色优先 | 16px | Space Grotesk | Manrope | 2px |
| 家庭餐厅，活泼 | 17px | Baloo 2 | Nunito Sans | 11px |
| 支付应用，阿拉伯语优先 | 16px | Sora，阿拉伯语用 Alexandria | IBM Plex Sans | 2px |

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

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

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

| 配对 | 距离 |
| :- | -: |
| 诊所和数据库工具 | 0.41 |
| 诊所和餐厅 | 0.53 |
| 诊所和支付应用 | 0.46 |
| 数据库工具和餐厅 | 0.56 |
| 数据库工具和支付应用 | 0.46 |
| 餐厅和支付应用 | 0.54 |

有一件事仍然不对。餐厅按钮在 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 免费开源。[项目页面](https://laithjunaidy.com/zh/research/ux-skill) 有详细介绍和代码链接。