Marvin Schwaibold：用 AI 制作交互原型，设计更好用的网站

Aaron Epstein 邀请 Shopify 产品设计工作室负责人 Marvin Schwaibold，讨论 AI 如何改变他的设计与构建方式，随后一起点评观众提交的网站。

Schwaibold 说，他的设计过程仍然循序渐进、不断迭代，也会尝试多种版本，变化的是工具。Figma 仍是记录想法的草稿板；如今他会借助 Codex、Claude Code 和终端迅速做出可运行的演示，并在手机或电脑上测试。

AI 完成了大量执行工作，但设计师仍掌握方向。Schwaibold 负责挑选结果、把控质量，并将复杂问题拆成较小的任务交给智能体。这是一轮接一轮的交流，而不是一次性请求。

Epstein 认为设计师更像一名编辑。Schwaibold 同意：判断一直是设计工作的一部分，只是过去要花更多手工设计时间才能得到可供编辑的内容。他说，AI 能写代码、处理技术复杂性；最终效果好不好、往哪个方向调整，仍由他决定。

在 Shopify，他的团队负责管理后台、移动应用和 Sidekick 等重要产品界面。设计团队的一部分重新设计了后台，另一部分则探索如何通过对话和 AI 基础设施帮助商家管理店铺、实现自动化。

Schwaibold 说，这两项工作看似矛盾，却能互补：一方面让界面更好用、更精致，另一方面让 AI 通过界面执行操作。在移动端，这可能意味着用户更多地围绕生意进行对话，而不是手动穿过一个个页面。

加入 Shopify 前，Schwaibold 和 J Tal 在布鲁克林共同经营设计工作室 Molly，约有两年。工作涵盖网页、产品设计和内容策略，客户有大有小。一次只接两三个客户，让团队能在一段时间内专注地与客户密切合作。

展示 Molly 的作品时，他解释说，随画面变化的背景光受到电视墙背后氛围灯的启发。在 AI 普及之前，团队复制并模糊视频，让背景配合画面的颜色和节奏。即使访客还没看到后续作品，这些细节也能吸引他们继续探索。

工作室把组织网站内容的方法称为“Primal”。网站不必一次性展示所有信息来争夺注意力，而是让用户逐层探索、逐步了解内容。每个版块都可以成为一个章节，引导读者进入更多细节。

Collins 网站体现了这一思路：案例以书架的形式展示。团队设计布局，并与工程师合作制作书本堆叠、落下时自然的弹跳。Schwaibold 认为，访客即便没有刻意注意，也能感受到这些细节。

为什么要让一名优秀人才专门打磨一个小交互？Schwaibold 说，对品牌工作室而言，这些细节能向潜在客户展示他们将来可以期待的用心程度。精心设计的交互既是实用的工艺，也是展示团队能力深度的证据。

Schwaibold 说，Shopify 创始人 Tobi Lütke 希望设计师帮助公司定义未来。Molly 团队看到了机会，可以将自己的方法应用于数百万用户使用的界面，其影响和风险都不同于小型工作室网站。

这个工作室与 Shopify 其他团队及产品路线图紧密合作，而不是孤立运作。AI 帮助设计师迅速将界面想法变成可体验的原型。原型可以在公司内部传播、吸引关注，并帮助团队决定是否正式构建。

他将此与 Molly 过去的工作对比：当时屏幕设计和动画需要多人交接。现在，一名设计师或一个小团队就能制作有说服力的原型，在大团队投入实现之前先争取支持。

Schwaibold 展示了后台重新设计和 Sidekick 原型。首页的建议会为商家指出机会，例如改进商品描述；用户点击建议后可开始对话，并在相关场景中查看拟议的修改。

思路是在商家需要时将界面带到面前，而不是让他们穿过许多屏幕。演示运行在实验环境中，并非生产代码。团队对方向达成一致后，设计师各自探索想法，再把结果带回共享原型。

Epstein 问，设计师如何从静态布局转向自行构建测试。Schwaibold 说，Shopify 的实验环境与生产代码仓库分开，但 AI 让设计师更容易将想法可视化。过去，复杂想法通常需要先在 Figma 中反复测试，再请工程师实现。

在一个草地研究项目中，Schwaibold 希望视频网格里的内容能通过拖动打开和关闭。Codex 做出了初版交互，但它无法中断：用户必须等一个内容完全归位，才能打开另一个。这种等待让界面显得不够灵敏。

