全栈设计师新范式：AI、编辑思维与产品设计的未来

今天，我邀请到了 Marvin Schwaibold，他负责领导 Shopify 的产品设计工作室。他将带我们深入了解他的工作流程，展示他如何使用最新的 AI 工具将设计变为现实，然后我们会点评一些观众提交的网站。欢迎来到另一期《设计评论》。Marvin，感谢你的参与。

Today, I'm joined by Marvin Schwaibold, who leads the product design studio at Shopify. He'll give us a behind-the-scenes look at his process, where we'll see how he's using the latest AI tools to bring his designs to life, then review some viewer-submitted websites. Welcome to another episode of Design Review. Marvin, thanks for joining us.

感谢邀请我。

Thank you for having me.

在我们讨论你在 Shopify 的工作之前，我很想了解更多关于你的工作流程以及你今天用来进行 AI 设计的工具。

Before we get into your work at Shopify, I'd love to hear more about your process and the tools that you're using today to design with AI.

我觉得流程本身并没有真正改变。它仍然非常迭代和有序。工作中本身就有很多迭代和变体，但工具确实发生了很大变化，从 Figma 和美学布局工具转向更多 AI 驱动的工作流程，我会用 Figma 作为草稿本记录一些想法，但很快这些想法就会转化为我可以使用的真实演示，然后我只会偶尔回到 Figma 来布局或向 AI 解释某些东西，但现在绝对是一个包含 Codex 和 Claude Code 等工具的世界，经常在终端中工作，只是更快地得到我可以在手机或电脑上使用和测试的输出，这变成了一个非常有趣的仍然非常迭代的循环，但我们肯定已经从画布转向更多 AI 工具。

I feel like the process itself hasn't really changed. It's still extremely iterative and sequenced out. There's a lot of iterations and variations in the work in and of itself, but the tooling has definitely shifted a lot from tools like Figma and working with aesthetic layouts into more of an AI-driven workflow, where I'll use Figma as a scratch pad for some of the ideas I have, but then very quickly that'll transcend into real demos that I can use, and then I only piggyback back into Figma from time to time if I need to lay something out or explain something to AI, but it's definitely more of a world now that includes tools like Codex and Claude Code and being in terminal a lot and just getting to an output that I can use and test on my phone or computer a lot faster, and that becomes like a really fun still very iterative cycle, but we've definitely moved away from the canvas more to like AI tools in general.

那么，这个工作流程中有多少是 AI 在驱动大部分过程，有多少是你人类在驱动？

And how much of that workflow is AI driving a lot of the process and how much of it is you the human?

我认为很大程度上是我这个人类在驱动 AI 为我完成很多繁重的工作，但有很多质量控制和决策都取决于设计师。我们坐在驾驶座上，实际上我们现在比以往任何时候都处于这样一个位置：输出不再是问题，而是我们要极其选择性地决定我们继续推进什么、使用什么。所以，更多的是对 AI 创造的内容进行策展，这是一个与 AI 持续来回的过程。我觉得 AI 非常擅长完成很多我们需要做的事情，只要你理解你正在处理的复杂性，并且能够将其分解成多个几乎像子任务一样的东西，然后你可以一点一点地喂给智能体。然后就是来回互动。

I think it's a lot of me the human driving AI to do a lot of the heavy lifting for me, but there's a lot of quality controls, decision-making that are all up to the designers. We're in the driving seat, and we're actually more than ever now in a position where the output isn't the issue anymore, it's us being extremely selective about what we go forward with and what we work with. So, it's a lot more curating what AI is creating and that is a continuous back and forth with AI. I feel like AI is extremely capable of getting a lot of things done that we needed to do as long as you understand the complexity of what it is that you're working on and you're able to break that down into a multitude of almost like subtasks that then you can feed to the agent bit by bit. And then it's a back and forth.

听起来你所描述的很多内容都表明你的角色实际上是编辑。

And it sounds like a lot of what you're describing is that your role is actually to be the editor.

我们现在比以往任何时候都更像是编辑，我觉得这很有趣。那很棒。我的意思是，这一直是角色所在，但达到编辑这一步之前需要大量手工设计，我们会在 Figma 中做这些，而现在越来越多的工作可以通过 AI 工具加速和推断。

We're more the editors now than ever before, which is I think fun. That's great. I mean, that was always the role, but getting to the point of editing just took a lot of hand-crafted design that we would do in Figma and just more and more of that can be now sped up and extrapolated with AI tooling.

所以，你作为人类仍然要对最终输出负责，并确保它达到你的标准。

And so, you the human are still responsible for the ultimate final output and making sure that it meets your bar.

总是如此。

Always.

但现在你拥有所有这些工具，能够更快地达到目标。

But you have all these tools now to be able to get there way faster.

100%。我的意思是，AI 肯定为我们所有人提高了上限，但它不是工匠。它可以执行复杂性和技术，而我无法手写代码。它可以写代码，但它不知道什么好看什么不好看，这由我决定，并引导 AI 走向正确的方向。

100%. I mean, AI has definitely raised the ceiling for all of us, but it's not a crafter. It can execute complexity and technology that I couldn't handwrite code. It can write code, but it doesn't know what looks good and what looks bad and that's for me to decide and to steer AI into the right direction.

我一直是你的作品的忠实粉丝。所以，也许首先请告诉我们 Shopify 的产品设计工作室以及你们在那里做什么。

I've been a big fan of your work for a long time. So, maybe first just start off and tell us about the product design studio at Shopify and what you guys do there.

我与一支非常有才华的设计师团队合作。过去一年我们一直在那里，我们基本上在公司内发起了一项倡议，重新设计并触及我们最重要的界面。所以，从与 Sidekick 相关的任何内容——Sidekick 是我们的 AI 基础设施层，基本上管理我们整个后台——到我们称之为绿色应用的移动应用，以及我们查看和处理的从后台到后台仪表盘的一切。最近一直在与工程团队为我们构建的许多新 AI 基础设施合作，是的，过去一年真的非常令人兴奋。

I work with a team of very talented designers. We've been there for the last year and between us we basically run an initiative at the company to redesign and touch the most important surfaces we have. So, from anything related to Sidekick, which is our AI infrastructure layers that basically manage our entire admin to the mobile app, which we call the green app, and everything from admin and admin dashboards we look at and work with. Quite recently have been working with a lot of new AI infrastructure that the engineering teams have built for us, and yeah, it's just been a really exciting last year.

是的，这真的很有趣，因为 Shopify 到现在大概有二十年历史了，对吧？

Yeah, it's actually really interesting cuz Shopify is like two decades old or something at this point, right?

20 年了。

20 years old.

20 年了，所以我们

20 years old, and so we are

实际上，我想是 21 年了。

21, I think, actually.

是的，我们现在处于一个新时代。AI 正在改变很多事情，听起来你做的很多工作实际上是为了现代化并将其带入现代时代，这通过设计实现，但也包括体验本身，对吧？比如，你产品设计工作室的设计团队实际上在那里做什么？你们只是，你知道，在 Figma 和画布和设计中，然后将它们交给工程师，或者你管理的设计职能是什么样的？

Yeah, we're in a new era now. AI is changing a lot of things, and it sounds like a lot of the work that you're doing is actually to modernize and bring it into a modern era, which is through design, but also the experience itself, right? Like, what is the design team in your product design studio actually work on there? Are you just, you know, in Figma and canvases and designs and passing them off to engineers, or what is the design function like that you manage there?

至少目前，我们正在进行的这项大倡议几乎有两个部分。设计团队的一部分重新设计了整个后台体验。这个重新设计从 Figma 开始，打磨界面并将其带入网络，而组织的另一部分，Shopify 的 Sidekick 团队，正在通过聊天自动化和操作许多 Shopify 界面，这样你可以使用聊天、Sidekick 或 AI 基础设施来基本上管理你的商店，并自动化很多在线商家的工作。这几乎是公司内两个几乎有争议、矛盾的部门，但它们合作得非常好。所以，你在构建非常漂亮的新 UI，但你也使用新 UI 来基本上生成 AI 基础设施和 AI 工作流程，这看起来令人难以置信。其中很多实际上很好地转化回移动应用，并提升了移动体验。它更加对话化，更多是与 Sidekick 谈论你的业务，而不是必须通过界面来操作你的业务。

At least at the moment, there's almost like two parts of this big initiative that we're taking. Part of the organization of the design team has redesigned the entire admin experience. This redesign starts in Figma and with polishing interfaces and bringing that into the web, and the other part of the organization, the Sidekick team of Shopify, is working on automating and manipulating a lot of the Shopify interfaces via the chat, so that you can use chat, Sidekick, or AI infra to basically manage your store and automate a lot of what it means to be a merchant online. And that's like they're basically two almost controversial, paradoxic sectors of the company, but they work really well together. So, you're building really beautiful new UI, but you're also using new UI to basically generate AI infra and AI workflows, and that's like incredible to see. And a lot of that actually translates very nicely back into the mobile app, and is up-leveling the mobile experience as well. It's a lot more conversational and a lot more talking to Sidekick about your business than having to manipulate your business via the interface.

是的。在加入 Shopify 之前，你与 Molly 一起建立自己的产品工作室，那里有令人难以置信的动效、动画和交互，我一直觉得非常鼓舞人心。也许你可以给我们展示一些，并谈谈它的来源。

Yep. And previously, before joining Shopify, you were building your own product studio with Molly, and you have incredible motion and animations and interactions there that I always found to be really inspiring. And maybe you can show us some of that and talk through where that came from.

是的，Molly 是一家工作室，一家位于布鲁克林的设计工作室，我和我的工作室合伙人 J Tal 一起经营。我们在加入 Shopify 并将工作室整合到 Shopify 之前经营了大约两年。

Yeah, Molly was a studio, a design studio in Brooklyn that I was running together with J Tal, my studio partner. We ran the studio for about 2 years before joining Shopify and integrating the studio into Shopify.

在那段时间里，你有一些巨大的客户合作。

And you had some huge clients that you worked with during that time.

是的，我们和 Collins、Apple、Google 都有大量合作，也有很多小客户。说实话，业务范围很广，包括网页设计、产品设计，以及为客户网站做内容策略和层级结构。因为我们是小工作室，所以能和客户保持极其紧密的关系。我们会连续多周每周和客户见面，把在 Molly 的这些项目当作与客户高度专注的合作阶段。所以我们一次最多只接两三个客户，以保持专注。这里是一段我们运营工作室期间所做作品的集锦。

Yeah, we worked a lot with Collins and Apple and Google. And also a lot of smaller clients, too. It was honestly a broad mix of web design and product design and a lot of content strategy and hierarchy for clients as well when it came to their websites. And because we were a small studio, it also allowed us to have extremely close relationships with our clients. We would meet clients weekly for many weeks and use these projects at Molly as very high-focus stints with these clients. So we never took on more than two or three clients at a time to stay really focused. Here's just a reel of some of the work we were doing while we were running our studio.

很酷。这里有些小细节。动画非常自然。甚至每个屏幕切换时，渐变和背后的阴影都会变化，以匹配背景颜色。我觉得很多人可能不会注意到，但你会直觉地感觉到这里有些东西在发生，对吧？

Cool. There's little details here. The animations are very organic. And even as each screen changes, the gradient and the shadow behind it changes to match the color of the background. I think a lot of people maybe wouldn't pick up on that, but it's something that you sort of intuitively feel something is happening here, right?

这个想法基本上来自挂在墙上的电视背后的环境光。J Tal 在 AI 之前就基本复制了视频，并在背景中模糊处理，使其与屏幕上的节奏相匹配。效果非常好。在这句话之前，它只是说 Molly 是布鲁克林的一家设计工作室，底部只有一种振动的渐变。感觉像雷声什么的。至少对我们来说，它总是让人觉得人们倾向于滚动进去。所以我们甚至不需要向他们展示任何作品，但我们暗示了它。然后你滚动进入真实内容，是的，其余只是非常漂亮简单的轮播，但你可以看到这里是我们工作室的一些作品。我想你提到的一些模式，我们过去称之为系统，我们称之为原始系统。这是一种基本上理解网站内容、消化网站内容的方式。对我们来说，当客户带着大量网站信息来找我们时，这是一种非常有结构的消化方式。我们帮助他们将其构建到网站上的系统中，让用户探索。对我们来说，我们构建网站的方式，你在网站上流动的方式，感觉更像是你在探索网站，而不是网站在要求你的注意力。一切都在一层之外，一切都在逐步披露。所以你永远不会让用户被太多内容淹没。

We got this idea basically just from the ambient lighting behind TVs that are mounted on walls. And I think J Tal, and this was pre-AI, basically duplicated the video and had it blur it out in the background so that it would match the rhythm of what's going on on the screen. And it works really nice. And before this sentence it used to just say Molly is a design studio in Brooklyn, and there was just the gradient at the bottom that was kind of vibrating. It feels like a thunder or something. And at least for us it always felt like people were inclined to scroll into it. So we didn't even have to show them any of the work, but we kind of hinted at it. And then you scrolled into the real, and yeah, the rest are just very nice and simple carousels, but yeah, you can see here this was some of the work we were doing with our studio. And I think some of the patterns you were referring to, we used to call the system we call the system primal. It's a way to just basically understand content on a website, digest content on a website. And for us it was a very structured way of digesting when clients came to us with a lot of information for their websites. We helped them build that into a system on the website that allowed users to explore. To us it always felt like the way we would build websites, and you would flow through the website, felt more like you were exploring the website than the website was demanding your attention. Everything is just one layer away, and everything is progressively disclosed. So you never overwhelm the user with too much content in general.

