新一代全栈设计师：AI 加速实现，设计师把握品质

简要说明Brief Description

Marvin Schwaibold 介绍了 Shopify 的产品设计工作室，以及一套迭代式工作流程，其中运用了 Figma、AI 编码工具和可运行的原型。他先演示了草地着色器和轮播控件，随后评审了一些网站，重点关注层级、动效、渐进式披露和交互便捷性。Marvin Schwaibold discusses the product design studio at Shopify and an iterative workflow using Figma, AI coding tools and working prototypes. He demonstrates grass shaders and carousel controls before reviewing websites for hierarchy, motion, progressive disclosure and ease of interaction.

目录Table of Contents

• 设计流程发生了怎样的变化
  How the design process has changed
• Shopify 产品设计工作室内部
  Inside Shopify's product design studio
• 莫莉，布鲁克林工作室
  Molly, the Brooklyn studio
• 柯林斯书架
  The Collins bookshelf
• 托比的使命：未来需要被设计出来
  Toby's mandate: the future needs to be designed
• 工作室在 Shopify 内部的运作方式
  How the studio works inside Shopify
• Sidekick 建议和新版管理界面
  Sidekick suggestions and the new admin
• 构建……的设计师
  Designers who build
• 将草地重建为着色器
  Rebuilding grass as a shader
• 地形图洞察
  The topographic map insight
• Dialkit：公开变量
  Dialkit: exposing the variables
• 给创始人和设计师的建议
  Advice for founders and designers
• 网站评测 1：NStack
  Website review 1: NStack
• 每个页面一个主要目标
  One primary goal per page
• 网站评测 2：SkillSync
  Website review 2: SkillSync
• 选项卡的问题
  The problem with tabs
• 毫无增益的 AI 插画
  AI illustrations that add nothing
• 网站评测 3：Instaplay
  Website review 3: Instaplay
• 展示游戏，而不是缩略图
  Show the games, not the thumbnails
• 网站评测 4：Mintlify
  Website review 4: Mintlify
• 社会认同，以及何时少即是多
  Social proof, and when less is more
• 将首页各个板块作为章节
  Homepage sections as chapters
• 网站评测 5：Nullify
  Website review 5: Nullify
• 让人们探索这项工作
  Let people explore the work
• 滚动劫持
  Scroll jacking
• 网站评测 6：本能
  Website review 6: instinct
• 发射、巡航、着陆
  Launch, cruise, land
• 技术页面
  The technology page
• 繁花轮播
  Blossom Carousel

设计流程发生了哪些变化How the design process has changed

今天，Shopify 产品设计工作室负责人 Marvin Schwaibold 来到节目中。他将带我们深入了解自己的工作流程，看看幕后是如何运作的，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,

参与者：接下来，我们将看看他如何运用最新的 AI 工具将设计变为现实，然后评审一些观众提交的网站。欢迎收看新一期《设计评审》。Marvin，感谢你来参加。Participant: 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.

参与者：感谢邀请我。Participant: Thank you for having me.

参与者：在聊到你在 Shopify 的工作之前，我很想多了解一下你的工作流程，以及你目前使用哪些工具来进行 AI 设计。Participant: 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 当草稿板，记下自己的一些想法，但很快就会把它们转化成可以实际使用的演示，然后只有偶尔需要排版或向 AI 解释某些东西时，才会回到 Figma。不过现在的工作环境确实更多是使用 Codex 和 Claude Code 这类工具，经常在终端里操作，能更快得到可以在手机或电脑上使用和测试的成果。这就形成了一种非常有趣、仍然高度迭代的循环，但我们确实已经不再那么依赖画布，而是更多地使用各种 AI 工具。Participant: 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 like 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 in 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 推动的，又有多少是由你这个人来完成的？Participant: 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 就非常有能力完成很多我们原本需要做的事情。Participant: 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 like just 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.

参与者：听起来，你所描述的很多工作其实是编辑。Participant: And it sounds like a lot of what you're describing is that your role is actually to be the editor.

参与者：我觉得，我们现在比以往任何时候都更像编辑者了，这挺有意思的。太棒了。我的意思是，这一直都是我们的角色，只不过要做到能够编辑，过去需要我们在 Figma 里做很多手工设计；而现在，这类工作越来越多都能借助 AI 工具加速完成并进一步扩展。Participant: 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 like 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.

参与者：因此，作为人类的你仍然要对最终输出负责，并确保它达到你的标准。Participant: And so, you the human are still responsible for the ultimate final output and making sure that it meets your bar.

参与者：始终如此。Participant: Always.

参与者：但你现在有了这些工具，就能快得多地达到目标。Participant: But you have all these tools now to be able to get there way faster.

参与者：百分之百。我是说，人工智能确实提高了我们所有人的上限，但它不是工匠。它能实现那些我无法手写编出的复杂功能和技术。它会写代码，但它不知道什么好看、什么不好看；这得由我来判断，并引导人工智能朝正确的方向发展。Participant: 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.

参与者：我一直以来都非常欣赏你的作品。Participant: I've been a big fan of your work for a long time.

走进 Shopify 的产品设计工作室Inside Shopify's product design studio

那么，或许先简单介绍一下 Shopify 的产品设计工作室，以及你们在那里具体做什么。So, maybe first just start off and tell us about the product design studio at Shopify and what you guys do there.

参与者：我和一支才华横溢的设计师团队共事。过去一年我们一直在这里，基本上由我们共同负责公司的一项计划，重新设计并改进我们最重要的各类界面。从与 Sidekick 相关的内容——它是我们的 AI 基础设施层，基本上负责管理整个管理后台——到我们称为“绿色应用”的移动应用，以及我们查看和使用的各种管理后台和仪表盘。最近，我们一直在使用工程团队为我们构建的大量全新 AI 基础设施。总之，过去这一年真的令人兴奋。Participant: 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 到现在已经有二十年左右了，对吧？Participant: Yeah, it's actually really interesting cuz Shopify is like two decades old or something at this point, right?

参与者：20岁。Participant: 20 years old.

参与者：20岁，所以我们也是】【。Participant: 20 years old, and so we are

参与者：我想是 21 个，确切地说。Participant: 21, I think, actually.

参与者：是的，我们现在进入了一个新时代。人工智能正在改变很多事情，听起来你们所做的很多工作，实际上都是为了让产品实现现代化、跟上时代步伐。这既涉及设计，也涉及产品本身的体验，对吧？比如，你们产品设计工作室里的设计团队具体负责什么？你们是不是只是在 Figma 里制作画布和设计稿，然后交给工程师，还是说你管理的设计职能实际是怎样的？Participant: 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 开始，包括打磨界面并将其落地到 Web 上；组织中的另一部分，也就是 Shopify 的 Sidekick 团队，则致力于通过聊天来自动化和操控 Shopify 的许多界面，这样你就可以使用聊天、Sidekick 或 AI 基础设施来管理店铺，并自动完成线上商家工作中的许多事务。这两部分几乎算是公司里两个相互矛盾、近乎悖论的部门，但它们配合得非常好。Participant: 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.

所以，你们正在打造非常漂亮的新 UI，同时也在用新 UI 来构建 AI 基础设施和 AI 工作流，这真的令人惊叹。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.

其中很多内容其实都能很好地迁移到移动应用中，也能进一步提升移动端体验。整个过程更具对话感，你可以更多地通过与 Sidekick 交流来管理业务，而不必通过界面操作业务。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.

参与者：是的。Participant: Yep.

莫莉，布鲁克林工作室Molly, the Brooklyn studio

在加入 Shopify 之前，你曾和 Molly 一起打造自己的产品工作室。你们做出了非常出色的动效、动画和交互设计，我一直觉得这些作品特别鼓舞人心。也许你可以给我们展示一些，并聊聊这些灵感从何而来。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 之前，我们经营了大约两年。Participant: Yeah, Molly was the 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.

参与者：那段时间你合作过一些大客户。Participant: And you had some huge clients that you worked with during that time.

受访者：是的，我们和柯林斯、苹果、谷歌合作很多，也和不少规模较小的客户合作。说实话，我们做的项目种类非常广，既有网页设计和产品设计，也为客户的网站制定大量内容策略和信息层级。此外，因为我们是一家小型工作室，所以也能和客户建立非常密切的关系。Participant: 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.

我们会连续很多周每周与客户会面，并在 Molly 利用这些项目，与客户开展高度专注的合作。因此，我们一次从不接超过两三个客户，以便始终保持专注。这里展示的是我们经营工作室期间所做的一些项目片段。We would meet clients weekly for many weeks and use these projects at Molly as like 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.

参与者：不错。这里有很多细节。动画非常自然。而且每次切换屏幕时，后面的渐变和阴影也会随之变化，以匹配背景颜色。我觉得很多人可能不会注意到这一点，但你会凭直觉感觉到这里发生了什么，对吧？Participant: 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 that I think a lot of people maybe wouldn't pick up on, but it's something that you sort of intuitively feel something is happening here, right?

参与者：这个想法基本上是从壁挂电视背后的氛围灯光得到的。我觉得 J Tal 当时还没有 AI，基本上就是复制了视频，让它在背景里模糊起来，这样就能配合屏幕上内容的节奏。效果非常好。我觉得我们……不过在这句话之前，原来只写着“Molly 是一家位于布鲁克林的设计工作室”，底部只有一条渐变色，看起来有点像在振动。Participant: 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 like blur it out in the background so that it would match the rhythm of what's going on the screen. And it works really nice. And I think what we but 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 like vibrating.

