AI 扩大实现能力之后，设计师如何做判断

一、嘉宾背景

Marvin Schwybold 以 Shopify 产品设计工作室负责人的身份参加本期节目，展示他如何借助 AI 将设计想法做成可操作的软件。节目将工作流演示与观众投稿网站的现场评审结合起来：前者呈现他的实现过程，后者展示他如何判断产品定位、信息层级和交互行为。贯穿两部分的，是实现能力扩大后，设计师需要承担哪些判断与决策。

加入 Shopify 之前，Marvin 与合伙人 Jtel 在布鲁克林经营独立工作室 Molly。按照他的介绍，两人经营约两年后，将工作室整合进 Shopify。Molly 的客户包括 Collins、Apple、Google，也包括较小的组织；服务涉及网页与产品设计、内容策略和信息层级。他的设计经验因此同时覆盖视觉呈现、内容组织与操作行为。

Marvin 说，Molly 同时只服务两三个客户，每周与客户会面，以维持紧密合作。加入 Shopify 的一个动机，是检验工作室的方法能否用于服务数百万用户的产品界面。应用环境随之改变：此前为客户组织内容、设计网站和产品的经验，需要放进更大组织的协作过程。节目交代了他的经验与动机，但没有证明这些方法已经在这一规模上取得特定业务结果。

二、本期主要内容

Marvin 的设计过程仍然依靠反复试验、比较和修改，变化在于迭代发生的位置。过去，工作主要围绕精细的 Figma 画布展开；现在，重心转向 Codex、Claude Code、终端，以及能在手机和电脑上实际操作的 demo。Figma 仍是他的草稿板，用来整理布局，也用来把文字难以说明的要求画给 AI 看。可运行的结果因此更早进入讨论，设计师可以直接检验操作过程，而不只讨论静态画面。

他将设计师的责任概括为筛选产出、拆解复杂工作、判断视觉质量和作出最终决定。AI 能实现他自己无法编写的复杂代码，但哪些结果值得继续推进、任务应该怎样拆分、最终效果是否过关，仍需要设计师判断。实现能力扩大之后，解释需求和评估结果的工作也随之增加。代码已经生成，并不意味着这些判断已经完成。

Shopify 的实践提供了具体的产品背景。Marvin 描述了两条互补的路线：重新设计 Admin 界面，以及通过 Sidekick 对话操作界面、管理商店，相关变化也延伸到移动端。一条路线改善商家直接操作软件的体验，另一条探索商家表达目标、由助手协助完成任务的方式。他同时明确，自己的工作室目前专门在 Sidekick 内工作，并与更大设计组织的工作流、时间安排和路线图紧密衔接。因此，Shopify 整体涉及的界面改造范围，不能直接视为工作室当前的职责范围。

演示中的 Sidekick 首页原型会向商家建议任务，例如重写商品描述。商家点击后进入对话，可以检查修改，再将其发布。这个构想把相关 UI 带入商家当前的任务情境，让首页成为委派任务和管理业务的入口，减少为完成一个目标而逐层寻找界面的需要。节目展示了交互构想及其操作过程，没有提供商家的实际采用率或经营改善数据。

原型也改变了团队讨论方案的方式。设计师分别探索，再将结果整合进同一个 demo 和链接，让参与讨论的人面对同一个可操作对象。Marvin 认为，AI 使个人或两人团队能够完成更充实的原型，也更容易获得内部关注。他说原型比 PRD 有用“一百万倍”，意在强调沟通价值，并非报告经过测量的效率差异。与此同时，他明确说明，演示运行在 Admin playground 中，代码并非生产代码，也不能进入 Shopify 的主仓库。一个方向能够被体验、能够获得内部支持，以及能够最终上线，仍需要分别判断。

三、核心观点：推理、例子与边界

Marvin 对“全栈”设计的理解，包含对结构与取舍的判断。Molly 的 Primal 方法把大量内容组织成可探索的层次；他将 Collins 首页的各个区块比作章节，先提供入口，再引导访客深入。渐进披露也有边界。评审 SkillSync 时，评审者指出，关键卖点如果只能通过逐个打开标签页才能发现，页面即使简短，理解产品的路径仍然很长。他们建议改善字体与文字层级，将功能归纳为少数几个主要价值点，并让重要信息直接可见。SkillSync 被介绍为一款免费、以本地优先的 Mac 应用，用于在不同 agent 和团队成员之间传递记忆与技能；页面首先需要让访客理解的，正是这些核心用途。渐进披露可以延后细节，但应让访客尽早获得判断是否继续阅读所需的信息。