你们通过哪些方式实现这一点？

What are some of the ways that you accomplish that?

我的意思是，我可以直接过一遍一些作品。这是我们与 Collins 机构合作的一个项目。我们和他们在这个网站上合作了我想超过一年。如你所见，即使你在这里滚动首页，首页的每个部分都是一个章节，当你与网站互动时，可以引导你进一步探索。所以这是我最喜欢的部分之一。这是书架。这些基本上都是 Collins 的所有案例研究。

I mean, I can just go through some of the work. This was a project we did with the agency Collins. We worked with them for I think over a year on this website. And as you can see, even as you're scrolling through the home page here, each section of the home page is a chapter that as you interact with the website can lead you into further exploration. So this is one of my favorite sections here. This is the bookshelf. These are basically all of the case studies from Collins.

甚至回去再悬停那些元素。它们弹跳的方式感觉和通常看到的不同。

Even go back and hover over those elements again. The way they bounce feels different than what you typically see.

是的。是的。

Yeah. Yeah.

谈谈你是怎么做的。这不是用 AI 工具做的。这些是你手工制作的，对吧？

Talk about how you made that. This was you didn't use AI tooling to do this. You hand crafted these, right?

是的。嗯，在这种情况下，我会说这非常需要设计和工程合作。我会在 Figma 中布置这样的东西，尝试理解间距、大小、颜色、行等所有内容。然后我会把它交给像 Jesper 这样的人，然后他会处理比如弹跳动画。就像所有这些书必须相互堆叠，然后基本上再落一次，当最后一本书落在上面时，那必须感觉非常自然，因为如果感觉有弹性和自然，那么它会稀释哦，这是一本书的想法。这是一个活的书架。我认为这些事情虽然看似不重要，但正是人们在滚动这些网站时捕捉到的那种小瞬间。

Yes. Well, in this case I will say this was very much design and engineering partner together. I would lay something like this out in Figma and try to understand the spacing and the size and the colors and the rows and all of that. And then I would hand it off to someone like Jesper who would then work on like the bounce animation for instance. Like all these books have to level up on top of each other and then basically land one more time as the last book kind of lands on top of it and that has to feel very organic because if that feels bouncy and organic then it dilutes at the idea of oh, it's a book. It's a bookshelf that's alive. And those things I think while they are seemingly unimportant are exactly the kind of little moments people pick up when they scroll through these kind of websites.

那很重要吗？比如你有一个非常有才华的人，他在这个项目中的全部工作就是制作标签交互。任何人很容易说，好吧，就扔一个标签。标签是存在的。你可以在 5 秒内免费获得，然后继续下一个事情。为什么你觉得在 AI 肯定能做到之前，值得花某个人的专门时间，让他们只专注于那一个交互？

That matter? Like you have a person who is supremely talented, whose entire job on this project was to make the tab interaction. And it's very easy for anybody to go, well, just throw a tab. Tabs exist. You can get that for free in 5 seconds and then move on to the next thing. Why did you feel like it was important enough to spend somebody's dedicated time before AI could do this certainly and have them focus just on that one interaction?

有多种不同的方式回答，但我认为特别是对于这个工作室，因为他们自己从事设计。就像这是一个品牌工作室。我认为来到网站的客户正在寻找那种彩蛋。他们想知道，如果我雇佣这个机构，或者如果这个机构花这么多细节来制作那种质量的网站，那么当我们与他们合作时，他们会在我们的项目中放入什么样的彩蛋？当他们选择我们的调色板时，也许他们会想出背后的系统，而不是仅仅挑选他们喜欢的五种颜色，因为那是真正深入所需的奉献程度。在某种程度上，这也几乎是一种炫耀和展示你可以为界面的任何部分带来的工艺和细节水平的方式。我们在 Shopify 也尝试做同样水平的关怀和工艺。

There's multiple different ways to answer that, but I think especially for this studio because they work on design themselves. Like this is a branding studio. I think the clients coming to the website are looking for those kind of Easter eggs. They want to know that if I hire this agency or if this agency takes this much detail to produce a website of that quality, what kind of Easter eggs are they going to put into our projects when we work with them? And when they pick our color palette, maybe they're going to come up with a system behind it rather than just picking five colors that they like because that's the level of dedication it takes to go really deep. It's a way to in a way almost also to show off and show the level of craft and detail that you can bring to any piece of or any part of the interface. We try to do the same level of care and craft at Shopify.

那么谈谈将你的设计工作室卖给 Shopify 并加入他们的决定，以及这个过程对你来说有什么不同，在一家大型上市公司，领导内部产品工作室，与你在独立时在这里所做的工作相比。

Talk about the decision then to sell your design studio to Shopify and to come join them and how that process has been different for you being at a large public company and you know, leading a product studio internal there versus the work that you were doing here when you were independent.

Tobi 在去年某个时候开始基本上说：“我们正在进入一个新时代，那个未来需要被设计。”基本上就是这样。他说：“我想设计，我想为未来设计，我需要雇佣优秀的设计师来帮助我描绘一幅图景，当我们看到那幅图景时，我们会知道它是什么，然后我们可以走上那条路。”我认为这就是 Shopify 的使命，设计更加处于 foreground。这是一个非常诚实的组织，非常自我意识。这是一个创始人领导、工程领导的组织，设计并不总是扮演现在这样的角色。

Tobi at the beginning at some point last year basically said, "We're entering a new era and that future needs to be designed." And that was basically it. He's like, "I want to design I want to design for the future and I need to hire good designers who can help me paint a picture and when we see that picture we'll know what it is and we can go down that road." And I think that was the mandate at Shopify like design is very much more in the foreground. It's a very honest organization that's very self-aware. It's a founder-led, engineering-led organization and design hasn't always played the role that it's playing now.

设计在很大程度上帮助塑造了公司发展方向的叙事，以及我们对为商家构建的工具和软件所投入的工艺水平和自豪感。这很美好，这也是我们想加入的原因之一，因为我们觉得，虽然我们为其他工作室如 Collins 或插画家 Spencer 设计网站很有趣，但我们也想产生更大的影响，看看我们的策略在面向数百万用户的界面范式上是否成立，而不是像 Spencer 网站那样只有少数用户浏览。

Design is very much helping shape the narrative of where the company is going and the level of craft and pride we're taking towards the tooling and the software that we're building for our merchants. That's beautiful to see, and that was one of the reasons we wanted to join, because we felt that while we were having fun designing websites for other studios like Collins or Spencer the illustrator, we also wanted to have a larger impact and see if our strategy would hold up on interface paradigms with millions of users versus the few users that would scroll around the Spencer website.

对。所以这是一组不同的挑战。你之前的设计工作室工作是创建一个新网站或展示作品的东西，或者开发一个产品之类的。谈谈现在有什么不同。Shopify 有数百万用户，你所做的每一个设计决策和交互都涉及大量资金。作为这个内部设计工作室，你现在的流程是怎样的？你如何与组织其他部分对接？尤其是你如何与用户对接？

Right. And so it's a different set of challenges. The design studio work that you did was create a new site or something to display work or work on a product or something like that. Talk about how it's different now. Shopify has millions of users and there's a lot of money at stake with every design decision and interaction that you work on. What is your process like now being this internal design studio, and how do you interface with the rest of the organization, and how do you interface with users especially too?

所以基本上目前我们的工作室只在 Sidekick 内运作，Sidekick 是 Shopify 的 AI 基础设施层。整个团队与设计组织的其他部分合作非常紧密，这是一种非常美妙的互动，我认为这通常是这些工作室的运作方式，或者更成功的运作方式。在我之前的职业生涯中，我处于更孤立的位置，那样总是更难融入公司并在公司中产生大的影响。我认为目前我们非常深入地融入当前的工作流程、时间线和路线图中。这需要大量的实验。老实说，提升界面对我们来说很容易，因为我们有非常有才华的设计师，他们在 Figma 中重建部分界面，然后使用 AI，我们能够非常快速地将之转化为非常具体的原型。众所周知，原型比你能写的任何 PRD 文档有用一百万倍。这些原型在公司内像野火一样传播。如果 Toby 看到一个他喜欢的原型，我们就可以去构建它。我觉得我们在 Shopify 关注的一些 AI 突变工作，我们稍后可以展示一些。感觉是一样的。我们头脑中有想法，现在使用当前技术非常容易模拟一切并生成原型。而在过去，在 Molly 时，我们做的很多工作都是手工的。我们的图纸是手工设计的。所有动画都是由我们的开发人员完成的。我们的方向可能是我的想法，但除此之外，还有成千上万的对应物需要交互。现在，我看到单兵作战或两人团队在做许多人的工作，因为工具允许我们这样做。这使得获得支持变得容易得多，因为我可以带着原型出现并更快地引起人们的注意，而不是我有一个想法并必须让整个团队围绕一个想法团结起来。

So I will say basically for now our studio exclusively operates within Sidekick, which is the AI infrastructure layer of Shopify. The whole team works extremely close with the rest of the design organization, and it's a very beautiful interplay, which is I think in general how these studios work or how this works more successfully. I've been in positions in previous careers where if you're more isolated, it's always more difficult to ingest into the company and have a large impact in the company. I think at the moment we're very ingrained in the current workflows and ingrained in the timelines and in our road map. And it just requires a lot of experimentation. Honestly, like up-leveling the interface was easy for us because we have really talented designers who rebuild parts of the interface in Figma and then using AI, we're able to port that over into very tangible prototypes extremely quickly. And as we all know, prototypes are a million times more useful than any PRD document you can write. Those spread around the company like wildfire. And if Toby sees a prototype that he likes, then we can go off and build that. And I feel with some of the AI mutations work we've been looking at at Shopify, we can show some of that later. It feels the same. We have ideas in our head, and it's extremely easy for us right now using the current technology to just simulate it all and generate prototypes. Where in the past at Molly, a lot of the work we were doing was by hand. Our sheets were designed by hand. All the animations were done by our developers. Our direction might have been my idea, but other than that, there's like a thousand counterparts that you have to interact with. Right now, I'm seeing one-off armies or teams of two going off and doing the work of many because the tooling is just allowing us to do that. And that's making it a lot easier to get buy-in because I can show up with a prototype and get people's attention faster than I can if I have an idea and I have to get a whole team rallied around an idea.

你能给我们展示一些你们在 Shopify 一直在构建的工作吗？

Could you show us some of the work that you guys have been building at Shopify?

这基本上是对我们当前管理体验的重新设计和改版，有一个新的主页设计，以及基本上整个产品的全面改版，我们目前正在做这个。我认为我们现在探索的更有趣的事情之一是 Sidekick 和商家如何互动。我们在主页 feed 上有 Sidekick 建议的概念。这些建议由我们带给商家。我们已经确定了商家可以在他们的生态系统内、他们的宇宙内做的机会和好处，我们可以向用户展示这些，然后当用户与这些建议互动时，我们基本上启动与 Sidekick 的对话。我们可以直接为用户操作管理仪表板，并向用户展示这些更改。所以，我们在这里向用户展示。我们认为你应该重写或重新重写你的产品描述。这是我们认为你应该做的建议。你可以发布这些更改，基本上通过与 Sidekick 的对话，你直接操作了你的商店，概念更多的是我们能否将 UI 带给用户并融入上下文，而不是让用户点击界面。归根结底，有一种世界是商家可以在主页面上花费更多时间，并使用 Shopify 作为仪表板来委托并与 Sidekick 互动，让 Sidekick 直接操作商店。现在，你看到的是一个原型环境。这里有一个开发 UI 面板，基本上我们正在构建设计团队正在构建所有这些更改、演示和想法直接进入这里的界面，所以我们可以直接测试并在其上构建，它已经成为这个美丽的过程，一旦演示达到我们都一致的程度，每个人就分头构建他们认为带来价值的某个版本，然后我们都回来，它实际上都生活在同一个演示和同一种语言中。

This is basically a redesign and facelift of our current admin experience with a new home design and an overall facelift of basically the entire product which we've been working on at the moment. I think one of the more interesting things that we've been exploring right now is just how Sidekick and the merchant interact with each other. We have this concept of Sidekick suggestions on the home feed. These suggestions are brought to the merchant by us. We've identified opportunities and benefits that the merchant could do inside of their ecosystem, inside of their universe, and we can show those to the user and then as the user interacts with these suggestions, we basically kick off a conversation with Sidekick. We can directly manipulate the admin dashboard for the user and we can show those changes to a user. So, we're showing a user right here. We think you should rewrite or re-rewrite the description of your product. Here's the suggestion that we think you should do. You can publish these changes and basically through a conversation with Sidekick, you've directly manipulated your store and the concept is more can we bring UI to the user and into context versus having the user click through the interface. At the end of the day, there's a world where a merchant can spend a lot more time on the home surface and use Shopify as a dashboard to delegate and interact with Sidekick and have Sidekick directly manipulate the store. Right now, what you're looking at is still a prototype environment. This is there's a dev UI panel inside here and basically we are building all of these the design team is building all of these changes and demos and ideas right into the interface here so we can just test and build on top of it and it's become this beautiful process where once a demo is at a point where we kind of all align everybody branches off and builds a version of something that they think that brings value and then we all come back together and it actually lives all inside the same demo and the same language.

是的。

Yeah.