感觉就像雷鸣什么的。至少对我们来说，我们一直觉得人们会很自然地往里滚动。所以我们甚至不必把任何作品展示给他们，只要稍微暗示一下就行。然后你往下滚动，就进入了真实内容。其余的就是一些非常漂亮、简洁的轮播图。不过你们可以在这里看到，这是我们工作室做的一些作品。It feels like a thunder or something. And it kind of at least for us it always felt like people were like 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.

我想，你提到的一些模式，我们过去称之为一种系统，也就是我们所说的 primal 系统。它基本上是一种理解和消化网站内容的方式。对我们来说，当客户带着大量网站内容来找我们时，这是一种非常结构化的消化方式。我们帮助他们把这些内容构建成网站上的一个系统，让用户可以探索。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.

参与者：你们有哪些方法可以做到这一点？Participant: What are some of the ways that you accomplish that?

参与者：我是说，我可以简单介绍一下部分工作。Participant: I mean, I can just go through some of the work.

柯林斯书架The Collins bookshelf

这是我们与 Collins 这家代理机构合作完成的一个项目。我想我们在这个网站上合作了一年多。正如你所看到的，当你浏览首页时，首页的每个部分都像一个章节，随着你与网站互动，会引导你进一步探索。这是我最喜欢的部分之一：书架。这里基本上展示了 Collins 的所有案例研究。This was a project we did with 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.

参与者：甚至可以回去再把鼠标悬停在那些元素上。它们弹跳的感觉和你通常看到的不太一样。Participant: Even go back and hover over those elements again. The way they bounce feels different than what you typically see.

参与者：对。对。Participant: Yeah. Yeah.

参与者：说说你是怎么制作这个的。你做这个时没有使用 AI 工具，对吧？这些都是你亲手制作的，是吗？Participant: Talk about how you made that. This was you didn't use AI tooling to do this. You hand crafted these, right?

参与者：是的。嗯，在这个案例中，我想说这很大程度上是设计和工程团队共同协作的成果。我会在 Figma 里把类似这样的界面布局出来，试着弄清楚间距、尺寸、颜色、行距等等。然后我会把它交给像 Jesper 这样的人，由他来处理弹跳动画之类的效果。Participant: 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 还无法可靠地完成这件事的时候——让他只专注于这一种交互？Participant: that matter? Like you have a person who's 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?

参与者：这个问题有很多不同的回答方式，但我觉得对这家工作室来说尤其如此，因为他们自己也做设计。比如说，这是一家品牌设计工作室。我觉得访问网站的客户是在寻找这类隐藏惊喜。他们想知道，如果我聘请这家机构，或者这家机构在打造这样高品质的网站时如此注重细节，那么等我们合作时，他们会在我们的项目里加入什么样的隐藏惊喜？Participant: 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 be and show the level of craft and detail that you can bring to any piece of or any part of the interface.

我们在 Shopify 也力求做到同等程度的用心与匠心。We try to do the same level of care and craft at Shopify.

参与者：谈谈你当时决定将设计工作室卖给 Shopify 并加入他们的过程吧。进入一家大型上市公司、在公司内部领导产品工作室，与之前独立开展工作的经历相比，对你来说有哪些不同？Participant: 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.

托比的使命：未来需要被设计出来Toby's mandate: the future needs to be designed

参与者：托比去年某个时候一开始基本上就说：“我们正在进入一个新时代，而未来需要被设计出来。”基本上就是这样。他说：“我想为未来做设计，我需要聘请优秀的设计师来帮我描绘一幅图景；等我们看到那幅图景，就会知道它是什么样子，然后就可以沿着那条路走下去。”我认为这就是 Shopify 的使命——设计如今显然更加处于前台。这是一个非常坦诚、对自身有清醒认知的组织。它是由创始人主导、以工程为核心的组织，而设计过去并不总是像现在这样发挥作用。Participant: 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 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 that's 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 and that's beautiful to see and that was one of the reasons we wanted to join because we felt 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 I guess that would scroll around the Spencer website.

参与者：对。所以这是一系列不同的挑战。你之前在设计工作室做的工作，是创建一个新网站，或者做一些展示作品的东西，或者参与产品设计之类的。谈谈现在有什么不同。Shopify 有数百万用户，你参与的每一项设计决策和交互都牵涉到大量资金。如今，作为公司内部的设计工作室，你的工作流程是什么样的？你如何与组织中的其他团队协作？又是如何与用户交流的，尤其是这一点？Participant: 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 and 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?

工作室在 Shopify 内部的运作方式How the studio works inside Shopify

参与者：所以我想说，目前我们的工作室只在 Sidekick 内部运作，而 Sidekick 是 Shopify 的 AI 基础设施层。整个团队与设计组织的其他成员合作得非常紧密，这种协作方式非常美妙。我认为，总的来说，这正是这类工作室的运作方式，或者说，是让它们更成功的方式。我以前的职业生涯中也曾身处一些相对孤立的岗位；如果比较孤立，就总是更难融入公司，也更难在公司产生重大影响。我认为目前我们已经深度融入现有的工作流程、时间安排和路线图中。而且，这确实需要大量实验。Participant: 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 like interplay, which is I think in general how these studios work or how this works more successfully. I've been in positions in also 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's and it just it requires a lot of experimentation.

说实话，提升界面对我们来说很容易，因为我们的设计师非常出色，他们会在 Figma 中重新设计界面的部分内容，然后借助 AI，我们就能极快地将其转化为非常具体的原型。Honestly, like up-leveling the interface was easy for us because we've 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.

而且大家都知道，原型比你能写出的任何 PRD 文档都有用得多，简直强上一百万倍。它们会像野火一样在公司里迅速传开。如果 Toby 看到一个他喜欢的原型，我们就可以着手把它做出来。我觉得，关于我们在 Shopify 一直关注的一些 AI 变异相关工作，之后也可以展示其中一部分。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 Shopify, we can show some of that later.

感觉是一样的。我们脑子里有想法，而凭借如今的技术，我们很容易就能把这些想法全部模拟出来并生成原型。过去在 Molly 时，我们做的很多工作都是手工完成的。我们的图纸也是手工设计的。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 buying 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 开发的一些成果吗？Participant: Could you show us some of the work that you guys have been building at Shopify?

Sidekick 建议和新版管理后台Sidekick suggestions and the new admin

参与者：这基本上是对我们当前管理后台体验进行重新设计和改版，包括采用全新的首页设计，并对我们目前正在打造的整个产品进行全面改版。我认为我们目前正在探索的一件更有意思的事，是 Sidekick 和商家之间如何互动。我们有一个概念，就是在首页信息流中展示 Sidekick 的建议。这些建议由我们提供给商家。Participant: 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 suggestion Sidekick suggestions on the home feed. These suggestions are brought to the merchant by us.

我们已经找到了商家可以在其生态系统中，也就是自己的业务体系内采取的行动及其带来的益处，并可以将这些内容展示给用户。用户与这些建议互动时，我们基本上就开启了与 Sidekick 的对话。我们可以直接为用户操作管理后台，并向用户展示所做的更改。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.

所以，我们现在就在这里向用户展示。我们认为你应该重写，或者重新改写产品描述。以下是我们的建议。你可以发布这些更改。基本上，通过与 Sidekick 对话，你就直接操作了自己的商店。这个理念更侧重于：我们能否把 UI 带到用户面前，并融入具体情境，而不是让用户在界面中逐步点击。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 it's the concept is more can we bring UI to the user and into the into it into context versus having the user click through the interface.

归根结底，未来商家可以在主页上花更多时间，把 Shopify 当作仪表板来分派任务并与 Sidekick 互动，还可以让 Sidekick 直接操作店铺。目前你看到的仍然是一个原型环境。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.

这里面有一个开发者 UI 面板。基本上，我们正在把所有这些内容——设计团队正在把所有这些改动、演示和想法——直接融入这个界面，这样我们就可以直接测试，并在此基础上继续构建。这逐渐形成了一种很棒的流程：当某个演示达到我们大致取得共识的阶段后，大家就各自分头行动，构建自己认为能带来价值的版本；然后我们再聚到一起，最终所有内容都整合在同一个演示中，并使用同一种语言。This is there's a dev UI panel inside here and basically we are we're 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.

参与者：是的。Participant: Yeah.

参与者：这是一种分享想法和背景信息的美好方式。Participant: and it's just a beautiful way to share ideas and context.

参与者：你说设计师们正在这里构建这个东西。很多时候，设计师只负责设计，并不负责构建，但在 Shopify 里，你和你的团队会把你们设计的很多东西真正做出来，这样就能测试、做原型，还能在实时数据和真实体验中查看效果。这是把事情做到位、打造有用的产品并确保它足够出色的重要一环。你从在 Figma 里做设计开始，经历了怎样的演变？Participant: 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

参与者：是的。Participant: Yep.

参与者：到现在，你已经不只是进行设计，而是真正把它做出来并推向现实，以便测试，而且整个流程都是你自己完成的。Participant: 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.

打造……的设计师Designers who build

参与者：在这个具体案例中，管理员有一个 playground，我们在里面搭建并进行测试；那不是生产代码，也不能被合并回 Shopify 的主 GitHub 仓库，也就是我们的主代码库。话虽如此，AI 现在确实已经发展到这样的程度：作为设计师，我们有很强的能力，也有充分的条件把任何想法可视化，从而传达我们的构想；在以前，这根本做不到。我们刚才看过 Collins 的网站，我们当时在 Figma 里做的很多设计，现在看起来还是这个样子。Participant: 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. We looked at the at the Collins website earlier a lot of that work in Figma when we worked on it still looks like this.

参与者：嗯。Participant: Mhm.