nStack 的问题出现在另一个环节。评审者认可让访客直接进入产品的尝试，却发现宽泛的“任何任务”定位、侧栏、聊天历史和多个同样醒目的按钮争夺注意力。即使已经进入产品，访客仍需要知道第一步该做什么。Mintlify 获得好评，则是因为清晰的标题、简短的说明、突出的行动入口、克制的背景、留白和展示的公司标识建立了明确的阅读顺序。但它的卡片标题偏小，大幅截图和重复动画又分散了对访问控制、兼容性等重要说明的注意。两次评审指向同一个问题：页面的信息层级，是否帮助访客理解产品并采取下一步行动。

Marvin 建议把首页各个区块作为重要子页面的开篇，并按优先级排列。哪些内容应当先出现，需要团队在彼此竞争的功能诉求之间作出决定。因此，让页面显得简洁，往往需要大量编辑工作：梳理材料、确定主次，再决定哪些内容留在首页，哪些交给后续页面展开。这与 Primal 的思路相通。节目没有给出适用于所有产品的区块数量或页面长度标准，具体编排仍要看产品需要解释什么价值。

视觉细节的作用，也需要结合受众判断。Collins 的书架由 Marvin 在 Figma 中完成布局，再由工程师实现自然堆叠和弹跳动画。他认为，品牌工作室的潜在客户会通过这些细节，判断团队是否愿意深入设计、是否具备建立系统的能力。动效在这里承担了展示服务能力的任务。Molly 的 reel 背景则借鉴电视环境光的效果，通过复制并模糊视频，让背景色彩随画面变化。至于移动的渐变是否促使访客继续滚动，Marvin 表达的是团队的感受，节目没有提供行为测量。

AI 原型中的一次失败，把判断从画面推进到了连续操作。一个二乘三的视频概览可以打开视频，也可以下拉关闭，但用户必须等关闭动画结束，才能选择下一项。单独看，每段动画都能运行；连续使用时，系统却无法及时响应用户改变目标的意图。Marvin 在 Figma 中用红、蓝、绿方框画出关闭途中切换目标的序列，把语音和文字难以说明的时序关系呈现出来。交互是否成立，需要在这种连续操作中检验。

草地 shader 的问题则涉及底层结构。最初要求 AI 复现参考视频的颜色与细节，效果并不理想。Marvin 随后让另一个 ChatGPT agent 分析光照、阴影和组成部分，又提供地形表示，说明草地下方的小丘。如果实现把地面理解成平面，继续增加草叶细节也无法纠正空间关系。DialKit 让他能够直接查看和调整草地、地形变量，并暴露了一处歪斜的地形实现。按 Marvin 的说法，这来自约五轮提示之前的一次误解。参数面板由此也成为检查实现结构的工具，帮助他确认系统究竟做出了什么。

另一个轮播原型涉及更细的运动关系。Marvin 说，这个受 Mike Maddis 启发的实验经历了九十一次提示：物体释放后，能量向相邻物体传递并引发碰撞；面板中的 pull boost 则关联拖拽速度与释放力度。九十一次是他这次项目的经历，不能据此规定优质交互需要多少轮提示。这个实验更值得关注的是表达方式：当设计判断涉及力度、碰撞和运动手感，直接调整变量，可以帮助设计师比较那些难以在聊天中稳定描述的差别。

动画更容易生成之后，仍要判断它是否有助于解释产品。评审者批评了一些带有小字和移动光点、却不能帮助访客理解功能的动画。Marvin 回忆起协作完成的 Gemini 编织与螺旋动效，强调它既解释了能力，也形成了令人记住的品牌表达。这一案例说明了动效可以承担的任务，并不意味着其他产品应当沿用同一种视觉语言。InstaPlay 的评审则涉及展示与使用流程之间的取舍：已有游戏的封面先吸引评审者去玩游戏，让他们忽略了创建游戏的核心输入框；提交创作想法后，页面又立即要求登录。评审者因此建议先生成结果，在保存、分享或返回使用时再要求注册。这是针对现场流程提出的假设，节目没有报告转化实验，无法据此认定延后注册一定更有效。