这是一种分享想法和上下文的美丽方式。

And it's just a beautiful way to share ideas and context.

你说设计师在这里构建这个。很多时候设计师在设计，但他们不构建，但在 Shopify，你的团队和你正在构建很多你设计的东西，这样你可以测试它，可以原型化它，可以看到它在实时数据、实时体验上的表现，这是做好它、构建有用东西并确保它很棒的重要部分。从你在 Figma 中设计到现在你不仅仅是设计，而是实际上将其创造到世界上以能够测试它并自己完成整个循环，你的演变是怎样的？

You said designers are building this in here. A lot of times designers are designing and they're not building but it's in Shopify and your team and you are building a lot of the stuff that you are designing so that you can test it so you can prototype it so you can see it on live data live experiences and that's a huge part of nailing it and building something useful and making sure that it's great. What was your evolution from you know designing in Figma to now you are not just designing but you're actually creating it out into the world to be able to test it and doing that full loop yourself.

在这个具体案例中，admin 有一个游乐场，我们在那个游乐场内构建和测试，那不是生产代码，不会被允许回到 Shopify 的主要 GitHub 仓库，比如我们的主仓库。尽管如此，AI 现在肯定已经达到了这样的程度：作为设计师，我们被高度赋能，能够可视化任何我们想要传达想法的想法，而在过去的世界中这是不可能的。

In this specific case admin has a playground that we build inside of that playground we test that's not production code and that wouldn't be allowed back into the main GitHub repo of Shopify into like our main repository. Having said that though AI has definitely gotten to the point now where as designers we are highly empowered and capable to visualize any idea that we want to get our idea across in a previous world that just wasn't possible.

我们之前看了 Collins 网站。很多在 Figma 里的工作，我们做的时候，现在看起来还是这样。你可以放大这里的任何部分，都是非常详细的 Figma 屏幕，我们通过它来设计。这是一个构思过程。我觉得这是我、Michael Spicer 和 J Tall 一起做这个项目的混合成果。你可以看到我们推进想法、尝试新事物时的演变。这些在代码里测试太重、太贵。我们现在不想在代码里测试，因为那需要工程师来看并为我们构建。所以我们在 Figma 里全部测试。Figma 是我们构建一切的世界里的游乐场。我们在桌面端构建，然后移植到移动端，所有这些都必须先在 Figma 里压力测试很长时间，然后我们才会去打扰工程团队。

We looked at the Collins website earlier. A lot of that work in Figma, when we worked on it, still looks like this. You can zoom into any part here and they're highly detailed Figma screens that we were designing through. This is an ideation process. I think this is a mixture of me, Michael Spicer, and J Tall working on this project together. You can just see the evolution as we're going through ideas and trying out new things. These are too heavy and too expensive to test in code. We don't want to test this in code right now because it would require an engineer to take a look at it and build it for us. So we test it all in Figma. Figma is the playground in the world we were building everything in. We were building it on desktop and then translating it to mobile, and all of this had to be stress tested out in Figma first for a very long time before we would go and bug the engineering team.

目前我与 AI 交流或仍在使用 Figma 的很多方式是，我可以通过非常粗略的草图走得很远。这里有一个我周末一直在做的副项目示例，我可以稍微详细讲讲。我想为这个项目构建的一个东西是这些草地研究和视频的 2x3 概览。这里的交互是，你可以打开这些视频中的任何一个，然后向下拖动来关闭它们。在模拟器里也是一样的。我向 AI 解释、描述了这个，当时我在用 Codex，Codex 为我构建了这个。但交互不可中断。所以每次我点击一个资产并向下拉，我都必须等到资产完全回到原位并落定，才能点击另一张图片，而这根本不是你想使用这种模式的方式。这必须非常快速响应，否则你很快就会对界面感到非常恼火。所以我只是进入 Figma，画出了非常基础的简单方框：当你点击方框时，红色出现。你可以把它滑走。如果你在滑走时点击蓝色，蓝色就会出现。你可以把它点走，然后用绿色做同样的事。我认为这只是一个很好的例子，说明至少我个人是如何更多地使用 Figma 的。它更像是一个草稿本，用来规划想法，然后我把这些想法交给 Codex。我使用草稿本是因为对我来说更容易分解某件事，而且如果 Codex 视觉上看到它，它实际上也很容易分解。它解读那张图像，我认为类似于我解读它的方式。至少它理解我在做什么以及我如何思考运动。我无法通过文字或语音表达出来，但我可以画出来。

A lot of the way I'm talking to AI or I'm still using Figma at the moment is I can get really far with a very broad sketch. Here's an example of a side project I've been working on over the weekend, which I can go into detail a bit. One of the things I wanted to build out for this project was a 2x3 overview of these grass studies and these videos I took. The interaction here is you can open up any one of these videos and you can drag down to close them. It works the same in the simulator. I explained this, I described this to AI, and I was working in Codex, and Codex built this out for me. But the interaction wasn't interruptible. So every time I clicked on an asset and pulled it down, I had to wait until the asset was all the way back in its position and set down before I was able to tap on another image, and that's just not how you want to use this pattern. This has to be very responsive, very quickly, otherwise you'll get very annoyed with the interface very fast. So I just went into Figma and drew out very rudimentary simple boxes: when you click on the box, red comes up. You can swipe it away. If as you're swiping it away, you click on blue, blue now comes up. And you can click that away and you do it with green. And I think that's just a good example of how at least myself personally I'm using Figma more. It's more of a scratch pad to map out ideas and I give those ideas to Codex. I use the scratchpad because it's easier for me to decompile something, but also it's actually easy for Codex to decompile it if it sees it visually. It interprets that image, I think similar to how I interpreted it. At least it understood what I was doing and how I was thinking about the motion. I couldn't articulate it via text or voice, but I could draw it out.

我认为这里面有两点很重要，需要指出。第一，Codex 和所有当前的 AI 软件以及模型在创造任何东西方面都极其强大。你可以用这些工具做出任何你想要的东西，但你必须知道你在做什么，你必须能够把一个概念或更复杂的东西（比如着色器）分解成所有的小组件。你必须能够理解那些命令，然后你才能把这些组件重新组合起来。

There's two parts of this that I think are important to call out. I think number one, Codex and all the current AI software and the models are extremely capable at creating anything. You can use these tools to make anything that you want, but you have to know what you're doing and you have to be able to take a concept or something more complicated like the shader and break it down into all its little components. You have to be able to understand those commands and then you can put those components back together.

是的，就给我们展示一下你在这里是怎么做的。所以明确一下，你有一堆真实草地的图片和视频。然后你想创建一个看起来和它一模一样，但你可以控制并且像着色器一样运作的着色器。所以谈谈不同的元素，以及你经历了什么才真正让它看起来逼真。

Yeah, just show us how you did that here. So to be clear, you had a bunch of images and videos of actual grass. And then you wanted to create a shader that looked identical to that, but you could control and function like a shader. And so talk about how the different elements and what you had to go through to actually get that to look lifelike.

我这里有几张截图。再次，这是我如何使用 Figma 的一个好例子。所以我第一次把视频输入 Codex，并解释了项目和我想要经历的过程。拿这个视频，把它变成着色器。我想要着色器在网页上运行，我希望你尽可能细致。非常像素级完美。抓取所有颜色。确保你使用相同的十六进制代码。理解图像的每个部分，然后尝试重现它。它跑开并说：“没问题。交给我。”然后它做出了这个，显然看起来完全不像我们现在达到的结果。但接下来的过程是，我会截图这个和我原始的视频。我会打开 ChatGPT，把它交给那里的另一个智能体。我向那个智能体解释我在做什么，以及为什么另一个智能体不理解我想要达到的目标。然后那个 ChatGPT 帮助我理解我自己的过程，比如，你必须向它解释光来自哪里，你使用什么阴影，也许把图像实际分解成六个部分，让它分别处理每个部分，然后再组合起来。当我在思考所有这些不同的事情时，我试图想出如何与 AI 变得非常清晰，并向它解释它实际看到的是什么。所以我使用的一个技巧是，我进入 ChatGPT，让它渲染出底层结构的地形图。当我经历这个过程时，它越来越接近，你可以看到它在草叶中绘制了更多像素。是的，这些开始看起来有点像草丛，感觉更真实了，然后到这里我想，好的，我们有点进展了。这看起来不再那么糟糕了。但我有点发现它不理解下面不是平坦的一层。这些是小山丘。

I have a few screenshots here. Again, this is a good example of how I use Figma. So I fed the video into Codex for the first time and just explained the project and the process that I wanted to go through. Take the video, turn this into a shader. I want the shader running in the web, and I want you to be as meticulous as you can. Be very pixel perfect. Grab all the colors. Make sure that you're using the same hex codes. Understand each part of the image and then try to recreate that. And it went off and said, "No problem. I got you." and it came up with this, which obviously doesn't look at all where we landed, where we ended up now. But then the process from here was I would screenshot this and my original video. I would open up ChatGPT and I gave it to another agent there. I explained that agent exactly what I was doing as well as why is the other agent not understanding what I'm trying to get to. And that ChatGPT then helped me understand my own process like, well, you have to explain to it where the light is coming from and what shadows you're using and maybe break the image actually down into like six parts and have it do each one of those individually and put that back together. And as I was thinking about all of these different things, I was trying to come up with how could I become very clear with AI and explain to it exactly what it was actually looking at. So one of the tricks I used was I went into ChatGPT and I had it render basically a topographical map of the underlying structure. As I was going through this, it was getting closer and you could see that it was painting more pixels into the grass blades. Yeah, these started to look like bushels a little bit, which felt more realistic and then over here I was like, okay, we're getting somewhere here now. This doesn't look terrible anymore. But I kind of figured out it doesn't understand that there's not a flat layer underneath. These are little hills.

对。

Right.

基本上，我把这个反馈给 AI，它理解了，哦，好的。所以有一个底层结构和一张有不同深度和高度地图，如果我能把草渲染在那个基础设施或那个结构之上，对我来说创建场景就会容易得多，这确实效果很好，你知道，在这个原型参考中你实际上可以买——有一个二元切换开关来打开或关闭草，你实际上也可以在这里玩很多地形。

Basically, I fed this back into AI and it understood, oh, okay. So there's an underlying structure and a map that has different depths and heights and if I can render the grass on top of that infrastructure or of that structure in general, it'll be much easier for me to create the scene and that kind of worked really well and you know, in this prototype reference you can actually buy there's a binary toggle to turn the grass on or off and you can actually play with the terrain quite a bit here as well.

对。

Right.

这一切都是前几天午餐时 Josh 对我解锁的，他把 DialKit 安装到这个演示中，因为他看着这个说，这看起来不错，但你应该看看草叶的长度。我当时想，哇，好的，确实如此。

This was all unlocked via Josh to me at a lunch the other day where he kind of like we installed DialKit into this demo because he looked at this and like this looks pretty good, but you should look at the length of the grass blades. I was like, whoa, okay, that's true.

于是，我问 Codex，嘿，我们有多少种草叶变体？它说大约有 217,000 种不同的草叶，但它们之间只差 0.7、0.8 左右。所以我们就想，好吧，那就给它建一个切换开关，让我们自己能看到。我不想在界面和聊天之间来回折腾。暴露底层结构。暴露底层结构也能让我看到自己哪里犯了错。我最初实现的地形图版本完全错误且扭曲。所以，我无论如何都得不到想要的结果，因为我在五条提示之前误解了一些东西，而我自己并不知道。DialKit 算是帮我理清了这一点。但总的来说，你可以随便调整其中几个值，它们能帮助呈现一些东西，帮助可视化我真正想看到的效果。如果这里的长度更长，你就可以引入更多的风。这是我想测试的，看看我能把风动效果做到多疯狂。你可以看到它变得有点狂野。但没错，我认为这只是一个有趣小项目的小例子，就是试试看用这些工具你能走多远。而这些是我认为在 AI 之前我做不到的事情。我可能有过这些想法，但我不被允许或没有能力去执行它们。我认为这就是目前设计角色正在普遍发生的变化。总之，设计师们正变得更全栈。工程师和产品经理也是如此。各个方向都在发生。

So, I asked Codex like, hey, how many grass blade variations do we have? And it said we have about 217,000 different grass blades, but they only differ by like 0.7, 0.8. So, we were like, okay, let's just build a toggle for it so that we can see it ourselves. I don't want to have to go back and forth with the interface and chat about this. Expose the underlying structure. Exposing the underlying structure would also show me where I had made mistakes. The original version of the terrain map that I had implemented was completely wrong and skewed. So, I couldn't get to my outcome anyway because I had misinterpreted something five prompts ago that I didn't know about anyway. DialKit kind of unpack that for me. But then in general you can just mess with a few of these values and they kind of help bring some of this, they help visualize what I really wanted to see. And if the length here is longer, you can introduce more wind. This was something I wanted to test and see how crazy I could get with the wind movement. You can see it gets a little wild. But yeah, I think this is just a small example of a little bit of a fun project just to try and see how far can you get with the tools. And these are things that I think before AI I couldn't do. I just might have had these ideas but I wasn't allowed or able to execute on them. And I think that's just in general what's changing with a lot of the design role right now. And anyway, designers are becoming more full stack. As are engineers and PMs. It goes in every which way.

现在没有限制了，对吧？实际上，这是我们经常看到的一种常见模式。创建原型，然后创建一些小部件，让你可以控制其中的不同变量，以便轻松测试并调整正确。