他在 Figma 中用简单的彩色方块画出希望的流程：滑走一个内容时，仍可以点击另一个。他发现，这张草图比文字或语音更能向 Codex 解释交互。Figma 因而成为拆解和表达想法的工具。

Schwaibold 说，这些工具能创造令人惊讶的东西，但设计师仍要足够了解问题，才能将其拆解。他尝试把真实草地重建为可控制的着色器时，也遵循了这一原则。

他先把草地视频交给 Codex，要求它在网页着色器中还原颜色和细节。初版结果与参考相差很大。于是他把原始视频和结果交给另一个 AI 智能体，询问第一个智能体为什么没理解他的意图。

第二个智能体帮助他说明光线、阴影和各个组成部分。一张地形图揭示了关键遗漏：草并非长在平面上，下面有小丘。解释清楚这一底层结构后，场景变得更可信。

一位同事建议他仔细观察草叶长度，并引入 DialKit 暴露可调整参数。Schwaibold 说，模拟中约有 21.7 万片草叶，但变化范围有限。控制面板让他直接查看和调整数值，不必在聊天中反复描述每个改动。

暴露变量还让他发现，自己此前误解了一张地形图。借助地形、草叶长度和风力等控件，他可以立即看到效果并进行实验。他说，这是一个个人项目，在 AI 工具出现前很难由自己完成。

Epstein 注意到，团队越来越常在原型中加入小控件，以便快速测试参数。过去可能要反复修改代码的工作，现在可以做成临时工具，用来探索选项、打磨交互。

Schwaibold 展示了另一个 DialKit 面板，用来调整受 Mike Matas 启发的轮播组件。他说，自己通过 91 次提示得到原型，再用控件调整拖动一个项目时，运动如何传递给相邻项目。拉动强度等数值不仅要能运行，还要感觉正确。

对于正在学习这些工具的创始人和设计师，Schwaibold 建议坚持动手实验。他称 AI 是一位有无限耐心的合作者：要求它重新尝试动画，它也不会生气。分享参考网站、截图和配色，说明哪里不对，然后继续迭代。

他还建议尝试复现自己欣赏的交互来学习。对他来说，周末重建轮播组件是一种了解内部机制的方法，也不会占用工程师的工作时间。他说，理解这些构造方式让他成为更好的合作者和管理者。

第一个点评的网站 Endstack 用类似桌面的界面展示 AI 工作空间。两位嘉宾都喜欢它让访客直接接触产品的方式，但 Epstein 不确定它具体要帮助用户完成什么任务。

Schwaibold 觉得页面视觉信息过载：侧边栏、聊天记录、界面和主要文案同时争夺注意力。他想起一位排版老师曾问海报是否能引导观众的视线。在这里，他说，用户很难知道先看什么、先做什么。

他建议收起部分杂乱内容，突出介绍和标题，并提供一个简单入口，让用户快速试用演示。Epstein 同意页面应有一个主要目标；多个样式相似的按钮让人不清楚哪个操作最重要。

Schwaibold 建议选择一个核心想法来构建网站叙事，就像 Collins 以作品为核心一样。两人都欣赏让访客直接进入产品的尝试，但认为增加一点背景说明，会更有助于用户体验到产品的价值。

SkillSync 介绍自己是一款本地优先的 Mac 应用，可在智能体和团队成员之间同步记忆与技能。两位嘉宾觉得产品承诺更清晰，但 Schwaibold 认为字体偏小、页面信息密集。细致的功能描述反而让人难以迅速抓住核心好处。

Epstein 指出标签页的常见问题：访客可能不会点开每个标签，因此隐藏在后面的重要信息可能永远不会被看到。Schwaibold 建议将产品能力归纳为三个清晰的支柱，每个支柱再展开更多背景。

Epstein 说，让页面长一些，也可能比把一切压缩在标签页后面更好：人们习惯滚动。创始人应找出产品最重要的作用，清楚展示，并让用户方便地试用。

两位嘉宾也质疑那些无法帮助用户理解产品的 AI 生成插画和动画。Schwaibold 建议，信息设计师可以将功能转化为统一的视觉语言，甚至让这种清晰表达成为品牌的一部分。

他回忆起一段 Gemini 动画：不同能力汇聚成辫状结构，再变成一条线。许多人参与制作，工程师还让动画随滚动播放；结果既解释了产品，也让它更有辨识度。他认为，只要目的明确，抽象的艺术表达也能有效传达信息。

Instaplay 展示了一组游戏图片，两位嘉宾最初直接玩起游戏，没有意识到主要功能是创建游戏。Epstein 建议用简洁说明或更醒目的提示框，让用户明白希望他们采取的行动。

