Tessl 设计师如何把品牌规范写成 AI 智能体可执行的规则
What your design system can't teach AI agents
Tessl 设计师 Hamza Oza 讲述如何把品牌规范拆成价值观、语气、视觉三层可检查规则,并以插件中的两个技能在创建前加载、在 PR 和发布前复核。他让模型对比三组人工重设计的 Figma 前后稿来枚举差异,把难以言传的构图判断转成规则;对存量代码的自动扫描首轮提出 13 个 PR 并全部合并,如今每周运行一次。
作者用 Figma 前后对比让模型枚举差异,把难以言传的设计判断转成可检查规则,方法可迁移到其他隐性经验。
几个月来,同事们不断问我同一个问题的不同版本。我能不能把我在设计上的方法写下来,这样他们就不用等我的日程安排,也能借鉴?
这个问题反复出现,是因为我们现在构建产品的方式。Tessl 运营着一家软件工厂 Kikimora:智能体负责制作,人负责设定方向并决定什么能发布。随着它的使用范围扩大,我们发布的越来越多东西在到达时,设计师根本没有碰过。
人们请求帮助的几乎总是像素层面的东西,但你不能从那里开始,因为一个品牌由三大支柱构成:
- 价值观是一个组织所相信的东西。
- 声音是它如何表达这些信念。
- 视觉是它如何呈现这些信念。
只把视觉编纂成文,智能体得到的是一份偏好清单,底下没有任何推理。这个顺序是被迫的,尽管压力完全来自视觉那一端。它还会强化一种观念:设计只等同于像素。
视觉也是最难写下来的,我花了一段时间才说清原因。构图——判断屏幕上放什么、放在哪里、省略什么——存在于设计师的头脑中。它靠手工应用,靠近距离接触传递,而不是靠文档,因为总有人在旁边提供这种判断。没有人会写下从来不需要交接的东西。

为智能体编纂价值观和声音
声音是最容易处理的。组织发布过的每一篇文案都是一个数据点,所以规则是可以还原的:'全程使用美式英语'、'先说出事物名称再解释'、'不用感叹号'、'不用破折号'。规则的第一版直接来自那些已发布的文案,然后每一条都与我们的市场负责人通过实例反复打磨,直到符合我们的标准。人可以检查这些。机器也可以。
价值观看起来更容易,其实不然。大多数组织已经把自己的价值观写下来了,但那些词可以有很多种解读。真正的工作是阐明每一条价值观所隐含的决策,而正是在这里,每个人都会发现他们其实并没有达成一致。
价值观从我们的运营原则出发,我与运营和领导团队逐一推敲,一直推进到它能产生一个决策,同时又不失其来源原则的精神。两者的产出都刻意保持朴素:一份可核查的规则文档,而这正是智能体能够据以行动的形式。
为什么设计系统教不了构图
通常这时就会有人问:那设计系统呢?
我们有一个。它很好。但它从来就不可能教构图。组件库告诉你有哪些部件。它没有说该用哪些部件、用多少个,或者什么时候正确答案是一个都不用。构图是它自己的学科,没有设计师会指望组件库来承担这件事。
智能体让这个缺口变得代价高昂。它们完整继承了组件库,却完全没有继承判断力,而且它们不会靠坐在我旁边六个月就吸收到这种判断力。
我们软件工厂产出的界面就是例证。每个组件都来自我们的设计系统,每种颜色都是令牌,每个间距值都合规。没有任何东西会被 linter 挑出毛病。然而面板叠着面板,有四层高度层级,每个投影都暗示着一个浮在上一层面之上的表面,却没有层级告诉眼睛该从哪里看起。两样东西相接处就加边框,仿佛相邻关系需要解释。模态框毫无正当理由地打断用户。
表面上看,这些都不是组件缺陷。每一个都是组合决策,是我在几秒内无意识做出的判断。如此快速的判断从不产生任何产物,所以智能体无从读取。


从 Figma 差异中提取设计规则
内省失败后,我换了个方向。我拿了三个由智能体构建的界面,它们在用途和布局上刻意不同,然后在 Figma 中逐一重新设计。接着我把每一对放到另一个智能体面前,让它描述差异:不是判断哪个更好,而是列举出改变了什么。
期望不高。我主要想看看它能得出什么。

