UX Collective 文章探讨设计师应像建筑师理解石材般理解代码

设计师应该像建筑师理解石材那样理解代码：知道它能做什么，而不是如何切割它。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. — 设计文件和浏览器中显示真实数据的同一张卡片。图片由作者提供。

在《源泉》（The Fountainhead）开篇不久，霍华德·罗克（Howard Roark）因拒绝采用借用的风格进行建筑设计而被建筑学院开除。院长召见他解释原因，罗克却回敬了一条准则：“一种材料能做到的事，绝不能用另一种材料去做。没有两种材料是完全相同的。地球上没有两个地点是相同的。没有两栋建筑有着相同的目的。目的、地点和材料决定了形状。”

你不必崇拜罗克也能领会其意。他是书中那位花时间在建筑工地、与电工和钢铁工人在一起、了解材料能做什么和不能做什么的建筑师。他的同学们学的是绘制立面。

数字设计师也有自己的材料。那就是代码。在过去十五年的大部分时间里，我们一直在设计它的图像。这一警告比这更古老。约翰·阿尔索普（John Allsopp）在 2000 年呼吁网络停止模仿印刷品，弗兰克·奇梅罗（Frank Chimero）在 2015 年撰文探讨顺应网络的纹理工作，杰里米·基思（Jeremy Keith）则在《韧性 Web 设计》（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 的规则在这个论点结束的地方也结束了：目的、场地和材料决定形状。我们的材料没有改变。它仍然是代码，它仍然决定屏幕可以是什么样子。改变的是，我们不再需要握着凿子才能知道它能切出什么。

Design in the material you ship 最初发表于 Medium 上的 UX Collective，人们通过高亮和回复该文章来继续讨论。

原作者保留版权；来源：UX Collective。本站维护者确认获准转载，非公共领域或开放许可证声明。原文来源（转载授权由站点维护者确认） · 中文译文由 CxHub 客户体验社区生成，并非官方译文。