Schwaibold 问，网站究竟希望用户探索现有游戏，还是自己创建游戏。他们尝试创建时，在看到结果前就遇到了登录要求。他认为，让用户有足够机会体验产品，是获取用户成本的一部分。

对于游戏展示区，他建议用短预览替代静态封面，或许可以通过屏幕录制制作。Epstein 则建议先让用户创建并试玩，等他们想保存、返回或分享成果时再要求注册。

他们还觉得导航标签以及返回首页的方式令人困惑。Schwaibold 建议设计师站在初次访问者的角度思考：对方并不预先知道产品做什么。含义不清的图标或多余导航，都可能打断用户获得价值的过程。

接下来是 Mintlify，网站给两人留下了更直接的好印象。他们认为标题、正文、醒目的操作按钮、字体和间距都显得简洁专业。低调的背景图强化了基础设施的感觉，而不是分散注意力。

Epstein 说，在工具众多的市场中，客户标志提供了社会证明。Schwaibold 喜欢功能区统一的视觉处理，但建议放大标题，减少重复使用背景动画。访问控制和兼容现有系统等重要信息，太容易被视觉元素掩盖。

两人喜欢一个可以滑动浏览的客户案例轮播：颜色与照片和品牌相呼应。他们也欣赏各版块之间留出的空间。Epstein 指出，克制的页面同样需要花功夫：团队必须决定删掉什么，而不是把所有东西都放上去。

Schwaibold 再次谈到将首页设计成一系列章节。每个版块应传达一个不同的想法，并提供深入了解的入口。设计师的工作是降低复杂度，一次呈现一部分信息，同时维持叙事。

Knowlify 将文档和想法转化为带旁白的动画视频。在其首页，Schwaibold 数出了多种互相竞争的字号、两个操作按钮、标志和其他元素。他建议使用一个标题和一段简洁正文，承载最重要的信息。

Epstein 觉得标题中两个部分同时变化，让人难以把握。两位嘉宾都没有立即理解它提供视频服务。他们建议明确说出产品带来的好处，并用一段视频展示公司制作的内容。

嘉宾认为视频样例质量不错，但轮播不便探索：卡片的行为不完全符合预期，打开一个之后也很难切换到其他内容。他们建议扩大可点击区域，让访客可以滑动浏览不同示例。

Schwaibold 建议将每个视频与客户及简短案例配对，让访客了解作品和实际结果。页面下方对产品的说明——上传想法或文档，通过聊天编辑带旁白的动画——放到更靠近顶部的位置会更有帮助。

两人都反对改变页面滚动速度或响应方式的做法。Schwaibold 主张使用原生滚动和可中断的交互：用户随时可能改变主意，页面不应强迫他们按照设计师设定的速度浏览。

Epstein 补充说，访客从无数网站和手机应用中形成了滚动习惯。改变滚动灵敏度会迫使他们重新适应，分散寻找信息的注意力。小型控件和难以退出的全屏视频也增加了阻力。

最后点评的是月球技术公司 Instinct Space。两位嘉宾立刻看出了航天主题，也欣赏其沉浸式画面。Schwaibold 建议用可交互的 3D 处理，让一两个元素成为令人印象深刻的视觉焦点。

他喜欢网站敢于使用衬线字体，但发现多种字体风格和色彩丰富的标志相互竞争，分散了对核心信息的注意。开场还可以多提供一点背景，说明公司正在建造什么。

网站用发射、巡航和着陆解释自己的工作。两人喜欢这种简洁结构，但建议悬停动画更快地展示含义。对于着陆过程，与其展示漫长接近过程，更有信息量的是靠近月面时逐渐变大的阴影。

Schwaibold 会把技术、公司、新闻和招聘设计成首页章节，再分别通向更深的内容。技术页面的真实影像让 Epstein 明白硬件正在建造，而不只是计划；两人建议把这样的证据放到更靠近首页的位置。

他们指出封面图片风格不够一致，并建议衬线字体用于标题，正文则使用易读的无衬线字体。一个只能通过按钮操作、不能拖动或用触控板滑动的轮播，也错过了提供自然交互的机会。

Schwaibold 提到 Blossom Carousel：这是一个免费的 GitHub 项目，提供可滑动和滚动的多种组件，包括移动端堆叠样式。节目最后，Epstein 感谢他展示自己的设计标准如何超越外观，延伸到用户实际体验界面的方式。