参与者：你可以放大这里的任何部分，这些都是我们正在设计的高度精细的 Figma 界面，这是一个构思过程。我觉得这是我、Michael Spicer 和 J Tall 一起做这个项目的成果。你可以看到我们不断推进、梳理各种想法并尝试新东西时，设计是如何逐步演变的。这些方案太复杂，成本也太高，不适合用代码来测试。我们现在不想用代码测试这些，因为那需要工程师先看一遍，再替我们把它做出来。Participant: You can zoom into any part here and they're like highly detailed Figma screens that we're designing through and this is an ideation process. I think this is a mixture of me Michael Spicer and J Tall working on this project together and you can just see the evolution of like as we're going through the like as we're going through ideas and like 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.

所以我们会在 Figma 里把所有东西都测试一遍。Figma 就是我们构建一切时使用的试验场。我们先为桌面端构建，然后再将其适配到移动端。在去麻烦工程团队之前，所有这些都必须先在 Figma 里经过长时间的压力测试。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 we were 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 时，很多时候只要画一个很粗略的草图，就能推进得很远。这里有个例子，是我周末一直在做的一个个人项目，我可以稍微详细介绍一下。我想为这个项目做的其中一项内容，是一个 2×3 的概览，展示这些草地研究和我拍摄的这些视频。这里的交互方式是，你可以打开其中任意一个视频，然后向下拖动将它关闭。在模拟器里也是一样的。我把这个交互方式描述给 AI，当时我在用 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, but 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. and the interaction here is you can open up any one of these videos and you can drag down to close them. and 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.

你……这个必须非常迅速地响应，否则你很快就会对这个界面感到非常恼火。所以，我刚才打开 Figma，随手画了一些非常基础、简单的方框。比如，点击方框时，红色就会出现。你可以把它滑走。如果你在滑走它的过程中点击蓝色，蓝色就会出现。You 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 kind of drew out very rudimentary simple boxes like 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 now comes up.

你可以把那个点掉，然后用绿色来做。我觉得这就是一个很好的例子，至少对我个人来说，我现在越来越多地使用 Figma。它更像是一块草稿板，用来梳理想法，然后我把这些想法交给 Codex。我用草稿板，一方面是因为这样更容易把某些东西拆解开来；另一方面，Codex 如果能从视觉上看到它，也很容易把它拆解开来。我觉得它解读那张图的方式，和我解读它的方式差不多。And you can click that away and you do it with green. And I think that's just like a good example of how at least myself personally I'm using Figma more. it's more of a scratch pad to like map out ideas and I give those ideas to Codex. and I use the scratchpad A 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.

至少它理解我在做什么，以及我是如何思考这个动作的。我没法通过文字或语音把它表达清楚，但我可以把它画出来。我认为这里有两点很重要，值得指出。第一，我认为 Codex、所有当前的 AI 软件以及这些模型，都非常擅长创造任何东西。I 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. 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 is 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.

将草地重建为着色器Rebuilding grass as a shader

参与者：对，就在这里给我们演示一下你是怎么做到的，因为，先说清楚，你有一堆图片……Participant: Yeah, just show us how you did that here cuz so to be clear, you had a bunch of images

参与者：以及视频。Participant: and videos.

参与者：以及真实草地的视频。Participant: and videos of actual grass.

参与者：是的。Participant: Yeah.

参与者：然后你想创建一个看起来和它一模一样的着色器，但又能像着色器那样进行控制和运作。能不能谈谈不同的元素，以及你实际上经历了哪些过程，才让它看起来如此逼真？Participant: 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 like the different elements and what you had to go through to actually get that to look lifelike.

参与者：我这里有几张截图。再说一次，这是我如何使用 Figma 的一个很好的例子。所以，我第一次把视频输入 Codex，只是向它介绍了我的项目，以及我想要完成的流程：把视频变成一个着色器。Participant: 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 it my the project and the process that I was 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.

我会打开 ChatGPT，然后把它交给那里的另一个智能体。我把自己在做什么，以及为什么另一个智能体不明白我想要什么，都一五一十地解释给它听。然后 ChatGPT 就帮我理清了自己的思路：比如，你得告诉它光线是从哪里来的、你用到了哪些阴影；也许还可以把图像拆成六个部分，让它分别处理每一部分，然后再把它们拼回去。当我思考这些不同的事情时，我也在试着想，怎样才能把自己的意思表达得非常清楚，让 AI 明白我到底在看什么。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 kind of like 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 kind of thinking about all of these different things like I was trying to come up with how could I become very clear with the with AI and explain to it exactly what it was actually looking at.

所以，我用过的一个技巧是打开 ChatGPT，让它大致呈现出底层结构的地形图。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.

AI，在我逐步查看这个过程时，我感觉它越来越接近了，你能看到它在草叶上绘制了更多像素。AI as I was going through this I was it was kind of getting closer and you could see that you know, it was painting more pixels into in into the grass blades.

地形图洞见The topographic map insight

是的，这些开始有点像一丛丛灌木了，感觉更真实。然后看这边，我当时就想：好吧，现在总算有点进展了。这看起来不再那么糟了。不过我后来多少弄明白了，它没理解下面并不是一层平面，这些其实是一些小山丘。Yeah, these started to look like bushels a little bit and which felt more realistic and then over here we 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 it's not a flat layer underneath. These are little hills.

参与者：对。Participant: Right.

参与者：基本上，我把这些内容重新输入 AI，它就理解了：哦，好吧。所以，这里有一个底层结构和一张地图，上面有不同的深度和高度；如果我能在这些基础设施或整体结构上渲染草地，创建场景就会容易得多。这个方法效果确实很好。你知道，在这个原型参考中，你实际上可以买到一个二元开关，用来打开或关闭草地；你也可以在这里相当充分地调整地形。Participant: Basically, I fed this back into AI and it understood, oh, okay. So, there's a an underlying structure and a map that has different depths and heights and if I can render the grass on top of those 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.

参与者：对。Participant: Right.

参与者：这一切都是前几天午餐时 Josh 告诉我的。他当时大概是说，我们把 DialKit 装进这个演示里吧，因为他看了看这个，说这看起来挺不错，不过你应该看看草叶的长度。我当时就说，哇，好吧，确实如此。所以我问 Codex：“嘿，我们有多少种草叶变体？”它说大约有 217,000 种不同的草叶，但它们之间的差异也就 0.7、0.8 左右。Participant: 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. 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.

所以，不管怎样我都没法得到想要的结果，因为五个提示之前我误解了某件我当时也不知道的事情。Dial kit，帮我梳理一下。不过总的来说，你可以调整其中几个值，它们能帮忙呈现一些效果，比如直观展示我真正想看到的内容；而且如果这里的长度更长，你就可以加入更多风力。这是我想测试的东西，看看风的运动效果能有多夸张。So, I couldn't get to my outcome anyway because I had misinterpreted something five prompts ago that I didn't know about anyway. Dial kit 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 like bring some of this like they help visualize what I really wanted to see and if you know the length here is longer than you can introduce more wind. This was something I wanted to test and see how crazy I could get with the wind movement.

你可以看到它变得有点疯狂。不过，是的，我觉得这只是个小例子，算是一个有趣的小项目，可以试试看用这些工具能做到什么程度。我觉得这些事在 AI 出现之前我做不到。You can see it gets a little wild. But yeah, I think this is just a small example of a little bit of like a fun project just to try and like see how far can you get with the tools. And these are things that I think before AI I couldn't do.

我只是……我可能有过这些想法，但当时不被允许，或者没能力把它们付诸实践。我觉得，总的来说，这就是现在很多设计岗位正在发生的变化。总之，设计师正变得越来越全栈，工程师和产品经理也是如此。各个方向都在发生这种变化。I just I 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 with the design role right now. And anyway like it's designers are becoming more full stack. As are engineers and PMs. It goes in every which way.

参与者：现在没有限制了，对吧？Participant: There's no limitations now, right?

Dialkit：公开这些变量Dialkit: exposing the variables

实际上，这是我们经常看到的一种常见模式：创建原型，然后再创建一些小控件，让你能够控制其中的不同变量，从而轻松地进行测试并把它做好。And actually this is one of the 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.

参与者：是的。Participant: Yeah.

参与者：以前，没人会觉得花时间做这件事值得。你可能只会在代码里摆弄一下变量之类的，直到弄明白为止，然后就觉得可以了。那样会花更长时间，或者你干脆就不会花时间去做。现在，创建一些小型软件工具来控制这些变量、测试各种东西，并把它精确调到理想状态，实在太容易了。Participant: And previously it wouldn't have been worth anybody's time to do that. You would just you know 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.

参与者：是的。Participant: Yeah.

参与者：我猜这就是 DialKit 这个名字的由来。那能不能跟我们多介绍一下 DialKit？它是一款能让你在正在做的项目中轻松创建并调整许多这类变量的产品，对吧？Participant: Which I guess is where the name dial kit 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。他们有一个专门为此准备的小提示框。Participant: 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.

你可以直接把它接入你正在做的任何项目。我还有另一个项目可以快速展示一下。这只是 DialKit 的另一个版本，是我在调整轮播图的那个特定项目中做的。它的灵感来自 Mike Matas。You can just plug it into to 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.

他是 Luv From 的设计负责人，他的作品集轮播就是这样运作的。我想看看这个轮播的交互有多么细腻：你可以把一个作品往下拖，松手时，能量就会从那个作品向外扩散，几乎像涟漪一样，并触发它与左右其他作品之间的碰撞效果。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.

