马文这一期没有讲方法论，他讲了一次失败：把一段真草的视频交给 Codex，让它做成网页里的 shader，出来的东西完全不是草。救回来的不是更好的提示词，是一张地形图——草底下不是平的，是小山丘。
我把这期听成了两半。前半是工作流：Figma 退回成草稿纸，成品在终端里长出来，设计师从「做」变成「挑」；一个周末的副项目、一个改到第 91 次才对的轮播，能看清他到底在跟模型争什么。后半是六个观众投稿的真实网站，两个人用同一把尺子量：这一页只准有一个主目标；藏在标签页后面的等于不存在；平滑滚动是这场行业的一场灾难。
图片里放的是观点、金句和数字，这里放完整的二十九段要点和逐句全文翻译。本期是 Y Combinator 的 Design Review，2026 年 10 月 28 日上线，全长 1 小时 5 分 1。
逐段要点整理
这一期是 YC 的 Design Review，全长 1 小时 5 分，29 章：前半场是 Shopify 产品设计工作室负责人马文·施韦博尔德（Marvin Schwaibold）讲自己的工作流，后半场是他和主持亚伦·爱泼斯坦（Aaron Epstein）当场看六个观众投稿的网站。2
01 · 流程变了没有（00:00）
流程本身没变，仍然是迭代、变体、一轮一轮；变的是工具链从「Figma 里的画布」挪到了「Codex、Claude Code、终端」。Figma 退回成草稿纸，成品是能塞进手机里试的真实 demo。他说设计师现在比以前任何时候都更像编辑：产出不再稀缺，稀缺的是从一堆能用的东西里挑出要走的那一个。AI 抬高了天花板，但它不是工匠——它能写代码，不知道什么好看。
02 · 设计工作室（03:25）
Shopify 产品设计工作室成立一年，做的是公司最重要的那批界面：Sidekick（管理整个 admin 的 AI 基础设施层）、移动端（内部叫「绿色 app」）、admin 与后台。里面有两个几乎矛盾的板块：一半人把 admin 重做得更漂亮，一半人做 Sidekick，让商家用聊天直接操纵店铺。两者配合得很好，而移动端被这两条线一起抬高。Shopify 到这一年是 20 年（他说 21 年）。
03 · Molly 的两年（05:58）
加入 Shopify 前，他在布鲁克林和 Jaytel 合办设计工作室 Molly，做了约两年。客户从 Collins、Apple、Google 到很多小客户；小工作室的好处是关系近——每周见面、连着很多周，从不同时接超过两三个项目。官网列的客户还包括 Shop、Disney、Nike、Google DeepMind。3
04 · Collins 的书架（08:58）
Molly 作品里最能说明他们审美的一段：轮播每一屏背后有跟着变色的环境光（想法来自墙上电视背后的光，做法是把视频复制、模糊、垫在后面）；Collins 首页每一段是一个章节，书架里是全部案例。那个「书一本本叠上去、最后一本落下时整摞再沉一下」的弹跳，是专人做的——因为客户是来挑工作室的，他们看的就是你给别人的彩蛋。
05 · 「未来需要被设计」（11:51）
收购的起点是 Tobi 的一句话：我们要进入一个新时代，那个未来需要被设计，我需要会画这张图的设计师。这是一家创始人主导、工程主导的公司，设计过去没有今天这个位子；现在设计参与讲公司要往哪走。
06 · 工作室怎么嵌进去（13:24）
设计师在 Figma 里重做界面，用 AI 搬成能点的原型，原型在公司里像野火一样传；Tobi 看到喜欢的，事情就能往下走。他说原型比任何 PRD 有用一百万倍。两人一组就能干过去很多人的活，真正变快的是「买账」。注意边界：那些东西建在 admin 的 playground 里，不是生产代码，不会合回主仓库。
07 · Sidekick 与新 admin（15:32）
新 admin 的机制是：首页推一条建议（比如这条商品描述该重写），点一下就开始一段和 Sidekick 的对话，Sidekick 直接改店铺，再把结果给人看，发布即生效。思路反过来——不是让商家在界面里一层层点，而是把 UI 连同上下文递到人面前。这一段还是原型环境，设计团队直接在同一个 demo 上改。
08 · 会造的设计师（18:27）
Collins 那份 Figma 文件密到能一格格放大看思路怎么长；在代码里试太贵（要工程师陪），在 Figma 里试免费。真正的转折是一件小事：草叶页的交互不可中断，他没改提示词，而是在 Figma 里画了三个粗糙方块（点红出红、划走时点蓝出蓝），Codex 看图就懂了。他说的原话是：我没法用文字或语音讲清楚，但我能画出来。
09 · 把草做成 shader（21:58）
第一次的提示写得很满：视频转 shader、跑在网页里、像素级精确、同色号、理解每一部分再重建。Codex 说「没问题」，出来完全不对。他的应对是把结果和原视频一起交给另一个 agent，解释自己在做什么、为什么前一个不懂；对方回：告诉它光从哪来、影子怎么打，也许把画面拆成六块分别做。4
10 · 地形图那一念（23:48）
一直不像，是因为它在把草铺在一张平板上。他让 ChatGPT 画一张地形图——底下的高度起伏——再把草种在那层结构上，草才立起来。另一个数字：他问 Codex 有多少种草叶，答案约 21.7 万，彼此差别只有 0.7、0.8，所以干脆做开关自己看。
11 · DialKit：把变量交出来（26:16）
那个轮播是 91 次提示攒出来的；DialKit 装上才有侧栏，把拖动速度、回弹强度这些参数摊开。他的判断是：手感不对的时候，和聊天来回调不准，必须把内部结构露出来。露出来还发现，地形图第一版的实现是歪的——五个提示之前就错了。
12 · 给创始人的建议（28:45）
AI 是一个无限耐心的合作者：要 91 版动画它不会翻脸，交给工程师会。所以建议是去摆弄工具、别放弃、把参照物（截图、视频、色板）直接丢给它；对设计师尤其如此——先抄，现在有一个能一起拆开看内部的老师。
13 · 点评一 · Endstack（31:04）
优点：直接把人放进了产品里，符合「如果 aha 时刻就是开始用，就让人尽早开始用」。问题：视觉过载，侧栏、聊天记录、主区、四个同色同重的按钮全在抢注意力。马文搬出他德国字体课老师的话：这张海报不指挥（not dictatish）——没有一个东西在拉你的眼睛。5
14 · 一页只留一个目标（33:12）
每个页面都该有一件你必须让用户做的事。Collins 那件事是书架：一个入口，进去能待很久，其余让路。
15 · 点评二 · SkillSync（35:02）
一句话是清楚的（本地优先的 Mac 应用，把记忆和技能带到每个 agent 和队友那里），问题在排版：字号偏小、层级挤、密度高——功能一旦被抽象又保持很细，读者就要把每条都读完才懂。
16 · tab 后面的东西没人看（36:43）
用户不会把每个标签都点一遍，所以要假设藏在后面的等于不存在。他的做法是压成三格讲清最重要的三件事，点进去再展开；页面也可以更长——人习惯滚动，宁可摊开也不要藏。
17 · 不添信息的 AI 插画（38:25）
AI 生成的动效有共同手笔：角落一颗小点飞过去、字号极小，没人会专门为这个写代码，所以一眼认得出。他的判断是：这类活该找做过信息图的人；做好了会变成品牌的一部分。他举 Gemini 早年那支辫子动画——多种能力汇成一股、最后收成一条细线——抽象，但记了很多年。
18 · 点评三 · Instaplay（40:49）
标题下面没有一行说明，两个人看到一排游戏截图就直接上手玩，于是错过了「你可以自己造游戏」这个主目标；而造游戏这一步直接跳到注册页——没人会在没看到自己游戏长什么样时注册。他把这笔账叫一个用户的获客成本。
19 · 给人看游戏本身（43:04）
静态封面什么也没说。换成十秒真实录屏（哪怕只在悬停时播），信息量立刻不同。作品应该被看见，而不是被缩略。
20 · 点评四 · Mintlify（45:34）
干净、可信，是因为删得准：干净标题、一小段、显眼按钮、一张看得懂的后台，背景图形很轻反而在帮忙。logo 墙（微软、Anthropic、Coinbase、Spotify）是有效的证据点。
21 · 社会证明与少即是多（47:25）
同一支编织动画整页复用，魔力就没了；卡片标题太小、颜色又一样，结果哪张都不突出。「叠加在你现有系统上」「你可以控制谁能访问」这两句很重要，却被截图压在底部，几乎没人会读到。
22 · 首页各段＝各页第一章（49:35）
产品、方案、资源、价格按重要性排进首页，也按滚动的掉落率排；每一段是那道门，点进去才是完整一章。删比加难，因为要说服每个想让功能上首页的团队——这就是设计师的活。
23 · 点评五 · Knowlify（51:42）
视口里五级字号，还没算 logo 和角标；标题里两个占位词同时轮换，读者失去锚点——连「这是给什么东西用的」都读不出来。最讽刺的一点：一家把文档变成视频的公司，首页没有用一支视频讲自己。
24 · 让人自己翻作品（54:02）
作品该放大到九成、能左右跳着看，而不是全屏接管、只能按 Esc 退出、还要点那排小按钮。
25 · 滚动劫持（56:06）
他的原话：网站上的平滑滚动是这个行业的一场灾难。用原生滚动，别改用户想多快看到内容的速度。要可中断的软件，因为人的念头是可中断的——Apple 做了几十年。他还引了狄德罗那句：进门要轻、要有礼貌。
26 · 点评六 · Instinct Space（58:34）
一个月球、一颗飘着的卫星，一个字不读就知道是航天。这类「镇场组件」过去要一个团队，现在模型能做，问题只是要不要放。他还夸了敢在首页用衬线。
27 · 发射、巡航、着陆（1:00:42）
三段悬停视频：第一段要等一会儿才看懂，第二段一悬停就起飞，差别是几百毫秒。他的建议是三段同时循环播，一眼把整件事说完。
28 · 技术页（1:02:42）
技术页是实拍不是渲染，所以你会相信他们真的在造；但它本该是首页上的一个入口：点开、看完、退回原处。另外，衬线只用在标题，正文该用无衬线（他点名 Instrument 或 Inter）。
29 · Blossom Carousel（1:04:16）
Instinct 那组轮播不能拖、不能滑，只能点小按钮。他们把在用的那套拿出来了：Blossom Carousel，能划、能滚、移动端变堆叠，免费、在 GitHub 上。
逐句全文翻译
说话人标签（马文：／亚伦：）按对话内容判定——官方英文字幕不带说话人标记，个别简短插话可能不完全准确。译文按原顺序逐句处理，不压缩、不摘要、不删减。
01–12 前半场 · 00:00 – 31:04
亚伦：今天和我一起的是马文·施韦博尔德，他负责 Shopify 的产品设计工作室。他会给我们看一段幕后：他现在的流程，他用最新一批 AI 工具把设计做出来的样子，然后我们看几个观众投来的网站。欢迎来到新一期 Design Review。马文，谢谢你来。
马文：谢谢你们邀请我。
亚伦：在聊你在 Shopify 的工作之前，我很想先听你说说流程，以及你现在用来做设计的工具。
马文：我觉得流程本身其实没怎么变。它仍然极其迭代、一段一段往前推，工作里本来就有大量的迭代和变体。但工具确实挪了很多——从 Figma 这类工具、从做有美感的版式，转向了更 AI 驱动的工作流。我会把 Figma 当草稿纸，放一些我脑子里的想法，然后它很快就变成我能用的真实 demo。我只在需要排版、或者需要向 AI 解释某件事的时候，才偶尔骑回 Figma。现在这个世界里更多是 Codex、Claude Code，很多时间待在终端里，更快地拿到一个能在手机或电脑上试的结果。这个循环仍然很好玩、仍然很迭代，但我们确实从画布上走开了，整体移到了 AI 工具这一侧。
亚伦：这个流程里，有多少是 AI 在驱动过程，有多少是你这个人？
马文：我觉得是我这个人在驱动 AI，让它替我干很多重活。但大量的质量把控、决策，都在设计师手里。我们坐在驾驶位上。而且我们现在比过去任何时候都处在这样的位置：产出不再是问题，问题是我们有没有极其挑剔地决定接下来做什么、跟什么一起工作。所以更多的是在策展 AI 做出来的东西，是一个和 AI 之间持续来回的过程。我感觉只要理解你手上这件事的复杂度，并且能把它拆成很多几乎像子任务一样的东西，一点点喂给 agent，AI 就非常有能力把很多过去要我们做的事做完。然后就是来回。
亚伦：听起来你描述的很大一部分，是你的角色其实是编辑。
马文：我们现在比以前任何时候都更像编辑，我觉得这挺好玩。
亚伦：那很好。
马文：我是说，这个角色一直都在，只是走到「编辑」这一步，过去需要大量在 Figma 里手做的东西，而现在越来越多可以用 AI 工具加速、外推出来。
亚伦：所以，最终产出仍然由你这个人负责，并且要确保它达到你的标准。
马文：永远如此。
亚伦：但你现在有所有这些工具，能更快地走到那里。
马文：百分之百。AI 确实把我们所有人的天花板抬高了，但它不是一个工匠。它能执行我没法手写代码去实现的复杂度与技术——它能写代码，但它不知道什么好看、什么难看。那是我来决定的，也是我把 AI 往正确方向按住的地方。
亚伦：我一直是你作品的粉丝。所以也许先从这里开始：讲讲 Shopify 的产品设计工作室，你们在那里做什么。
马文：我和一支非常有才华的设计师团队一起工作。我们到那里一年了，我们之间基本上在推动公司里的一个计划：重新设计、改写我们最重要的那些界面。所以从 Sidekick 相关的所有东西——那是我们的 AI 基础设施层，基本上管理整个 admin——到我们叫「绿色 app」的移动端，到 admin 和 admin 后台里的所有东西，我们都看、都做。最近我们在和工程团队为我们搭的很多新的 AI 基础设施一起工作，这一年真的很令人兴奋。
亚伦：这其实很有意思，因为 Shopify 到这个时候差不多二十年了，对吧？
马文：二十年了。
亚伦：二十年了，所以我们……
马文：其实我觉得是二十一年。
亚伦：对，我们现在在一个新时代。AI 改变了很多东西，听起来你们做的很多工作其实是把它现代化、带进一个新时代——通过设计，也通过体验本身。所以你管理的这个产品设计工作室，设计团队到底在做什么？是不是就待在 Figma 里做画布和设计稿，然后交给工程师？还是说你管的设计职能是另一个样子？
马文：至少现在，我们推的这个大计划几乎有两个部分。设计团队里的一部分人重新设计了整个 admin 体验，这个重做从 Figma 开始，打磨界面，再带到网页上。另一部分组织，也就是 Shopify 的 Sidekick 团队，在做的是通过聊天去自动化和操纵很多 Shopify 的界面，让你可以用聊天、Sidekick 或者 AI 基础设施来管理你的店，把「作为一个线上商家」这件事里很多环节自动化掉。这几乎是公司里两个有争议、看似矛盾的板块，但它们配合得非常好。所以你在做非常漂亮的新界面，同时又用新界面去生成 AI 基础设施和 AI 工作流，这看起来很不可思议。而且这里面很多东西很自然地又转回了移动端，把移动体验也抬高了。它更多是对话式的，是跟 Sidekick 谈你的生意，而不是必须通过界面去操纵你的生意。
亚伦：对。在加入 Shopify 之前，你在做自己的产品工作室 Molly，那里的动效、动画和交互我一直觉得很受启发。也许你可以给我们看一些，并讲讲它们是怎么来的。
马文：好。Molly 是布鲁克林的一家设计工作室，我和我的工作室合伙人 Jaytel 一起经营。我们做了大约两年，之后加入 Shopify，把工作室并了进去。
亚伦：那段时间你们有一些很大的客户。
马文：对，我们和 Collins、Apple、Google 合作了很多，也做很多更小的客户。老实说，是网页设计、产品设计的混合，客户网站上的内容策略与层级我们也做了很多。因为我们是小工作室，这也让我们和客户的关系非常近。我们会连着很多周、每周和客户见面，把 Molly 的项目当成和客户高度集中的一段时间。所以我们从不同时接超过两三个客户，就为了保持专注。这里是一段我们做工作室期间作品的合集。
亚伦：酷。这里有很多小细节。动画非常有机。甚至每一屏切换的时候，它背后的渐变和阴影都会跟着变，去匹配背景的颜色——很多人可能不会注意到，但你会直觉地感到这里有事情在发生，对吧？
马文：这个想法基本上来自挂在墙上的电视背后的环境光。那时候还没有 AI，Jaytel 基本上是把视频复制一份、糊掉，放在背景上，让它跟着屏幕上发生的节奏走。效果很好。在这句话之前，那里原本只写着「Molly 是布鲁克林的一家设计工作室」，底部只有一道渐变在轻微震动，像雷声之类的。至少对我们来说，它总让人觉得人会被吸进去往下滚。所以我们根本不用先给他们看作品，只是暗示了一下。然后你滚进去，才是真的内容。其余的就是非常好、非常简单的轮播。你可以看到，这就是我们工作室当时做的一些东西。你提到的那些模式，我们当时把这个系统叫 primal——它是一种理解网站上内容、消化网站上内容的方式。对我们来说，当客户带着一大堆信息来找我们做网站时，这是一套非常结构化的消化方法。我们帮他们把内容建成网站上的一个系统，让用户可以去探索。对我们来说，做网站的方式、以及你在网站里流动的方式，一直更像是你在探索这个网站，而不是网站在要你的注意力。所有东西都只隔一层，所有东西都是逐步展开的，所以你永远不会用太多内容把用户压住。
亚伦：你们有哪些做法来实现这件事？
马文：我直接带你看一些作品吧。这是和 Collins 这家代理公司做的项目，我们在这个网站上和他们合作了我记得一年多。你可以看到，即使只是滚首页，首页的每一段都是一个章节，你和网站互动的过程中，它可以带你走得更深。这是我最喜欢的一段之一，这个书架。这些基本上就是 Collins 的全部案例。
亚伦：再把鼠标移回那些元素上试试。它们弹的方式和你平常看到的不一样。
马文：是的。是的。
亚伦：讲讲你是怎么做的。这个你没用 AI 工具，是手工做的，对吧？
马文：对。这个案例里我要说，这非常是设计和工程合作出来的。我会在 Figma 里把这样的东西排出来，试着理解间距、尺寸、颜色、行，所有那些。然后我把它交给像 Jesper 这样的人，他去做比如弹跳动画。这些书要一本本叠上去，最后一本落下来的时候整摞要再轻轻落一次，而且必须非常有机——因为如果它弹得有机，那「这是一本书、这是一个活着的书架」这个想法才立得住。这些事看起来不重要，但恰恰是人在滚这类网站时会接收到的小瞬间。
亚伦：为什么这重要？比如你有一个极其有才华的人，在这个项目里他全部的工作就是做那个标签页交互。任何人很容易说：放个 tab 就行了，tab 到处都是，五秒钟就能免费拿到，然后去做下一件事。你为什么觉得值得在 AI 还做不到这件事的时候，专门花一个人的时间，只让他专注在那一个交互上？
马文：回答这个问题有很多种方式，但我觉得尤其对这家工作室来说——他们自己就是做设计的，这是一家品牌工作室——来他们网站的人就是在找这类彩蛋。他们想知道：如果我雇这家代理，如果这家代理为了做出那种质量的网站愿意花这么多细节，那他们做我们的项目时会放什么彩蛋进来？当他们挑我们的色板时，也许背后是有一套系统的，而不是随手挑五个自己喜欢的颜色——因为要走那么深，就得有那个程度的投入。这也是一种展示：展示你能给界面的任何一处带来什么样的手艺和细节。我们在 Shopify 也试着保持同样的用心和手艺。
亚伦：那再说说把设计工作室卖给 Shopify、加入他们的决定，以及在一家大型上市公司里带一个内部产品工作室，和你独立时做的活比起来是什么不同。
马文：去年某个时候，Tobi 一开始就说了一句：我们要进入一个新时代，那个未来需要被设计。基本上就是这句。他说我想为未来做设计，我需要雇好的设计师，帮我把它画成一张图；当我们看到那张图，我们就知道它是什么，就能往那条路走。我觉得那就是 Shopify 的授权：设计被放到了很前面。这是一家非常诚实、非常有自觉的组织，一家创始人主导、工程主导的公司，设计并不总是扮演今天这个角色。设计现在在很大程度上参与塑造公司要往哪走的叙事，也参与塑造我们为商家做的工具和软件里的手艺与自豪感，这看着很美。这也是我们想加入的原因之一：我们在给 Collins、给插画师 Spencer 这类工作室做网站时很开心，但我们也想有更大的影响，想看看我们的策略在面向百万用户的界面范式上是否成立，而不是只对着那些会滚 Spencer 网站的人。
亚伦：对。所以这是一组不同的挑战。你以前做工作室，是做一个新网站、做一个展示作品的东西、或者做一个产品；现在讲讲哪里不同。Shopify 有百万级用户，你做的每一个设计决定、每一个交互背后都有很多钱，你现在作为内部设计工作室的流程是什么样，你怎么和组织的其他部分打交道，尤其是怎么和用户打交道？
马文：我先说，基本上目前我们工作室只在 Sidekick 里运作，也就是 Shopify 的 AI 基础设施层。整个团队和设计组织其他部分配合得非常紧，这种互动很美，我想一般这类工作室能成，就是因为这样。我以前的职业里也有过更孤立的位置，一旦孤立，就很难进入公司、很难有大的影响。现在我觉得我们深深嵌在当前的工作流、时间线和路线图里。这需要大量实验。老实说，把界面抬高对我们来说不难，因为我们有很好的设计师，他们在 Figma 里重建界面的一部分，然后用 AI 非常快地把那些东西搬成很具体的原型。我们都知道，原型比你能写出来的任何 PRD 文档有用一百万倍。这些原型在公司里像野火一样传开。如果 Tobi 看到一个他喜欢的原型，我们就可以去把它做出来。我们在 Shopify 看的一些 AI 变更的工作，等下可以给你们看一些，感觉是一样的：脑子里有想法，用现在的技术非常容易把它模拟出来、生成原型。过去在 Molly 的时候，很多活是手工做的：版式手工设计，动画全由我们的开发做，方向可能是我的想法，但除此之外还有一千个环节要对接。现在我看到的是一人成军，或者两人一组，去做很多人的活，因为工具允许我们这么做。这也让「买账」容易了很多：我带着原型出现，比带着一个想法去摇一支队伍，能更快抓到人的注意力。
亚伦：能不能给我们看看你们在 Shopify 做的一些东西？
马文：这基本上是我们现在 admin 体验的一次重做和换脸：新的首页设计，加上整个产品的一次整体换脸，这是我们目前在做的。我觉得我们最近在探索的更有意思的事情之一，就是 Sidekick 和商家怎么互动。我们有一个概念，叫首页信息流里的 Sidekick 建议。这些建议是我们带给商家的——我们识别出商家在自己的生态、自己的世界里可以做的机会和好处，然后展示给用户；当用户和这些建议互动时，我们基本上就开启一段和 Sidekick 的对话。我们可以直接替用户操纵 admin 后台，并把那些改动展示给用户。所以我们在这里给用户看：我们认为你应该重写这条商品的描述，这是我们建议你做的改动。你可以发布这些改动——基本上通过一段和 Sidekick 的对话，你就直接操纵了自己的店铺。这个概念更多是：我们能不能把 UI 连同上下文带到用户面前，而不是让用户一层层点界面。归根到底，会有这样一个世界：商家可以花更多时间在首页这块界面上，把 Shopify 当成一块可以委托事情的仪表盘，和 Sidekick 互动，让 Sidekick 直接操纵店铺。你现在看到的仍然是原型环境，这里面有一个开发用的 UI 面板。设计团队把所有这些改动、demo 和想法直接建在这个界面里，这样我们就能在它上面试、在它上面建。它变成了一个很美的过程：一个 demo 到了大家都对齐的那一刻，每个人就分头去建一个自己认为有价值的版本，然后我们回到一起，而这些东西都活在同一个 demo、同一套语言里。
亚伦：对。
马文：这是一种分享想法和上下文的很美的方式。
亚伦：你说设计师在这里面造东西。很多时候设计师只设计不造，但在 Shopify、在你们团队，你设计的东西里有很大一部分是你自己造的，这样你才能试、才能做原型、才能在真实数据和真实体验上看到它——这对把东西做准、做有用、做得好是很重要的一部分。
马文：这个具体案例里，admin 有一个 playground，我们在里面建、在里面试，那不是生产代码，也不会被允许合回 Shopify 的主 GitHub 仓库、主代码库。话虽如此，AI 确实已经到了这个程度：作为设计师，我们现在被高度赋权，也有能力把任何想法可视化、把想法传达出去，这在过去的世界里是不可能的。我们前面看 Collins 网站时，那时候那份 Figma 稿，今天看起来还是那样——你可以放大任何一处，都是非常细致的 Figma 画面，那是一个构思的过程。那是 Michael Spicer、Jaytel 和我一起做这个项目的混合成果，你能看到想法一路演进、一路试新东西。这些东西太重、太贵，没法在代码里试。我们现在不想在代码里试，因为那需要工程师来看、来替我们建。所以我们全部在 Figma 里试，Figma 就是那个 playground，那个我们用来建一切的世界。我们先在桌面端建，再翻到移动端，这一切都得先在 Figma 里压测很久，然后才去打扰工程团队。我现在和 AI 说话的方式，很多也和我在用 Figma 有关：用一个非常粗的草图，我可以走得很远。这里有一个例子，是我周末在做的一个副项目，可以细讲一点。
这个项目里我想做的一件事，是把我拍的这些草的研究、这些视频，做成一个 2×3 的总览。这里的交互是：你可以打开其中任何一个视频，往下拖就能把它关掉，在模拟器里效果一样。我把这个描述给 AI，我当时在用 Codex，Codex 就替我把它建出来了。但是这个交互不是可中断的：每次我点一个素材、往下拉，都得等它完全回到位、落定，才能点下一张图。而这个交互模式不是这么用的——它必须反应非常快，否则你很快就会对界面厌烦。
亚伦：对。
马文：所以我直接去 Figma，画了非常粗糙的方块：你点这个方块，红色出来；你可以把它划走；划走的过程中你点蓝色，蓝色就出来；你可以再把蓝色划走，绿色也一样。我觉得这是一个很好的例子，说明至少我个人现在怎么更多地在用 Figma：它更像草稿纸，用来把想法画出来，然后我把这些想法给 Codex。我用草稿纸，一是因为这样更容易让自己把一个东西拆开，二是因为 Codex 看到图也更容易拆——它读那张图的方式，我觉得和我的读法相似。至少它理解我在做什么、我怎么想的这个动作。我没法用文字或者语音讲清楚，但我能画出来。
这其中有两点我觉得很重要。第一，Codex 以及现在所有的 AI 软件、模型，都极其擅长创造任何东西。你可以用这些工具做出你想要的任何东西，但你得知道自己在干什么，你得能把一个概念、或者像 shader 这样更复杂的东西，拆成它所有的小部件，你得能理解那些指令，然后才能把这些部件重新装回去。
亚伦：对。那就给我们看看你是怎么做的，先说清楚：你有一堆图片……
马文：……和视频。
亚伦：……真草的视频。
马文：对。
亚伦：然后你想做一个 shader，看起来和它一模一样，但你可以控制、可以像 shader 那样运行。讲讲这里面的不同元素，以及你为了让它看起来像真的经历了什么。
马文：我这里有几张截图，这也是我用 Figma 的一个好例子。我第一次把视频喂给 Codex，跟它解释这个项目和我想走的流程：拿这段视频，把它做成 shader，跑在网页上，希望它尽可能细致、非常像素级精确，把颜色都取出来，确保用的是同一批十六进制色号，理解画面每一部分，然后照着重做。它说「没问题，我懂」，然后给了我这个——显然和我们现在落到的结果完全不像。
从这里开始的流程是：我把这个结果和我原来的视频截下来，打开 ChatGPT，交给那里的另一个 agent，跟它解释我在做什么，以及为什么那个 agent 不理解我想达到什么。这个 ChatGPT 反过来帮我理解我自己的流程：你得告诉它光从哪来、你用的是什么样的影子，也许把画面拆成六块，让它一块一块做，再拼回来。
当我在想这些不同的事情时，我在想的是：我怎样才能变得对 AI 足够清楚，向它解释它到底在看什么。我用过的一个技巧是：我去 ChatGPT，让它渲染一张底层结构的地形图。随着这个过程推进，它一点点靠近，你能看到它把更多像素画进草叶里。这些开始有点像一丛一丛的草，感觉更真实了一点；然后到这里，我说好吧，我们有点进展了，这不再那么难看了。但我慢慢发现，它不理解底下不是一层平的，这些是小山丘。
亚伦：对。
马文：基本上，我把这个喂回给 AI，它就懂了：哦，底下有一层结构、有一张不同深度和高度的图；如果我能在那个结构上把草渲染出来，做这个场景就容易得多。这个办法相当有效。在这个原型参考里你其实可以玩——有一个二元开关可以把草开或关，地形也可以调不少。
亚伦：对。
马文：这些全是因为前几天午饭时 Josh 解锁的：我们把 DialKit 装进了这个 demo，因为他看了说，这看起来挺不错，但你应该看看草叶的长度。我说，哇，好吧，有道理。于是我问 Codex：我们有多少种草叶变体？它说我们大概有 21.7 万根不同的草叶，但它们彼此的差别只有 0.7、0.8 那么小。我们说，那就干脆做个开关，自己看。我不想为了这件事和界面来回聊天。
把底层结构暴露出来——暴露底层结构也能让我看到自己哪里做错了。我最初那版地形图的实现完全是错的、是歪的。所以我根本到不了想要的结果，因为我在五个提示之前就误解了什么，而我自己不知道。DialKit 帮我把这件事摊开了。
总的来说，你可以随手调几个值，它们能帮助我把想看到的东西可视化出来；比如这里的长度太长，你甚至可以加点风。这是我想试的，看看风动起来能有多疯狂。你能看到它有点失控。但这只是一个小例子，一个好玩的项目，试试用这些工具能走多远。而在 AI 之前，这些事我做不到——我可能有这些想法，但我不被允许、也没有能力去执行。总的来说，设计这个角色现在变化的就是这件事。设计师正在变得更全栈，工程师和 PM 也一样，各个方向都在变。
亚伦：现在没有限制了，对吧？这其实也是我们最近看到很多的一个常见模式：先做原型，再做小控件让你能控制里面的各种变量，方便测试、把它调准。
马文：对。
亚伦：以前没人会为这件事花时间。你可能就在代码里随便调调变量，直到对了，就算了；那要么花很久，要么你根本不会花这个时间。现在做一个新的小软件工具来控制这些变量、测试、把它调准，太容易了。
马文：对。
亚伦：我猜 DialKit 这个名字就是这么来的。那也许你多讲讲 DialKit：这个产品让你在做的任何项目里都很容易创建、然后微调很多这类变量，对吧？
马文：正是。基本上就是这样运作的。你可以通过他的网站直接跑 npm，他们给了一句提示，你把它插进你在做的东西里就行。我还有另一个项目可以快速给你看，这是 DialKit 的另一个版本，具体是在我调一个轮播的那个项目里。
这个的灵感来自 Mike Matas，他是 LoveFrom 的设计负责人，他的作品集轮播就是这个运作方式。我想看的是：这个轮播里有很多细微之处，还有你把一件作品往下拖、松手之后，能量几乎像涟漪一样从那件作品扩散出去，和左右两边的作品发生碰撞效果的方式。现在这个侧面板帮我看清了我自己造出来的这个弗兰肯斯坦的内部——它是 91 次提示攒出来的。它帮你把一些真正重要的参数调准，比如 pull boost 的意思是我往下拖得越快，那个助推就越强。这个开关你要玩一下：它不能太吓人、不能太强，否则整个系统就会感觉不对。而我知道什么时候不对，但和聊天来回根本不管用。你需要能随时把这类值暴露出来。
亚伦：看起来我们在这里看的所有项目、你描述的很多东西，都是把标准设得高得不讲道理，而现在我们有了工具，能比过去快得多地达到那个标准。
马文：是的。
亚伦：那设计师的角色是什么？也许还有非设计师——他们该怎么想设计？看这个节目的人里，很多可能是早期创业公司的创始人，觉得自己是工程师、但身上没有一根设计的骨头；或者是设计师，在想我能不能开公司、我能不能真的把产品做出来。我习惯了在 Figma 里设计、然后交给别人，可能就像你们过去那样。他们该怎么看待自己，才能把自己用 AI 的方式抬高，做出更高质量的设计？
马文：我一直以来的想法是：AI 是一个无限耐心的合作者、队友。如果我需要 91 种方式才能把动画做对，Codex 不会生我的气；如果我这样对我的工程师，他大概会炸。所以我给所有人的建议——听起来有点傻——就是去摆弄工具。你可以进去，直接描述你想让它做什么；当你看到一个结果，别放弃，就告诉它这不是你设想的。发给它一个你真心喜欢那个轮播动画的网站，或者给它一张截图、一段视频、一个你觉得很好看的东西；给它看一个色板，让它开始照着做。然后就一直来回、一直来回，和这个工具一起把你的叙事塑出来。
我觉得这非常重要。对设计师尤其如此：我的窍门、我一直在学的，就是去抄。甚至现在，我在试着模仿这个已经存在很久的轮播动画，因为现在有一个无限耐心的老师和朋友可以一起做，所以我可以把内部打开看。这是我自己时间、自己周末在做，不去打扰任何工程师，因为这是我的实验，我想理解、想拆开看这个东西是怎么装起来的。这教会我怎么做一个更好的管理者、更好的合作者、更好的团队成员。我觉得这就是我们该对待这些工具的方式。
亚伦：对，这是很好的建议。YC 下一批正在招生。你身上有一个创业公司吗？到 ycombinator.com/apply 申请。永远不嫌早，把申请表填完本身就能把你的想法抬高一个层次。好，回到视频。
马文：我们要不要看点网站？
亚伦：好啊，我很想。
马文：来吧。
亚伦：好，开始。
马文：当然。
13 点评一 · Endstack · 31:04 – 33:12
亚伦：第一个是 Endstack，我们看看。
马文：好，这是 Endstack，「你唯一需要的 AI 工作空间」「一个有力量的 agent、一个直观的桌面工作空间，以及处理任何任务你需要的每一个工具」。好。
亚伦：我第一反应是，有一点很好：他们显然在模仿桌面本身。所以你会觉得自己在一个桌面上，大概可以在这里面探索。我觉得好的地方是：你基本上已经进到他们的产品里了，你已经在用他们的产品。
马文：嗯。
亚伦：但我不太确定该拿它干什么。它是「你唯一需要的 AI 工作空间」「一个桌面、处理任何任务需要的所有工具」。当范围这么宽的时候，很难判断我该用它来做哪件事。也许字面上你真的什么都能用它做，但有时候有帮助的是：用户来到这个页面时，你想让他做什么？
马文：对。就你说的这点，从视觉上看，它非常过载。侧栏里有很多内容，这里有可以滚动的聊天记录，然后这里似乎有一个界面，但 Endstack 的主信息又在这一块。对我来说很难判断到底先关注什么。
我德国那位平面设计教授，我们在学校做海报的时候——我当时学字体排印——他总会说：这张海报不指挥（not dictatish）。意思是这张海报上现在没有任何东西在拉我的注意力。我看着它，不知道要做什么。基本上，我不知道先看哪里。
亚伦：对。对。我是点这些图标吗？我是进那个像 Slack 的东西？还是进那个聊天界面？
马文：我是在这里发消息聊天吗？
亚伦：对。我为什么叫 Mark？
马文：对，你大概就是 Mark 了。
亚伦：我现在是 Mark 了。
马文：我觉得这里的反馈应该是：把一些杂乱的东西折叠起来，把重心放到介绍和标题上，放到我想让用户读到、带走什么。
亚伦：对。
马文：也许一个很简单地进入工具快速 demo 的入口，会非常重要。但至少它很有想象力，感觉有点复古，这挺好的。
亚伦：对。通常总是有、或者应该有且只有一个具体目标，也就是主目标、主 KPI、用户来这个站点你最想让他做的那件事。我不确定这里是什么。也许是「开始使用」，也许是「跟这个 agent 说话」。但不管是什么，这里还有太多别的东西在拉你的注意力，把你从那个主目标上拽开。也许「开始使用」是主 CTA，但他们这里还有别的按钮……
马文：对。
亚伦：……位置更靠中间，长得和那些按钮一模一样。所以现在有好几个同色按钮在叫你：一是一般工程，一是市场，一是开始使用。他们到底想让我们先关注哪一个？
马文：以前有人跟我说过：我们做网站的时候，常常只专注网站上的一件事，把它做到非常好，整个叙事都围绕那一件事建。在 Collins，那件事显然是那些书——书堆是我们骄傲、想炫耀的东西，那就是网站的心脏，是大量的视觉作品。而我觉得进入那一页有一条容易的路，进去之后你可以待很久，因为它好用。在 Endstack，我会问自己：我能围绕、能让人去看、去做的那一件事是什么？如果他们只带走一件事，那比同时做所有事要好。而这里发生的正是反面：有很多东西在尖叫着要注意力。
亚伦：对。
马文：这和信息逐步展开正好相反。
亚伦：对。作为一个正面，我觉得他们做对的一件事是：他们试着直接把你丢进产品里。我猜产品实际就是这样运作的，他们不是先跟你介绍产品、再让你点一堆东西、再注册。他们想的是：如果 aha 时刻就是人开始用产品，那就让人尽早进来。但我们可能还是需要多一点上下文，才能判断到底该在这里做什么。
马文：同意。
亚伦：Endstack，谢谢。好，我们看看 SkillSync。
14–17 SkillSync 与标签页 · 33:12 – 40:49
马文：「免费、本地优先的 Mac 应用，把你的记忆和技能带到每个 agent 和每个队友那里。」
亚伦：这不错。
马文：对。至少它清楚这家公司做什么。
亚伦：对，好。所以它有技能，而且同步。
马文：对。
马文：对。它是深色模式。字体——我会说非常小。SkillSync 这个 logo 和它下面第一段之间的差别……排版里有很多不同的字号层级，有几个高度我觉得可以再偏一点，在我看来有点不对。同样，这里有非常多非常密的信息。
马文：嗯。
马文：而且常常，回到我们刚才说 Endstack 的那点：一旦你开始把功能、特性抽象化，同时又要保持像他们这样非常细，就很难准确理解它到底做什么。你得真的把所有这些功能都读一遍才能搞清楚发生了什么。
亚伦：我很好奇你怎么看这个。他们这里做的是：基本上给了一堆侧栏标签，想展示不同的功能。而你对标签页有一个我觉得很有意思的做法，因为你做的那些滑杆，实际上就是标签，对吧？只是它给了你「这里有好几个」的可供性，而且你能同时看到几个。
马文：对。
亚伦：我觉得很多人、很多时候在标签页上掉进的陷阱是：用户通常不会把每个标签都点一遍、都探索一遍。所以你必须假设：藏在它们后面的东西，没有人会看到。你怎么想这件事？他们怎样才能鼓励人多探索、多拿到信息，而不是把所有东西都埋进标签页？
马文：我有一条规矩：如果你在讲作品，一页幻灯片上不能超过七行文字。你得给自己定规矩、定约束：你到底想展示几个功能。一个好的例子是，我会在这里用一个三格组件。我会把所有这些功能拿过来，把信息压缩，试着理解 SkillSync 能为你做的最重要的三件事是什么：它能做 X、Y 和 Z。那是你展示的三件事，它们都可点，点进去可能是 sheet、或者一个视图转场进入更多信息，然后你在后面有更多上下文。
因为它现在非常平、非常宽，你有点像一英里宽、只有一英寸深，你其实不知道自己在看什么。那需要你对自己的功能集有更深的理解，再把它们压缩成原则、规则和要点，然后你可以在每一根柱子下面聚起更多信息。这会帮用户更好地理解网站的流向、知道怎么走。这对创始人也更好。如果我现在还在做工作室、还在和这家公司合作，这里会有一整套练习：你到底做的那一件事是什么？
亚伦：对。
马文：如果是同步技能，那我们就只谈这个，把它做得很酷、展示出来，然后让人尽快用上产品。顺便说，这也很有意思：我们刚刚滚到页面底部了。
亚伦：对。
马文：页面并不高。
亚伦：对。对。
马文：而我觉得用户是习惯滚动的。所以如果有重要信息藏在那些功能标签后面，就直接把它摊开，让页面长一点。没关系，人可以滚得更长，而不是压缩、然后把一切都藏起来。
亚伦：正是。
马文：另一个我看到很多人掉进去的陷阱，是现在这些 AI 工具——因为做一张不同的图、做一个动画太容易了。这些其实是动画，对吧？他们为每一个功能都吐出一堆这种，全都有共同特征：字号非常小，还有那种动效——没有人会花时间去说「哦，我们需要一个小圆点从这个角飞过去」，然后把它写出来。
但这并不意味着它真的在为他们做的事增加价值。所以这就是你谈的：你需要策展、需要立标准，确保它在传达正确的东西。这里东西很多，但它们其实没有帮我理解它想说的那个点。
亚伦：我完全同意。而且我觉得那又是另一件事：你需要做事、需要雇有正确技能的人来帮你做这件事。AI 肯定能帮你把整个网站搭起来，但当要把这些功能抽象成插画时，找一位做过这类事、专精信息图的设计师，可能不是坏主意。而且也许正因为被解释得好，这反而会变成 SkillSync 品牌身份的核心部分。
马文：嗯。
亚伦：就像「哦，这是那一件事」。我记得几年前和 Gemini 合作过，有一支动画，像一条辫子：他们把模型和 Gemini 拥有的各种能力展示出来，全部汇到一起，编成一条螺旋。那支动画基本上把模型的能力解释得清清楚楚。
马文：嗯。
亚伦：然后它收成一根很细的线，然后出现 Gemini。那支动画是很多人——比我更有才华得多的人——做了很久的。后来又有非常好的工程师把它翻成网站上的滚动动画。它就是那样把东西卖出去的：然后你就在产品里、在用它了。但那段记忆、那段动作，就是深深刻在我脑子里，而且真的解释清楚了模型在做什么。
有时候稍微更艺术、更抽象一点，反而走得非常远。我觉得对 SkillSync，我完全能想象有无数种模式和视觉例子可以展示这一点，你可以更有手艺、更有图形感地去设计网站上的那一块。这就是我给他们的反馈。
亚伦：好，谢谢 SkillSync。
马文：非常感谢。
18–22 Instaplay、Mintlify 与首页结构 · 40:49 – 51:42
亚伦：好，下一个是 Instaplay，我们看看。我看到一堆精选……我分不清这些是电影还是游戏。它写着「设计点什么」……
马文：「Bird sort」。
亚伦：「Bird sort」。好，所以这些是我们能玩的游戏。
马文：我想是。
亚伦：好。怎么玩？一堆鸟。现在有声音在放。也许我们……
马文：我们试别的吧。
亚伦：开始按钮。我们在和这只狼打，大概是。
马文：够了。
亚伦：这里有一个提示框，挺有意思，写着「创建／描述你的游戏想法」。点进去的时候……有意思的是，Instaplay 这个标题下面没有一行文案。所以只能靠我们自己在这个页面上找到方位。
亚伦：对。
马文：而我们做的第一件事是：我们看到所有游戏的视觉。
亚伦：对。
马文：所有截图。
亚伦：对。
马文：于是我们直接跳了过去。
亚伦：对。
马文：于是我们错过了这件事：这里的主要目的其实是让我们能随手造自己的游戏。
亚伦：对。
马文：所以我觉得一行文字能帮上忙，或者某种提示，让那个输入框更显眼。
亚伦：而且又回到你前面那个例子：用户落在这个页面上，我们想让他带走的那一件事是什么？是探索这个平台上已经造出来的海量游戏，还是「我们可以自己造游戏」这件事？自己造游戏其实会把你带到注册页，而如果还没看到自己造出来的游戏，没有人会去注册。
马文：对。
亚伦：所以你得掏出足够的额度去把人带进产品。那是一个用户的获客成本。顺便说，这个账极其重要，显然他们在想这件事。但那笔获客成本，不能是「用 Google 继续」。
亚伦：对。
马文：我刚让它做的事，它必须完美吐出来，而且我得能再试一两次。如果这行得通，我才可能真的去用它。
亚伦：你输入一段提示，提交，然后它把你带到这个让你登录的页面。
马文：对。
亚伦：问题是，我们不知道这东西好不好。
亚伦：所以……显然这是一个例子：你其实可以在这里做一个很酷的交互轮播，每个游戏有大概十秒钟的片段。
马文：对。
亚伦：而不是现在这样只看到这些静态素材。我不知道后面是什么，所以我不知道自己在看什么。这是个好例子：你大概可以让 Codex 挨个接进去、录屏，然后用录屏替掉封面，至少用在悬停状态上。这样也许能给这一切、给这些不同的世界带来更多交互和动感。我觉得他们想用这些封面说明的是：「看，用 Instaplay 你能做很多东西。」
马文：嗯。
亚伦：如果行动号召是让我们自己造游戏、自己当游戏设计师，我甚至不觉得我们需要能玩所有这些游戏。
马文：对。
亚伦：那么，如果那才是主要的行动号召，我们最开始做的就不是它。而且你大概应该先真的替人把游戏造出来，让他们能玩；然后如果他们想保存、想回来、想分享给别人，那时候再要求注册、要求开账号。
马文：还有这里，看：创建、我的游戏、为你、探索。顺便说，没人知道这些是什么意思。但你点其中任何一个，比如「我的游戏」，又带你到注册。如果你在这个页面还没注册，你可能根本不该看到「我的游戏」，对吧？不该让你能点进一个又把你带到登录的东西。「为你」把我带回我刚才在的那个游戏，我不确定这有多大意义。「探索」基本上就是我们已经在的这个页面。你已经在首页探索了，我不觉得那需要是一个新按钮。你在探索页唯一做到的事，是把输入框拿走了。
亚伦：嗯。
马文：所以现在我不能造游戏了。这里的层级有几处，我会真的把自己放在一个第一次来你网站的人的位置上——他完全不知道你在建什么、卖什么。
亚伦：对。
马文：他们怎么和这个产品互动？
亚伦：这也很有意思，因为你进了那个游戏，我们说「好了，这个玩完了，我想回去」。对我来说，用快进那个图标回到首页并不明显。我以为它会带我到另一个游戏或者干别的。
马文：它很容易被误读成一个错误。
亚伦：对。有意思的是你其实是点了返回键才回去的，因为没有明显的主页可回。
马文：正是。
亚伦：但这个非常酷。你可以想象，让人输入一段提示、造出一个游戏，就像你刚玩的那个赛车游戏。人们能玩上几个小时。你只需要把人带到「造游戏、体验到点什么」这个价值上。
马文：一旦你把那个游戏造出来、为自己造的东西感到骄傲，能分享给朋友，对这些人来说大概是一个很好的增长手段。我觉得这类工作里有很多价值。所以，为他们鼓掌。
亚伦：好，Instaplay 做得不错。好，下一个是 Mintlify，「agent 们构建其上的知识基础设施」「为创业公司、企业和 agent 自我更新的文档」。
马文：对。
亚伦：酷。我显然很熟悉 Mintlify，这是一家很厉害的公司，增长非常快，是大量 YC 公司和其他开发工具在用的产品。
马文：对。
亚伦：嗯，对，这个……
马文：这是一个很漂亮的网站。
亚伦：对，这看起来非常专业。它看起来像是值得信任的东西。
马文：它很直接。
亚伦：干净。
马文：干净。
亚伦：对。他们在配色、字体、间距和行高上都是很好的构图。
马文：对，那我们就往下钻一层：为什么我们会这么感觉？这个页面上有哪些具体元素，让我们觉得它很干净、很专业、以及我们刚说的那些？
亚伦：我觉得是因为它在正确的地方做了减法，只展示真正必须展示的东西。它有一个很干净的标题、下面一小段、非常显眼的「开始使用」按钮。它展示了某种后台界面，你能大致理解：哦，文档大概就住在这里、在这里更新。背景里的图形其实是在给氛围加分，而不是减分。它很轻，在背景里。它让你觉得它在帮你思考，像是某种网络。它让人觉得他们对正在建的东西非常谨慎、非常用心，而它大概是某种基础设施的智能层。
马文：我知道 logo 墙是怎么回事，但至少这面 logo 墙拼得很好，这挺不错。
亚伦：里面有很多非常大、非常可信的公司，这建立了很强的社会证明，看起来就是我们有那种专业、可信的感觉的一部分——其中一部分是通过看到微软、Anthropic、以及 Coinbase 也是他们的用户来传达的。
马文：工具这么多涌进市场的时候，你需要那种证据点：好吧，如果 Spotify 在用，也许我们真的该看一眼。
亚伦：而我觉得这也是一个很好的例子：他们把 UI 和功能能力抽象成非常统一、非常有艺术指导的东西，看起来很有意思。我会说，这里这些卡片的标题可能有点太小。如果我现在看它们全部，背景颜色又都一样，我其实一张都没在看。而且他们在反复用背景里那种编织动画，如果到处都用，它的魔力就慢慢没了。所以我会说这里少即是多，标题可以大一点。
马文：嗯，还有这里，我不确定你是否需要那个。叠在你现有设置之上——这非常难读。
亚伦：对，而这其实似乎是一个非常重要的点，你会希望人知道：你可以控制谁能访问，你可以建在你现有的设置之上。但它非常容易被错过，因为截图占了更多空间。还有这个动画，在把注意力从这句其实很重要、却被埋在底部的标题上拉走。
马文：正是。然后你就得区分：你加的那个视觉到底给了用户多少信息，对比你能加的文案又能给多少。这个平衡在这里有点偏，但整体非常漂亮。这些也很好，这是一个用起来很简单的轮播，我可以滑过去。颜色和摄影是对上的，我觉得这件事大家给的分不够。这很好，做得非常好。这是曼哈顿，蓝天，Coinbase，蓝色，这里是一件蓝色的作品。滚过去看的时候感觉很好。
亚伦：有品牌感。
马文：对。虽然这些颜色彼此太接近了。它们有点……这里我会用另一个颜色。
亚伦：也许灰色，或者……
马文：这张我大概会用 AT&T 那种蓝，但这张图我会换一张。
亚伦：那大概是对的。对。对，但整体非常干净、非常值得信任。
马文：各段之间的留白也很多。我知道这是你在自己的设计和你做的东西里很常用的一种手法。
亚伦：对。
马文：首页的每一段，基本上是所有子页面的第一章。我们过去给客户做设计时，常常是这样：如果你要讲产品、方案、资源和定价，那这四块就是首页的四个主要部分，因为显然我们认为它们最重要——产品功能、我们的方案、资源、定价。当你滚过网站，这四个组件就按这个顺序出现，从最重要到最不重要，因为滚动的深度——人往下滚就会流失。所以重要的内容必须放在最上面。然后每一段都应该把我带进去。所以如果点……理论上我会在首页这里给产品留一整个段落，然后从那里点进产品。顺便说，产品本身大概应该有自己的首页，因为产品太多了。但整体上，它设计得很好，很简单。看得出来他们花了时间和心思做这个网站，这挺好看。
亚伦：对，很有意思。它更有呼吸感。
马文：对。
亚伦：跟我们看的其他一些相比，这里感觉东西更少。
马文：内容还是很多，但它被间隔开、分布在整页上。
亚伦：每样东西都有自己的空间，这帮助用户知道此刻该关注什么，而不是感觉有一堆东西在抢他的注意力。有意思的是，你把这件事描述成它其实花了更多时间……
马文：对。
亚伦：……比那些东西很多、元素互相竞争的多。因为要弄清楚「我们到底想留下什么」是需要工作和策展的。把所有东西都扔上去很容易，弄清楚什么该被删掉难得多。
马文：因为那个对话在团队里要难得多。每个人都在竞争，每个人都想让自己的功能、自己的特性上页面，你必须策展、做决定、减少——这就是任何设计师的工作。降低复杂度，一次只展示一件，用这种方式推动叙事。这很难做，但做对了是有回报的。
亚伦：对，这非常棒。做得好，Netlify。
23–29 Knowlify、滚动与 Instinct Space · 51:42 – 1:05:43
亚伦：好，下一个是 Knowlify。「你的用户不读你的文档，你的病人不读你的手册，你的员工不读你的内容。Knowlify 把你的文档和想法变成有旁白、有动画的视频。几分钟自己做，或者让我们的工作室团队替你做成视频。给那些需要的视频比有的时间更多的团队。」
好。我第一反应，作为一个做字体的人，我会说：这里有一个标题、一个段落、然后又有一个几乎是段落更小版本、用了不同的字号，然后有「预约演示」按钮和「免费开始」按钮。在这个视口里，一到二、三、四，可能五个字号，还没算所有 logo、横幅和角落里那个角标。从这个角度看，就是东西太多。你可以有一个标题，然后有一个段落，你必须把所有重要信息放进那个段落里。你不能一直往上加标题，让用户去读所有不同的点。
亚伦：第一个跳出来的是标题里那两个占位元素，我觉得那让人失去方向。
马文：对。
亚伦：有一个还可以，因为它在变的时候你可以锚住：我们为这类人、这类人、这类人做这件事。但两个元素同时变，就等于用户也在变，那个「文档」「手册」或者别的什么也在变。然后听起来这其实是一个视频的东西……
马文：对。
亚伦：……这一点我完全没从标题里读出来。所以我想他们想说的是：嗨，人们不读这些文档和 PDF 之类，所以你需要视频，让他们注意到内容。但我觉得他们应该讲正面的：我们做的视频转化更好——而不是讲负面的。
马文：他们有自己的工作室，可以做一支 Knowlify 的视频放在网站上，让我们先看那支。
亚伦：对。那会证明他们的观点，对吧？人们不读这些，所以……
马文：反正我会想读这些吗？直接给我们看一支你做什么的视频。
亚伦：这里有一个轮播，我觉得基本上就是展示产品，我们点一下。
马文：对。我猜这些是他们动画的例子。
亚伦：没法点进其中任何一个。你得用那个图标。那不好。这张卡片显然应该是可点的。
马文：嗯。你看着它，你就会想点进去。
亚伦：「每年有数千名仓库工人受伤。」
马文：好，所以这是一个教学动画视频。
亚伦：「这些事故大多数是完全可以预防的，以及警示装置……」
马文：视频做得很好。而这里我们想做的事，其实挺有意思，和你在前面那些项目里做的很多轮播是同一件事：我在浏览他们的很多作品。
亚伦：对。
马文：当我点进其中一个，它变成全屏，然后我得琢磨怎么最小化、怎么关掉它。而我真正想做的是让它放大、我能看它播放，然后我能继续跳到别的作品，因为我想看他们能做出多大的深度和多样性。
亚伦：正是。
马文：而现在这件事很难做。
亚伦：对。这些都不能点。我没法把它们打开成全屏。你必须用所有这些小按钮。你不能滚，不能滑动切过去。
马文：对。我会希望它放大起来，但不是整个宽度、把一切都盖住，而是大概九成。
亚伦：……告诉我发生了什么。然后我就可以开始滑过所有作品。也许就在下面给我看那家公司本身。
马文：对。
亚伦：也许这些其实全都是案例。所以它们打开的时候，你可以用很好看的带层次的 sheet 打开它们：页面的其余部分往后退，sheet 升起来，你在顶部看到视频，也许还有一段说明这个视频是为什么做的。
马文：对。
亚伦：……那个建筑公司，有点像案例研究。这甚至可以把你带到客户故事或者成功故事。这些显然是他们展示的、过去服务过的客户的 demo。所以应该更多聚焦在那些视频上，更少放在这里的 logo 横幅上；标题应该更简洁，不要同时有两个东西在跳来跳去。
马文：对。
亚伦：……然后现在我们进到平台的部分。
马文：正是。
亚伦：现在我们进到……现在他们在描述，哦对，平台。这里，往上一点点。
马文：哦，抱歉。
亚伦：又一支视频。「所以你做好视频，上传一份文档、一篇博客或者一个想法，几分钟内得到一支有旁白、有动画的视频。只靠聊天就能编辑。」我觉得这句我需要的，应该一直在最上面。
马文：好解释他们在做什么。
亚伦：对。因为一开始我不知道这是不是给我用的。他们因此丢掉了多少本来会是理想客户、却根本看不出这是给自己用的人？
马文：给我看产品做什么。如果我感兴趣，再给我看结果。
亚伦：对。我还注意到这里在做滚动劫持。
马文：对。
亚伦：这让我抓狂。
马文：我同意。
亚伦：因为它对我想要的滚动反应更迟钝了。它要花一会儿才加速到那个速度，而不是……
马文：我想借这个机会在节目里谈一谈滚动劫持、谈一谈网站上的滚动操纵。
网站上的平滑滚动是这个行业的一场灾难。我觉得你应该用网站的原生滚动，不要去阻碍用户想和你的内容互动的速度。
亚伦：对。
马文：这正是我们前面谈的可中断界面。Apple 在这方面做了几十年开创性的工作，他们的软件和硬件就是证明。你要可中断的软件，因为我们的念头是可中断的。你可能想着某件事，手已经点了别的，你绝不希望把用户放进一个必须平滑滚动、或者被滚动劫持着穿过内容的环境——就因为你觉得他们会那样感知、消化这些内容。
亚伦：对。
马文：这几乎是傲慢的做法。我一直觉得我想尽可能不挡路，进门的时候尽可能有礼貌。狄德罗总会说：当你走进一个房间时，要有礼貌、安静地进去。
亚伦：而且作为用户——这不是我们唯一用过的网站。
马文：正是。
亚伦：我们大概在几十万、甚至上百万个别的网站上滚过。
马文：在手机上。
亚伦：对，在手机上。我们习惯了滚动的灵敏度和精度，一旦有东西改变它，你就得重新校准自己去找你要的东西，这就变成了干扰。
马文：而且它就变迟钝了。我想在这一块内容上暂停，但动画还在播。于是我得用触控板去对抗那个动画，这让我不舒服。我不想那样滚。而且这里可点的目标非常难，你得去打这些小按钮。
亚伦：对。
马文：反正有点复杂。归根到底，这个网站上就是有好几个不同的轮播，背后都是视频播放器，点开之后进入一个全屏播放器，唯一的退出方式是按 Esc。
亚伦：嗯。整体上，视频看起来做得非常好。
马文：视频看起来很棒。
亚伦：对，而把人带到那些视频里、让他们看到更多、体验它们、理解背后的案例，似乎才是能转化人的东西。
马文：对。
亚伦：而我觉得，如果这确实是在改善 Adidas 或者那家建筑公司的健康与安全，那 Knowlify 做得很好。那就是他们在卖的产品。
马文：太棒了。谢谢 Knowlify。
亚伦：好，下一个是 Instinct Space。「今天就开始建月球未来」。好，我们有一个月亮。
马文：我们有……
亚伦：……「建月球未来」，还有某种飘着的卫星。
马文：对。挺好的，非常沉浸。
亚伦：嗯。
马文：我觉得可以很安全地说，这些人在做太空技术。
亚伦：你怎么看出来的？
马文：航天技术。所以，先给他们鼓掌。我觉得，回到 AI 的世界一下：这是一个很好的例子——你很容易让一个大模型给你做一个 3D 版或者 WebGL 版的月亮，放在网站上，能用光标交互。这是我会加到这个页面上的东西。这两个元素其实都是我会用 3D 渲染、然后作为活的物件放在页面上的。现在用 AI 做，这件事不算完全不可能。所以这里有一点东西，是我会加的——我们把它叫「镇场组件」。就是当你的网站上有一两个组件，真的把所有注意力吸住、把人拉进正在发生的事里。
亚伦：对。
马文：我觉得那是一个很棒的时机去展示这样的东西。
亚伦：对。我觉得这个做得很好，因为一进来我们就知道这是什么。而且这里的 3D 动画——它本来可以只是 2D，本来可以是一张照片。
马文：对。
亚伦：你知道，他们把它叠上去，但这里面有某种东西把我们的注意力拉过去：哦，这真的是他们在造的东西。
马文：这里的月亮其实是背景里的一张照片，这才是我刚才反应的东西。但你说得完全对。还有字体的用法也很好。我觉得现在很多网站都在一个非常安全、经过考虑的空间里用无衬线字体，而有勇气在网站上挥一把衬线字体，是很漂亮的一手。
我要说，在这一点上：logo 本身、这里的字体、还有这里的排印，全都不一样，有点在互相竞争。然后下面这些 logo 里颜色很多，包括你们那个可爱的 logo，我觉得它几乎把太多注意力从真正的信息上拉走了。而这个案例里只有一条信息，很好、很克制，但你有空间再加一块元内容，也许更多讲讲你的公司做什么、你在建什么。
亚伦：对。
马文：但我们再往里看。
亚伦：对，现在他们更具体了。「Instinct 正在为今天的航天产业建造月球着陆器。」所以是发射、巡航、着陆。
马文：对。我觉得这就解释了正在发生什么。
亚伦：这个很酷，你悬停的时候能看到它。我第一次做的时候，其实看不太出来发生了什么。
马文：对我来说这不太像一次发射。
亚伦：哦，来了。好，你只要在那儿多待一会儿。所以也许他们可以更快到达那个点。
马文：快得多。注意力跨度整体在变短。
亚伦：像第二个就很酷：你一悬停它就起飞。
马文：正是。我觉得这是一条很好的反馈：你一悬停在上面，这东西就该打开。还有另一种做法：让它们全部同时播，因为它们都是非常简短的瞬间——就是发射、就是巡航、就是着陆，它们可以放在很短的循环视频里同时播，这样你可能更快把点讲清楚。而「着陆」那段其实没把点讲清楚，我不觉得所有人会立刻明白那是月球、你在慢慢靠近它。
亚伦：对。
马文：我觉得你真正在等的是这个瞬间，对吧？你想看到……
亚伦：对。对，来了。你看到影子变大。
马文：就是这个。这就是我想看的。
亚伦：对。
马文：我甚至不会展示前面那些。
亚伦：对，本来就应该只有这个。
马文：本来就应该只有这个。应该是这个场景，然后是顶部打开的这个，这就是你在这里需要做的全部。
亚伦：对。
马文：而且又是一、二、三，三段，像我们三个人一样，也挺好。在移动端，这会很快变成一个漂亮的轮播。所以翻译到移动端非常容易。又回到 primal 那套策略，Jaytel 和我的思路一直是：你有技术、公司、新闻、招聘，把它们合起来。如果这些是你认为对你的生意重要的东西，那它们就是首页上的章节：展示技术、展示公司、展示新闻和招聘。别让我去用顶部的导航。这些都是你可以带进首页的元素。
亚伦：对。
马文：而从那里，用非常简单的 sheet，你就可以转进任何一块内容，这会让整件事感觉更容易消化、更好读。但我们点进几个页面看看。
亚伦：对，这很酷。
马文：对，技术……
亚伦：好，我喜欢这里的地方是……
马文：对。
亚伦：它看起来像真实的视频，所以它让我觉得这是真的。
马文：我是说，这就是真的。
亚伦：对。
马文：它们是真的。不是一堆渲染，你知道，很难分辨这是真的，还是他们只是有个计划——不，他们真的在做这件事。
亚伦：他们在建这个东西。对。我觉得又是很好的例子：技术页上没有那么多信息。这整支视频本来可以成为首页上的一块内容，写着「探索我们的技术」。你点进去，打开一个像这样的新组件，你滚过去，当你滚回来，你又回到首页。这种交互模式在这里会非常好用。
马文：是。
亚伦：非常酷，而你现在是靠人去点技术页才能看到那些。
马文：正是。这里的封面图我们有点松懈了。我觉得，这里有很多东西在……
亚伦：它跟其他页面的质量和风格不匹配。
马文：完全不匹配。而且我觉得 Instinct 在这里要记住一件很重要的事：标题可以用衬线，那会成为你整体艺术方向的一个风格元素。但不要用它排正文或者段落文字，那些是无衬线。这是无衬线字体。所以这里的信息和这里的信息，我会用像 Instrument 这样的，或者就是普通的无衬线，像 Inter 这种在这里很合适的字体。
我们前面看轮播，这个轮播不能拖。这个轮播不能用触控板滑。整个轮播只有我去点这些按钮才能用。那绝对不是我会……你可以自己建这些组件。
亚伦：我的收获是，你得发布一个轮播……
马文：我们其实有一个轮播组件，是同事在做、叫 Blossom Carousel。
亚伦：对。
马文：Blossom Carousel 基本上是一个能滑、能滚的轮播，有很多不同的变体和版本，在移动端会变成堆叠。这是免费的，在 GitHub 上，所以看这档节目的任何创始人、任何创业者都可以用。
亚伦：这很棒。所有人都该用它。你的轮播马上就会好很多。
马文：正是。
亚伦：太棒了。
马文：Instinct 也很棒。谢谢。
亚伦：Instinct 做得很好。太棒了。这一期 Design Review 就到这里。马文，非常感谢你来。
马文：非常感谢你们邀请我。能在这里太好了。来到旧金山很好，这里的能量无人能比。Y Combinator 很厉害，这里的办公室太酷了。我真的很高兴你们请我上节目，也很高兴能和一群只想往里面多看一眼的人坐在一起。我们确实往里挖了一点，也谢谢你让我展示一部分我的工作流。看到这些公司做出这么多有创新的新作品，也很棒。
亚伦：对。能看到你工作的幕后、真的进入你的思路、看你如何设标准、如何把标准抬高——不只是视觉，还有很多交互以及用户实际体验你作品的方式——这很棒。非常感谢你分享这些。这一期 Design Review 就到这里，我们下一期见。各位再见。
References
- 1Y Combinator · Design Review《The New Full-Stack Designer》
podcasters.spotify.com
- 2官方视频（含 29 章章节表）
youtube.com
- 3Marvin Schwaibold 个人站
marvinschwaibold.com
- 4grass-shader 仓库（节目里给的链接）
github.com
- 5Endstack 官网
endstack.com
Comments