There's no limitations now, right? And actually this is one of the common patterns that we've been seeing a lot. Creating prototypes and then creating little widgets that allow you to control different variables in them to be able to test it really easily and get it right.

是的。

Yeah.

以前，这样做不值得任何人花时间。你可能只是在代码里摆弄变量之类的，直到弄好，然后就觉得可以了。那会花更长的时间，或者你根本不会花时间去做。现在，创建新的小软件工具来控制这些变量、测试并完美调整是如此容易。

And previously it wouldn't have been worth anybody's time to do that. You would just maybe play with variables in code or something until you got it and then you'd call it good. And that would take way longer or you wouldn't even spend the time doing it. Now it's so easy to create new little software tools to be able to control these variables and test things and dial it in perfectly.

是的。

Yeah.

我猜这就是 DialKit 这个名字的由来。那么，也许在这里多告诉我们一些关于 DialKit 的事情。所以，这是一个让你可以轻松创建并调整你正在做的任何项目中的许多变量的产品，对吧？

Which I guess is where the name DialKit comes from. So yeah, maybe tell us more about DialKit here. So, this is a product that makes it really easy to create and then tweak a lot of these variables in whatever project you're working on, right?

没错。所以，基本上就是这样工作的。你可以直接运行 npm run，通过他的网站。他们有一个小提示。你可以直接把它插入到你正在做的任何事情中。我还有另一个项目可以快速展示。这只是 DialKit 的另一个版本。在我操作轮播的特定项目中。这是受 Mike Matas 启发。他是 Luv From 的设计负责人，他的作品集轮播就是这样工作的，我想看看，轮播的工作方式有很多细微差别，你向下拖动一个项目的方式，当你松开那个项目时，基本上几乎像能量从那个特定项目 ripple 出来，并触发与左右其他项目的碰撞效果。现在构建这个侧面板帮助我基本上看透了我自己用 91 条提示创造的弗兰肯斯坦的内部，它只是帮助你调整一些非常重要的不同参数，比如 pull boost 意味着我向下拖得越快，boost 就越强。你想稍微摆弄一下那个开关。它不能感觉太吓人或太强。否则，整个系统就会感觉不对劲。我知道什么时候感觉不对劲，但和聊天来回交流就是不行。你需要能够始终暴露那些值。

Exactly. So yeah, that's basically exactly how it works. You can just run npm run via his website. They have a little prompt for it. You can just plug it into whatever you're working on. I have another project that I can quickly show. This is just another version of DialKit. In the specific project where I was manipulating a carousel. This is inspired by Mike Matas. He's a design leader at Luv From, and his portfolio carousel works in this way, and I wanted to see, like, there's so much nuance in the way that carousel works and the way you can drag down an artifact, and when you let go of that artifact, the way basically almost like energy ripples out from that specific artifact and triggers a collision effect with the other artifacts left and right. Building out this side panel here right now helped me basically look under the hood of my own Frankenstein that I created here with 91 prompts, and it just helps you dial in some of these different parameters that are really important like pull boost means the faster I drag this down, the stronger the boost is. You want to play around with that toggle a little bit. It can't feel too intimidating or too strong. Otherwise, the whole system just feels off. And I know when it feels off, but the back and forth with chat just doesn't work. You need to be able to always expose those kind of values.

看起来我们在这里看过的所有项目以及你描述的很多内容，都只是设定了一个不合理的高标准，而现在我们有了工具，能够比以往更快地达到它。

It seems like a lot of all the projects that we've looked at here and a lot of what you're describing is just having setting an unreasonably high bar, and now we have the tools to actually be able to meet it much faster than it would have taken before.

是的。

Yes.

那么，设计师的角色是什么，甚至非设计师呢？他们应该如何思考设计？是的，很多观看这个的观众可能是早期初创公司的创始人，他们可能觉得自己是工程师，但完全没有设计细胞，或者是设计师，他们可能在想，我能创办公司吗？或者我真的能构建产品吗？我太习惯于在 Figma 中设计然后交给别人，也许你们过去也是这样。他们应该如何思考自己，以便能够提升使用 AI 创造更高质量设计的方式？

And so, what is the role of the designer and maybe even non-designers? How should they be thinking about design? Yeah, a lot of the audience that watches this are maybe founders of early startups that maybe feel like they're engineers, but don't have a design bone in their body or designers that are maybe trying to figure out like could I start a company or could I actually build the product? I'm so used to, you know, designing in Figma and passing it off to somebody maybe where you guys have been in the past. How should they think about themselves in being able to up-level the way that they use AI to create higher quality design?

我一直以来对 AI 的很多思考就是，它是一个无限耐心的合作者和队友。如果我需要 91 种方法来让动画正确，Codex 不会对我发火。如果我对我的工程师这样做，他们可能会崩溃。所以我对每个人的建议是，听起来有点傻，但就是摆弄工具。你可以进去描述你想让它做什么，当你看到结果时，不要放弃。就向它解释这不是你设想的方式。给它一个你真的很喜欢轮播动画的网站，或者给它一张截图，来自 save it 或 cosmos 的你认为看起来很美的东西。给它看一个调色板，它应该开始为你复制，然后就这样来回反复，与工具一起塑造你的叙事。我认为这非常重要，对于设计师来说，我的技巧或我总是学到的就是尝试复制。就像现在，我正在尝试模仿这个已经存在相当一段时间的轮播动画，因为现在我有一个无限耐心的老师和朋友可以一起构建它，所以现在我可以看透内部，你知道，我在自己的时间、自己的周末做这个，不打扰任何工程师，因为这是我的实验，我想理解并反编译这个东西是如何组合在一起的。这教会我如何成为更好的管理者、更好的合作者和更好的团队成员，我认为这就是我们应该对待这些工具的方式。

A lot of the way I keep thinking about AI in general is just it's an infinitely patient collaborator and teammate. Codex won't get mad at me if I need 91 approaches at getting the animation correct. If I had done that with my engineer, they would probably flip out. But so my advice to everybody is like and it sounds kind of silly, but like tinker with the tooling. You can go in and just describe what you want it to do and when you see a result, don't give up. Just explain to that this is not how you envision it. Send it a website where you really like the carousel animation or give it a screenshot from save it or cosmos of something that you think looks really beautiful. Show it a color palette and that it should start to copy for you and just keep going back and forth and back and forth and kind of shaping your narrative together with the tool. I think that's really important and for designers specifically, my trick or what I always learn was just like just try to copy. Like even now, I'm trying to imitate this carousel animation that's been around for quite a while because now I have an infinitely patient teacher and friend that I can build it with and so now I can look under the hood and that's you know, I'm doing that in my own time on my own weekend without bugging any of the engineers because it's my experiment and I want to understand and decompile how this thing is put together. That teaches me how to be a better manager and how to be a better collaborator and be a better team member and I think that's how we should be treating these tools.

是的，这是很好的建议。

Yeah, that's great advice.

我们要不要点评一些网站？

Should we review some websites?

好啊，我很乐意。来吧。

Yeah, I'd love to. Let's do it.

好，那就开始。

All right, let's do it.

没问题。

For sure.

第一个是 Nstack。我们看看。好，这是 Nstack，你唯一需要的 AI 工作空间。一个强大的智能体，一个直观的桌面工作空间，以及处理任何任务所需的全部工具。好。

First up, we've got Nstack. So, let's see. Okay, so this is Nstack, the only AI workspace you'll need. One powerful agent, one intuitive desktop workspace, and every tool you need to handle any task. Okay.

我觉得一上来我首先会说，一个很好的地方是，他们显然在模拟整个桌面。所以感觉你就像在一个桌面上，你大概可以直接用这些、探索这些。我觉得好的一点是，你基本上已经身处他们的产品里，已经在用他们的产品了。

I mean, I think right off the bat I would say one thing that's very nice about it is the fact that they're emulating, obviously, the desktop in general. So it feels like you're on a desktop, and I think you can probably use these and explore these. And I think what's nice about this is you're basically just in their product already, and you're using their product.

对。

Yeah.

不过我有点搞不清该拿它来做什么。它说是一个 AI——你唯一需要的 AI 工作空间。一个桌面，处理任何任务所需的全部工具。当它这么宽泛的时候，就很难想清楚我该用它干什么。也许它字面上真的什么都能做，但我觉得有时候明确一点是有帮助的，比如你希望用户打开这个页面时做什么？

I think I'm a little confused about what to use it for, though. It's like it's an AI — the only AI workspace you'll need. It's one desktop, every tool you need to handle any task. And it's hard when it's so broad to figure out what should I use this for. And maybe, literally, you can use it for anything, but I feel like sometimes it's helpful, like what do you want the user to do when they hit this?

对。就你说的这点，从视觉上看，它信息量太大了，对吧？侧边栏里内容很多。这里有聊天记录，你可以滚动浏览。然后这里似乎有某种界面，但 Nstack 的主要信息又正好在这边。我很难搞清楚到底该先关注什么。

Yeah. I mean, to your point right now, like from a visual perspective, it's very overloading, right? You have a lot of content in the sidebar. You have this chat history here that you can kind of scroll through. Then it seems like you have some sort of an interface here, but also kind of the main messaging of Nstack sits right over here. It's hard for me to figure out exactly what to focus on first.

我那位德国平面设计教授以前总说，我们在学校做海报的时候——我当时学的是字体排印——他总说这张海报不“引导”。它不“引导”。意思是这张海报上现在没有任何东西在吸引我的注意力。基本上就是，我看着它不知道该干什么。我不知道该先看哪里。

My German graphic design professor would always say when we were making posters in school where I was studying typography, and he would always say that this poster doesn't dictate. It's not dictatish. It means there's nothing in this poster right now that is drawing my attention. Like I don't know what to do when I look at it, basically. I don't know what to look at first.

对。对，我是该点这些图标吗？我是该进那个像 Slack 的东西吗？我是该进聊天界面吗？我是在这里发消息、跟聊天框对话吗？

Yeah. Yeah, do I click these icons? Do I go in the Slack-like thing? Do I go in the chat interface? Am I texting and talking to the chat here?

对。

Yeah.

为什么我叫 Mark？

Why am I called Mark?

对，我猜你就是 Mark 了。

Yeah, you're Mark, I guess.

我现在是 Mark 了。

I'm Mark now.

我觉得这里的反馈会是——大概会是把这里的一些杂乱内容几乎都折叠起来，让它更围绕介绍和标题，以及我想让用户读到、带走什么？也许再给一个简单入口，快速演示这个工具或这个软件产品，那会非常重要。但至少它很有奇思妙想，有种复古感，这挺好的。

I think feedback here, which would be nice, which probably would be like some of the clutter here I would almost collapse and make it more around the introduction and the headline and what do I want the user to read and take away? And maybe a simple way into a very quick demo of the tool or of the software offering would be really important. But at least it's very whimsical and feels kind of retro, which is nice.

对，通常总会有、或者说应该有一个具体目标，比如首要目标、首要 KPI，或者你希望用户打开网站时做的那件主要的事。我不确定这里是什么。也许是“开始使用”，也许是“跟这个智能体对话”。但不管是什么，有太多其他东西在拉扯你的注意力，让你偏离他们希望用户做的那件主要的事。也许“开始使用”按钮是主 CTA，但他们这边还有别的按钮，更靠中间，长得跟那些按钮一模一样。于是现在有多个同色按钮在同时召唤你。

Yeah, there's always usually or there should be one specific goal that is like the primary goal or the primary KPI or the main thing you want a user to do when they hit the site. I'm not sure what it is here. Maybe it's like get started, maybe it's talk to this agent. But whatever it is, there's so many other things that are pulling your attention and distracting you from whatever it is the main goal is that they want the user to do. And maybe the get started button is the primary CTA, but they have these other buttons over here that were more in the middle that looked exactly like those buttons. And so now there's multiple buttons that have the same color and are calling.

对，比如通用工程、营销、开始使用。他们想让我们先关注哪一个？

Yeah, it's like general engineering, marketing, get started. What is the one that they want us to focus on first?

有人曾这样跟我说过。就是很多时候我们做网站时，会聚焦网站上的一个东西，把它做得非常好，然后围绕这一个东西构建整个叙事。在 Collins 上，感觉更像是那些书——书堆是我们引以为傲、想展示的东西。那就是网站的核心，很多视觉工作都围绕它。我觉得有一个很简单的路径能导航到那个页面，然后你可以在那里花很多时间，因为它好用。如果我是 Nstack，我会问自己：我能围绕哪一件事，让人们去看、去做？如果他们只带走一件事，那也比同时想做所有事要好。而这里发生的差不多就是这样。有很多东西在尖叫着争夺注意力。

Someone once said this to me. It's like often times when we build websites, we focus on one thing on that website and we make that really well and we build the whole narrative around that one thing. On Collins, it definitely felt more like the books — the book stack was something that we were proud of and wanted to show off. And that is the heart of the website, a lot of the visual work. And I felt there was an easy way to navigate into that page and then you can spend a lot of time there because it's easy to use. As Nstack, I would be asking myself, what is the one thing I can rally around and get people to look at and do? And if they only take one thing away, it's better than trying to do everything at the same time. And that's kind of what's happening here. There's a lot of things screaming for attention.

对。这跟渐进式披露信息正好相反。

Yes. It's the opposite of progressively disclosing information.

