设计师应以代码为材料：AI 时代的设计角色重定位

设计师应当像建筑师理解石头那样理解代码：了解它能做什么，而不是如何切割。如今 AI 来做切割这件事。

Two versions of the same reservation card. On the left, the design file: a short English title, a round photo, two neat buttons. On the right, the same card in a browser with real data: the photo failed to load, a long French name and title wrap onto extra lines, the main button breaks onto two lines, and a red error says availability could not load. — 设计文件里和浏览器中带真实数据的同一张卡片。图片由作者提供。

在《源泉》早期，霍华德·罗克因为拒绝用借来的风格设计而被建筑学院开除。院长把他叫去让他解释，罗克却给了他一条原则：“能用一种材料做到的事，绝不能用另一种去做。没有两种材料是相同的。地球上没有两处场地是相同的。没有两座建筑的目的是相同的。目的、场地、材料决定了形状。”

你不必欣赏罗克也能领会这个观点。他是书中那个把时间花在建筑工地上、混在电工和钢铁工人中间、了解材料能做什么不能做什么的建筑师。他的同学们则学会了画立面图。

数字设计师也有自己的材料，那就是代码。过去十五年里的大部分时间，我们都是在用代码的图片来设计。这个警告比那更早。John Allsopp 在 2000 年呼吁网页停止模仿印刷品，Frank Chimero 在 2015 年撰文谈论顺应网页的纹理工作，Jeremy Keith 则在《Resilient Web Design》中为它的材料单独写了一章。

图纸不是建筑

设计文件是一张图纸。它只呈现一种状态、一种宽度、一种语言，以及设计师手动输入的数据。而产品包含其他所有状态。

名字比盒子长。一个简短的英文标签翻译之后长度可能翻倍。照片加载失败。列表是空的。请求耗时四秒，或者失败了。有人用键盘逐个 Tab 切换焦点。手机屏幕宽 320 像素。对遇到这些情况的人来说，没有一个是边缘情况，而在文件里，除非有人手动画出来，否则它们都不存在——实践中意味着很少画。

Six small renders of the same event card, each labelled. A title three lines long. A French button label. An empty state with a calendar icon. A red error with a retry button. The card squeezed to phone width with its button wrapping. The button wearing a thick keyboard focus ring. — 设计文件从未呈现的六种状态。图片由作者提供。

当文件是唯一真实来源时，这些缺口中的每一个都由写代码的人在设计被宣布完成之后决定，而且通常没有经过沟通。文件和产品逐渐脱节，而文件在评审中仍被当作产品来展示。

当代码成为唯一真实来源时发生了什么

当我构建了 131 个按钮变体来研究悬停反馈时，我是在代码里构建的。令人意外的是规格说明发生的变化。在设计文件里，果冻按钮是一个形容词：有触感。在代码里，它是一组数字。指针从边缘 36 像素处开始计数，材料有一个刚度值，它会在一秒内回弹归位。工程师能构建一个数字，没人能构建一个形容词。

An outlined button whose border dents and bulges like jelly as the cursor pushes into each edge, then settles back into a rectangle. — 131 个按钮变体之一，用代码构建。图片由作者提供。

我现在在产品团队里用同样的方式工作。被评审的是代码原型。设计文件依然存在，因为人们喜欢在画布上留评论，但它在每一轮迭代后都从代码重新生成，绝不会反过来。它的作用是充当一面镜子。

Two diagrams. Before: the design file is the source of truth, and drift creeps in on the way to a hand-written spec and again on the way to code. After: code is the source of truth and what ships, and the design file is regenerated from it each pass as a mirror for comments. — 前后对比：哪个产物才是唯一真实来源。图片由作者提供。

罗克的原则几乎逐字适用。响应式布局、加载状态和焦点环属于浏览器。在画布工具里绘制它们，就是用一种材料去做属于另一种材料的事。

你不再需要亲手写它了

旧版论点的问题就出在这里。十年来，“设计师应该写代码”意味着设计师应当学习编写 HTML、CSS 和 JavaScript。许多人尝试过，许多人放弃了，而他们有理由对此心生怨恨。这种说法要求他们变成一个更慢、更次等的工程师。Brad Frost 后来划出了一条更有用的界线，区分了贴近设计的前端前端，以及其背后的应用逻辑。

这场争论已经结束，因为代码由 AI 来写。我描述屏幕、它的状态和数据，模型就把它写出来。我通过查看结果、指出问题来纠正它，就像建筑师纠正工地那样，而不是自己重新砌砖。

阅读代码也在走同一条路。它仍然有帮助，我几乎每天都会看 diff。但 AI 审查工具也在读它们，而且进步很快。在今年的一项基准测试中，最出色的审查工具在来自 Sentry 和 Grafana 等生产代码库的 122 个真实 bug 中查出了 84 个。赢得测试的正是该工具的厂商，而三分之二并非全部。所以，这并不是说机器已经取代了审查者。而是说，设计师不再需要充当审查者。

Three columns. Write: the bar is almost entirely AI, done by AI from a plain description. Read: the bar is about half AI, done by AI review and then the engineer who owns the code. Understand: the bar is entirely the person, done by the designer. — 谁在写、读并理解代码。图片由作者提供。

读到这里的工程师会提出异议，而且他们有道理。在 Stack Overflow 的 2025 年开发者调查中，66% 的人将“几乎正确但又不完全正确”的 AI 回答列为他们最大的痛点，46% 的人表示不信任其准确性。对系统负责的人仍然必须阅读输入其中的内容。这个人就是拥有它的工程师。设计师则有另一份工作。

理解是你无法委派的部分

Roark 从工地上学到的不是铆接的技巧，而是懂得钢材会如何表现，从而让他的图纸只提出材料能够给予的要求。

这正是 AI 无法替你把握的部分。它会写下你所描述的一切，包括媒介处理不好的东西，而且它会拿代码来审查代码，而不是拿另一端的人真正需要的东西来审查。要做出这种判断，需要一个懂材料的人。

你通过运行来判断输出，而不是通过阅读。在 320 像素宽下打开它。粘贴你能找到的最长的真实姓名。把网络调成慢速。放下鼠标，改用键盘。这些测试没有一项需要一行语法。

该学什么来代替语法

布局如何流动：什么会换行，什么会拉伸，什么拒绝缩小。
存在哪些状态：空、加载中、部分、失败、离线。
数据的形状，包括一个字段在没有内容时存放什么。
什么需要向服务器发起请求，什么在设备本地就是免费的。
屏幕阅读器在你的屏幕上实际朗读出什么。
如何在你自己的机器上运行产品，无需他人帮助。
如何让 AI 用平实的语言解释一次改动。

这些都不需要写代码，但都需要你花时间与它相处。

材料决定形状

Roark 的法则在这场争论的终点依然成立：目的、场地和材料决定了形状。我们的材料没有改变，它仍然是代码，仍然决定着一块屏幕能成为什么。改变的是，我们不再需要亲自握住凿子，才能了解它能凿开什么。

用你交付的媒介进行设计最初发表于 Medium 上的 UX Collective，人们在那里通过高亮和回应这篇文章继续着相关讨论。