现在构建这个侧边面板，基本上帮我深入了解了我自己用 91 条提示词拼出来的那个弗兰肯斯坦怪物；它还能帮你调整一些非常重要的参数，比如 pull boost，意思是我往下拖得越快，增强效果就越强。你可以稍微试着调整一下这个开关。它不能让人觉得太吓人或太强烈，否则整个系统的感觉就会不对劲。我知道什么时候感觉不对，但和聊天来回沟通就是行不通。你得始终能够查看这类数值。Building out this the side panel here right now helped me basically look under the hood of my own of the 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.

参与者：我们在这里看过的很多项目，以及你所描述的很多事情，似乎都只是把标准定得高得不切实际，而现在我们有了工具，能够比过去快得多地达到这个标准。Participant: 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.

参与者：是的。Participant: Yes.

参与者：那么，设计师，甚至非设计师的角色是什么呢？Participant: And so, what is the role of the designer and maybe even non-designers?

给创始人和设计师的建议Advice for founders and designers

他们应该如何看待设计？是啊，很多观看这个节目的人可能是早期初创公司的创始人，觉得自己算是工程师，但完全没有设计细胞；也可能是设计师，正在琢磨自己能不能创业，或者能不能真的把产品做出来。我已经很习惯在 Figma 里做设计，然后把它交给别人了——也许你们过去也经历过这种情况。他们应该如何看待自己，才能提升运用 AI 的能力，做出更高质量的设计？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 也不会生我的气。要是我让工程师这么做，他们可能早就抓狂了。所以我给大家的建议就是——听起来可能有点傻，但就是多摆弄摆弄这些工具。Participant: 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.

比如，你可以直接进去描述你想让它做什么。看到结果后，别轻易放弃。只要告诉它，这不是你设想的样子。给它发一个你特别喜欢轮播动画的网站，或者发一张你从 Savee 或 Cosmos 上保存的截图，展示某个你觉得特别漂亮的设计。给它看一套配色，让它照着开始为你创作，然后就这样来回沟通，和这个工具一起逐步打磨你的想法。Like you can go in and just describe what you want it to do and when you see a result, like 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 of from save it or cosmos of something that you 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 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.

参与者：是的，这个建议很不错。Participant: Yeah, that's great advice.

参与者：我们要不要评测几个网站？好啊，我很乐意。开始吧。Participant: Should we review some websites? Yeah, I'd love to. Let's do it.

参与者：好吧，我们开始吧。Participant: All right, let's do it.

参与者：当然。Participant: For sure.

参与者：首先登场的是 Nstack。Participant: First up, we've got Nstack.

网站评测 1：NStackWebsite review 1: NStack

那么，我们来看看。好，那么。So, let's see. Okay, so

参与者：这是 Nstack，你唯一需要的 AI 工作空间。一款强大的智能体、一个直观的桌面工作空间，以及处理任何任务所需的所有工具。好了。Participant: 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.

参与者：我是说，我想一开始就可以说，它有一点特别好的地方，就是显然它整体上是在模拟桌面环境。所以感觉就像你在使用桌面电脑一样，我觉得你可能可以用这些功能并探索一番。嗯，我是说，我觉得它好就好在，你基本上已经在他们的产品里了，而且正在使用他们的产品。Participant: 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 ex- explore these. And yeah, I mean, you I think what's nice about this is like you're basically just in their product already, and you're using their product.

参与者：嗯。Participant: Yeah.

参与者：参与者：不过，我觉得我有点困惑，不知道该用它来做什么。它就像是一个 AI——你唯一需要的 AI 工作空间。它是一台桌面设备，配备了你处理任何任务所需的所有工具。它的用途这么广泛，很难弄清楚我应该用它来做什么。也许从字面上说，你什么事都能用它来做，但我觉得有时候，如果能明确告诉用户点击这里之后该做什么，会很有帮助。Participant: Participant: 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 it 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?

参与者：是啊。我的意思是，就像你刚才说的，从视觉角度来看，现在的信息量确实非常大，对吧？侧边栏里有很多内容。这里还有聊天记录，可以上下滚动查看。然后这里似乎还有某种界面，但同时也像是主要的消息区域。Participant: 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

参与者：嗯哼。Participant: Uh-huh.

参与者：Nstack 就在这儿。我很难弄清楚应该先关注什么。我在学校学习字体设计时，德国平面设计教授总会说，我们做海报时，这张海报没有起到引导作用。它不够有引导性。意思是，这张海报现在没有任何东西能吸引我的注意力。也就是说，我看着它时不知道该做什么，Participant: 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,

参与者：是的。Participant: Yeah.

参与者：基本上，我不知道该先看什么。Participant: basically. I don't know what to look at first.

参与者：嗯。嗯，我要点击这些图标吗？我要进入那个类似 Slack 的界面吗？我要进入聊天界面吗？Participant: Yeah. Yeah, do I click these icons? Do I go in the Slack-like thing? Do I go in the chat interface?

参与者：我是在这里通过文字和聊天交流吗？Participant: Am I texting and talking to the chat here?

参与者：是的。Participant: Yeah.

参与者：我为什么叫马克？Participant: Why am I called Mark?

参与者：嗯，我想你是马克吧。Participant: Yeah, you're Mark, I guess.

参与者：我现在是马克。我觉得这里的反馈挺好。我可能会把这里的一些杂乱内容折叠起来，让重点更多放在介绍和标题上，以及我希望用户读到并记住什么？Participant: 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?

参与者：是的。Participant: Yeah.

参与者：也许用一种简单的方式快速演示一下这个工具或软件产品，会非常重要。不过至少，它……你知道，它很有奇趣，也有点复古的感觉，这挺好的。Participant: 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 you know, there's a it's very whimsical and feels kind of retro, which is nice.

每个页面只设定一个主要目标One primary goal per page

参与者：是的，通常总会有——或者说应该有——一个明确的目标，比如主要目标、主要 KPI，或者你希望用户访问网站时完成的主要事项。我不确定这里的目标是什么。也许是开始使用，也许是联系这位客服。但不管是什么，其他太多事情都在吸引你的注意力，让你偏离他们希望用户完成的主要目标。也许“开始使用”按钮是主要的 CTA，但他们这里还有其他这些按钮。Participant: 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

参与者：是的。Participant: Yeah.

参与者：那些更靠中间的，看起来和那些按钮一模一样。所以现在有好几个按钮颜色相同，分别写着……对，像是“通用工程”“营销”和“开始使用”。他们想让我们先重点关注哪一个？Participant: 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 上，感觉确实更像是，我们为那些书——那一摞书——感到自豪，也想把它展示出来。而这正是网站的核心，其中有很多视觉设计工作。Participant: 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 is a lot of the visual work.

我觉得有一种简单的方法可以进入那个页面，而且你可以在那里花很多时间，因为它很容易使用。作为 Nstech，我会——我当时会——我会问自己：我能围绕哪一件事凝聚大家，让大家关注并采取行动？如果他们最后只记住一件事，也比试图同时做所有事情要好。这大概就是这里正在发生的事，也会延续到下一件事。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 Nstech, I would be I was 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 to next thing.

有很多事情都在争相吸引注意力。There's a lot of things screaming for attention.

参与者：是的。Participant: Yes.

参与者：这与逐步披露信息恰恰相反。Participant: It's the opposite of progressively disclosing information.

参与者：是的。或许从积极的角度来看，我觉得他们做得不错的一点是，试图让你一上来就进入产品。我猜这确实就是产品的实际运作方式。是啊。他们没有试图先向你介绍产品，然后让你点一堆东西、注册之类的，而是想着：“如果用户开始使用产品就是那个让他们恍然大悟的时刻，那我们就尽可能早地让用户进入产品。”不过，我们可能还是觉得需要多一点背景信息，才能弄清楚我们具体该在这里做什么。Participant: 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 Yeah. and they're not trying to, you know, 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.

参与者：同意。Participant: Agree.

参与者：N stack。谢谢。好的，我们来看看 Skill Sync。Participant: N stack. Thank you. All right, let's take a look at Skill Sync.

网站评测 2：SkillSyncWebsite review 2: SkillSync

免费的本地优先 Mac 应用，让你的记忆和技能在每个智能体和队友之间延续。Free local-first Mac app that carries your memory and skills across every agent and teammate.

参与者：这不错。是的。我是说，至少我觉得这家公司是做什么的很清楚。Participant: That's nice. Yeah. I mean, at least it's clear I think what the company does.

参与者：嗯，好。Participant: Yeah, okay.

参与者：是的。Participant: Yeah.

参与者：所以它具备技能，而且这些技能会同步。Participant: So it's got skills and they sync.

参与者：是的。Participant: Yeah.

参与者：是的，我的意思是，它是深色模式。我觉得字体非常小。Skill Net 的标志和下面第一段之间，字体排版里有很多百分比数值。有几处高度我觉得可以稍微调整一下。我个人觉得它们有点不太协调。而且，信息还是非常密集。Participant: Yeah, I mean, it's in dark mode. the fonts are I would say are very small. The difference between Skill Net as 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 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.

参与者：嗯。Participant: Mhm.

参与者：关于我们刚才提到的 N stack，很多时候，一旦你开始对某些功能和特性进行抽象，但又像他们这里这样保留很多细节，就会很难确切理解它的作用。你得真正花很多时间阅读这些功能，才能大致弄明白它是怎么回事。Participant: and often times to what we were just saying about N stack, it's actually 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.

参与者：我很好奇你对此怎么看。他们这里基本上有一堆侧边栏标签页，想要展示不同的功能。我觉得你处理标签页的方式挺有意思的，因为你做的那些滑块其实就像标签页，对吧？只不过你能直观地知道有多个滑块，而且可以一次看到多个。Participant: 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 cuz 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.

参与者：是的。Participant: Yeah.