对。也许从正面看，我觉得他们做得不错的一点是，他们试图直接把你放进产品里。我猜这其实就是产品实际运作的样子，他们不是先跟你介绍产品，再让你点一堆东西、注册之类的。他们像是说：“如果顿悟时刻就是人们开始用产品，那就让人尽可能早地进入产品。”但感觉我们可能还是需要多一点背景，才能搞清楚在这里到底该做什么。

Yes. And maybe as a positive, one thing that I think is probably good that they do is they're trying to drop you right in the product. I assume this is actually how the product functions, and they're not trying to tell you about the product and then get you to click a bunch of things and sign up and stuff. They're like, "If the aha moment is people just starting to use the product, let's just get people into the product as early as possible." But it still feels maybe like we need a little bit more context to figure out what exactly we should be doing here.

同意。

Agree.

Nstack，谢谢。好，我们来看看 Skill Sync。免费的本地优先 Mac 应用，把你的记忆和技能带到每个智能体和队友那里。

Nstack. Thank you. All right, let's take a look at Skill Sync. Free local-first Mac app that carries your memory and skills across every agent and teammate.

这个不错。对。至少我觉得这家公司是做什么的很清楚。

That's nice. Yeah. I mean, at least it's clear, I think, what the company does.

对，好。

Yeah, okay.

所以它既有技能，又能同步。

So it's got skills and they sync.

对。它用的是深色模式。字体我觉得非常小。Skill Sync——基本上就是 logo——和下面第一段之间的差别，字体排印里有很多百分比，这里有些高度我觉得可以再调一点。在我看来它们有点不对劲。而且，这里信息非常密集。很多时候，就像我们刚说 Nstack 那样，一旦你开始抽象一些功能和特性，但又像他们这样保持非常详细，就很难准确理解它到底做什么。你得真正去读所有这些功能，才能大概明白是怎么回事。

Yeah. I mean, it's in dark mode. The fonts are, I would say, very small. The difference between Skill Sync — basically the logo — and the first paragraph below it, there's a lot of percentages in the typography, few heights here that I think we could skew in a little bit. They feel a little off in my opinion. And again, there's a lot of very dense information. And often times, to what we were just saying about Nstack, as soon as you start to abstract some of the functionalities and features but still stay very detailed like they're doing here, it becomes very hard to understand exactly what it does. Like it'll require a lot of actual reading of all of these features to kind of understand what's going on.

我很好奇你怎么看。他们这里基本上是一堆侧边栏标签，试图展示不同的功能。

I'm curious your take on this. So what they've got here is they've got basically a bunch of sidebar tabs that are trying to show off different features.

而你，我觉得你对标签页有一种有趣的思路，因为你做的那些滑块，它们实际上就像标签页，对吧？只是你有一种可供性，知道有多个滑块，并且可以同时看到多个。

And you, I feel like have an interesting approach on tabs because all those sliders that you make, they're effectively like tabs, right? It's just you have the affordance of knowing that there are multiple of them and you can see multiple at a time.

是的。

Yeah.

我觉得很多人在使用这样的标签页时经常陷入的陷阱是，用户通常不会点击所有标签页并探索它们全部。所以，你必须假设隐藏在所有标签页后面的内容，没有人会看到。你如何看待这一点？他们如何鼓励人们更多地探索并获取更多信息，而不是把所有东西都埋在标签页后面？

And I feel like the trap that a lot of people fall into a lot of times with tabs like these is people users usually will not click on all of the tabs and explore them all. And so, you have to assume that whatever is hidden behind all of them, nobody will ever see. How do you think about that? And how can they encourage people to explore this more and get more information rather than burying everything behind tabs?

我一直有一个规则，比如如果你在展示作品，幻灯片上不能超过七行文字。你必须制定几乎像规则和约束一样的东西，来决定你想展示多少功能。举个好例子，我想我会在这里使用一个三列组件。我会把所有功能拿来，压缩这些信息，试着理解 Skill Synch 能为你做的三大事情是什么。你可以做 X、Y 和 Z。这就是你展示的三件事。所有这些都可以点击，它们会引导你进入可能的工作表或视图过渡到更多信息。然后你后面有更多上下文。因为它非常扁平宽泛，你有点像一英里宽但只有一英寸深。你并不真正知道你在看什么。这需要更深入地理解你的功能集，然后更多地将它们浓缩成原则、规则和主要点。然后你可以在每个支柱下汇聚或带来更多信息。这将帮助用户更好地理解网站的流程以及如何导航。这对创始人也有好处。我觉得如果我现在还在经营我的工作室，并且正在与这家公司合作，那会有一个完整的练习，比如，你做的唯一一件事是什么？

There's this rule I always have like you can't put more than seven lines of text on a slide if you're presenting work. Like you have to come up with almost rules and constraints of how many features you want to show off. Like a good example I think I would use a three up component here. I would take all of these features. I would compress this information down and try to understand what are the top three things that Skill Synch can do for you. You can do X, Y, and Z. Those are the three things you show off. All of those are tappable. They lead you into potentially sheets or a view transition into more information. And then you have more context behind. Since it's very flat and broad, you're kind of like a mile wide but only an inch deep. You don't really know what you're really looking at. That's what that requires like a deeper understanding of your feature set and then more condensing those down into principles and rules and main kind of like points. And then you can rally or bring more information under each of those kind of pillars. And that'll help the users understand the flow of the website better and how to navigate it. And it's also better for the founders. I feel like if I was still running my studio and we were working with this company right now, there would be a whole exercise and like well, what's the one thing you do?

是的。

Yeah.

如果是 sinking skills，我们就只谈那个，让它变得非常酷并展示出来，然后让人们尽快使用产品。所以，我的意思是，也很有趣，我们刚刚到达页面底部。

If it's sinking skills, let's only talk about that and make that really cool and show that off and then get people to use the product as quickly as possible. So, I mean it's also interesting like we just hit the bottom of the page.

是的。

Yeah.

页面不是很长。

It's not very tall.

是的。是的。

Yeah. Yeah.

所以，我认为用户对滚动感到舒适。因此，如果有重要信息隐藏在这里的许多功能标签页后面，就把它们展开，让页面更长。没关系。人们可以滚动更长时间，而不是压缩并隐藏一切。

And so, I think users are comfortable scrolling. And so, if there is important information that is hidden behind a lot of these feature tabs here, just break them out and like make the page longer. It's okay. People can scroll longer rather than compressing it and hiding everything.

正是如此。

Exactly.

而我看到很多人现在在使用 AI 工具时陷入的另一个陷阱是，因为很容易创建不同的图像或动画。比如这些实际上是动画，对吧？对于每一个，他们生成一堆，它们都有标志性的特征，比如非常小的文字，以及这种动画，没有人会花时间说：“哦，我们需要一个小点从这些角落移动。”然后编程实现等等。

And the other trap that I see a lot of people falling into with the AI tools now is because it's so easy to, you know, create a different like image or animation. Like these are actually animations, right? For every single one of these, they spit out a bunch of these and they've all got the hallmarks of, you know, the very small text and you know, the this animation like no human would spend the time and go like, "Oh, we need a little dot that goes from these corners." and program that and everything.

但这并不意味着它实际上为他们所做的工作增加了价值。所以我认为这就是当你谈到需要策划和设定标准，确保它传达正确的东西。这里有很多东西，但它们实际上并没有帮助我理解它试图表达的观点。

But it doesn't mean it's actually adding value to what they're doing. And so this I think is when you're talking about you need to curate and set the bar and make sure it's communicating the right things. There's lots of things here, but they don't actually help my understanding of the point that it's trying to make.

我完全同意。我觉得这又是那种你需要工作和雇佣具有正确技能的人来帮助你完成工作的事情。AI 肯定可以帮助你大概把整个网站搭建起来，但当涉及到将这些功能抽象成插图时，与一位以前做过这个并专门从事信息图形设计的插画设计师合作可能不是最坏的主意。也许因为解释得好，这实际上成为 Skill Sink 品牌身份的核心部分。

I fully agree. And I feel like that that's again something where you need to work and hire the right people with the right skill sets to do the to help you do the job. Like AI definitely can help you probably put this whole website together, but when it comes to abstracting these features into illustrations, might not be the worst idea to work with an illustration designer who's done this before and who specialize in information graphics. And maybe that actually becomes because it's well explained just a core part of the Skill Sink brand identity.

嗯。

Mhm.

就像，“哦，这是其中一件事”，我记得几年前与 Gemini 合作，有一个像辫子一样的动画。基本上他们展示模型和 Gemini 拥有的所有不同东西，它们汇聚在一起，构建成这样的螺旋。那个动画基本上只是准确解释了模型的能力。

It's like, "Oh, this is one thing that" I remember working with Gemini a few years ago and there was this animation with like a braid. Like basically they were showing the model and all of these different things that Gemini had and they all came together and built like this helix. And that animation was it basically just explained exactly the capabilities of the model.

嗯。

Mhm.

然后它变成了一条非常细的线，然后写着 Gemini。那是一个很多人花了很长时间制作的动画，他们比我更有才华。后来很多非常优秀的工程师将其转化为网站上的可滚动动画。它就这样推销了它。然后你在产品中，你在使用它，但那是记忆，那段动态只是根植于我的记忆中，真正准确解释了模型在做什么。有时稍微更有艺术性和抽象性实际上会走得很远。我认为是的，对于 Skill Sink，我肯定能看到有一百万种不同的模式和一百万个视觉示例来展示它，你可以更加精心和图形化地设计网站上的展示。所以这就是我对这些人的反馈。

And that turned into a very thin line and then it said Gemini. And that was an animation that a lot of people worked on who are much more talented than me for a very long time. And then later a lot of really good engineers translated that into a scrollable animation for the website. And it just like that kind of sold it. And then you were in the product and you were using it, but that was that was the memory like that piece of motion was just ingrained in my memory and really explained exactly what the model was doing. Sometimes being a little more artistic and abstract actually goes a really long way. And I think yeah, for Skill Sink I could definitely see there's a million different patterns and a million visual examples of how to show that off and you can be a lot more like just craftful and graphical about how you design that on the website. So that would be my feedback to these guys.

酷。谢谢，Skill Sink。

Cool. Thank you, Skill Sink.

非常感谢。

Thank you very much.

好的，接下来我们看 Instaplay。让我们看看。我看到一堆特色内容，我分不清这些是电影还是游戏。所以它说设计一些东西

Okay, next up we got Instaplay. So let's see. So I'm seeing a bunch of featured I can't tell if these are movies or games. So it says design something that

鸟类排序。

Bird sort.

好的，所以这些是我们可以玩的游戏。

Okay, so these are games that we can play.

我想。

I think.

好的。我们怎么玩？有一堆鸟。我们现在有一些声音在播放。让我们也许去

Okay. How do we play? Got a bunch of birds. We got some sound that's playing now. Let's maybe go

让我们从让我们试试别的。

Let's go from let's try something else.

开始按钮。我们在打这只狼，我猜。

Start button. We're fighting this wolf, I guess.

够了。

That's enough.

所以我们这里有一个标注，这很有趣。你知道，它说创建描述你的游戏想法，对吧？当你点击进去时。有趣的是，标题 Instaplay 下面没有文案。所以我们只能自己尝试弄清楚如何在这个页面上定位。

So we've got this call out here which it's interesting. You know, it it says create describe your game idea, right? When you click into it. What's interesting is there was no copy under the title Instaplay. And so we we were up to ourselves to try to figure out how to orient around this page.

是的。

Yes.

我们做的第一件事是我们看到了所有视觉游戏。

And the first thing that we did is we saw all the visual games.

是的。

Yeah.

它们的所有截图。

All the screenshots of them.

是的。

Yeah.

所以我们直接跳到了那里。

And so we jumped right to that.

是的。

Yes.

所以我们错过了这样一个事实：实际上这里的主要目的是让我们能够即时创建自己的游戏。

And so we missed the fact that actually the primary purpose here is for us to be able to just create our own games on the fly.

是的。

Yes.

所以我认为一行文字可以帮助解决这个问题，或者某种标注让提示框更突出。

And so I think a line of text could help with that or some type of call out that makes that the prompt box more prominent.

而这又回到了你之前的例子。

And and again it goes back to your example from from earlier.

就是说，用户落到页面上时，我们最想让他们带走的那一件事是什么？是去探索这个平台上已经创建出来的海量游戏，还是“我们可以创建自己的游戏”这件事？创建自己的游戏实际上会把你带到注册页，而如果用户还没看到自己创建出来的游戏，是没人会去注册的。

It's like, what is the one thing we want to use it to take away when they land on the page? Is it exploring the multitudes of games that have already been created on this platform, or is it the fact that we can create our own games? Creating our own games actually leads you to a sign-up page, which no one's going to do if they haven't seen their created game.

对。

Right.

所以你得先拿出足够的额度，才能把人引导进产品里。这就是获取一个用户的成本。顺便说，这个指标极其重要。这显然就是他们在考虑的东西。但这个获客成本不能一直靠 Google 撑着。

So, you have to come up, you have to cough up enough credits to try to onboard people into the product. That's the cost of acquisition of one user. By the way, that matrix is extremely important. It's probably obviously what they're thinking about. But that cost of acquisition can't be continued with Google.

对。

Right.

它得把我刚才要求的事情完美地产出，而且我得能再试一两次。如果那能行，我可能才会真的愿意去用它。

To be whatever I just asked it to do, it has to spit it out perfectly, and I have to be able to try it one or two more times. And if that works, I might be inclined to actually use it.

你输入一个提示词，提交，然后它把你带到一个要求你登录的页面。

