Patrick Neeman:AI是新的设计材料,设计师应通过采样代码理解模型行为
AI is the new old design material
人工智能正成为设计师必须亲手操作的新材料,其核心挑战在于输出的不确定性,而非视觉呈现的静态完美。传统设计工具如Figma往往隐藏了底层逻辑,导致设计师难以把握模型的真实表现。正如包豪斯强调通过接触木材、金属等原材料来掌握工艺,以及早期网页设计依赖直接编写HTML/CSS一样,现代AI产品设计要求设计师深入“最后一英里”,通过运行模型来理解其行为边界。
静态原型仅展示单一理想结果,而真实产品面对的是分布式的输出变化。设计师应编写简单的采样代码,对同一提示词重复运行数十次,记录长度、语气和准确性的差异,从而针对最坏情况而非典型情况进行界面设计。这种实践不仅有助于识别布局溢出或事实错误等用户最先注意到的失败案例,还能建立共享的评估集,确保在模型更新时能迅速回归测试。尽管部分观点认为编码会侵蚀设计思维,但用于探索材料的临时采样代码无需进入生产环境,其价值在于揭示被画布掩盖的行为模式,使团队能在评审中共同决定界面必须承受的极端输入。

富有创造力的制作者和建造者一直通过动手实践来学习他们的媒介,从研磨颜料到 HTML。模型是下一个材料,你需要通过构建来学习它们。
该领域一直在争论设计师是否应该编写代码,仿佛这个问题是 新的。
这并不 新。
艺术和设计历来都是通过材料来教授的,这一传统可以追溯到几个世纪前。
在 1390 年代,画家 Cennino Cennini 撰写了一本手册,其中关于研磨颜料的内容至今仍被 翻译出版,这段历史也通过我作为建造者和创作者的家庭传承下来。我的母亲 Jean Neeman 曾为洛杉矶艺术博物馆、Getty 和 Hearst Castle 担任修复师,亲自研磨颜料,我曾看着她使用原始材料修复有 600 多年历史的中文雕像以恢复 历史。
她亲身践行了这种工艺,正如我在 Everything I Know About UX I Learned From My Parents 中所写的那样。我通过剪贴排版、冲洗照片底片以及运行胶片输出设备来学习印刷。
我理解了解材料是一种永恒的需求,但我遇到的大多数设计师并不理解这一点,因为他们的工具隐藏了材料。我们需要将其视为 工艺的一部分并予以尊重。
现实情况是,像 Figma 和 Sketch 这样的可视化工具是一种抽象,真正的工艺发生在最后一英里,即与材料直接打交道。伟大的设计师一直使用他们手头的材料,而我总是将编写代码作为工作的一部分来理解我的 材料。
在网络领域,这意味着 HTML、CSS、Javascript 以及其他使其工作的技术。人工智能是新的一种材料,它更快地传授着同样的教训。
那些利用模型做出最强工作成果的设计师会运行模型并阅读输出结果。这需要采样代码:一个循环,反复提出同一个问题,直到模型的 习惯显现出来。

研究包豪斯工作坊
1919 年 4 月,Walter Gropius 发表了 Bauhaus 的成立宣言,其要求非常 直接。
正如艺术史学家 Magdalena Droste 在 The Bauhaus Manifesto 中所解释的那样,Gropius 告诉建筑师、雕塑家和画家要转向工艺。课程最终列出了一系列工作坊。学生通过切割、弯曲和编织来学习木材、金属、玻璃和纺织。
Josef Albers 几乎不用什么材料就阐明了这一点。Droste 指出,在他的预备课程中,学生必须让一张平面的纸独立站立,或者将一根直铁丝弯曲直到它能保持 形状。
一幅画可以暗示一把椅子,但只有木材能告诉你它会在哪里 开裂。
这种习惯造就了该校最著名的作品。Marcel Breuer 领导木工车间,将钢管弯曲成椅子,而 Herbert Bayer 随后负责印刷和广告车间。
他们了解自己的材料,因为他们亲手加工过它们。自那以后的每一种新媒介都迫使设计师回到某种工作台前,而最近两个工作台是由 代码构成的。
手写代码的 1990 年代网页
网络迫使了同样的回归,而这始于一个空白 文件。
20 世纪 90 年代中期,网页设计工具就是文本编辑器:Windows 上的 Notepad,Mac 上的 SimpleText。你输入标签,保存文件,然后重新加载浏览器看看自己做了什么。我最早的网页作品,Oliver North 的主页,就出自那个 时代。