四、学习与应用

将这些方法用于实际工作，首先要明确原型准备回答什么问题。视频概览案例要解决的是，用户能否在关闭过程中切换目标；相应的做法是画出打开、拖动、关闭和再次选择的状态序列，再连续操作，检查各状态如何衔接。草地案例要解决的是，实现为什么始终偏离参考；这时需要先检查地形、深度和光照等结构，再调整局部外观。对于依赖手感判断的变量，可以借鉴 DialKit 的做法，提供可直接调节的控制项，同时查看中间结构。面板的作用是帮助定位差异，目标本身仍需说清楚。

团队评审也需要明确原型能够支持什么结论。Shopify playground 让同事围绕一个可运行对象比较方案，却不能直接回答代码是否适合进入生产。一次演示可以得出“这个操作方向值得继续”的判断，并同时记录尚未解决的问题。这样，原型争取到的内部支持就有明确依据，后续投入也能区分哪些判断已有支持，哪些仍需验证。

首页评审可以从三个问题开始：产品做什么，访客首先该做什么，操作后会得到什么。针对 Nolify／Nullify，评审者建议把其宣称的“将文档转成带旁白的视频”能力放到顶部，简化彼此竞争的字体处理，减少同时变化的标题元素，让产品生成的视频直接解释用途。示例卡片应当可以点击，并提供客户、使用情境和案例背景；打开一个作品后，也应方便切换到其他示例。这些调整适用于依靠作品说明价值的页面，案例信息仍须有事实依据，不能补写未经证实的客户成效。

章节与展开面板可以帮助组织内容，但入口本身需要提供足够信息。Instinct 技术页中的真实制造视频，让评审者感到公司确实在制造产品。他们因此建议从首页直接提供入口，通过 sheet 展开这些材料，并在退出后回到原来的浏览情境。可借鉴的是让支持判断的材料更容易被发现。实拍内容产生的可信感，是评审者的观看反应，不能替代对工程性能或项目进度的验证。他们还建议让衬线字体承担标题、无衬线字体承担正文，这是针对该页面提出的文字层级分工，并非适用于所有品牌的字体规则。

媒体演示的节奏应服务于理解。评审 Instinct 的月球着陆器展示时，评审者希望发射反馈更快，着陆画面也能尽早出现可辨认的线索，例如逐渐变大的阴影。实际检查时，可以关注关键动作是否及时出现、月面是否容易辨认、阴影变化能否帮助理解接近与着陆的过程。评审者所说的“注意力只有半秒”是强调反馈速度的概括，不能当成已确立的测量结果或统一门槛。删去铺垫之后，仍需检查访客是否看得懂发生了什么，以及能否控制何时继续。

对操作控制权的检查，还应覆盖滚动、退出和不同输入方式。Nolify／Nullify 评审中，评审者批评了滚动响应延迟、停手后仍继续移动、控制按钮过小，以及他们现场遇到的全屏退出行为，并主张使用原生滚动，让交互能够被打断。测试时可以据此观察：停止输入后页面是否仍在移动，反向滚动是否需要先抵消惯性，视频是否容易退出，点击区域是否清楚。对于轮播，则应分别检查按钮、拖动、触控板滚动和移动端呈现。Marvin 推荐 Blossom Carousel，介绍了它的滑动、滚动、不同变体、移动端堆叠，以及在 GitHub 上免费提供等特点。它可以作为候选实现，但节目没有给出比较测试；选用之后，仍需在自己的内容和设备情境中验证。

InstaPlay 的注册建议也适合作为待检验的方向。可以比较先登录与先体验的流程，观察用户是否愿意保存、分享或回来使用；如果生成结果有成本，还需要核算提供试用结果的成本。节目没有证明这一安排一定划算，首次生成能否帮助用户判断价值，同样影响这个选择。个人学习则可以沿用 Marvin 的建议，持续使用参考网站、截图、配色和模仿拆解，把笼统的审美要求转成可观察的结构与行为差异。他认为，这种持续实验也有助于学习协作与管理。其价值在于逐步理解、表达并校正实现，提示次数本身不能说明进展。

来源

• 原始节目：The New Full-Stack Designer