You put in a prompt, you submit it, and it takes you to this screen asking you to sign in.

嗯。

Yeah.

问题在于，我们不知道这东西好不好。所以，比如说，这里其实可以做一个很酷的交互式轮播，每个游戏差不多像一段 10 秒的短片。

And the problem is we don't know if this is good. And so, for example, obviously, where it would also, you could build out a really cool interactive carousel here, and each game has almost like 10 seconds of a reel.

嗯。

Yeah.

而不是像现在这样只看到这些静态素材。我不知道它背后是什么，所以我不知道自己在看什么。这是个很好的例子。你大概可以让 Codex 去接入每一个游戏，录屏，然后把它替换成缩略图，至少可以在悬停状态下这么做。这样也许能给这一切、给这些不同的宇宙带来更多交互性和动态感。我觉得他们想用这些封面表达的就是：“看，用 InstaPlay，你能做很多东西。”

Rather than just seeing these static assets right now. I don't know what's behind it, so I don't know what I'm looking at. This is a great example. You could probably get Codex to tap into each one of these, screen record it, and replace that as the thumbnail, at least maybe on hover states. And it kind of will bring maybe more interactivity and dynamism into all of this and to all of these different universes. I think what they're trying to show with these covers is just like, "Look, with InstaPlay, you can do a lot of stuff."

嗯。

Mhm.

我甚至觉得，如果行动号召是让我们创建自己的游戏、自己当游戏设计师，那我们并不需要能玩所有这些不同的游戏。

I don't even think we need to be able to play all of these different games if the call to action is to create our own game and be game designers ourselves.

对。所以，如果那才是主要的行动号召，那我们就没把它放在第一位。然后你大概应该先替用户把游戏创建出来，让他们能玩，之后如果他们想保存、想以后再回来，或者想分享给别人，那时候再让他们注册、再让他们创建账号。

Right. And so, if that is the primary call to action, that is not what we did first. And then you probably want to actually create the game for people so that they can play with it, and then if they want to save it or come back to it later or share it with anybody, then you got to sign up or then you got to create your account.

还有这里，你看，有“创建”“我的游戏”“为你”“探索”。顺便说，没人知道这些词是什么意思。但如果你点其中任何一个，比如“我的游戏”，它又把你带到注册页。如果你没在这个页面注册，你大概根本不该看到“我的游戏”，对吧？更不该能点进某个东西、然后又被带去登录。“为你”把我带回我刚才在的那个游戏，我不确定这有多大意义。而“探索”基本上就是我们已经在的页面。你在首页就已经在探索了。我甚至觉得那不需要单独做一个按钮。你现在在探索页唯一做到的事，就是把输入框从用户手里拿走了。

And here also, look, so you have create, my games, for you, explore. No one knows what any of that means, by the way. But if you click on any of them, like my games for instance, again it leads you to a sign-up. Like, if you're not signed up to this page, you shouldn't even see my games probably, right? Like, and have the ability to tap into something that then will lead you to sign in again. Um, for you leads me back to the game I was just on, which I don't know if that makes a lot of sense. And explore is basically the page we're already on. You're already exploring on home. I don't even think that needs to be a new button. The only thing you've done now on the explore page is taking the input field away from you.

嗯。

Mhm.

所以现在我没法再创建游戏了。所以在层级结构上有几处，我会真的非常……就是把自己放到一个第一次来到你网站、完全不知道你在做什么、卖什么的人的立场上想一想。

So, now I can't create a game anymore. So, there's a few things there in the hierarchy where I would really think very like put yourself in the position of someone coming to your website for the first time who has no idea what it is that you're building or selling.

嗯。

Yeah.

他们会怎么和这个产品交互？

How do they interact with the product?

还有一点也很有意思，因为你进了那个游戏，我们当时想：“好，这个玩完了，我想回去。”我并没有明显看出要点快进图标才能回首页。我以为它会带我去另一个游戏，或者做点别的。

Also interesting because you went into the game and we were like, "Okay, we're done with this one. I want to get back." It wasn't obvious to me that you do the fast forward icon to get back to the home page. I thought it was going to take me to another game or do something else.

很容易被误解成出错了。

Can be misconstrued as an error really quickly.

对。所以有意思的是，你实际上是点了返回按钮才回去的，因为没有一个明显的“首页”可以回。

Right. And so, it's interesting you actually clicked the back button to get back because there was no obvious home to go back to.

正是。

Exactly.

但这真的很酷。你可以想象，只要让人输入一个提示词，就能创建一个像你刚才做的那个赛车游戏一样的游戏。人们能玩上好几个小时。你只需要把人带到那个价值点上——创建游戏、体验点什么。

But, this is super cool. You can imagine just getting people to put in a prompt and creating a game just like the racing game you were just doing. People could play with this for hours. And you just got to get people to that value of creating the game and experiencing something.

一旦你创建了那个游戏、为自己做出来的东西感到自豪，能把它分享给朋友，对他们来说大概是个很不错的增长手段。我觉得这类工作很有价值。所以，给他们点个赞。

Once you've created that game and you're proud of what you created, being able to share that with your friends is probably a really nice growth hack for these guys. And I think there's a lot of, yeah, there's a lot of value in this kind of work. So, props to them.

嗯。干得不错，Insoflight。好，接下来是 Mintlify，智能体所构建其上的知识基础设施。为初创公司、企业和智能体提供自我更新的文档。

Yeah. Nice job, Insoflight. Okay, next up we have Mintlify, the knowledge infrastructure agents build on. Self-updating documentation for startups, enterprises, and agents.

对。

Right.

好。嗯，我显然对 Mintlify 非常熟悉。它是一家了不起的公司，增长非常快，是大量 YC 公司和其他开发者工具都在用的产品。

Cool. Um, I'm obviously very familiar with Mintlify. Uh, it's an incredible company. Um, it's been growing really quickly and is a product that tons of YC companies and other dev tools use.

嗯。

Yeah.

嗯，对，这个——

Um, yeah, this—

这是个漂亮的网站。

It's a beautiful website.

对，这看起来非常专业。看起来像是值得信赖的东西。

Yeah, this looks very professional. It looks like something that is trustworthy.

很直白。

It's straightforward.

干净。

Clean.

嗯。他们在色彩、字体、间距和行高上的构图非常好。

Yeah. They're very nice compositions with color and typography and spacing and line heights.

对，那我们来深入看看，为什么我们会有这种感觉？这个页面上具体是哪些元素让我们觉得它非常干净、专业，以及我们刚才说的那些。

Yeah, so let's drill down to like why do we feel that way? What are the specific elements of this page that make us feel like this is very clean and professional and all those things that we said.

我觉得是因为它以完全正确的方式做了减法，只展示真正有必要展示的东西。它有一个非常干净的标题，下面一小段文字，“开始使用”按钮非常醒目。它展示了某种仪表盘。你能大致明白，好，文档大概就住在这里，文档大概就在这里更新。背景里的图形实际上是在给氛围加分，而不是减分。它很微妙，在背景里。感觉它在帮你思考，像是某种网络之类的东西。感觉他们对正在构建的东西非常谨慎、用心，它像是某种基础设施智能层。嗯，我知道 logo 墙这种套路，但至少这面 logo 墙做得非常好，这点挺不错。

I think because it's being reductive in exactly the correct ways and it's showing only the things that are actually necessary to show. It's got a very clean headline, a small paragraph underneath, the get started button is very prominent. It's showing off some kind of a dashboard. You can kind of understand, okay, this is probably where the documentation would live and where the documentation would get updated. The graphic in the background is actually adding to the vibe rather than taking away from it. It's subtle and in the background. It feels like it's helping you think, it's some kind of a network or something. It feels like they're very cautious and careful with what they're building and it's kind of some kind of an infrastructure intelligence layer. Um, I know about logo walls, but at least this logo wall is very well put together, which is kind of nice.

上面有很多真正有分量、可信的公司，这建立了很强的社会认同，这似乎就是那种……你知道，我们有一种专业、可信的感觉，而其中一部分是通过看到微软、Anthropic、Ax 和 Coinbase 也是他们的用户来传达的。

It's a lot of really big credible companies, which builds a lot of social proof, which seems to be something like, you know, we have that vibe of like professional, trustworthy, and part of that is communicated via seeing Microsoft and Anthropic and Ax and Coinbase are their users as well.

市场上涌入这么多工具，你需要那种证明点，才能让人觉得：好吧，如果 Spotify 都在用，也许我们真该看看。

With so many tools flooding the market, you need that kind of proof point to be like, okay, well, if Spotify's using it, maybe we should actually look at it.

然后我觉得这是一个很好的例子，他们把 UI 和功能能力抽象成非常连贯、非常有艺术指导的东西，看起来很有趣。我想说，这些卡片上的标题可能有点太小了。如果我现在看所有这些卡片，背景颜色都一样，我几乎一个都没在看。而且他们在背景中重复使用那种编织动画，如果你到处重复使用，它就失去了魔力。所以我实际上会说这里少即是多，标题可以稍微大一点。嗯，是的，这里又有点像我不确定你是否需要那个。放在你现有的设置上很难阅读。

And then I think this is just a great example of like they're abstracting UI and feature capabilities into something very cohesive and something really nice and art directed that feels, you know, interesting to look at. I would say maybe the headlines here for these cards are a little bit too small. Um if I look at all of them right now with the background color being the same, I'm kind of looking at none of them. And they're reusing that braided animation in the background, and that's kind of losing its magic if you keep reusing it all over the place. So, I would actually say less is more here and the headlines could be a little bit larger. Um yeah, again here it's kind of like I'm not sure if you need that. It's very hard to read put on top of your existing setup.

是的，这实际上似乎是一个非常重要的点，你希望人们知道。你可以控制谁有访问权限。你可以在现有设置上构建。但很容易错过它，因为截图占据了更多空间。有这样一个动画把你的注意力从真正重要的标题上引开，而那个标题被埋在底部。

Yeah, and that actually seems like a very important point that you would want people to know. You can control who has access. You can build on top of your existing setup. But it's super easy to miss it because the screenshot takes up a lot more of the space. There's this animation that is drawing your attention away from this headline that is actually really important and buried at the bottom.

没错。然后你必须区分你添加的视觉元素实际上给用户提供了多少信息，以及你可以添加的文案。我认为这里的平衡有点失调，但整体非常漂亮。这些只是好看。这是一个非常容易使用的轮播。我可以滑动浏览。颜色与摄影相匹配。我认为这是人们没有得到足够认可的事情。这很棒，做得非常好。这是曼哈顿。这是蓝天。这是 Coinbase。这是蓝色，这里是一个蓝色的人工制品。滚动浏览和观看的感觉真的很好。

Exactly. And then you have to differentiate between how much and how and like how much information is the visual that you added actually giving the user versus the copy that you could add to it. And that balance I think is a little off here, but overall very beautiful. These are just nice. Like this is a really simple to use carousel. I can swipe through it. The colors are mapped to the photography. I think that's something that people don't get credit for enough. Like this is great and really well done. It's Manhattan. It's the blue sky. It's Coinbase. It's blue it's a blue artifact here. Like that feels really nice to kind of scroll through and see.

品牌化的。

branded.

是的。尽管这些颜色太接近了。所以它们有点，我会在这里用不同的颜色。但整体真的很好。也许像灰色或者

Yeah. Although these colors are too close together. So, they kind of I would have used a different color for this one here. But overall it's really nice. Maybe like a gray or

我可能会用更多 AT&T 蓝，但这张图片我可能会用不同的图片。

I'd probably this maybe more the AT&T blue, but this image I would maybe use a different image.

那可能是对的。是的。是的，但整体我的意思是非常干净，非常非常值得信赖。

That's probably correct. Yeah. Yeah, but overall I mean very clean, very very trustworthy.

各个部分之间也有很多空间。我知道这是你在设计和构建的东西中经常使用的技巧。

There's a lot of space between the sections, too. Which is I know that is a technique that you use a lot on your designs and things that you build.

主页的各个部分基本上是所有子页面的第一章。所以很多时候，当我们为客户设计时，我们会做的是，如果你谈论产品、解决方案、资源和定价，那么这些是主页的四个主要部分，因为显然我们认为这些是最重要的部分。产品功能、我们的解决方案、资源和定价。当你滚动网站时，这四个组件按照从最重要到最不重要的顺序出现，因为滚动深度。就像人们随着页面滚动而离开。所以重要内容显然必须放在顶部。然后每个部分都应该引导我进入那个。所以如果我点击，所以理论上，我会在主页这里有一个完整的产品部分。然后从那里你可以点击进入产品。顺便说一句，产品实际上可能应该有自己的主页，因为产品太多了。但是的，整体设计得很好，很简单。看起来他们花时间和心思制作这个网站，这很高兴看到。

section of the home page is basically the first chapter of all the child pages. So, a lot of the times what we would do when we were designing for clients is like if you are talking about products, solutions, resources, and pricing, then those are the four main parts of your home page because apparently that's what we're deeming the most important parts. The product features, our solutions, the resources, and the pricing. As you scroll through the website, those four components show up in exactly that order from most important to least important because of scroll depth. Like people drop off as they scroll through the page. So important content has to sit obviously at the top. And then each one of these sections should lead me into that. So if I click on So theoretically, I would have had a whole section for product right here on the homepage. And then from there you could click into products. Products, by the way, actually should probably have a homepage itself because there are so many products. But yeah, overall it's well designed and it's simple. Looks like they took time and care to make this website, which is nice to see.