每一对都返回了一份具体、可核查的差异清单。嵌套表面,卡片套卡片,从三层削减到一层。移除了十四个边框,分隔由间距承担。一个模态框被替换为内联展开。区块间距翻倍。大多数都是我一次性做出的决策,而看到它们被逐条列出,是我第一次看清自己的推理过程。
这个过程在多个设计上效果最好,因为这样才能区分规则和一次性特例。在三个设计中反复出现的改动,就是一条正在形成的规则。
差异适合智能体的工作方式。内省要求你检索某种从未以语言形式存储的东西。差异把它变成两个产物之间可观察的区别,而这正是模型擅长描述的。
这一切并不能让设计变成一份清单。好的设计是情境化的,而技艺的一部分就是知道何时打破自己的规则。当这些规则日后变成检查项时,它们应该从“警告”而非“阻止”开始:在一个例外本身携带信息的学科里,阻止例外就等于丢弃了你最有趣的信号。
自动化设计和品牌检查实际能捕捉到什么
写在文档里的指导,不是能起作用的指导。我们的指导以插件中两项技能的形式发布:一项在创作时加载,在智能体动手之前;另一项在拉取请求时依据同一套规则审查产出,并在发布前再次审查。
触发机制并不比技能自身的描述更巧妙:当任务涉及制作面向用户的东西——一个界面、一份文档、一段文案——智能体据此匹配,并在写下第一行之前加载该技能。每项技能都会引入任务所涉及的核心文档,并按固定顺序解决冲突:价值观裁定模糊决策,语气统辖文案,视觉统辖布局与层级。两者都以一份检查清单收尾,并附有指示:任何需要人类判断的决策都要提出来,而不是猜测。
我没预料到的是,把同样的指导指向已经存在的工作。我们构建了自动化来扫查整个界面,而不是检查新改动,第一次运行就针对累积的偏差提出了十三个拉取请求。十三个全部合并了。

有些问题很平常。我们的对外文案标准是美式英语,但团队大多在伦敦,写出来下意识就是英式,所以“colour”和“organisation”不断出现在产品里。一个把“colour”拼成这样的审阅者不会把它标出来;而智能体没有这种盲区。另一些发现则更难,那些文案语法上没问题,但听起来不像我们。
这十三处问题,没有一个会被阅读 diff 的审阅者发现,因为它们都不是以 diff 的形式出现的。它们一次累积一个词,每个改动都小到不值得反对。而全面扫描能看到 diff 范围检查在结构上无法看到的东西。现在它每周在我们的代码库上运行。
它完整吗?当然不。
规则并不完整,有些最终会被证明是错的。这不是我正在经历的一个临时状态。维护这些指南,以及执行它们的智能体,如今已是这门手艺的一部分:规则随产品变化而变化,扫描会暴露出需要新规则的问题,而这一切永远不会到达“完成”。
很容易把这一切解读为一位设计师把自己写离了工作。但事实更接近相反。智能体可以把一条规则应用到工厂产出的每一个界面上,但它无法决定规则应该是什么,也无法判断眼前的例外是一个错误,还是那种有意思的例外。决定指南并验证返回的结果,正是设计师的判断力如今集中的地方,而且这是一种这份工作从未有过的杠杆:一个人的品味,触达每一个上线的界面。
如果你想自己尝试,这条路不是从一份宣言开始的。拿三个由智能体构建的界面,手工重新设计它们,然后让一个模型列举出差异;在三个界面中反复出现的,就是你的第一套规则。把这些规则推送到创作发生的地方,把关卡设为警告,然后对已经存在的东西做一次扫描。
它比没有引导的智能体输出要好,而且每当一次修正进入指南而不是进入单个产物,它就会改进。这就是我对它的检验标准:不是这条产线是否产出完美的作品,而是它这个月是否比上个月产出更好的作品。
说到底,这并不是一份新工作。我受的是机械工程师的训练,而工厂运行靠的是一条原则:质量是建在产线里的,不是在产线末端检验出来的。手艺从产物转移到产物由什么构成,是同一个理念,出现在我没想到的地方。
来源:Tessl Blog · tessl.io