参与者：我觉得，很多人在使用这种标签页时经常会陷入一个误区：人们——用户通常不会点击所有标签页，把它们都浏览一遍。所以，你得假设藏在这些标签页后面的内容，没有人会看到。你怎么看这个问题？还有，怎样才能鼓励人们多探索这些内容、获取更多信息，而不是把所有东西都藏在标签页后面？Participant: 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 what How can they encourage people to explore this more and get more information rather than burying everything behind tabs?

制表符的问题The problem with tabs

参与者：我一直有条这样的规则：如果你要展示作品，一张幻灯片上的文字不能超过七行。你得为自己设定一些规则和限制，比如要展示多少项功能。我觉得这里可以用一个三栏组件作为很好的例子，把这些功能都放进去。Participant: 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.

我会把这些信息精简一下，试着弄清楚 Skill Synch 能为你做的三件最重要的事。你可以用它做 X、Y 和 Z。这三点就是你要展示的内容，而且都可以点击。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 like 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 an a whole exercise and like well, what's the one thing you do?

参与者：是的。Participant: Yeah.

参与者：如果是下沉技能，那我们就只谈这个，把它做得特别酷，展示出来，然后尽可能快地让大家开始使用产品。所以，我是说，这也挺有意思的，我们刚好滚到了页面底部。Participant: 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.

参与者：嗯。Participant: Yeah.

参与者：它不是很高。Participant: It's not very tall.

参与者：嗯。嗯。Participant: Yeah. Yeah.

参与者：所以，我觉得用户习惯滚动页面。如果有重要信息被藏在这里这么多功能标签页后面，那就把它们展开，让页面变长一些也没关系。人们宁愿多滚动一会儿，也不希望内容被压缩起来、什么都看不到。Participant: 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.

参与者：没错。Participant: Exactly.

毫无增益的 AI 插画AI illustrations that add nothing

参与者：我还看到很多人现在使用 AI 工具时会掉进另一个陷阱，因为你知道，制作一张不同的图片或者一段动画实在太容易了。比如说，这些其实都是动画，对吧？它们每一个都会生成一大堆这样的东西，而且都有一些明显特征，比如文字特别小，还有这种动画效果。没有人会花时间去想：“哦，我们需要一个小圆点从这些角落移动过去。”然后再把它编程实现，诸如此类。Participant: 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.

参与者：但这并不意味着它真的为他们正在做的事情增添了价值。所以我觉得，这就是说到你需要进行筛选、设定标准，并确保它传达的是正确的信息。这里有很多内容，但它们并没有真正帮助我理解它想要表达的观点。Participant: 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 品牌形象的核心部分。Participant: I fully agree. And I feel like 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.

参与者：嗯。Participant: Mhm.

参与者：就像是，“哦，这是我记得几年前和 Gemini 合作时遇到的一件事。”当时有个动画，里面好像是一条编织带。基本上，他们展示了这个模型以及 Gemini 拥有的各种能力，这些能力汇聚到一起，构成了一个螺旋结构。那个动画基本上就是把模型的各项能力解释得一清二楚。Participant: 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.

参与者：嗯。Participant: Mhm.

参与者：然后它变成了一条很细的线，接着上面出现了 Gemini。这个动画是很多比我有才华得多的人花了很长时间制作的。后来，又有很多非常优秀的工程师把它转化成了网站上的可滚动动画。就这么一下，它就把这个东西卖出去了。Participant: 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.

然后你进入产品并开始使用它，但我记住的就是那段动态效果——它深深印在我的记忆里，也非常清楚地解释了模型在做什么。有时候，更艺术化、更抽象一点，反而能起到很大的作用。我觉得，对于 Skill Sink，我完全能想象出无数种不同的模式和视觉示例来展示它；你也可以更讲究设计、更具图形感地呈现它，设计它在网站上的样子。And then you were in the product and you were using it, but 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 of how you just how you design that on the website.

这就是我对这些人的反馈。So that would be my feedback to these guys.

参与者：太好了。谢谢你，Skill Sink。Participant: Cool. Thank you, Skill Sink.

参与者：非常感谢。Participant: Thank you very much.

参与者：好，接下来是 Instaplay。我们来看看。Participant: Okay, next up we got Instaplay. So let's see.

网站评测 3：InstaplayWebsite review 3: Instaplay

所以我看到一堆精选内容，分不清这些是电影还是游戏。然后它说设计一个……So I'm seeing a bunch of featured I can't tell if these are movies or games. So it says design something that

参与者：鸟类分类。Participant: Bird sort.

参与者：鸟类分类。Participant: Bird sort.

参与者：好，所以这些是我们可以玩的游戏。Participant: Okay, so these are games that we can play.

参与者：我认为。Participant: I think.

参与者：好。我们怎么玩？有一堆鸟。现在有声音在播放。我们不如开始吧。Participant: Okay. How do we play? Got a bunch of birds. We got some sound that's playing now. Let's maybe go

参与者：我们换个方向吧，试试别的。Participant: Let's go from let's try something else.

参与者：开始按钮。我们大概是在跟这只狼搏斗。Participant: Start button. We're fighting this wolf, I guess.

参与者：够了。Participant: That's enough.

参与者：所以这里有个提示，这挺有意思的。你知道，上面写着“创建——描述你的游戏创意”，对吧？点进去之后，有意思的是，Instaplay 这个标题下面没有任何文案。所以我们只能自己摸索，想办法弄清楚这个页面该怎么用。Participant: So we've got this call out here which it's interesting. You know, 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 were up to ourselves to try to figure out how to orient around this page.

参与者：是的。Participant: Yes.

参与者：我们做的第一件事就是看到了所有的视觉游戏。Participant: And the first thing that we did is we saw all the visual games.

参与者：是的。Participant: Yeah.

参与者：所有关于他们的截图。Participant: All the screenshots of them.

参与者：是的。Participant: Yeah.

参与者：于是我们直接进入了那个环节。Participant: And so we jumped right to that.

参与者：是的。Participant: Yes.

参与者：所以我们忽略了一个事实：这里的首要目的其实是让我们能够随时创建自己的游戏。Participant: 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.

参与者：是的。Participant: Yes.

参与者：所以我认为，一行文字或某种提示可以起到帮助作用，让提示框更加醒目。Participant: 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.

参与者：这又回到了你之前举的例子。我们希望他们打开页面时，最先注意到的是什么？是探索这个平台上已经创建的各种游戏，还是了解我们也可以创建自己的游戏？创建自己的游戏实际上会把你带到注册页面，但如果他们还没看到自己创建的游戏，没人会去注册。Participant: And again it goes back to your example 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.

参与者：对。Participant: Right.

参与者：所以，你得拿出——你得掏出足够的额度，尝试把用户引入产品。这就是获取一个用户的成本。顺便说一下，这个矩阵非常重要。这显然很可能是他们正在考虑的事情。但这种获客成本不能靠 Google 持续下去。Participant: So, you have to come up you have to cough up enough credits for to try to like 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 continue with Google.

参与者：对。Participant: Right.

参与者：它必须完美地完成我刚才让它做的事，而且我得能再试一两次。如果那样行得通，我可能就会愿意真的……Participant: 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

参与者：实际使用它。Participant: to actually use it.

参与者：你输入提示词并提交后，就会进入这个要求你登录的页面。Participant: you put in a prompt, you submit it, and it takes you to this screen asking you to sign in.

参与者：是的。Participant: Yeah.

参与者：问题在于我们不知道这是否是好事。Participant: And the problem is we don't know if this is good.

展示游戏，而不是缩略图Show the games, not the thumbnails

于是And so

参与者：比如，显然，你也可以在这里打造一个非常酷的交互式轮播，每个游戏都有差不多 10 秒钟的短视频片段。Participant: 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 like a reel.

参与者：是的。Participant: Yeah.

参与者：与其现在只是看到这些静态素材，我其实不知道它们背后是什么，所以也不知道自己在看什么。这就是个很好的例子。你大概可以让 Codex 逐个打开这些内容，录下屏幕，然后把录屏替换成缩略图，至少可以在悬停状态下这样做。这样或许能让这一切以及这些不同的……领域都更具互动性和动态感。我觉得他们想通过这些封面展示的就是：“看，有了 InstaPlay，你能做很多事情。”Participant: 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 recorded, 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 like 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."

参与者：嗯。Participant: Mhm.

参与者：我甚至觉得，如果行动号召是让我们自己创作游戏、成为游戏设计师，那我们就没必要会玩所有这些不同的游戏。Participant: 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.

参与者：对。所以，如果那是主要的行动号召，那就不是我们最先做的事。然后，你可能确实想先为用户创建游戏，让他们可以玩；之后，如果他们想保存游戏、稍后再回来继续玩，或者分享给其他人，就得注册或创建账户。Participant: 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.

参与者：还有这里，你看，有“创建”“我的游戏”“为你推荐”“探索”。顺便说一句，没人知道这些都是什么意思。但如果你点其中任何一个，比如“我的游戏”，又会跳转到注册页面。要是你还没注册这个网站，可能根本就不该看到“我的游戏”，对吧？Participant: 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 game 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. 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.

参与者：嗯。Participant: Mhm.

参与者：所以，现在我没法再创建游戏了。层级结构上有几处，我会特别认真地想一想：设身处地地想想那些第一次来到你的网站、完全不知道你在开发或销售什么的人。Participant: 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.

参与者：是的。Participant: Yeah.

参与者：他们如何与产品互动？Participant: How do they interact with the product?

参与者：这也挺有意思的，因为你进入了游戏，而我们当时想的是：“好吧，这个玩完了，我想回去。”我当时没看出来，点快进图标就能回到主页。我还以为它会带我进入另一个游戏，或者做点别的什么。Participant: 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.