是的，很有趣。它更透气。

Yeah, it's interesting. It's a lot more breathable.

是的。

Yeah.

感觉这里比我们看过的其他一些网站要少一些东西。

It feels like there's less going on here versus some of the other ones that we look at.

仍然有很多内容，但它被间隔开并分布在整个页面上。

There's still a lot of content, but it's spaced out and distributed across the page.

每样东西都有自己的空间，这帮助用户知道在任何时候该关注什么，而不是感觉有很多东西试图吸引他们的注意力。有趣的是你描述说这实际上花了更多时间

its everything has its own space, which helps the user know what to focus on at any one time rather than feeling like there's lots of things that are trying to draw their attention. And it's interesting how you describe that as like this actually took more time

是的。

Yeah.

比那些有很多时间或很多竞争元素的东西，因为实际上需要工作和策划来弄清楚我们真正想要保留的东西。扔掉一切很容易。弄清楚需要编辑掉什么要难得多。

than the things that have lots of time or lots of competing elements because it actually takes work and curation to figure out what are the things that we actually want to keep. It's easy to throw everything. It's much harder to figure out what needs to be edited out.

因为与团队进行这样的对话要难得多。每个人都在竞争。每个人都希望他们的功能或特性出现在页面上，你必须策划并做出决定并减少，这是任何设计师的工作。就像降低复杂性，一次展示一个部分，并以这种方式驱动叙事。这很难做到，但做对了会有回报。

Because that conversation is just much harder to have with a team. Everyone's competing. Everyone wants their functionalities or their features to be on the page and you have to curate and make a decision and reduce, which is the job of any designer. Like reduce complexity and show one piece at a time and drive narrative that way. It's hard to do, but it pays off when done correctly.

是的，这很棒。干得好，Netlify。好的，接下来我们有 Netlify。所以你的用户不读你的文档，你的患者不读你的手册，你的员工不读你的内容。Nullify 将你的文档和想法变成有旁白的动画视频。在几分钟内自己制作，或者让我们的工作室团队为你制作。对于需要更多视频但没时间制作的团队。好的。

Yeah, this is excellent. Great work, Netlify. Okay, next up we have Netlify. So your users don't read your docs, your patients don't read your manuals, your employees don't read your content. Nullify turns your docs and ideas into narrated animated videos. Make them yourself in minutes or have our studio team make them for you. For teams who need more video than they have time to make. Okay.

我想一开始，作为一个字体设计师，我会说有一个标题，有一个段落，下面几乎有一个更小版本的段落，字体大小不同，然后有“预约演示”按钮和“开始免费”按钮。在这个视口中，有 1、2、3、4 甚至 5 种字体大小，忽略所有标志和横幅以及角落里的横幅。从那个角度来看，有太多事情在发生。你可以有一个标题，然后你有段落，你必须把所有重要信息放入那个段落。你不能不断添加标题并让用户阅读所有那些不同的点。

I think right off the bat, being a typography designer, I would say there's a headline, there's a paragraph, and there's almost like a smaller version of the paragraph underneath in a different font size, and then there's the book a demo button and the start free button. There's 1 2 3 4 potentially five font sizes right in the viewport here, disregarding all of the logos and the banner and the banner here in the corner. That It's just a lot going on from that perspective. You can have a headline and then you have the paragraph and you have to put all of the important information into that paragraph. You can't keep adding headlines to it and making the user read all of those different points.

首先跳出来的是标题中的两个占位元素，我觉得这让人迷失方向。

The first thing that jumped out at me is the two placeholder elements in the headline, and I find that to be disorienting.

是的。

Yes.

如果你有一个在变化，那是一回事，因为你可以锚定自己，我们为这类人、这类人和这类人做这个，但有两个元素在变化，就像用户在变化，以及文档或手册之类的。然后听起来它实际上像是视频的东西，

It's one thing if you have one and it's changing cuz then you can anchor yourself on we do this for this type of person and this type of person and this type of person, but with two elements changing it's like the user is changing and the like docs or manuals or whatever. And then it sounds like it's actually like a video thing,

是的。

Yeah.

这是我完全不会从标题中得到的。

which was I would not have gotten from the headline at all.

所以我觉得他们想说的是：“嘿，人们不读这些文档和 PDF 之类的东西，所以你需要视频来让他们关注内容。”但我觉得他们应该正面表达：他们做的视频转化效果更好，而不是用负面说法。

And so I think what they're trying to say is like, "Hey, people don't read these documents and PDFs and stuff like that, so you need videos so that they pay attention to stuff." But I feel like they need to say they do videos that convert better, kind of like the positive of what they do rather than the negative.

他们自己的工作室给 Nullify 做个视频放到网站上，我们先看那个？

Their own studio to make a video of Nullify and put that on the website and we watch that first?

对。这正好证明他们的观点，对吧？人们不会读所有这些，所以

Yeah. It'd prove their point, right? People don't read all of this, so

反正我会想读这些吗？直接给我们看个视频展示你们做什么。

would I want to read any of this anyways? Just show us a video of what you do.

这里有个轮播，我觉得基本上就是展示产品，我们点一下

There's a carousel here that I think just basically shows off the product, so let's click

对。我猜这些是他们的动画示例。

Right. I assume these are examples of their animations.

点不进任何一个。你得用那个图标。这不好。嗯，这张卡片显然应该可以点。

can't click into one of them. You have to use the icon. That's not good. Um this card needs to be tappable, obviously.

嗯。你看着这个就想点进去。嗯

Mhm. You look at this and you want to click into it. Um

每年有成千上万的仓库工人受伤。

Every year, thousands of warehouse workers get injured.

好，所以这像是一个教学动画视频。

Okay, so it's like an instructional animation video.

大多数这类事故完全可以预防，还有警告装置。

Most of those incidents are completely preventable and warning devices.

视频看起来制作精良。不过我们在这里想做的事，有趣的是，这和你之前展示的那些项目里做的很多轮播有关，我正在探索他们的很多作品。

The video looks well made. And the thing that we want to do here though, which is interesting tying back to a lot of the um the carousels that that you've created in those past projects that you showed, is I'm exploring a lot of their work.

对。

Yeah.

当我点进一个，它会全屏，然后我得想，好吧，怎么最小化、怎么关掉？而我真正想要的是让它放大，这样我能看到播放，然后我希望能继续跳到其他视频，因为我想看到他们能创作的深度和多样性。

And when I click into the one, it comes full screen, and then I figure out like, okay, how do I minimize, X this out? And what I really want to do is I want to have it zoom in so I can see it play, and then I want to be able to keep jumping to the other ones cuz I want to see the depth and variety of what they can create.

没错。

Exactly.

而现在这有点难做到。

And it's kind of hard to do that right now.

对。这些都不能点。我没法全屏打开。就像你得用所有这些小按钮。你不能滚动。你不能跳过它们。

Yeah. None of these are tappable. I can't open them up a full screen. It's like you have to like use all of the you have to use all of the um the little buttons here. You can't scroll. You can't skip through them.

对。我希望它放大，不是全宽占据一切，而是大概 90% 左右。

Yeah. I would want it to zoom up, not the full width and take over everything, but like 90% or something.

告诉我发生了什么。然后我可以开始滑动浏览所有内容。也许正下方展示实际的公司。

me what's going on. And then I can start swiping through all of them. And maybe right underneath show me like that actual company.

对。

Right.

也许这些实际上都是案例研究。所以当它们打开时，你可以用非常漂亮的、有层次感的表单打开。就像页面其余部分后退，表单升起，你可以在顶部看到视频，也许还有关于该视频用途的描述。

Maybe these are all actually case studies. So like, as they open up, you could open these up in really nice sheets that with a like a depth. So like the the rest of the the page pushes back, sheet comes up, you can see the video at the top, maybe there's a description of what that video is for.

对。

Yeah.

那家建筑公司是什么，有点案例研究的意思。这几乎可以引导你看到客户故事或成功故事。这些显然是他们在展示过去合作客户的演示。所以应该更聚焦于那些视频，少关注这里的标志横幅广告，标题更简洁，不要在两件同时发生的事情之间跳来跳去。

What's the construction company, bit of a case study. That could also almost lead you to like customer stories or success stories. These are obviously the the demos they're they're showing off of of of past clients that have worked with them. So, there should be more focus on those videos, less I think on on on the um on the logo banner ad here, uh a a conciser headline that doesn't jump around between two things happening at the same time.

对。

Yep.

嗯，而且是的，那

Um And yeah, that

现在我们进入平台部分。

And now we get into the platform.

嗯，没错。现在我们进入

Well, exactly. Now we're getting into the

现在他们在描述，哦对。哦，平台。这里，往上一点。

Now they're describing like, oh yeah. Oh, the platform. Here, go up just a a little bit here.

哦，抱歉。

Oh, sorry.

另一个视频。嗯，对，所以你制作视频，上传文档、博客文章或想法，几分钟内得到带旁白的动画视频。只需聊天即可编辑。我觉得这正是我需要在最顶部看到的。

another video. Um Yeah, so you make the video, upload a doc, a blog post, or an idea, and get a narrated animated video in minutes. Edit it just by chatting. I feel like that's what I need all the way up here at the top.

来解释他们在做什么。

To explain what it is that they're doing.

对。因为一开始，我甚至不知道这是否适合我。所以，他们流失了多少本应是理想客户、却甚至不知道这是为他们准备的人？

Yeah. Because right off the bat, I don't even know if this is for me. And so, how many people do they lose that would be ideal customers, but can't even figure out that this is for them?

给我看产品能做什么。如果我感兴趣，再给我看结果。

Show me what the product does. And if I'm into that, then show me the results.

对。我也注意到这里在劫持滚动。

Yep. I also notice it's it's scroll jacking here.

对。

Yeah.

这让我抓狂。

Which drives me crazy.

我同意。

I agree.

嗯，因为它对我试图进行的滚动感觉响应更差。它需要一段时间才能加速到那个速度，而不是

Um cuz it it feels less responsive to the scroll that I'm trying to do. It it it takes a while to ramp up to the speed rather than

我我我觉得我想在这个播客上花点时间谈谈一般的滚动劫持和网站上的滚动操纵。网站上的平滑滚动是行业灾难，我觉得你应该使用网站的原生滚动，不要阻碍用户与网站内容交互的速度。

I I I think I wanted to I want to take the time here on on this podcast to talk about scroll jacking in general and scroll manipulation on websites. Smooth scrolling on websites is a disaster in the industry, and I feel like you you use the native scroll on websites and don't hinder the speed at which a user wants to interact with the content of your website.

对。

Yep.

这正是我们之前谈到的可中断界面。苹果几十年来一直在这方面开创先河，他们的软件和硬件就是证明。你需要可中断的软件，因为我们的思维模式是可中断的。你可能想着某件事却点了别的东西，你绝不会想让用户进入一个必须平滑滚动或滚动劫持才能浏览内容的环境，因为那是你认为他们感知或消化内容的方式。

That is exactly what we're talking about earlier with interruptible interfaces. Apple has pioneered this for decades, and their software and their hardware is is is proof of that. You want interruptible software because our thought patterns are interruptible. You might think something and click on something else, and you would never want to get a user into in into into a an environment where they have to smooth scroll or scroll jack through the content because that's the way you think they are going to perceive or digest this content.

对。

Yep.

这几乎是一种傲慢的做法。我总觉得我想尽可能不打扰，进入房间时尽可能礼貌。狄德罗总说：“当你走进房间时，要礼貌而安静地进入。”

That's almost an arrogant way of going about it. I always feel like I want to be as as as as as unobstructive as possible and be as as as polite as I enter the room. Diderot would always say, "Enter politely and quietly when you when you walk into the room."

作为用户，这也会，嗯，这不是我们用过的唯一网站。

It it will also as users, um this is not the only website we've ever used.

没错。

Exactly.

我们习惯了在大概几十万、也许几百万个其他网站上滚动。

We're used to scrolling on probably hundreds of thousands, maybe millions of other websites.

在手机上。

on our phones.

对，在手机上，我们习惯了滚动的灵敏度和精确度，当有东西改变这一点时，你得重新调整方向来找到你要找的东西，这就成了干扰。

Yeah, and on phones, and and we get used to the sensitivity and the precision with which we scroll, and when something changes that, it you have to reorient yourself to try to find what you're looking for and it becomes a distraction.

而且它变得迟钝。比如我想暂停在这块内容上，但动画还在播放。所以现在我得用触控板来对抗那个动画，这让我不舒服。我不想要那样滚动。而且这里的点击目标很难，你得点这些很小的按钮。

And it just becomes it becomes sluggish. Like I'm I'm trying to pause on this piece of content, but the animation's kind of still playing. So, now I'm you trying to use the trackpad to counter that animation and it's it's making me uncomfortable. Like I got I I don't I don't want to have to scroll like that. And then since the tap targets here are really difficult, you have to hit these these tiny buttons.

对。

Yep.

嗯，这有点复杂。说到底，他们这个网站上有多个不同的轮播，背后都是视频播放器，打开后是全屏视频播放器，唯一退出的方式是按 Esc 键。

Um it's it's it's a bit complicated. At the end of the day, they just have multiple different carousels on this website, all with video players behind it that open up in a full-screen video player that the only way to exit out is with the escape with the escape button.

嗯，总的来说，视频看起来非常非常好。

Uh overall, the videos seem very very well done.