专用工具很快跟进,每一个都让设计师离标记语言更近一步:
- BBEdit(1992),一款 Mac 文本编辑器,于 1994 年添加了 HTML 工具。
- HoTMetaL(1994),一款早期的 HTML 编辑器,显示每个标签的起始和结束 位置。
- PageMill(1995),Adobe 面向平面设计师的可视化编辑器。
- FrontPage(1995),一款可视化编辑器,Microsoft 在 1996 年初将其 收购。
- HomeSite(1996),一款 Windows 编辑器,专为那些想亲自编写 HTML 的人 打造。
- Dreamweaver(1997),Macromedia 的可视化 编辑器。
那些从可视化编辑器中获益最多的设计师仍然会打开底层的代码。只有在多个浏览器中检查页面后,他们才信任 画布。
可视化编辑器展示的是某个浏览器的最佳情况,而标记语言展示了其余 部分。
2000 年,John Allsopp 为 A List Apart 撰写了 A Dao of Web Design,指出设计师在印刷领域所掌握的掌控力其实是印刷页面局限性的 产物。
十年后,ethan marcotte 以引用 Allsopp 的话开篇写了 Responsive Web Design。他基于流体网格、弹性图片和媒体查询构建了一个示例页面,并展示了随着窗口变窄,布局如何改变 形状。
响应式设计源自设计师的样式表,任何模型都无法发现 它。
五年后,Frank Chimero 在 The Web’s Grain 中为这一理念命名,写道“每种材料都有纹理,包括网络。”他认为该领域的最佳技术源于这种纹理,而违背这种纹理构建的网站则显得脆弱且 笨拙。
测试模型输出变化
模型以一种新的方式打破了静态模型。静态屏幕展示一个答案,由设计师选择,通常是好的那个。模型每次返回不同的答案,而这种分布正是你要设计的对象。将选定的答案称为单样本模型:围绕模型在其最佳状态下的输出构建的 屏幕。
在我们设计了搜索和摘要功能的法律科技领域,模型中的每个摘要都是正确的,因为它是设计师 写的。
- 2017 年,Lars Erik Holmquist 在 Intelligence on Tap: Artificial Intelligence as a New Design Material 中主张,设计师应将该技术视为一种具有自身局限性的 材料。
- 在 UX Design Innovation: Challenges for Working with Machine Learning as a Design Material(2017)中,Graham Dove 及其同事调查了 UX 从业者。他们指出,机器学习在设计创新方面进展甚微,这可能因为它是一种新颖且难以驾驭的材料。
- Qian Yang 在 Carnegie Mellon University 的 2020 年博士论文 Profiling Artificial Intelligence as a Material for User Experience Design 走得更远。它将这些困难追溯到两个根源:对系统能力的未知,以及其可能输出的复杂性。
模型只是一个样本,而产品是分布。
UX Guidelines(我自己的参考网站)上的 Doherty Threshold 条目指出,软件开始感觉像对话的临界点在 400 毫秒以内。静态帧无法展示四秒的等待时间。
Bret Victor 围绕“创作者需要与他们创造的事物建立即时联系”这一理念,构建了整个演讲 Inventing on Principle(2012)。只有通过一次又一次地运行模型,你才能发现差异、失误和延迟。
针对模型的代码原型
Josh Clark 在他 2018 年的演讲 The New Design Material 中将两个时代联系在一起,称机器学习是“一种设计材料,就像 HTML 和 CSS 一样”。
在 Addressing UX Practitioners’ Challenges in Designing ML Applications(2023)中,University of Washington 的 K. J. Kevin Feng 和 David W. McDonald 对 27 名 UX 从业者进行了一项研究。每个人都在设计应用的同时获得了一个构建和测试简单模型的工具。
动手实验帮助他们将模型行为与用户目标相匹配,发明用于纠正模型的界面功能,并发现伦理风险。一位参与者解释说,如果不进行测试,你就不知道它“会以多高的频率或以何种方式出 错”。
作者们将瓶颈定位在制造阶段,即模型被构建的阶段,因为设计师通常被排除在这个阶段之外。他们的工具完全不需要代 码。
如今,对于语言模型而言,几行代码就是获得同样动手访问权限的最短路径。Geoffrey Litt 在 Malleable software in the age of LLMs(2023)中预见到了这一点,认为语言模型将使普通用户能够从零开始构建小型工 具。
设计师一直将自己与该材料保持距离,而这种距离正是他们再也无法忽视的瓶颈。
这种距离正在缩小。Figma’s 2026 AI report 发现,参与开发的设计师比例在一年内翻了一番,从 21% 增加到 41%。
Claude Code、Cursor 和 Figma Make 等工具让设计师能够描述原型,将其连接到实时模型,并在一次会话中观察哪里会出 问题。
并非所有设计师都认同代码属于工作的一部分。Alan Cooper 在 Should Designers Code?(2017)中写道,“编码并不是成为顶尖交互设计师所必需的技能。”
Linear 的 Karri Saarinen 在 Design Is More Than Code(2025)中警告说,以生产为先的习惯可能会侵蚀设计背后的思考。这两项警告都是关于要发布的代 码。
采样代码会在同一下午被丢弃,其唯一作用是向你展示该材料的特性。
编写 AI 评估集
采样代码不需要发布。它就像一个测试台,其最有价值的输出是一份记录,记录了模型破坏设计的每一个案例。木材的纹理不会在一夜之间改变,但模型可能会随着提供商的一次更 新而改变。
工程师已经为这个文件起了一个名字:评估集。设计师很适合编写它。他们知道用户最先注意到的失败情况,比如答案超出了卡片的边缘,或者以完全自信的语气陈述了错误的日期。
针对上个月模型调优的设计,即使没有一个像素移动,也可能失效。
四个习惯可以将这份记录转化为实际的工作实践:
- 直接调用模型。让 Claude Code 或 Cursor 生成一个脚本,将真实的产品输入发送给模型并打印出答案,在绘制界面之前先阅读这些答案。
- 每个提示词运行 50 次。按长度、语气和准确性对答案进行排序,然后针对最长和最错误的答案进行设计,而不是针对典型答案。
- 在设计评审中展示差异范围。在 50 个答案中选出两个最差的,与设计稿一起放在设计评审中,共同决定界面必须能够承受哪些情况。
- 将失败案例保存为测试用例。将所有破坏布局或误导用户的输出保存在共享文件中,以便工程团队在模型或提示词变更时重新运行它们。
首先运行模型
格罗皮乌斯让学生离开绘图室,因为绘图掩盖了材料会产生的效果。
早期 Web 的设计师在文本编辑器中学到了同样的道理,Marcotte 用一个可工作的页面证明了这一点。关于设计师是否应该编程的争论,始终是关于材料以及设计师能多接近材料的争论。
对于人工智能产品,材料是模型在数千种输入下的行为表现。你无法在画布的框架中找到它。你需要通过运行模型、阅读所有返回结果,并将失败案例保存在团队可见的地方来找到它。
如今我将我的工作描述为构建,原因就在于此:除非我观察过模型如何工作,否则我无法设计出基于模型的产品如何运作。
下次你的团队评审人工智能功能时,跳过单一样本的设计稿。运行提示词 50 次,把最差的答案带到评审会上,并设计出能够经受住考验的界面。注意那些引发全场争论的答案,因为那些正是静态设计稿所隐藏的情况。
这就是现在的工作坊,大门向任何愿意编写几行采样代码的人敞开。
原作者保留版权;来源:UX Collective。本站维护者确认获准转载,非公共领域或开放许可证声明。 原文来源(转载授权由站点维护者确认) · 中文译文由 CxHub 客户体验社区生成,并非官方译文。
来源:UX Collective · uxdesign.cc