参与者：很容易迅速被误解为错误。Participant: can be misconstrued as an error really quickly.

参与者：对。所以挺有意思的，你居然点击了返回按钮才回到上一页，因为当时没有明显的主页入口可以返回。Participant: 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.

参与者：正是如此。Participant: Exactly.

参与者：不过，这真的太酷了。你可以想象一下，让大家输入一个提示词，就能创建出一款游戏，就像你刚才玩的赛车游戏一样。人们可以玩上好几个小时。你只需要让大家体验到创作游戏和亲身感受游戏乐趣的价值。Participant: 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.

参与者：一旦你创建了那个游戏，并且为自己的作品感到自豪，能够把它分享给朋友，对他们来说可能真是个很棒的增长黑客策略。我觉得这类工作确实很有——对，确实很有价值。给他们点赞。Participant: 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。Participant: Yeah. Nice job, Insoflight.

网站评测 4：MintlifyWebsite review 4: Mintlify

好，接下来是 Mintlify，智能体赖以构建的知识基础设施。为初创公司、企业和智能体提供自动更新的文档。Okay, next up we have Mintlify, the knowledge infrastructure agents build on. Self-updating documentation for startups, enterprises, and agents.

参与者：对。Participant: Right.

参与者：太棒了。我显然对 Mintlify 非常熟悉。这是一家了不起的公司，发展速度非常快，而且是众多 YC 公司和其他开发者工具都在使用的产品。Participant: Cool. I'm obviously very familiar with Mintlify. it's an incredible company. it's been growing really quickly and is a product that tons of YC companies and other dev tools use.

参与者：嗯。Participant: Yeah.

参与者：对，这个……Participant: Yeah, this

参与者：这是一个很漂亮的网站。Participant: It's a beautiful website.

参与者：是的，这看起来非常专业，像是值得信赖的东西。Participant: Yeah, this looks very professional. It looks like something that is trustworthy.

参与者：这很简单。Participant: It's straightforward.

参与者：干净。Participant: Clean.

参与者：干净。Participant: Clean.

参与者：是的。它们的配色、字体排版、间距和行高都设计得很好。Participant: Yeah. They're very nice compositions with color and typography and spacing and line heights.

参与者：是的，那我们深入探讨一下，为什么我们会有这种感觉？这个页面有哪些具体元素，让我们觉得它非常简洁、专业，符合我们刚才提到的所有特点？Participant: 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.

参与者：我认为这是因为它以恰到好处的方式做了精简，只展示了真正有必要展示的内容。它有一个非常简洁的标题，下面是一小段文字，“开始使用”按钮也十分醒目。它展示了某种仪表盘。你大致能明白，文档大概会放在哪里，以及会在哪里更新。Participant: 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 would the documentation would get updated.

背景中的图形实际上是在增添氛围，而不是破坏氛围。它很微妙，处于背景中，让人觉得它像是某种网络之类的东西。感觉他们在打造这个东西时非常谨慎、周全，像是在构建某种基础设施智能层。The graphic in the background is actually is 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.

我知道这种满是 Logo 的墙，不过至少这面墙布置得很用心，这倒挺不错的。I know about logo walls, but at least this logo wall is very well put together, which is kind of nice.

参与者：有很多规模很大、值得信赖的公司，这带来了很多社会认同感。感觉这也营造出一种专业、可信赖的氛围；其中一部分是因为人们看到微软、Anthropic、Ax 和 Coinbase 也都是他们的用户。Participant: 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 this 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.

社会认同，以及少即是多的时刻Social proof, and when less is more

参与者：市面上涌现了这么多工具，你需要这样一个有说服力的案例，让人觉得，好吧，既然 Spotify 在用，也许我们确实该了解一下。我觉得这就是一个很好的例子：他们把 UI 和功能能力抽象出来，整合成一个非常协调、设计精美且富有艺术指导感的整体，看起来也很有意思。我觉得这些卡片上的标题可能有点太小了。现在我看着它们，背景颜色又都一样，结果反而一张都没看进去。他们还在背景中重复使用那种编织状动画，如果到处都这么用，它也就没那么神奇了。Participant: 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. 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. 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 kind of braided animation in the background, and that's kind of losing its magic if you keep kind of reusing it all over the place.

所以，我其实会说这里少即是多，而且标题可以再大一点。是的，这里也是，我不太确定你是否需要那个。So, I would actually say less is more here and the headlines could be a little bit larger. 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.

参与者：是的，这确实像是一个非常重要、你会希望大家了解的要点。你可以控制谁有权访问，也可以基于现有配置继续构建。但人们很容易忽略这一点，因为截图占据了更大一部分空间。这个动画会分散你的注意力，让你看不到底部那条其实非常重要的标题。Participant: 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.

参与者：没错。然后你得……然后你得区分，比如说你添加的视觉元素实际上向用户传达了多少信息，以及你可以配上的文案能传达多少信息。我觉得这里两者的平衡稍微有点不太对，不过整体非常漂亮。这些都很不错。Participant: Exactly. And then you have to just and then you have to differentiate between like 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 these are 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.

这真棒，做得非常好。这是曼哈顿。这是蓝天。这是 Coinbase。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.

参与者：带有品牌标识。Participant: branded.

参与者：是的。不过这些颜色有点太接近了。所以这里这个我可能会用另一种颜色。但总体来说真的很不错。也许用灰色或者……Participant: 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 蓝色的，不过这张图片我可能会换一张。Participant: I'd probably this maybe more the AT&T blue, but this image I would maybe use a different image.

参与者：这可能是对的。是的。是的，但总的来说，我觉得非常干净、非常值得信赖。Participant: That's probably correct. Yeah. Yeah, but overall I mean very clean, very trustworthy.

参与者：各个部分之间的留白也很多。我知道这是你在设计和制作东西时经常使用的一种技巧。Participant: 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.

将首页各个板块作为章节Homepage sections as chapters

参与者：主页中的一个部分基本上就是所有子页面的第一章。所以，我们为客户做设计时，很多时候会这样做：如果你要介绍产品、解决方案、资源和定价，那么这四项就是主页的主要内容，因为显然我们认为它们是最重要的部分。也就是产品功能、我们的解决方案、资源和定价。随着你向下滚动网站，这四项内容会严格按照从最重要到最不重要的顺序出现，因为这与页面滚动深度有关。Participant: 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 in to 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.

参与者：是啊，这挺有意思的，透气多了。Participant: Yeah, it's interesting. It's a lot more breathable.

参与者：是的。Participant: Yeah.

参与者：感觉这里的内容比我们看的其他一些例子要少。Participant: It feels like there's less going on here versus some of the other ones that we look at.

参与者：内容仍然很多，但分散在页面各处，间隔也比较宽松。Participant: There's still a lot of content, but it's spaced out and distributed across the page.

参与者：每样东西都有自己的空间，这有助于用户在任何时候都知道该把注意力放在哪里，而不会觉得有很多东西都在试图吸引他们的注意力。有意思的是，你把它描述成这样：这实际上花了更多时间。Participant: 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

参与者：是的。Participant: Yeah.

参与者：相比那些需要花很多时间或包含许多相互竞争元素的东西，因为要弄清楚我们真正想保留什么，实际上需要投入精力并进行筛选。把所有东西都扔进去很容易，难得多的是弄清楚哪些内容需要删掉。Participant: 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.

参与者：因为和团队进行这样的对话要困难得多。每个人都在竞争，都希望自己的功能或特性出现在页面上，而你必须筛选、做出决定并删减——这就是设计师的工作。也就是降低复杂度，一次展示一部分，并以此推动叙事。这很难做到，但做对了就会很有成效。Participant: 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's it pays off when done correctly.

参与者：是的，这太棒了。干得好，Netlify。好的，接下来是 Netlify。Participant: Yeah, this is excellent. Great work, Netlify. Okay, next up we have Netlify.

网站评测 5：NullifyWebsite review 5: Nullify

所以，你的用户不看文档，你的患者不看手册，你的员工不看内容。Nullify 能把你的文档和想法变成配有旁白的动画视频。几分钟就能自己制作，也可以交给我们的工作室团队代劳。适合那些需要制作的视频多到没时间亲自动手的团队。好吧。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 种字号，先不考虑所有的标志，以及角落里的横幅。从这个角度来看，内容实在太多了。你可以放一个标题，然后放一段正文，而且所有重要信息都得塞进这段正文里。Participant: 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 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.

参与者：最先映入我眼帘的是标题中的两个占位元素，这让我感到有些困惑。Participant: The first thing that jumped out at me is the two placeholder elements in the headline, and I find that to be disorienting.

参与者：是的。Participant: Yes.

参与者：如果只有一个因素在变化，那是一回事，因为你可以据此确定方向：我们是为这类人和那类人做这个。但如果有两个因素在变化，就像是用户在变，文档、手册之类的也在变。这样听起来其实更像是视频相关的东西，Participant: 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, 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,

参与者：是的。Participant: Yeah.

参与者：这一点我光看标题根本不会知道。所以我觉得他们想表达的是：“嘿，人们不会读这些文件、PDF之类的东西，所以你们需要做视频，这样他们才会关注这些内容。”但我觉得他们应该说他们制作的视频转化效果更好，这样突出他们所做事情的积极一面，而不是强调消极的一面。Participant: which was I would not have gotten from the headline at all. 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 的视频，放到网站上，然后我们先看这个？Participant: their own studio to make a video of Nullify and put that on the website and we watch that first?

参与者：是啊。这就证明了他们的观点，对吧？人们不会把这些都读完，所以……Participant: Yeah. It'd prove their point, right? People don't read all of this, so