视频看起来很棒。

The videos seem great.

对，让人们进入这些视频，能看到更多、体验它们并理解背后的案例研究，似乎才是能转化人们的关键。

Yeah, and just getting people into those and being able to see more of them and experience them and understand the case studies behind them seems to be the thing that will convert people.

对。

Yeah.

我认为，如果这能改善 Adidas 或那家建筑公司的健康与安全，那么 Nullify 就做得很好。这就是他们销售的产品。

And I think if this is improving the health and safety of Adidas or that construction company, then Nullify is doing a great job. And that's the product they're selling.

太棒了。谢谢你，Nullify。好的，接下来是 Instinct，今天正在构建月球未来。

Awesome. Thank you, Nullify. Okay, next up we have Instinct, building the lunar future today.

好的。所以，我们有一个月亮。

Okay. So, we got a moon.

我们有“构建月球未来”，还有一个漂浮的卫星。

We've got building the lunar future and we've got some kind of satellite that's floating around.

是的。很好。非常沉浸。

Yeah. It's nice. It's very immersive.

嗯。我觉得可以很肯定地说，这些人在做太空技术。

Mhm. I think it's very safe to say that these guys are working on space technology.

你怎么看出来的？

What gave you that idea?

航空航天技术。所以，已经到位了，值得称赞。

Aerospace technology. So, already there kudos.

我想，回到 AI 世界一下，这是一个很好的例子：你可以很容易地让 LLM 为你制作一个 3D 版本或 WebGL 版本的月亮，放在这个网站上，并且可以用光标交互。这是我可能会添加到这个页面的东西。这两个元素实际上都是我可以用 3D 渲染，然后作为实时对象放在页面上的。现在用 AI 并不是完全不可能。所以，围绕这一点，我会添加一些东西来构建我们称之为“吸睛组件”的东西。所以当你的网站上有一两个组件真正吸引你所有的注意力，真正把你吸引到正在发生的事情中。

I think, to go back into AI world for a second, this is a great example of how you can very easily get an LLM to make you a 3D version or a WebGL version of a moon that you can put on this website that is interactable with the cursor. It's something that I would probably add to this page. Both of these elements are actually things that I would render in 3D and then have as live objects on the page. That's not totally impossible to do now with AI. So, there's something around that that I would add to this to build what we call show stopper components. So when you have one or two components on the website that really take all of your attention and really draw you into what's going on.

是的。我觉得这是一个展示类似东西的绝佳时刻。

Yeah. I feel like that's an awesome moment to show something like that off.

是的。我认为这做得非常好，因为一开始我们就确切知道这是什么。这里的 3D 动画，本来可以只是 2D，本来可以是一张照片。

Yeah. I think this is very well done because right off the bat we knew exactly what this was. And the animation here of showing it in 3D, it could have just been a 2D it could have been a photo.

是的。你知道，他们叠加了，但有些东西吸引了我们的注意力，比如哦，这实际上是他们正在建造的东西。

Yes. You know, that they superimposed but there's something about that that draws our attention to like oh this is actually the thing that they're building.

这里的月亮是背景中的一张照片，所以那是我反应的东西，但是的，你完全正确。字体的使用也很好。我觉得现在很多网站都在一个非常安全、深思熟虑的无衬线字体空间里工作，有勇气尝试在网站上使用衬线字体是一个不错的点缀。我要说的是，关于这一点，标志本身、这里的字体和这里的排版都不同，而且有点竞争。然后下面这些标志里有很多颜色，包括你可爱的标志，我觉得它几乎把太多注意力从实际信息上引开了。在这种情况下，只有一个信息，它很好，很简洁，但你有空间在这里添加一个元内容，也许更多地谈论你的公司做什么以及你正在构建什么。

The moon is a photo here in the background so that's the thing that I was reacting to but yeah, you're totally right. Also nice use of the font. I feel like a lot of the websites right now are working in a very safe considered space with a sans serif and having the courage to try to wield a serif font on the website is a nice touch. I will say for on that note, the logo itself, the font here and this typography here are all different and kind of competing. And then there's a lot of color in the logos down here including your lovely logo and I feel like it's almost drawing too much attention away from the actual message. And in this case, there's only one message it's nice and reductive but you have space to add one more piece of meta content here that maybe talks more about what your company does and what you're building.

是的。嗯，但让我们进一步深入。

Yeah. Um but let's dive further in.

是的，所以现在他们更具体了。Instinct 正在为当今的太空行业建造月球着陆器。所以发射、巡航、着陆。

Yeah, so now they get more specific. Instinct is building the lunar lander for today's space industry. So launch, cruise, land.

是的。我认为这解释了正在发生的事情。

Yeah. I think that's it kind of explains what's going on.

真的很酷，当你悬停时你会看到它。我的意思是，我做的第一个，我真的看不出那里发生了什么。

That's really cool that when you hover over it you see it. I mean the first one I did I couldn't really tell what's happening there.

我不太……这在我看来不太像发射。

I don't really This doesn't really look like a launch to me.

哦，好了。好吧，你只需要多等一会儿。所以也许他们可以更快地达到那个效果。

Oh, there we go. Okay, you just had to sit with it for a while. So maybe they can get to that faster.

快得多。总的来说，注意力持续时间在减少。

Way faster. Attention span in general is decreasing.

就像第二个很酷的地方是，你一悬停它就起飞了。

Like that's what was cool about the second one is as soon as you hover it takes off.

没错。我认为这是一个非常好的反馈。就像你一悬停，这个东西就应该打开。有一种可能，你可以让它们同时播放，因为它们是非常简洁的瞬间。只是发射，只是巡航，只是着陆，它们实际上都可以在非常快速的循环视频中播放，你可能会更快地传达信息，而着陆视频并没有真正传达信息。我不认为每个人都能立即理解那是月亮，然后你慢慢靠近它。我认为你实际上等待的是这个时刻，对吧？你想看到

Exactly. I think that's a very good piece of feedback here. Like the moment you hover over this thing should open up. There's a world where you could have them all play at the same time because they're very concise moments. It's just the launch, it's just cruise, it's just land and they can actually all play in very quick looping videos and you could probably get the point across even faster and the land video it doesn't really get the point across. I don't think everybody immediately understands that's the moon and then you're slowly coming closer to it. I think that what you're actually waiting for is this moment, right? You want to see

是的。是的，就是这样。你看到阴影变大了。

Yeah. Yeah, there you go. You see the shadow getting bigger.

就是这样。这就是我想看到的。

That's it. That's what I want to see.

是的。我甚至不会展示任何

Yeah. I wouldn't even show any of the

是的，应该只是那样。

Yeah, should have just been that.

应该只是这个。应该是这个场景，然后这个，但顶部打开，这就是你在这里需要做的全部。

It should have just been this. It should be that this scene and then this but with the top open and that's all you need to do here.

是的。再次 1 2 3，就像我们三个一样，也不错。在移动端，这很快变成一个不错的轮播。所以很容易将其转化为移动端。再次，原始策略，J 告诉我和我，我们的学派思想总是：你有技术、公司、新闻、职业合并。如果这些是你认为对你的业务重要的东西，那些就是主页上的章节。展示技术，展示公司，展示新闻和职业。不要让我使用顶部的导航。这些都是你可以带入主页的元素。

Yep. And again 1 2 3 like the three of us nice as well. On mobile this really quickly turns into a nice carousel. So very easy to translate this into mobile. Again primal strategy that J tell and me our school of thought on this would always be you have technology, company, news, careers merge. If these are the things that you deem as important for your business, those are the chapters on the homepage. Show off technology, show off the company, show off news and careers. Don't make me use the navigation at the top. These are all elements that you can bring into the homepage.

对。

Right.

从那里使用非常简单的表格，你可以过渡到任何内容，它会让整个事情感觉更容易消化和阅读。但让我们点击一些页面。

And from there using very simple sheets you can just transition into any piece of that content and it'll make that whole thing feel way more digestible and readable. But let's click through some of the pages.

是的，很酷。

Yeah, that's cool.

是的，技术

Yeah, technology

好的，所以我喜欢这个的地方是

Okay, so what I like about this

是的。

Yeah.

它看起来像是真实的视频，所以让我觉得这是真实的。

it looks like it's real video and so it makes me feel like this is real.

我的意思是这是真实的。

I mean this is real.

是的。

Yeah.

它们是真实的。不像一堆渲染图，你知道很难分辨这是真的吗？这只是他们的一个计划吗？而实际上不是，他们真的在做这件事。

They're real. It's not like a bunch of renderings and you know it's hard to tell is this real? Is this just like a plan that they have and it's like no, they're actually doing the thing.

他们正在建造这个。是的。我认为再次很好的例子是，技术部分没有那么多信息。整个视频本可以是主页上的一块内容，上面写着“探索我们的技术”。你点击它，打开一个像这样的新组件，你滚动浏览它，当你滚回来时，你又回到了主页。这种交互模式在这里会很好地工作。

They're building this. Yeah. I think again great example there is on there's not that much information on the technology section. This whole video could have been a piece of content on the homepage that says explore our technology. You tap into it, you open up a new component like this, you scroll through it and when you scroll back out you're on the homepage again. Like that interaction pattern would work really nicely here.

超级酷，你依赖人们点击技术页面才能看到任何这些。

is super cool and you're relying on people to click on the technology page in order to see any of that.

没错。我们在这里的封面图片上有点马虎。我认为有很多事情在发生

Exactly. We're getting a little sloppy here with the cover images here. I think there's a lot of stuff going on with

它与其余页面的质量和风格不匹配。

It doesn't match the quality and the style of the rest of the pages.

不，一点也不。我认为对 Instinct 来说，记住这一点非常重要：你可以在标题中使用衬线字体。

No, not at all. And I think very important for Instinct to remember here you can use the serif for the headline.

这就成了你品牌整体艺术指导中的一个风格元素。你不会把它用在任何正文或段落文字上。那些是无衬线字体。那是无衬线字体。所以这里的这部分信息和这里的这部分信息，我会用 Instrument 之类的字体，或者就用一个普通的无衬线字体，比如 Inter 之类，在这里效果会很好。

That becomes a stylistic element of the overall art direction for your branding. You don't use it for any of the body copy or paragraph copy. Those are sans serif. That's a sans serif font. So this information here and this information here, I would use something like Instrument or just a normal sans serif font like Inter or something that works really well here.

我们刚才在看轮播组件。比如这个轮播不能拖拽。这个轮播不能用触控板滑动。整个轮播只有我点这些按钮才能用。这绝对不是我会——

We were looking at carousels earlier. Like this carousel doesn't drag. This carousel doesn't swipe with the trackpad. This whole carousel only works if I interact with these buttons. That's definitely not the way I would—

你能做这些组件吗？

Can you build these components?

我觉得我的收获是，你得把轮播组件发布出来。

I think my takeaway is you got to release carousel.

其实我们有一个轮播组件套件——对，Prevolus 一直在做——叫 Blossom Carousel。

We have a carousel kit actually that—yes, Prevolus has been working on—called Blossom Carousel.

对。

Yeah.

Blossom Carousel 基本上是一个——这个轮播可以滑动、可以滚动，而且有多种不同的变体和版本。在移动端它会以堆叠形式呈现。这是免费使用的，放在 GitHub 上，所以任何正在看这档节目的创始人或创业者，你们可以——

And Blossom Carousel is basically a—this carousel swipes and scrolls and it comes in a multitude of different variations and versions. It comes as stacks on mobile. This is free to use and on GitHub, so any founders or any entrepreneurs who are watching the show, you can—

对，这很棒。大家都该用这个。你的轮播立刻就会好很多。

Yeah, this is great. Everybody should use this. Instantly your carousels will get way better.

没错。

Exactly.

太棒了。

Awesome.

很棒的直觉。谢谢。

Awesome instinct. Thank you.

干得好，Instinct。

Great work, Instinct.

太棒了。这期 Designer View 就到这里。Marvin，非常感谢你来参加。

Awesome. That does it for this Designer View. Marvin, thank you so much for being on.

非常感谢你们邀请我。能来这里真是太愉快了。待在旧金山很好。这里的能量简直无与伦比。Y Combinator 很棒。这里的办公室太酷了。我特别高兴你们邀请我上节目，能和一些志同道合、就想多看看幕后的人坐在一起，感觉很好。我们聊了一些这方面的工作，谢谢你让我展示一点我的工作流程。看到所有这些公司做出这么多创新的新作品，真是太棒了。

Thank you so much for having me. It's so lovely to be here. It's nice to be in San Francisco. The energy here is just unmatched. Y Combinator is awesome. The office here is sick. I'm so glad that you guys asked me to be on the show, and it's nice to get to sit with like-minded people who just want to look a little bit under the hood. We went for some of that work, and thank you for letting me show a little bit of my workflow. And it's awesome to see all these companies coming up with so much innovative new work.

是啊，能看到你工作的幕后、真正走进你的思路，了解你如何设定标准并不断提升——不只是视觉层面，还有很多交互层面，以及用户实际如何体验你的作品——这真的很棒。非常感谢你和我们分享，这期 Design Review 就到这里。我们下期见。拜拜，各位。

Yeah, well, it was amazing to see the behind the scenes of your work and really get into your mind and how you think about how you set the bar and level it up with not just the visuals, but a lot of the interaction and how users actually experience the work that you do. So thank you so much for sharing it with us, and that does it for this episode of Design Review. We'll see you on the next one. Bye, guys.