参与者：我干吗要读这些内容呢？直接给我们看一段你们做什么的视频就行。这里有一个轮播图，我觉得基本上就是用来展示产品的，那我们点开看看。Participant: would I want to read any of this anyways? Just show us a video of what you do. The There's a carousel here that I think just basically shows off the product, so let's click

参与者：对。我想这些是他们动画作品的示例。Participant: Right. I assume these are examples of their animations.

参与者：没法点进其中一个。你得用那个图标。这不太好。显然，这张卡片应该可以点按。Participant: can't click into one of them. You have to use the icon. That's not good. this card needs to be tappable, obviously.

参与者：嗯。你看着这个，就会想点进去。参与者：每年都有数千名仓库工人受伤。Participant: Mhm. You look at this and you want to click into it. Participant: Every year, thousands of warehouse workers get injured.

参与者：好吧，所以这就像是一段教学动画视频。Participant: Okay, so it's like an instructional animation video.

参与者：其中大多数事故完全可以预防，而且涉及警示设备。Participant: Most of those incidents are completely preventable and warning devices.

参与者：这段视频看起来制作精良。Participant: The video looks well made.

让人们探索这项作品Let people explore the work

不过，我们在这里想做的事情很有意思，它也呼应了你在之前展示的那些项目中制作的许多轮播图：我正在探索他们的很多作品。And the thing that we want to do here though, which is interesting tying back to a lot of the carousels that you've created in those past projects that you showed, is I'm exploring a lot of their work.

参与者：是的。Participant: Yeah.

参与者：当我点开其中一个时，它就会全屏显示，然后我就得琢磨：好吧，我要怎么缩小？怎么把它关掉？而我真正想做的是把它放大，这样我就能看到它播放，然后还能继续跳到其他内容上，因为我想看看它们能创作出多么丰富多样的作品。Participant: 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.

参与者：没错。Participant: Exactly.

参与者：而且现在要做到这一点有点困难。Participant: And it's kind of hard to do that right now.

参与者：是啊。这些都点不了。我没法把它们全屏打开。感觉就像你必须用这里所有的小按钮。你不能滚动，也不能跳着看。Participant: 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 little buttons here. You can't scroll. You can't skip through them.

参与者：是的。我希望它能放大一些，但不要占满整个宽度、覆盖所有内容，大概占 90% 之类的就好。Participant: Yeah. I would want it to zoom up, not the full width and take over everything, but like 90% or something.

参与者：让我知道这是怎么回事。然后我就可以开始一个个滑过它们。也许就在正下方显示实际的公司。Participant: 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.

参与者：对。Participant: Right.

参与者：也许这些其实都是案例研究。比如说，打开它们时，你可以把它们以很精致的卡片形式展开，而且带有一定的层次感。页面的其余部分会向后退，卡片则浮现出来；你可以在顶部看到视频，也许还有一段视频用途的说明。Participant: 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 rest of 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.

参与者：是的。Participant: Yeah.

参与者：这家建筑公司是怎么回事？这有点像一个案例研究，也几乎可以引出客户故事或成功案例。这些显然是他们展示的过往客户与其合作的演示内容。所以，我认为应该更多关注这些视频，而少关注这里的徽标横幅广告；标题也应该更精简，不要在两件同时发生的事之间来回切换。Participant: 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 demos they're showing off of past clients that have worked with them. So, there should be more focus on those videos, less I think on the logo banner ad here, a conciser headline that doesn't jump around between two things happening at the same time.

参与者：是的。Participant: Yep.

参与者：嗯，是的，那个……Participant: And yeah, that

参与者：现在我们来谈谈这个平台。Participant: And now we get into the platform.

参与者：嗯，正是。现在我们开始谈到……Participant: Well, exactly. Now we're getting into the

参与者：现在他们在描述，比如说，哦，没错。哦，那个平台。这里，再往上挪一点点。Participant: Now they're describing like, oh yeah. Oh, the platform. Here, go up just a little bit here.

参与者：哦，抱歉。Participant: Oh, sorry.

参与者：另一个视频。嗯，你制作视频，上传文档、博客文章或一个想法，几分钟内就能得到一段配有旁白的动画视频。只要聊天就能编辑。我觉得这正是我最优先需要的。Participant: another video. 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.

参与者：解释他们正在做什么。Participant: To explain what it is that they're doing.

参与者：是啊。因为一开始，我甚至都不知道这是不是适合我的。所以，他们会流失多少理想客户——这些人甚至都没弄明白这是不是为他们准备的？Participant: 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?

参与者：给我看看这个产品的功能。如果我感兴趣，再给我看看结果。Participant: Show me what the product does. And if I'm into that, then show me the results.

参与者：没错。我也注意到这里有滚动劫持。Participant: Yep. I also notice it's scroll jacking here.

参与者：是的。Participant: Yeah.

参与者：这让我很抓狂。Participant: Which drives me crazy.

滚动劫持Scroll jacking

参与者：我同意。Participant: I agree.

参与者：因为感觉它对我尝试进行的滚动操作没那么灵敏。它需要一段时间才能加速到相应的速度，而不是……Participant: cuz it feels less responsive to the scroll that I'm trying to do. It takes a while to ramp up to the speed rather than

参与者：我想我原本想……我想借这个播客的时间，聊聊滚动劫持以及网站上的滚动操控。网站上的平滑滚动在整个行业里简直是一场灾难。我觉得应该使用网站的原生滚动，不要妨碍用户按照自己想要的速度与网站内容互动。Participant: I think I wanted to I want to take the time here 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 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.

参与者：是的。Participant: Yep.

参与者：这正是我们之前谈到可中断界面时所说的。苹果几十年来一直走在这方面的前沿，他们的软件和硬件就是证明。我们需要可中断的软件，因为我们的思维模式本身就是可中断的。你可能刚想到一件事，就点了别的东西；我们绝不希望把用户置于这样一种环境中：他们必须平滑滚动，或者被滚动劫持着浏览内容，因为你以为他们会以这种方式感知或消化这些内容。Participant: 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 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 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.

参与者：是的。Participant: Yep.

参与者：这几乎算得上是一种傲慢的做法。我总觉得自己应该尽可能不妨碍别人，进屋时也要尽可能礼貌。狄德罗总是说：“走进房间时，要礼貌而安静地进来。”Participant: That's almost an arrogant way of going about it. I always feel like I want to be as unobstructive as possible and be as polite as I enter the room. Diderot would always say, "Enter politely and quietly when you walk into the room."

参与者：作为用户，这也会……这并不是我们使用过的唯一网站。Participant: It will also as users, this is not the only website we've ever used.

参与者：没错。Participant: Exactly.

参与者：我们已经习惯在数十万、甚至数百万个其他网站上滚动浏览了。Participant: We're used to scrolling on probably hundreds of thousands, maybe millions of other websites.

参与者：在我们的手机上。Participant: on our phones.

参与者：是的，而且在手机上，我们已经习惯了滚动时的灵敏度和精准度。一旦有什么改变了这一点，你就得重新适应，努力找到自己要找的东西，这就会变成一种干扰。Participant: Yeah, and on phones, 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.

参与者：然后它就变得、变得很卡顿。比如我想停在这段内容上，但动画好像还在播放。所以现在我在试着用触控板来抵消那个动画，这让我觉得很不舒服。我就是不想那样滚动。再加上这里的可点击区域很难点，你得去点这些很小的按钮。Participant: And it just becomes it becomes sluggish. Like 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 making me uncomfortable. Like I got 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 tiny buttons.

参与者：是的。Participant: Yep.

参与者：这有点复杂。归根结底，他们只是在这个网站上放了多个不同的轮播，每个轮播后面都有视频播放器；点击后会在全屏视频播放器中打开，而退出的唯一方式是按 Esc 键。Participant: 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 button.

参与者：总体而言，这些视频看起来制作得非常出色。Participant: overall, the videos seem very well done.

参与者：这些视频看起来很棒。Participant: The videos seem great.

参与者：是的，让人们参与到这些活动中，让他们能看到更多这样的案例、亲身体验并了解背后的案例研究，这似乎才是促使人们转变的关键。Participant: 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.

参与者：是的。我认为，如果这能改善阿迪达斯或那家建筑公司的健康与安全状况，那么 Nullifysting 就做得非常出色。而这就是他们销售的产品。Participant: Yeah. And I think if that's if this is improving the health and safety of Adidas or that construction company, then Nullifysting is doing a great job. And that's the product they're selling.

参与者：太棒了。谢谢你，Nullify。好，接下来是 Instinct。Participant: Awesome. Thank you, Nullify. Okay, next up we have Instinct.

网站评测 6：直觉Website review 6: instinct

今天就开始建设月球未来。好吧。那么，我们有一颗月亮。building the lunar future today. Okay. So, we got a moon.

参与者：我们有Participant: We've got

参与者：建设月球的未来，而且我们还有某种在周围漂浮的卫星。Participant: building the lunar future and we've got some kind of satellite that's floating around.

参与者：是啊。很不错。沉浸感很强。Participant: Yeah. It's nice. It's very immersive.

参与者：嗯。Participant: Mhm.

参与者：我认为可以很肯定地说，这些人正在研发太空技术。Participant: I think it's very safe to say that these guys are working on space technology.

参与者：是什么让你有了这个想法？Participant: What gave you that idea?

参与者：航空航天技术。首先，这已经很不错了。我想，回到 AI 领域来说，这是个很好的例子：我觉得你可以很轻松地让 LLM 为你制作一个类似 3D 版或 WebGL 版的月球，把它放到这个网站上，还能用光标与之互动。这是我可能会加到这个页面上的功能。Participant: Aerospace technology. So, already there kudos. I think you know, to go back into like AI world for a second, this is a great example of I think you can very easily get an LLM to make you kind of like a 3D version or a WebGL version of a moon that you can put on this website that kind of is interactable with the cursor. It's something that I would probably add to this page.

这两个元素实际上都是我会用 3D 渲染，然后作为页面上的实时对象呈现的东西。现在借助 AI 做到这一点也并非完全不可能。所以，我会围绕这个加入一些内容，构建我们称之为“吸睛组件”的东西。比如网站上有一两个组件，能真正吸引你全部的注意力，让你深深沉浸在正在发生的事情中。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 I would that I add to this to build a we call them show stopper components. So like when you have one or two components on the website that really like take all of your attention and like really draw you into what's going on.

参与者：是的。Participant: Yeah.

参与者：我觉得那真是个展示这种东西的绝佳时刻。Participant: I feel like that's a that's an awesome moment to show something like that off.

参与者：是的。我觉得这做得非常好，因为一开始我们就准确地知道这是什么。而且这里用动画以 3D 的形式展示出来，也可以只是 2D 的，或者一张照片。Participant: Yeah. I think this is very well done because right off the bat we knew exactly what this was. And the animation here of like showing it in 3D, it could have just been a 2D it could have been a photo.

参与者：是的。Participant: Yes.

参与者：你知道，他们把它们叠加在了一起，但其中有些东西会吸引我们的注意，让我们觉得，哦，这其实就是他们正在构建的东西。Participant: You know, that they superimposed but there's something about that draws our attention to like oh this is actually the thing that they're building.

参与者：这里背景中的月亮是一张照片，所以这才是我刚才针对的东西，不过你说得完全没错。字体用得也很不错。我觉得现在很多网站都在一个非常稳妥、审慎的范围内设计，用的都是无衬线字体；敢于尝试在网站上使用衬线字体，确实是个不错的点。顺着这个话题，我想说的是，标志本身、这里的字体以及这里的排版各不相同，感觉有点彼此冲突。Participant: 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 like 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.

参与者：是的。Participant: Yeah.

参与者：但我们还是进一步深入探讨吧。参与者：是的，所以现在他们说得更具体了。Participant: but let's dive further in. Participant: Yeah, so now they get more specific.

发射、巡航、着陆Launch, cruise, land

Instinct 正在为当今的航天产业打造月球着陆器。由此实现发射、巡航、着陆。Instinct is building the lunar lander for today's space industry. So launch, cruise, land.

参与者：嗯。我觉得就是这样，这多少解释了现在发生的事情。Participant: Yeah. I think that's it's it kind of explains what's going on.

参与者：鼠标悬停在上面时就能看到，这真的很酷。我的意思是，我做的第一个项目里，我不太看得出来那里发生了什么。Participant: 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.

参与者：我不太……这看起来真的不像是一次发布。Participant: I don't really This doesn't really look like a launch to me.

参与者：哦，好了。行，你只是得先和它相处一会儿。所以也许他们能更快做到这一点。Participant: Oh, there we go. Okay, you just had to sit with it for a while. So maybe they can get to that faster.

参与者：快多了。总体而言，注意力持续时间正在缩短。Participant: Way faster. Attention span in general is decreasing.

参与者：我觉得第二个很酷的一点是，你鼠标一悬停上去，它就启动了。Participant: Like that's what was cool about the second one is as soon as you hover it takes off.

参与者：没错。我觉得这是一条非常好的反馈。比如，把鼠标悬停在这个东西上时，它就应该展开。也可以让它们同时播放，因为每段内容都很简短。Participant: 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 in 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

参与者：对。对，就是这样。你看，影子越来越大了。Participant: Yeah. Yeah, there you go. You see the shadow getting bigger.

参与者：就是这样。这正是我想看到的。Participant: That's it. That's what I want to see.

参与者：是的。Participant: Yeah.

参与者：我甚至不会展示其中任何一个……Participant: I wouldn't even show any of the

参与者：对，本来应该就是那样。Participant: Yeah, should have just been that.

参与者：本来就应该只有这个。应该是这个场景，然后这个，不过要把顶部打开，这里只需要这样做就行了。Participant: 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.

参与者：是的。Participant: Yep.

参与者：再来一次，1、2、3、3、3，像我们三个人这样，也挺不错的。在移动端，这很快就能变成一个不错的轮播图。所以把它转换成移动端的样式非常容易。再说一次，J、Tell 和我对此的基本策略，也就是我们的思路，一直都是：你有技术、公司、新闻、职业发展这些栏目。如果你认为这些内容对你的业务很重要，那它们就应该成为首页上的几个章节。展示技术，展示公司，展示新闻和职业发展。别让我去用顶部的导航栏。这些都是可以放到首页上的元素。Participant: And again 1 2 3 3 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.

参与者：对。Participant: Right.

参与者：然后从这里开始，借助非常简单的表格，你就可以过渡到内容中的任何部分，这会让整个内容更容易消化和阅读。不过，我们来点击浏览一下其中几页。Participant: And from there using very simple sheets you can just transition into any pieces any piece of that content and it'll make that whole it'll make this whole thing feel way more digestible and readable. But let's click through some of the pages.

参与者：嗯，不错。Participant: Yeah, that's cool.

参与者：是啊，科技。Participant: Yeah, technology

参与者：好吧，所以我喜欢这个地方的是俺去也Participant: Okay, so what I like about this

参与者：是的。Participant: Yeah.

技术页面The technology page

参与者：它看起来像是真实的视频，所以让我觉得这是真的。Participant: it's it looks like it's real video and so it makes me feel like this is real.

参与者：我的意思是，这是真的。Participant: I mean this is real.

参与者：是的。Participant: Yeah.

参与者：它们是真实存在的。不是一堆效果图，你知道，很难判断这到底是不是真的？这只是他们的一个计划吗？不是，他们确实在做这件事。Participant: 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.

参与者：他们正在打造这个。是的。我觉得这里再次有一个很好的例子：技术板块的信息并不多。整段视频完全可以作为首页上的一条内容，标题可以是“探索我们的技术”。你点进去，就会打开这样一个新的组件，然后往下滚动浏览；滚回去时，就又回到了首页。这种交互模式在这里会非常合适。Participant: 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.

参与者：是Participant: is

参与者：太酷了，而且你还得指望人们点击“技术”页面才能看到这些内容。Participant: super cool and you're relying on people to click on the technology page in order to see any of that.

参与者：没错。我们这里处理封面图片有点马虎。我觉得这方面有很多事情正在发生……Participant: Exactly. We're getting a little sloppy here with the cover images here. I think there's a lot of stuff going on with

参与者：它与其他页面的质量和风格不一致。Participant: It doesn't match the quality and the style of the rest of the pages.

参与者：不，完全不是。我觉得 Instinct 在这里要记住的一点非常重要：标题可以使用衬线字体。这会成为品牌整体艺术指导中的一种风格元素。但正文或段落内容都不要使用衬线字体。Participant: No, not at all. And I think very important for Instinct to remember here you can use the serif for the headline. 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.

那些是无衬线字体。这是一种无衬线字体。所以这里的这些信息，还有这里的这些信息，我会用类似 Instrument 这样的字体，或者普通的无衬线字体，比如 Inter 之类的，这里用起来效果很好。我们之前看过轮播图，像这个轮播图就不能拖动。Those are sans serif. That's a sans serif font. So these this information here and this information here I would use something like instrument or just like a normal sans serif font like a like an 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 you can you build these components.

花朵轮播Blossom Carousel

参与者：我觉得我的结论是，你得发布轮播内容。Participant: I think my takeaway is you got to release carousel

参与者：我们确实有一个轮播组件套件，没错，Prevolus 一直在开发，名为 Blossom Carousel。Participant: We have a carousel kit actually that Yes, Prevolus has been working on called Blossom Carousel.

参与者：是的。Participant: Yeah.

参与者：而 Blossom Carousel 基本上就是一个轮播组件，可以滑动和滚动，并且有许多不同的变体和版本。在移动设备上，它会以堆叠的形式呈现。它可以免费使用，代码托管在 GitHub 上，所以所有正在观看节目的创始人或创业者，你们可以……Participant: 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

参与者：是啊，这个太棒了。大家都应该用这个。你的轮播图马上就会变得好得多。Participant: Yeah, this is great. Everybody should use this. Instantly your carousels will get way better.

参与者：正是如此。Participant: Exactly.

参与者：太棒了。Participant: Awesome.

参与者：很棒的直觉。谢谢。Participant: Awesome Instinct. Thank you.

参与者：干得漂亮，Instinct。太棒了。设计师视图的内容就到这里。Marvin，非常感谢你参加。Participant: great work Instinct. Awesome. That does it for this designer view. Marvin thank you so much for being on.

参与者：非常感谢邀请我来。能来到这里真的很开心。很高兴来到旧金山。这里的氛围确实无与伦比。Y Combinator 太棒了，这里的办公室也酷毙了。我很高兴你们邀请我来参加节目，能和志趣相投、想稍微深入了解幕后情况的人坐在一起，感觉真好。我们也做了一些这方面的工作，我想，感谢你们让我展示一下自己的工作流程。看到这么多公司不断推出如此创新的新成果，也真是太棒了。Participant: Thank you so much for having me. it's so lovely to be here. It's nice to be in San Francisco. It's just like yeah, the energy here is unmatched. Y Combinator is awesome. The office here is sick. I like I'm so glad that you guys asked me to be on the show and it's just 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 I think yeah, 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》到此结束，我们下期再见。大家再见。Participant: 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.