界面设计中的非凡关怀：打造病毒式入门体验

在设计和构建界面的过程中，展现“非同寻常的关怀”是什么样子的？所有这些细节都在向你传达：Josh 真的很在意设计、在意这个体验。这建立了信任，建立了感知价值，你对这个产品的好感度也会增加，因为它用起来比你预期的稍微好一点或不同一点。多走一步就是在告诉你的用户：我重视你，重视你的时间，我在乎你。你如何与 AI 协作来打磨所有精妙的工艺细节？

What does it look like to demonstrate uncommon care in the way that you design and build an interface? All of these details communicate to you, Josh really cares about design or about this experience and that builds trust, that builds perceived value, your affinity to this product increases because it works just a little bit better or differently than you expected to. Just going the extra mile is communicating to your user like I value you, your time and I care about you. How do you collaborate with AI to nail all the finer details of craft?

我认为我们现在都应该努力推进的是——既然我们有工具帮我们走得更远、更快，能探索更多表面区域，我们就应该把它们用在这些事情上。所以，与其创造更多的范围，对吧？我们如何把真正必要的有限范围，执行到一个人们可能从未见过的水准？

What I think we should all be trying to push towards now that we have tools that help us go further and we can get there faster and we can explore more surface area and we should use them for things like this. So instead of creating more scope, right? How do we take the limited amount of scope that is really essential and just execute it to a bar that folks maybe have never seen before.

欢迎来到 Dive Club。我是 Ridd，这里是设计师永不停止学习的地方。今天的嘉宾是 Josh Puckett，他花了近二十年时间设计 Wealthfront、Dropbox 等产品，并帮助了数十家初创公司。最近他发布了 Interface Craft，这是一个关于他一路学到的“非同寻常的关怀”设计知识的资料库。所以我请他今天与我们分享其中一些想法。这是一场非常实用的对话，有很多屏幕共享，我想先让他带我们看看新手引导流程，因为那真的是世界级的设计。

Welcome to Dive Club. My name is Ridd and this is where designers never stop learning. Today's episode is with Josh Puckett who spent nearly two decades designing products like Wealthfront, Dropbox and helping dozens of startups. And recently he released Interface Craft, which is a library of everything that he's learned along the way about designing with uncommon care. So I asked him to share some of those ideas with us today. It's a super practical conversation with a lot of screen sharing and I wanted to start by having him walk us through the onboarding flow because it is truly world-class design.

如果我在营销一门关于“非同寻常的关怀”的课程，真正要多走一步，真正要发挥我们可以创造和表达自己的原创性，那么让新手引导感觉特别就很重要，对吧？所以我就想到了借书证这个主意。比如，如果我给每个人一张借书证，他们可以定制或签名，自己拿走？那感觉就像一种交换：酷，预购了这个还没有任何内容的东西，然后很棒，你得到一个小纪念品。我脑子里的另一件事是：我如何占领设计圈 Twitter？如何以一种独特的方式病毒式传播？显然，其他人在新手引导方面也做过一些事情，比如 Arc 浏览器或当年的 Dropbox。很多新手引导体验会给你一些纪念品，但我还没见过任何真正以我想要的方式“占领”的。所以这里有一个组合：我设计东西，但同时也允许你以签名的形式表达自己。所以，完美。

If I'm marketing a course about uncommon care, really to go the extra mile, really trying to lean into the originality that we can create and express ourselves with, it was important that onboarding feels special, right? So that's where I came up with this idea of a library card. Like, what if I gave everybody a library card that they could customize or sign, take away for themselves? That would feel like a trade of like, cool, pre-buy this thing that there's really no content for and then great, you get a little token. The other thing in my mind was like, how do I take over design Twitter? Like how does this go viral in a way that feels unique? And there are obviously aspects of onboarding that other folks have done like Arc browser or Dropbox back in the day. Many onboarding experiences give you some token, but I haven't seen any really kind of take over in the way that I want it to. And so there's a combination here of me designing things, but then also allowing you to express yourself in the form of signature. So, perfect.

这个流程是：你从 Stripe 过来，然后你会看到这个，对吧？对大多数人来说，他们看到这条消息。我想为那些我认识的人做点事，实际上我给他们写了一张小小的个性化便条。所以万一他们买了这个并登录了，他们会看到类似这样的东西。这是另一个例子：酷，我现在有 AI 帮忙，可以写 50 条消息给我认识的人。这是最有趣的部分，我想：哦，是的，所有这些和我共事过的人，影响过我、教过我的人。一开始并不是这样的。当我第一次探索时，我想：如果只有五张卡片，你可以选一张然后签名，怎么样？显然这个原型超级粗糙。没关系。我在这里想弄清楚的是机制：这样摆弄卡片感觉好吗？还是感觉有点局限？我不喜欢的一点是，它传达出只有五张不同的卡片可选。我有更多颜色的想法，但感觉不够探索性。可摆弄性是我试图注入整个产品的一个属性。比如有些东西感觉有触感，你可以移动它们，可以选择它们。发票是一张真正的纸，如果你想要可以展开。所以这个感觉不太对。我的意思是，它们其实很有趣，你可以看到我开始在卡片本身上探索这些生成式图形。但最后我决定：它应该是一个无限画布。一旦你进来，你可以向任何方向滚动。只有 14 种颜色组合，这有点多，但当你这样呈现时，感觉就像：好的，酷。是的，我想滚动并挑选一个。哪个适合我？每个人都有适合自己的，对吧？有经典款，好吧，你是设计师，选黑色。或者，酷，我想要更鲜艳一点的，对吧？所以，这是另一个例子：感觉有点可摆弄，比如能够选择卡片，酷。那张卡片会变成你实际在做的。所以你可以编辑你的名字。然后你可以签你的卡片。所以，我认为这是为什么那是个糟糕签名的原因。有些人分享了他们试图签名的录音，人们花了几分钟来想出完美的签名。我认为正是这个方面让人们想要分享它，这也是它病毒式传播的一个原因：除了我设计图形，你可以选颜色，你还可以表达自己。也许你只想签名，或者你想画个笑脸，或者一件艺术品。有些人在上面画了不同的场景。所以，这种共同创造，我认为，让它对人们来说更个人化，也是它引起共鸣的原因：好吧，我只是从一个我不认识的陌生人那里买了这个随机课程，但我已经感觉自己又像个孩子了，可以制作一张真正的借书证。当时，人们购买时，我还没有任何内容。资料库还不存在。当资料库上线时，我接下来要做的事，大约有 5 周。实际上，不，差不多正好 4 周。我在 1 月 13 日（我生日前一天）上线了网站，然后资料库在 2 月 10 日开放。所以在那段时间里，我显然在创建课程内容和平台。所以当人们回来时，我有两种感觉。第一，有点压力：好吧，我们如何再次提高标准？一旦你有了这个，你实际上想如何使用我给你的那张感觉非常真实和物理的卡片？我如何把它更进一步？快速说一句，然后我们可以跳回来。如果你还在 Figma 中设计并在 Framer 中重建，那你就是在做双倍的工作。

This is the flow for you would come from Stripe and then you would see this, right? For most folks, they see this message. There was something I wanted to do for folks I knew personally where I actually wrote them a small personalized note. So on the off chance that they bought this and signed in, they would see something like this for me. That's another example of like cool, I have a bunch of time with AI now that I can like do. Want to write 50 messages to folks I know. And that was the most fun of this I was like, oh yeah, there's all these people I've worked with who have influenced me, who have taught me. It didn't start out like this. When I first started exploring, I was like, what if I just had like five cards and you can just pick one and then sign it, right? Obviously this prototype is like super janky. That's fine. Like all I'm trying to figure out here is the mechanics of like, does it feel good to fidget with cards in this way or like does it feel a little bit limiting? And what I didn't like about this is one, it kind of communicates that there's only five different cards to pick from. And I had an idea for more colors, but just didn't feel quite as exploratory or fidgetability is one attribute that I've tried to imbue in the whole product. Like there are things that feel tactile, you can move with them, you can like select them. Invoice is a real piece of paper that unfolds if you want that. And so this didn't feel quite right. I mean, they're actually interesting and you can see I'm starting to explore these generative graphics like on the cards themselves. But then where I ended up going was like, well, it should just be an infinite canvas. Like once you get in here, you could just scroll like any direction. There's only 14 color combinations, which is kind of a lot, but when you present them in this way, it feels like, okay, cool. Yeah, and I want to scroll and like pick one. Which one is right for me? There's something for everybody, right? There's like classic, all right, you're a designer, pick black. Or, cool, I want something a little bit more colorful, right? And so, this is another example of like this feels kind of fidgety, like being able to select the card, cool. That card transforms into what you're actually doing. So, you know, you can edit your name. Then you can sign your card. And so, this was I think the big reason why that's a horrible signature. Some folks shared recordings of them like trying to sign it, and folks spent like minutes trying to come up with the perfect signature. And I think that's the aspect that really helped people want to share it, and one reason why this kind of went viral was because in addition to me designing a graphic, and you could pick a color, you could express yourself. Maybe you just want to sign it, or maybe you want to draw a smiley face, or like a piece of art. Some people drew different scenes on it. And so, that co-creation, I think, helped it feel more personal to people, and is what made it kind of resonate so much of like, okay, all I did was this random course from this rando that I don't know, but then I'm already now feeling like a kid again, getting to craft and make like an actual library card. At this point, when people had bought, I had no content yet. Library didn't exist. What I then had to do when once the library came out, there's about 5 weeks. Actually, no, it's almost exactly 4 weeks. I launched the website on January 13th, day before my birthday, and then the library opened on February 10th. And so, between that time, I was obviously creating the course content and the platform. And so, once folks came back, I felt two things. One, a bit of pressure to like, okay, how do we raise the bar again? Once you have access to this, how do you actually want use that card that I gave you that feels very real and physical? And how do I take it even further, right? Real quick message and then we can jump back into it. If you're still designing in Figma and rebuilding in Framer, then you're doing twice the work.

有了 Framer 的设计页面，你不再需要在不同工具之间跳转。在我为 Dive 网站制作的最后一个页面中，我完全在 Framer 里进行探索和构建。你可以在同一个地方完成草图、迭代、结构设计并发布到网络。Framer 不仅仅是一个网站构建工具，它是适用于你整个工作流程的设计工具。你可以今天就开始免费创建，访问 framer.com。如果使用代码 rid，你还可以解锁一个月的 Framer Pro 免费使用。可能没有哪个工具比 Mobbin 更能让设计行业达成共识了。来自 Airbnb、Uber、Headspace 等公司的超过 100 万设计师都使用 Mobbin 获取设计灵感。这很合理。对于设计师来说，这是你能做出的投资回报率最高的选择之一。我几乎每天都用 Mobbin 查看不同产品如何处理特定 UI 模式和流程的真实案例。这对我的实践来说是无价的，我强烈推荐这个产品。所以，今天就去 dive.club/mobbin 看看吧。那就是 m o b b i n。现在，进入正题。

With Framer's design pages, you no longer have to jump between tools. In the last page that I made for the Dive website, I explored and built entirely in Framer. You can sketch, iterate, structure, and publish to the web all from the same place. Framer isn't just a site builder, it's a design tool for your entire workflow. You can start creating today for free at framer.com. And if you use the code rid, you can unlock a free month of Framer Pro. There legitimately might not be a tool that the design industry agrees on more than Mobbin. Over 1 million designers from companies like Airbnb, Uber, Headspace, all use Mobbin for design inspiration. And it makes sense. It's one of the highest ROI investments that you can possibly make as a designer. I use Mobbin almost every single day to look at real-world examples of how different products handle specific UI patterns and flows. I mean, it's invaluable to my practice and I can't recommend the product enough. So, head to dive.club/mobbin to check it out today. That's m o b b i n. Now, on to the episode.

那时我已经有了很多关于卡片上不同图形的想法。这是我为了构思图形本身而做的一个游乐场。后来它在某些方面有所演变。我发布了一个叫 BowKit 的工具，它实际上是这个配置面板的一个更好的设计版本。它让人们更容易以这种方式工作，对吧？我称之为实时调优或参数化可视化。这里的核心思想是，如果我有不同的图形，它们都由一些参数驱动，对吧？这些参数输入到某个函数中。在这个例子里，它很简单，都是基于一个波函数生成的。然后显然有不同的排列组合，但你可以想象，在 Figma 里，我可能得开始尝试设计 N 个这样的图形，比如“哦，也许它应该长这样”。但那会花很长时间，而我可以直接做一个工具来生成这个东西。我觉得你的一些其他嘉宾也在用这个想法，但关键是，你希望能够尽可能快地感受到你的选择在现实中产生的结果。所以，这就是我如何想出“好了，这个感觉适合这个版本”的过程。当库打开时，有四个不同的图形，我会带你走过那个入门流程，但这就是我弄清楚“好吧，哪个看起来不错？比如小的、大的”的方式。这里有各种各样的控制选项，我可以选择它们来得到不同的图形。有时候你想看到一百万个变体，对吧？这就是我觉得很酷的地方。所以你可以说，“嘿，酷电脑，帮我生成一百万个不同的排列组合，随机挑选不同的参数，这些参数我可能永远想不到。”对于其中一些组合，比如第三个，我自己可能不会那样做。对我来说，它感觉有点太重了，整个东西像个隧道。不过，它超级酷，对吧？

At this point, I had already had a lot of ideas for different graphics that could be on the cards. This is a playground I made coming up with the graphics themselves. This has since evolved in some ways. I released a tool called BowKit that effectively a better design version of this configuration panel. That just makes it easy for folks to work in this way, right? Of kind of I call it either like live tuning or parametric visualization. The big idea here is that if I have different graphics, these are all driven by some parameters, right? They go into some function. In this case, it's pretty simple. They're all generated based off of a wave function. And then obviously different kind of permutations of what that's driving, but you can imagine in Figma, I could have started and tried to design like N of these, you know? Like, "Oh, maybe it should look like this." But it's like, okay, that would take forever versus hey, I can just make a tool to make this thing. And I think some of your other guests have also, you know, are kind of using this idea, but the whole thing here is you want to be able to as quickly as possible feel in reality like what the result is of your choices. And so, this was how I kind of came up with like, "All right, here's the one that feels, you know, right for this version." When the library opened, there are four different graphics, and I'll walk through that onboarding, but this was my way of figuring out like, "All right, like what looks good, you know? Like small, large." There's all sorts of different controls here that I can choose to end up with different graphics themselves. You sometimes you want to see like a million of them, right? And so, this is the cool thing about I think me I now. So, you can be like, "Hey, cool computer, go generate like a million different permutations for me where it's picking different parameters just randomly that I maybe never would have come up with, right? And so, for some of these different combinations, this one right here, this third one where it's like I wouldn't have done that. It feels a little bit too heavy to me of like the whole things it's like a tunnel. However, it's super dope, right?

这挺酷的。是啊，很酷。

It's kind of cool. Yeah, it's cool.

是啊，挺酷的，对吧？

Yeah, it's kind of cool, right?

你构建了一个设计工具，基本上完美契合你的用例。我敢肯定，现在正在观看的观众中，至少有一部分人会被他们看到的东西深深吓到，对吧？比如，我根本不可能从零开始做出那样的东西。也许他们甚至见过一些工具的例子，但仍然觉得非常非常困难。跟我们聊聊，要做到这样的事情需要什么？

You built a design tool that basically is perfect for your use case. I'm sure that there is at least some subset of the people that are watching this right now that are like deeply intimidated by what they're looking at, you know? Like, there's no way that I can make something like that from scratch. And maybe they've even seen a few examples of tools, and it still is just really, really daunting. Talk to us a little bit about what it takes to pull something like this off.

这其实就是一个有不同行的网格，每行里有一定数量的项目。每个项目的不透明度由波函数驱动。显然里面可能还有一些更详细的细节我们可以讨论。但就用 AI 重新创建或自己创建而言，你只需要说一些很简单的话，比如：创建一个图形，它由一系列行组成，每行中的每个项目都有不同的不透明度，由正弦波控制。给我滑块来控制行数、每行项目数、不透明度范围和波的因子。把图形的背景设为黑色，项目设为白色。这算是一个相当粗糙的提示，对吧？就是随口说的。

What this is is just simply a grid that has different rows, and within each row, there's a number of items. The opacity of that item is driven by a wave function. There's obviously some more detail maybe in there that we could go. But in terms of recreating it with AI or creating it from yourself, you could just say probably something as simple as like create a graphic that is a series of rows where each item within that row has a different opacity that is controlled by a sine wave. Give me sliders to control like the amount of rows, items within a row, range of opacities, and factors of the wave. Make the background for the graphic black and make the items white. So that's like a pretty rough prompt, right? Like that's just off the dome.

不过已经很好了。还是相当不错的。我一直在努力改进的一点是，注意那些能让 AI 产生很好结果的具体词汇。比如对我来说，我之前没用过“正弦波”这个词。这完全说得通。这是一个我可以纳入实践的小技巧，现在我可以非常容易地重新创建它。一旦你知道了正弦波这个概念是创建生成式图形的一种方式，还有很多其他方法，对吧？你可以用时间戳。你基本上想要的是随时间变化，对吧？你可以深入探讨那个想法，或者只是抽象地思考。作为用户，你不需要知道数学，对吧？正弦波和余弦波的方程是什么，或者那些东西。你只需要意图，你甚至不需要说“正弦波”。你可以描述说：我想要一个网格，每个项目的不透明度略有不同，而且是动态的。我打赌 AI 会用波函数或其他东西来驱动，得到你想要的结果，对吧？所以，如果你能在脑海中看到，或者有一个参考，说这大致是我想要的结果的近似，AI 很擅长帮你达到那里。然后你知道，还有很多调优工作，对吧？来让它完美。

It's pretty good though. It's still pretty good. Something that I'm trying to get better at is paying attention to the specific words that drive really good outcomes with AI. So like for me, oh, I haven't been using like sine wave for instance. That makes total sense. That is like a little thing I can just take into my practice and now I can recreate that very very easily. Once you know that idea of like a sine wave is like a way to create like a generative graphic. There's a lot of other ways of doing it, right? You could use like a time stamp. You basically want like change over time, right? You could go really deep in that idea or you could just think abstractly. Like I don't need to know you as a user don't necessarily need to know the math, right? What is the equation for a sine wave versus a cosine wave or or any of that stuff. All you want is the intent and you don't you wouldn't even have had to say actually sine wave. You could have described like I want a grid where each item has like a slightly different opacity and it's dynamic. I bet AI would either either use like wave functions to drive that or some other thing to get you the result you want, right? And so if you can see either in your mind or you have a reference like this is roughly an approximation of the outcome that I want, AI is pretty good about helping you get there. And then you know, there's a bunch of tuning, right? To like get it.

即使调优，我发现我也不需要掌握相关的语言。比如前几天我在玩一个着色器，我不知道控制着色器的正确语言是什么，我就说：“给我所有相关的控制选项。”然后它给了我一大堆我从未见过的东西，而且它们完美地工作。是的，完全正确。这也是一种学习方式，对吧？比如，“哦，原来是这样工作的。它是由波函数驱动的，或者别的什么。”更重要的是你的意图和能够与结果互动。好了，我们开始吧。所以，这就像一个一次性提示，从我的角度来看，它相当清晰，对吧？是的，然后它说：“好的，酷。它已经推断出来了，好的，那是一个开关。”

Even the tuning though I found I don't actually have to have the language for it. Like I was playing with a shader the other day and I don't know what the correct language is to control the shader and I just said, "Just give me all of the relevant controls." And it gave me a bunch of things that I'd never even seen before and they worked perfectly. Yeah, totally. And that's also a way then to learn, right? Of like, "Oh, here's how this works. It's driven by like a wave function or, you know, whatever." What's more important there is like your intent and being able to play with the outcome. Right, so here we go. So it's like, "All right, this was like a one-shot prompt that like, from my perspective, it's pretty lucid-y, right? Yeah, so it's like, "All right, cool. It already gave us an inferred like, all right, that's a switch."

补充一下背景，我想对观众说，这个 V0 并不知道我的代码仓库。它是一个全新的东西，从零开始，对吧？所以现在你可以开始摆弄它，看看“好吧，酷。波函数到底是做什么的？”也许我不想让不透明度降到零，因为那会产生奇怪的斑马条纹。所以可能需要一个更高的最小值。频率基本上就是——想象一系列波，这些波有多密集？它们靠得多近？振幅基本上就是波有多大？比如它有多高？然后相位偏移就是让波偏移。所以，你甚至不需要知道这些就能玩这个，然后说“哦，酷，太好了。我可以让它变大，我可以让它变小。你可以控制它的速度，感觉有点狂躁。这个感觉，嗯，很好很平静。”而这只是第一个提示，对吧？所以你可以推断，“酷。从那个到一个像这样的游乐场，所有要做的就是再深入一点，比如‘好吧，酷。现在给我，嗯，我有一个颜色枚举。就是这个调色板。把那个调色板放进去，对吧？好的，放一个随机种子，这样每个用户每次访问时波浪看起来就不完全一样了。’”还有不同的东西——间距是一个好例子，对吧？这让你得到非常不同的结果，然后就是“酷。给我一个滑块来控制每个项目之间的间距。”所以，如果你只是用英语想一下，比如我想玩或改变或控制的东西是什么，现在 AI 很擅长推断你需要什么具体实现来得到那个结果。

And for context, I guess for viewers, like this V0 has no awareness of my code repo. It's just a net new thing, you know, from scratch, right? And so that now you can start to play with and see, like, "Okay, cool. What does a wave function actually do, right?" And maybe I don't want to let opacity go to zero because that gives me these weird zebra stripes. So maybe there's, you know, a higher kind of minimum. Frequency is basically how — imagine a notion with a series of waves, how tight are those waves? How close are they together? Amplitude is basically how big is the wave? Like how tall is it? And then phase shift is just offsetting that wave. And so, you know, you don't even need to know that to be able to play with this and be like, "Oh, cool, like great. I can make it big. I can make it small. You can control the speed of it, you know, that feels a little bit more manic. This feels like, you know, nice and calm." And that's just like the very first prompt, right? And so you can extrapolate, like, "Cool. Going from that to, you know, a playground like this, all that is is just going a little bit deeper on like, 'Okay, cool. Now give me, you know, I have a color like an enum for my colors. That's like this palette. Put that palette in there, right? Okay, put in like a random seed so that the wave doesn't look exactly the same for every user every time they visit.'" And, you know, different things like — gap is a good one, right? Like this lets you get pretty different results and that's just, "Cool. Give me a slider to control the space between each item." So, if you just think about like in English, like what is the thing I want to play with or change or control, these days like AI is pretty good about inferring what specific implementation you need to get that result.

感谢你一步步讲解，因为这确实说明了一个事实：构建这些工具并不难。你几乎可以创造任何东西，这反而把瓶颈更多地放在了探索和构思的能力上。这就是创作过程。所以，我很好奇想更深入地了解你在幕后做了什么才得到这个输出，因为你有这个美丽的隐喻和所有这些不同的交互。我们谈到了视觉部分。我有点想更深入地挖掘你流程的不同维度。

I appreciate you walking through that because it does point at the fact that like it's not hard to build these tools. Like you can create almost anything, which then puts the bottleneck more on like your ability to explore and ideate. That's the creative process. So, I guess I'm curious more to dig into like what you're doing behind the scenes to arrive at this output because you have this beautiful metaphor and all these different interactions. We talked about like the visual piece. I kind of just want to dig in more to different axes of your process.

我有太多想法、观点或想分享的东西，但还不知道具体以什么形式呈现。所以，我觉得图书馆是一个很好的隐喻，因为它本质上是开放式的，对吧？我的桌子上有一堆不同的书，这本书和下面那本毫无关系，但我把它们都放在我的个人图书馆里。这就是这个宽泛隐喻的想法。然后开始想，好吧，图书馆里有什么？有书架，有不同区域，有服务台，图书馆有活动，还有借书卡。访问就是这样实现的。然后你开始深入思考这个隐喻有哪些属性可以创造？很快你就会想到，哦，我们给每个人一张借书卡，对吧？我也可以给人们一个头像，比如“酷，这是你的动态小头像”。也许他们得到一个硬币，一个代币之类的东西。但借书卡既符合隐喻，又是一个高度视觉化的东西。而且，它有关键属性：我想让人们感觉他们在创造自己的东西，对吧？这是为他们准备的。不只是“嘿，欢迎，这是你的美国运通卡，和其他人的一样”。你可以签名，通过这个动作让它成为你自己的，对吧？我之前展示的原型，那是一个更早的起点：我已经在主页上有了用不同卡片代表收藏本身的想法，这些卡片已经有图形了。借书卡只是在这个想法上做文章。比如，“哦，酷，如果我们把不同配色方案、不同调色板、不同图形的相同概念结合起来，做成用户得到的东西会怎样？”但这个版本很糟糕，对吧？你一看就会想，“啊，好吧，只有五个。太大了，选择方式有点奇怪。”很多方向上有趣但不对的地方。迭代的过程就是从“太大、图形太精细、默认动画太多”到“感觉像是在五个预设中选择，而不是‘哦，这是我的’”。这已经足够引起共鸣了，但回到图书馆时，那是另一个第一印象。我也经常从款待的角度思考。那是我很大的灵感来源。Thomas Keller 或其他著名厨师，他们是纯粹的设计师和艺术家。他们只考虑如何把一顿饭以你终生难忘并会告诉别人的呈现方式和体验提供给你。对我来说，这是最纯粹的设计形式：他们解决问题——你需要吃饭，我们为你做食物，你付钱——但他们把它包裹在一种体验中，让它感觉如此独特和与众不同。这就是我追求的效果。比如，“酷，你怎么回到这个图书馆，使用你已经做好的那个东西，但我如何把它更进一步？”这是 2 月 10 日图书馆开放后的回归引导流程。你可能已经忘了你的卡是什么，或者有点印象但不确定。所以第一件事就是快速预告一下。我想让你读一下并停顿一下，所以它非常简约。然后我展示你的卡。这是我的真实卡片，对吧？之前它看起来是这样的。如果你保存了，它就是这个样子。然后你会想，“好吧，太好了，我可以确认，如果想编辑名字或签名，我可以做。”但然后楼梯出现了，“酷，现在玩得更开心吧。也许你想选不同的颜色。”

There's so much that I want that I have thoughts on or opinions on or that I want to share, and I don't know yet exactly what form that takes. And so, I thought that a library was a pretty good metaphor for that because it is inherently open-ended, right? And so, on my desk I have a bunch of different books where it's like, all right, this has nothing to do with the book that's under it, but I have them all in my personal library. So, that was the idea of like the broad metaphor. And then coming up with like, okay, well, what exists in a library? It's like, well, you have shelves, you know, you have different areas, you have like a help desk, you know, libraries have events, and they also have like library cards. Like that's how access was, you know, it was created. And so, you start thinking down the rabbit hole of like, what are attributes of this metaphor that I could create? You pretty quickly arrive at like, oh, we'll give everyone like a library card, right? So, I could have given people maybe like an avatar, right? That's like, cool, here's your dynamic little avatar. Maybe they get like a coin, you know, like a token or something like that. But library card both felt authentic to the metaphor and also a highly visual thing. And again, had that key attribute of like, I wanted to let people feel like they were creating theirs, right? It's for them. It's not just, hey, welcome, here's your American Express card that's the same as everybody else's American Express card. You get to sign it, and you get to make it your own in that act, right? And so, the prototype I showed earlier here, you know, this was a much earlier starting point of like, okay, I already had this idea on the homepage of different cards representing the collections themselves, and these already had the graphics in them. And so, the library cards are just playing on that idea. Like, oh, cool, what if we took that same concept of different color schemes, different palettes, different graphics, you know, and combine them into something that you would get as a user. This version though, like this is horrible, right? Like, you look at this and you're like, ah, okay, cool, there's only like five of them. It's way too big, the way to choose it is like kind of weird. There's just a lot that's like directionally interesting, but not right. And so, like, the process of iteration is how you get from like, it's too big, this graphic is way too finicky, when they're animating by default, it's like a lot. And this feels like you're picking one of five presets versus like, oh, it's mine. And that was enough like, for that to go, you know, I think that resonated, but then in terms of coming back to the library, that's like another first impression. I think a lot through the lens of hospitality as well. Like, that's a big source of inspiration for me. Thomas Keller or, you know, other famous chefs, where they are pure designers and artists. All they think about is, how do I give you something that you need, which is just a meal, in a presentation and in an experience that you will think about for the rest of your life and tell others about. To me, that's like really the purest form of design, where they're solving a problem, which is like, great, you need to eat food, we need to make food for you, and you pay us for that food. But, they're wrapping it in an experience that makes it feel so unique and so differentiated. So, that's what I was going for for this, right? Like, cool, how do you come back to this library, use that thing that you already made, but how do I take it even further? And so, this is the onboarding flow for, you know, once the library opened on February 10th, you're sort of coming back, right? And so you probably had forgotten what your card was, maybe, or you had some notion of it, but you know, you didn't really know. And so the first thing is like, great, here's just a quick, you know, teaser. I wanted you to like read this and like pause. So that's why it's like very, you know, minimal. And then I show you your card. So this was my real card, right? It previously would have looked like this, right? So if I had saved that, it would just be like this. And so you're thinking like, okay, great, I can just confirm if I want to edit my name or signature, I can do that. But then the stairs that is like, cool. Well, have more fun now. Maybe you want to pick different colors.

所以整个体验的设计核心，还是围绕「玩」和让你动手摆弄。如果你想进入素材库，没问题，点那个显眼的大黑 CTA 按钮就行。或者你也可以探索不同的颜色选项。我不想再用之前那种无限画布的方式了，我想让你能深入下去。所以这里很棒——给你不同的高级配色组合，还有一些控件，上面没有标签，它们又大又粗。你会想：这东西是干嘛的？我不知道。哦，酷。当你开始尝试时，就会得到奖励。我觉得这一切都很直观，但同样，它也是在鼓励你去触摸、去移动。这个滑块……其实这两个滑块都算是某种魔法控件，我们可以深入看看——它们只给你一个东西去玩，但实际上同时操控了好几个不同的属性。这个颜色滑块在调整色相、饱和度和明度。苹果在这方面做了很多，我是说，他们照片团队的设计师和工程师水平是另一个层次的，他们的约束也是：如果我给你 Lightroom 或者这个，对吧？这是一个更精细的控制面板。但对你作为买家、消费者来说，你其实不想要这个，对吧？你不想花时间觉得这像是在工作。即使对我来说这是玩，对你来说你会想：为什么让我在这里干活？而如果是：嘿，想改颜色？太好了，随便调吧。有各种选项，试试看。所以我确实做过一些版本，比如：如果直接用三个滑块分别控制色相、饱和度和明度呢？你可以控制所有参数，但那样就开始显得太杂乱，不再像一个简单的上手流程了。这个滑块也在做很多疯狂的事情。

And so this whole experience here is really designed around, again, just like play and letting you fidget with things. If you want to get into the library, cool, click the obvious big black CTA that's like, come in. Or great, explore the different color options, right? I didn't want to do it in the same way that I had already done it of this infinite canvas. And I wanted to let you go deeper. And so this is just great, like here's the different high-level color combos. Here's some controls, you know, there's no labels on them. They're super big and chunky. And you're like, cool, what does this thing do? Like, I don't know. Like, oh, cool. So as you start to experiment with it, like you get rewarded. And I think all of this is like pretty intuitive, but it also, again, is just trying to encourage you to touch things, like moving around. This slider is kind of doing some Well, both of these sliders are basically kind of magic controls that we can like dive into where they're giving you just one thing to play with, but it's actually manipulating several different properties at once. And so this color slider is adjusting hue, saturation, and lightness. Apple does a lot of this, like they're I mean, they're operating at another level, uh the designers and engineers on like the photos team, where that whole constraint is also like, well, if I gave you Lightroom, or if I gave you this, right? This is a more fine-grain control panel. But to you as a as a buyer, as a consumer, like you don't actually want this, right? And so you don't want to take the time to be like okay, this feels like work. Even if to me it feels like play, to you you're like why are you making me do work here? Versus like hey, you want to change the color? Great. Just mess with it. Like there's different things, you know, try it out. And so, I did have versions where it's like oh, what if literally there were three different sliders for hue, saturation, lightness? You can control all of that, but then it starts to just feel too messy and it doesn't feel like a simple onboarding flow anymore. This slider as well is doing a lot of crazy things also.

你把它做成了一个无限循环。所以，太棒了。

You made it an infinity loop. So, it's So good.

对，其实背后是有原因的。这是个真实的东西，我称之为利萨茹滑块。利萨茹曲线是一个数学概念，基本上是用来随时间映射值的。它能做的事情之一——我深入研究过——就是解决我所说的「三滑块问题」。这只是另一个即将发布的资源的预览，内容是关于在界面设计或图形生成中使用波函数。你可以看到这里是一些不同图形的快照。如果你还记得那个游乐场，我们是用一个波来驱动所有这些图形的生成。所以，这里展示的是让你一次玩一个关键参数的样子。这很有趣，也不错。但想象一下，在这个页面上有三个不同的滑块，同时我还要你选择图形的形状和颜色，那就会变得相当过载。那么，我们怎么解决这个问题呢？怎么才能用一个滑块同时控制三个不同的值？我做了大量研究。我自认为是个数学爱好者，这很有趣，但我没有大学学位——我辍学了。你可以自学，对吧？所以这就是一个探索过程：嘿，绘图仪之类的，我怎么实现这个最终目标？其他领域有没有已有的成果可以借鉴？所以这里展示了利萨茹曲线是什么——它实际上就是一个无穷符号，但它的作用在于：这里有一个版本，当你在这个曲线上的位置变化时，它会驱动另外两个值，这里是频率和相位。所以它基本上是一个三维物体。但它的效果是，它给了用户我们想让他们改变的所有三个参数：频率、相位偏移和幅度。我们可以用一个滑块控制所有这些。所以整个想法就是：对于颜色和驱动图形的参数，我如何只给用户一个东西去摆弄，却能产生非常动态的结果？就他们创作的表现力而言。这最初确实是从一个频率滑块开始的，它本身已经有一些动态效果。但通过把它们合并成一个控制所有参数的东西，你会得到——你看，当我滑动这个时，上面的图形在很小的面积内产生了许多动态变化。这听起来可能有点学术或深奥。显然，其中一部分与数学概念有关，但我在开始之前并不知道利萨茹曲线。我知道的是我的意图：我想给你三个旋钮，通过这三个旋钮，让你感觉可以创造出无限多种不同的借书卡排列，让它真正属于你。酷，我要花时间在这上面。我该怎么做？我认为这是使用 AI 的一个很好的方式：你只需表达你的问题或目标。比如：嘿，我有一个问题，我想同时改变三个参数，怎么做？然后一个想法是：哦，我们可以试试这个利萨茹滑块。我说：哦，好吧。我之前不知道，但现在我知道了，这太酷了。我从未见过有人创建过使用这个原理或框架的组件。而且，正如你所说，它恰好看起来像一个无穷符号，所以这太完美了。我认为这很好地说明了设计很大程度上就是迭代和发现。我可能有一个意图，但偶然发现这样的东西，就是坚持下去，再做一次迭代。我本可以设计三个漂亮的小滑块来控制波形，但效果不会像这个这么好。而且你还得给它们贴标签，对吧？三个滑块，每个都有标签，而这个几乎有一种神秘感。你会想：我拖它的时候会发生什么？我喜欢它没有任何标签，突然间我几乎是出于好奇心在操作。

Yeah, there's actually a reason behind it. This is a real thing. This is what I'm calling this is like a Lissajous slider. A Lissajous curve is a concept in mathematics basically for mapping values over time, right? And what it lets you do, one of these is a deep dive on it. One of the things that that lets you do is solve what I'm calling this like three slider problem. This is just a preview of like another upcoming resource on basically using wave functions in interface designer or in graphic generation. So, you can see here these are just like quick snapshots of different graphics. And so, if you remember from that playground, we're using a wave to drive the creation of all of these things. So, here's what it looks like letting you play with the three key parameters one at a time, right? And again, this is fun. It's fine. But imagine like three different sliders, you know, on this page where I also want you to select the shape of a of a graphic and the color. That would start to overload it like quite a bit. So, how do we how do we solve that, right? How do we basically get like one slider that can control three different values like at one time? Did a bunch of digging. I suppose I am a math guy and that is interesting, but I don't have a college degree. I dropped out of school. You can just teach yourself things, right? And so, this was one of exploring like cool, hey, plotter or whatever. Like how do I how do I accomplish this end goal? Like how is there prior art out there in other fields that I can, you know, that I can run with, right? And so, this shows like what a Lissajous curve is, where it is a like it is literally an infinity symbol, but what it lets you do, here's a version here that controls it, as your position on this curve changes, it is driving these other two values, right? In this case for frequency and for, you know, phase. So, it is actually a three-dimensional like object, basically. But, what that does is it gives you all three of the things that we want a user to change. frequency, the phase offset, and the amplitude. We can control all of those with a single slider, right? And so, that whole idea is basically how do we, for both color and for the parameters driving the graphic, how do I give a user just one thing to fidget with? That has a really dynamic result, right? In terms of like the the expression of what they're creating. And so, this did start as like, great, give me a you know, like a frequency slider. Cool. And it has a little bit of like dynamism in it. But, by combining them into into just one thing that's controlling all of those things, you get some pretty like if you look at, you know, the graphic up here as I'm sliding this, there's like a lot of dynamic versions of it in just a a simple kind of small surface area. Like maybe that sounds a little bit heady or like academic. Obviously, some of that is, I think, related to just the idea of like math there, but I didn't know about the Lissajous concept before starting this, right? What I knew was my intent, which is okay. I want to give you three like knobs, and I and from those three knobs, I want it to feel like you can create an infinite amount of different permutations of a library card to make it actually feel like yours. Like, cool, I'm going to spend time with this. How do I do that? And that's a really good way to use AI, I think, in terms of you just express your problem or your goal, right? Like, hey, here's a problem. I want to change three parameters at one time. How do I do that, right? And so, one idea is like, oh yeah, we could try this, you know, this Lissajous fur slider thing. It's like, Oh, okay. Yeah, I didn't know about that, but now I do, and that is sick. And I've never seen anyone create like a component that uses that principle or that framework, basically. And it happens, as you noted, to look like an infinity symbol, and so it's like, Oh, that's perfect, right? And that's that's a good example, I think, of so much of design is just iteration and discovery. I might have an intent, but stumbling upon something like this is is just sticking with it, right? And just going like one more iteration. Like, I could have designed three beautiful little sliders, you know, for to control the wave, but it wouldn't have been as good as this. So, Yeah, and you would have had to label them, too, you know? Like, you would have had three sliders, they would have had a label, whereas this there's like almost an element of mystery, you know? You're like, What is it going to do when I drag that? And I love that there's no labels anywhere else where all of a sudden it's like I'm acting almost out of curiosity in a way.

这又回到了你提到的“可摆弄性”，这完全是我以后衡量这类东西的新标尺，而且去掉那些标签本身就有很大帮助。是啊，我希望我当初想的时候方向能像你刚才说的那么清晰，但你的话很好地概括了设计是什么，或者说我认为我们现在有了能帮我们走得更远、更快、探索更多面的工具后，应该努力的方向。我们应该用它们来做这类事情。所以，与其创造更多范围，不如想想如何把真正必要的有限范围执行到人们可能从未见过的水准？是的，这仍然有问题，有些地方我不喜欢，但就这个概念的执行而言，我觉得它相当不错。有一件事启发了我，我做家具，我业余做木工，很多设计师都这样，我属于那种设计师转木工的路线。你知道，Shakers 做很多不同的家具，他们的家具制作哲学之一很简单：尽你所能做好，并尽可能简单。我认为这在很大程度上概括了伟大设计的精髓：好吧，有三类不同的事情我想让你做——颜色、特定图形、然后选择你想要的图形类型——我如何尽可能简单地做到？我喜欢这个原则，因为我发现对我来说，练习克制变得越来越重要，因为我有史以来第一次能快速做这么多不同的事情。我可以让页面上的每个东西都动起来，这在以前是不可能的，而且做起来很有趣。所以，真的要有意地划定那条线：什么时候是加法，什么时候是过度？过度线在哪里？这已经成为我每天设计工作的重要部分。

Again, that goes back to like your fidgetability, which is totally the new measuring stick that I'm going to have for stuff like this, and just not having those labels goes a really long way. Yeah, I wish my direction was as clear as what you just said, right, when I was thinking about it, but that captures it so well, a lot of just what design is or what I think we should all be trying to push towards now that we have tools that help us like go, you know, further, and we can get there faster, and we can explore more surface area. And we should use them for things like this. So, instead of creating more scope, right, how do we take the limited amount of scope that is really essential and just execute it to a bar that, you know, folks maybe haven't have never seen before, right? And yeah, there are still problems with this, like, there's things I don't love about it, but I think it's pretty great as far as like an execution of that concept. One thing I'm inspired I make furniture, like, I kind of woodwork on the side, you know, as many designers do, but I'm in that kind of designer-to-woodworker pipeline. You know, Shakers, they make a lot of different furniture, and one of their kind of philosophies in furniture making is pretty simple. It's just make it as well as you can and make it as simple as you can. And I think that sums up so much of what great design is in a lot of ways, where it's like, yeah, all right, there's three different broad sets of things I want you to do, color, specific graphic, and then choosing the type of graphic you want. How do I do that as simply as possible? I love that principle because something that I'm finding for myself is it's becoming more important to practice restraint as I can do so many different types of things quickly for the first time ever. Like I can animate every single thing on the page in a way that was previously impossible, and it's very fun to do so. And so, really having to be intentional around like where that line is, where like, okay, this is additive and now it is too much. Where is the too much line? It's become a really big part of designing every day for me.

完全同意你刚才说的。我在 Rams 里放了一个想法：少但更好，对吧？还有一句李小龙的名言我经常想起，是我的联合创始人 Todd Adam Kela 教我的：不是每天增加，而是每天减少。砍掉不必要的东西。我觉得作为设计师，你很难过度编辑你的作品。就像煮酱汁一样，你在浓缩它，让味道更浓稠。在烹饪世界里你可能煮过头，但在设计世界里，我不确定你能过度简化。我觉得这个作品还有可以简化或改进的地方。现在跳出来的一点是，底部工具栏和这些控件的高度不一致，这让我有点困扰，对吧？更简单、更还原论的观点会说：好吧，让我们让所有控件的高度统一。所以，我认为这种实践是设计师经常限制自己的地方——他们没有坚持说“我要选择克制而不是添加更多东西、更多表面、更多花哨功能”，而是问“我如何把我已有的东西提炼到绝对本质？”我认为这就是我们认为是伟大设计的东西之所以伟大的原因：它被真正蒸馏和浓缩到使其伟大的核心，对吧？其他不重要的、锦上添花的东西，砍掉，对吧？这当然需要时间。

Exactly like what you just said. One idea here that I put into Rams is like less but better, right? And there's this Bruce Lee quote that I think about often. My co-founder, Todd Adam Kela, he taught it to me, where, you know, it's not daily increase, but the daily decrease. Hack away at the inessential. I think it would be hard for you as a designer to edit your work too much. It's like you're cooking a sauce, right? And you're trying to reduce it, you're trying to concentrate flavor and make it thicker. You can take it too far in, you know, a cooking world, but in the design world, I'm not sure that you can. I think there are still aspects of this that I could have simplified or or we could like improve and resolve. One that's jumping out to me right now is like there's a different height between our toolbar at the bottom of these controls. That's kind of bugging me, right? A simpler, more reductionist view would say, okay, let's just have one height for our controls everywhere. And so, I think that practice is one where I see designers limit themselves often by just not, to your point, instead of sticking with it and saying, okay, I'm going to choose restraint instead of adding more, adding more things, more surface area, more bells and whistles. How do I take what I have and just distill it to like its absolute essence? I think that's what makes everything we think of as great design, great design, is it's just really distilled and concentrated into what makes it great, right? And everything else that's not important, that's a nice-to-have, cut that, right? And that takes time, for sure.

有一个我忍不住一直问自己的问题：如果公司反过来申请和你对话会怎样？这个问题是全新 Dive Talent Network 的基础，而且它正在起作用。现在，我正在帮助许多我知道的最令人兴奋的初创公司，招聘收听这个节目的设计师和构建者。所以，如果你好奇外面有什么机会，或者你想加入我的名单，或者你正在寻找下一个设计招聘，请访问 dive.club/talent 立即加入。好了，快速点一下这个返回箭头。对。跟我聊聊你是如何应用这种思维模式，真正把东西提炼到你想要的核心和你想创造的感觉的？这些按钮移动的方式、在两个页面之间切换、悬停状态——跟我聊聊你的过程。你想创造什么？你做了哪些决定？

There's one question that I can't stop asking myself. What if companies applied to talk to you rather than the other way around? And that question is the foundation for the all-new Dive Talent Network, and it's working. Like, right now, I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So, if you're curious what might be out there, and maybe you want to get on my list, or maybe you're even looking for your next design hire, head to dive.club/talent to join today. Okay, hit this back arrow really quickly. And yeah. Talk to me about how your applying this type of mental model and really boiling something down to the essence of what you want and the feeling you're trying to create. The way that these buttons move, moving between these two pages, the hover states, talk to me a little bit about your process. What are you trying to create? What are the decisions that you made?

是的，我认为这个小控制面板里有很多东西通常被理解为变形界面。每个人应该参考的人是 Family 的 Benji。你去 benji.org 就能看到，他写了一篇很棒的文章，好像叫 Family Values。Family 是一个加密货币钱包，它的设计和制作投入了极大的细节和用心。这个想法在 Family 之前就存在，但我认为 Benji 确实把它执行到了一个新的最佳水平，并推广了这个想法。任何时候你在页面上有这些控件，它们都可以变成你需要的其他控件。所以有一种老派的思维方式，比如在前端界面中，在那些只是 CRUD 应用里，我们做的只是从数据库获取内容、查看、操作。如果你点击那个按钮，就会弹出一个窗口说“好的，编辑你的名字，完成”，对吧？那是非常欠考虑的方法。在这种情况下，我已经在屏幕上有这些按钮了，对吧？那个带箭头的按钮很明显在抖动，每个人都知道它会做什么。这方面的一个点是，报名这个课程的主要是设计师、工程师、关心体验的人，而且人数不多。所以我可以承担更多可用性或可访问性方面的潜在风险，因为我知道受众很小，而且这也是我自己的东西，对吧？只是给我自己用的。所以第一件事是，我把它做得最好，为了我自己想要的时候用。希望它能引起共鸣。如果不能，我也没关系。再说一次，这只是个副项目。这对你所有的工作都很重要，对吧？作为设计师，你应该为你认为正确的东西而战，不要相信别人。因为如果你相信别人，你就会稀释那个想法，它很可能会变得更糟。所以在这个例子中，当我想编辑名字时，我在考虑两件事。第一，我已经在卡片上有名字了。

Yeah, so I think there's a lot in this little control panel that I think is commonly understood as like morphing, like morphing interfaces. And the person everyone should reference on this is Benji from Family. He's If you just go to benji.org, he's got a great write-up on like I think it's called Family Values. Family is a crypto wallet that just has an immense level of detail and care applied in like the design and creation of it. And this idea has existed before Family, but I think Benji certainly executed it at like a new best-class level and popularized the idea. Anytime you have these controls like on a page, they can be changing into other controls that you need. And so there's sort of an old school way of thinking, think in terms of maybe front-end interfaces that is like well in applications where everything's just like a crud app, all we're doing is taking content from a database, we're viewing it, we're manipulating it. And you know, if you click that button, you get like a pop-up that's like cool, edit your name, done, right? That's like the very unconsidered approach. In this case, it's like okay, I already have these buttons on on screen, right? It's very obvious with this one with the arrow that's literally, you know, jiggling. Everyone knows like what that would do. There's an aspect of this of like primarily this is designers, engineers, people who care about experiences that are signing up for this course. There's also not that many of them. So I'm okay taking more potential liability from like a usability perspective or accessibility perspective, because I know it's a small audience and this is also my thing, right? It's just for me. And so that's like the number one thing is like well, I'm making this the best for when I want it to be. And hopefully that will resonate. And if it doesn't, I'm fine with it. Again, just a side project. That's important to do in all of your work, right? As a designer, like you should be fighting for what you think is right, not trusting anyone else. Cuz if you do, you're going to dilute that idea and it's going to be worse, most likely. So in this example, well, when I want to edit the name, two things I'm thinking about. One, I already have the name on the card.

所以它已经在那里了。那是一个潜在的输入，对吧？默认的做法可能是你点击这个，然后弹出一个对话框，让你编辑名字，点完成或取消，对吧？但那会让你脱离流程，而且也会削弱“这是你的借书卡”这个隐喻。你需要的一切都已经在上面了。当你需要编辑时，你直接编辑它本身，对吧？所以这个按钮过渡到“完成”，我认为是一种更优雅或更流畅的方式，将状态转换到我需要的。所以如果我在卡片上做输入，我需要一些控件来接受那个更改，对吧？但我已经有一个按钮了，为什么不用那个按钮来表示“完成”呢？我大概试过很多次，真希望我保留了所有排列的截图。花了一点时间才做对，但整个想法是：我如何不往页面上添加更多东西，而是真正让你专注并简化它？所以当你点击编辑名字时，你会注意到我淡化了 CTA，因为你需要确认输入。我自动聚焦输入框，因为你显然要在那里打字，所以为什么不帮你一把，直接给你焦点呢？我还淡化了卡片上的所有其他内容，再次是为了鼓励专注。最后，这里的标签会改变，比如，好吧，也许有人会困惑，但可能不会，但如果他们困惑了，我就改一下。嗯，人们有不同的名字，所以我是作者。如果你在预售中加入，你就是创始会员。如果你之后加入，你就只是会员。所以这个小标题会变。那我们为什么不也把它改成“输入以编辑”呢？这个，即使现在重新审视，我也觉得，啊，我不需要这个标签。为什么我要写“完成”？应该只是一个勾号。那样界面会简单得多。

So it's already there. That's a potential input, right? Again, the default thing would probably be you click this, you get like a dialogue that's like edit your name, done or cancel, right? But that would take you out of the flow and that would also again, weaken the metaphor of like this is your library card. Everything you need on it is already on it. When you need to edit it, you're directly editing it itself, right? And so yeah, this button transitioning to done, that's just I think a more elegant way or more fluid way of transitioning the state to what I need. So if I'm making something on the card and input, I need some control to like accept that change, right? But I already have a button, so why don't I just use that button to say done? And I played with probably, I wish I had kept all the screenshots of permutations. Took a little bit to get this right, but the whole idea is how do I not add more to the page and how do I actually focus you and simplify it? So, when you click to edit name, you can notice here like I'm fading out the CTA because you need to confirm your input. I'm auto focusing the input because obviously you're going to need to type there, so like why don't I just help you and give you focus. And I'm also fading out all the other content on the card itself, again to encourage focus. And then the final thing is like the label here changes like, okay, maybe someone is confused at this point, probably not, but if they are, you know, I'm changing. Well, folks have different names, so I'm the author. If you joined in the pre-sale, you're a founding member. If you joined after, you're just a member. So, this little title changes. And so, why don't we change that too to just say type to edit, right? This and again, even looking at this now with fresh eyes, it's like, ah well, I don't need this label. Like, why do I have done? It should just be a check mark. That would be a lot simpler interface.

只是一个勾号。然后你让那个区域居中对齐。

Just be a check mark. And then you get the center alignment on the area.

完全正确，对吧？所以这是一个很好的例子，说明我是一个还算不错的设计师。这个执行达到了相当高的标准，即使现在我们也还在想办法改进，对吧？同样，签名也是。最初，当你点击这个时，我会清除签名，但后来我想，啊，那其实很糟糕，因为那是一个破坏性按钮，但看起来不像。所以我加了这个小东西，比如，好吧，如果你想，你可以擦掉它，对吧？然后它过渡到“请签名”。一旦我开始签名，它又变回“完成”，对吧？所有这些细节都在向你——会员、用户、客户——传达：Job 真的很关心设计或这种体验。他花了时间，不管是谁做的，对吧？他们真的花了时间去微调并思考所有这些细节，这建立了信任，建立了感知价值，你对这个产品的好感度增加了，因为它比你预期的稍微好一点或不同一点。你可以把这一点应用到任何地方，对吧？SaaS 产品、金融科技产品，无论什么。多走一步就是在向你的用户传达：我重视你，重视你的时间，我关心你。所以现在这个产品中的其他一切，你都开始与这些价值观联系起来。人们买这个的时候，网页上几乎没什么内容，对吧？只有“嗨，我是 Josh。我在写关于设计的文章。我可能帮助过一些人，和这些公司合作过。如果你感兴趣，请加入。”所以我再次想奖励人们，在他们进入之前就给他们价值。我认为这奏效了。

Exactly, exactly, right? And so, that's a great example of I'm a pretty okay designer. This was executed to like a pretty high bar and even now we're finding ways to like improve it, right? So, yeah, same thing with signature like, well, I need a way for you. Originally, when you click this, I had it clear the signature, but then I was like, ah that's actually awful because that's a destructive button that doesn't look like a destructive button. And so, I just added this little thing that's like, all right, if you want to, you can erase it, right? And so, then this transitions to like, oh, please sign. Then as soon as I start signing, it morphs back to done, right? All of these details communicate to you as the member or the user the customer, Job should really cares like about design or about this experience. He is taking the time, whoever made this, right? They have taken the time to really like dial in and think about all these details and that builds trust, that builds like perceived value, your affinity to this product increases because it works just a little bit better or differently than you expect it to. And you can apply that everywhere, right? SaaS products, fintech products, whatever it is. Just going the extra mile is communicating to your user like I value you, your time, and I care about you. And so everything else now in this product you are starting to associate with those values. People bought this with like nothing on the web page, right? It's just "Hi, I'm Josh. I'm writing about design. I have maybe helped some people and worked with these kind of companies. Please, you know, join if you're interested, right? So I again wanted to reward people and give them value even before they get in. And I think it worked.

嗯，我们甚至还没说到一旦你对卡片满意了，你会得到一种体验，对吧？这里发生了两件事。一是有一点提示，比如“好吧，把它拖下来。”然后卡片在移动，对吧？所以如果你没有立即开始玩它，你可以玩。我完全是碰巧。我碰巧和 Josh Dunsterville 在一个 slot 里，他是一位很棒的音效设计师兼设计师，只是互联网上另一个非常有才华的人。我分享了这个作品的一个进展，他说，“哦。”它有一些默认音效，很棒。他说，“哦，你想一起做定制音效吗？”我说，“是的，我不知道还有这种事。我不知道你会做这个。”我的意思是，我知道有这种事，但我不知道 Josh 会做。所以几乎就在一天之内，我们就在一起即兴创作不同的音效，比如，“好吧，如果你拖动它，但拖得不够，有一个阈值让它弹回去，怎么样？”再次鼓励玩耍，鼓励可摆弄性。所以 Josh 创作了所有这些非常——他在他的网站上也有完整的文章，人们应该去看看。很多音效都能向你展示东西。所以，你也会注意到，当我拖入卡片时，我们正在遮罩它。我想到的一件事是，好吧，如果我给了你一张借书卡，你会觉得你必须使用它，对吧？如果只是“给你借书卡。酷。下一个屏幕，你再也不会看到它了”，那可能会有点逊。

Well, we haven't even gotten to like once you're happy with the card, you get sort of this experience, right? Where there's two things happening here. One is there's a little bit of a hint to like, "Okay, drag it down." And then the card's moving, right? And so if you didn't immediately start playing with it, you can, right? I worked with total happenstance. I happen to be in a slot with Josh Dunsterville, who's an awesome sound designer slash designer, just another one of those very talented people on the internet. And I shared a work in progress of this and he's like, "Oh." And it had some default sounds that were great. He's like, "Oh, do you want to jam on custom sounds?" I was like, "Yes, I didn't know that was a thing. I didn't know you did that." I mean, I knew it was a thing, but I didn't know Josh did it. And so literally in like a day we're just jamming on different sounds of like, "All right, what if when you drag it, if you don't drag it enough, there's a threshold for like it goes back, right?" Again, encouraging play, encouraging fidgetability. So Josh created all these very, he has a whole write-up on this as well on his website that people should check out. A lot of sounds that show you things. So, this also you'll notice like, okay, we're masking the card when I drag it in. One of the things I was thinking is like, okay, if I gave you a library card, you're kind of thinking that you have to use it, right? It would kind of maybe feel a little bit lame if it's just like, here's your library card. Cool. Next screen, you never see that again.

随时在设置里把它调出来。

Pull it out in settings whenever you want.

完全正确。完全正确。我见过的最好的新手引导之一是 Mailbox。Gentry Underwood 是那个产品的创始人和主要设计师。那是 Dropbox 时期，两年多前的事了。那个团队创造了一枚硬币，他们给在等待名单上注册的人一个——不是实体的，而是数字硬币——你拿着它放进一个机器里，就像用代币兑换 Mailbox 的访问权限。我一直很喜欢那个。它在我记忆中脱颖而出，是一个给用户具有功能价值的代币的例子。它不只是美观，不只是表面功夫。所以在这个案例中，就像，好吧，你扫描借书卡，或者有时像在纽约那样把卡插进机器里，对吧？如果你坐地铁，你把票放进那个东西里。这就是这个设计的灵感。我想，酷，如果你只是把它拖进去呢？然后那里会播放一个成功音效，卡片就消失了。

Exactly. Exactly. One of the best on-boardings I've ever seen was Mailbox. And so, Gentry Underwood was the founder and primary designer of that product. This is over two years ago at this point in the Dropbox. And that team created like a coin where they gave people who signed up on the waitlist, they gave you like a literal, well, not a literal, but a digital coin that you would take and put into like a machine that like, you know, you're redeeming your token for access to Mailbox. And I had always loved that. That stood out in my memory as an example of giving someone a token that has functional value. It's not just aesthetic, it's not just veneer. And so, in this case, it's like, all right, you scan library cards or you sometimes put them in machines like in New York, right? If you're riding the subway, you put your ticket in the thing. That was like the inspiration for this. I was like, cool, well, what if you just drag it in? And then, there's a success sound that plays there and it kind of goes away.

然后这又是一整套东西。创始会员们得到了……我很幸运能与 Claude 或 Anthropic 和 Vercel 的朋友合作，给每位创始会员赠送一个月的 V0 Pro 或 Claude Pro，因为我希望来自世界各地的注册者都能用上 AI。这门课和资料库里并非所有内容都与 AI 相关，但很多是。对我来说，让大家能尝试 AI 很重要。所以，接下来就是如何赠送的问题：怎样以一种既出人意料又满分体验的方式送给他们？我把自己看作工匠、艺术家、工程师，一个在乎细节的人，我希望我做的每件事都能传达这一点。那么问题来了：怎么把这些东西给到他们呢？我们已经有了一个卡片的隐喻——你有一张图书馆卡。如果我们给你一张真正的礼品卡，你可以刮开看看有多少积分，怎么样？我承认，不幸的是，一个月的 Claude 比较基础。它更符合他们的品牌指南，他们是一家更大的公司。这个也不错，但我觉得 V0 卡又高了一个层次。所以这里我有这个卡片的游乐场。这里有很多东西，但都被简化了。实际上在 Interface Craft 里有一个从零到一的演示，如何添加这些不同的图层或合成所有东西。但我想强调的是，我其实也不知道。这是一个非常互动的东西，不是真实的光，而是模拟的动态光，有材质。悬停时的一个小细节是全息效果。Vercel 的 logo 是三角形，所以有三角形的图案分隔。它会随着你的交互而移动。这是那些小细节之一，单独看可能不明显，但当你使用整个东西时，你会觉得“哇，酷”。每个人都见过静态的礼品卡。我能想象到的最好的、没人见过的东西是什么？确实有很多人做过有透视、全息效果的卡片，但我不确定有没有人做过带自定义刮刮乐的卡片。你会注意到这里的缩放效果很好。这是一个自定义笔刷，不是代码里的圆形，而是我在 Figma 里创建的 SVG 笔刷，所以刮起来更真实。然后 Josh 创建了三种声音。一开始我们只有一种声音。现实世界中刮卡时，声音不是重复的。所以我们创建了三种不同的声音，刮的方向也会改变声音，这样感觉更像真的在刮。这又是一个例子，把一个简单的想法——你要获得 V0 积分——做到极致。最好的方式是什么？让它感觉互动、可把玩、令人难忘。有很多惊喜：一开始只是一张卡，悬停时你会觉得“哇，这很酷”。这里用了近似空气燃烧的颜色，但所有这些滑块都可以改变它。你可以调整很多属性，比如关掉一些东西，减少金属感或反射，让它不那么物理。这也许不是极简主义，绝对是极繁主义。但当所有元素组合在一起时，用户感受到的就是一个简单、连贯的东西。

Then this was a whole thing. This is a whole another thing of like, founding members got... I was really fortunate to work with and partner with friends at Claude or at Anthropic and Vercel to give every founding member like one month of V0 Pro or Claude Pro, because I wanted folks that signed up from all over the world. And I really wanted everyone to be able to use AI. Not everything in this course or in the library is about AI, but a lot of it is. And it was important to me that folks could try that. And so, then there's a whole flow of kind of giving that like, how do you give them that in a way that again feels unexpected, but also feels 10 out of 10. I view myself as like a craftsman, as like an artist, as an engineer, someone who cares, and I want everything I do to communicate that. And so then there's a whole question of, great, how do you give them those things, right? It's like, well, we already have a card metaphor that we're going to be working with here. Like, you have a library card. What if like we gave you a literal gift card that like you could also just scratch off and then see like how many credits you get, right? I'll admit, unfortunately, one month of Claude, this is much more like basic. Right? It's like, okay, one, this is a little bit more matches their brand guidelines, like they're I think a larger, you know, kind of company. You know, this even this is great, but I think the V0 card is like just another level like above. And so I think somewhere in here I have a... Yeah, so I have like this is the playground for like this card. But there's like a lot going on here, but it's all kind of reduced. And actually in Interface Craft they have a walk-through of like cool from zero to one, like how do you add all these different like layers or how do you composite all these things? But I guess the thing to kind of highlight is like again, I don't actually know. Like this is a very interactive thing, right? It's not real light, but it's like simulated dynamic light, there's material here. One of the small details on hover is there's this holographic... The Vercel logo's a triangle, so there's a this pattern of triangles of separates. Yeah, it's like shifting, right? As you're, you know, interacting with it. So that's like one of those small details that like maybe you don't perceive that in isolation, but when you're using this whole thing, like you're you're like, oh, wow, cool. Everyone has seen just like a little, cool, here's your gift card, it's static, right? Everyone's seen that. What is the best thing I can imagine that nobody has seen before, right? And yeah, there's definitely cards, there's a lot of, you know, folks who've done the like, cool, there's a perspective, there's like a hologram, but I don't know if anyone has made like a scratch-off, you know, card that has like custom... Oh yeah, you'll notice the zoom-in is good here. Like this is a custom brush. It's not just like a circle in code. It's like an SVG brush that I created in Figma, so then it looks more real when you're scratching it off, right? Yeah, and then Josh created like three... Well, first we had just one sound. In the real world when you're scratching, it's not just the same sound over and over. So, we actually created three different sounds. And then your direction of scratch, like it changes the sound basically. So, it feels more like you're actually scratching it off. This is just another example of like what happens if you take a very simple idea. Cool, you're going to get credits to be zero. And you take it to 11. Right, like... Mhm. What's the best way I can reveal that to someone that feels interactive, it feels fidgetable, feels memorable. There's a lot of like surprises, right? Of like, oh, cool, like it's just it's just a card and then you hover and you're like, oh, wow, this is cool. And so, this uses an approximation of some of the air burning colors, but all of these sliders help, you know, change it, right? You just have so many different properties you can play with that like, all right, let's turn off a lot of this stuff to show like, oh, there's not as much metallic or like reflection happening. So, it feels slightly less physical. This is actually not maybe minimalism. This is definitely maximalism. But when it all comes together, it just feels like a simple cohesive thing, right? That you get to experience as a user.

我觉得这种平衡非常令人印象深刻。你知道什么时候该克制，什么时候该超越所有人的想象。你现在展示的正是这种不寻常的用心。

Well, I think that's the balance that is so impressive. It's like you know when to show restraint and when to just push way past what anyone would conceivably think of. And I think this is like what you're demonstrating right here, this is what speaks to that level of uncommon care that you talk about.

我不知道有没有一个简单的好框架，但我最常用的是概念范围和概念深度。概念范围就是所有可能的方式。比如我想用 V0 积分给人惊喜，有哪些方式？第一，出现一张小礼品卡；第二，五彩纸屑爆炸，屏幕上出现 25；第三，一个可以打开的盒子，或者一张可以展开的纸。我只是即兴举例。你不一定非要设计所有方案，但思考这个范围，显然每个选项都有利弊。一旦你找到一个可行的方案，如果你的目标是展示我认为的世界级执行水平，你就必须深入。我花在这张礼品卡上的时间可能和整个 onboarding 流程一样多，因为它有很多不同的层次，无论是字面上还是交互上，都要让它达到我想要的感觉。

I don't know if I have a good or a simple framework for that, but the one I kind of lean on the most is like conceptual range and then conceptual depth, right? So, conceptual range is like what are all the ways... Like let's say I want to surprise somebody with a gift of V0 credits. What are the ways we could do that? Cool, number one is just a little gift card that appears. Number two, confetti burst and 25 like appears on the screen. Number three, all right, there's like a box that they like open up, right? Or there's a piece of paper that they unfold. And again, I'm just riffing on these like in real time. You don't actually have to necessarily design all of those, but thinking about that range of like, all right, there's obviously pros and cons for all of those different options. And then once you have one that feels like it works, if what your goal is is to demonstrate what I hope or what I think of as like a a bar setting or like kind of a world class level of execution, you just have to go deep. I've probably spent as much time on this gift card as the whole of onboarding, right? Because there's just a lot of different layers to it. Like both both like literally um and then also in terms of like, you know, the interaction of just kind of getting it to feel like what I what I wanted.

我想把视角拉远。你思考的这些交互质量和类型真的令人印象深刻。我猜你能把质量推得比以前更高，因为你已经设计了很多年。你做的这些东西太疯狂了。我很好奇，当你思考设计师带来的价值主张时，在过去一年深入这些不同的工具、工作流程和探索中，你的想法是如何演变的？

I want to zoom way out. It's really impressive the quality and the types of interactions that you're thinking through. My assumption is that you're able to push the quality bar maybe higher than you have been in the past because you've been designing for a long time. Like this is insane what you've made. So, I'm curious to hear from you when you think about the value proposition that designers bring to the table, how has your thinking on that evolved in the last even year of going deep into these different types of tools and workflows and explorations?

我不觉得自己老，但我们确实是设计界的老一代了。

I don't think of myself as old, but we are certainly, you know, we're we're like an older generation in design.

我看到很多人又重新回到了这个游戏里，对吧？你知道，我们都很忙，可能有家庭、房贷或者各种责任，对吧？我们不可能像以前那样通宵达旦地去执行这样的事情。比如，在 AI 出现之前，我有技术能力做出这张礼品卡上的所有东西，但我甚至不知道那要花多长时间。用手工做到同样的水平会耗费大量时间。所以这意味着，我干脆就不做了，对吧？在某个点上，这变得不合理了。你得交付产品，不能在某件事上花太多时间。你投入创作的东西是有限度的。我认为很多编码智能体所允许或解锁的是，所有这些实现工作现在可以瞬间或相对快速地完成。所以对设计师来说，这意味着，好吧，你那些疯狂的想法，比如我们做一个全息刮刮卡怎么样？这个想法如果 5 年前你在设计团队里提出来，你会说，好吧，我可能可以在 Figma 里画个草图，或者用某个原型工具做个原型，但除非你同样具备真正的前端工程师的能力，否则你无法把这个想法推进到比“这是它的形状”更远的程度。而现在，你可以说，好吧，让我花个 4 到 8 小时尝试实现它，然后打磨它，再进一步推进。所以我认为这就是像我这样的人或许多其他人被解锁的能力。

I'm seeing a lot of folks sort of get back into the game, right? Or you know, we're busy and maybe we have families or mortgages or just responsibilities, right? We can't necessarily stay up to pull all-nighters that we used to have to execute something like this, right? Like I had the technical ability to create everything on this gift card before AI. However, I don't even know how long it would have taken me. Like it would have taken me a lot of time by hand to get to that same level. And so what that means is like, well, I'm just not going to do it, right? It becomes irrational at some point, right? It's like, well, you have to ship. You can't spend so much time on something, you know? There is some limit to what you can put in as your input into creating something. I think what a lot of the coding agents have allowed or unlocked is all of that implementation work can now be done instantly or relatively quickly. And so what that means as designers is okay, those crazy ideas you had, like what if we made like a holographic scratch-off gift card? That's an idea that like 5 years ago if you had said that in a crib as designers, you're like, okay, I can maybe like rough it out in Figma or maybe like I prototype it in some prototyping app, but like unless you're equally competent as a true front-end engineer, you can't take that idea past like, well, here's like the shape of it, right? Versus now you can be like, okay, let me just spend like, you know, I don't know, 4 to 8 hours like trying to implement that and then refining it, right? And just taking it further. And so I think that's what's been unlocked for folks like me or many others.

有句流行的话说得好：愿你的伸手永远超过你的掌握。我很喜欢这句话，也经常思考它，因为我们总该追求那些也许永远无法达到的东西。你知道，柏拉图有“形式”的概念，比如事物的柏拉图式理念。我认为我们永远无法真正得到它。我们可以接近，但无法创造出完美的 onboarding 流程或完美的功能。这在软件或生活中都很难做到，但我们应该始终为之努力，始终伸手去够。而 AI 所实现的是压缩了你伸手的能力，对吧？它把那些曾经高高在上的想法拉近了。比如，你怎么做一个响应式的全息高光效果？怎么让它变成现实？以前我得花大量时间。而现在，你可以直接开始，再往上够一个层次。作为设计师，你总会有那种小念头：哦，如果这样会不会很酷？或者，如果我们再进一步做这个呢？我们在做任何东西时都会有这种想法。这可能会引起很多听众的共鸣。AI 让你可以，好吧，试试看，直接做。也许你一无所获，那完全没问题，但它让你快速覆盖更多领域。所以我认为最令人兴奋的是，它对设计师、工程师、创始人，任何创造东西的人来说，价值主张在于它把从想法到交付产品的时间还给了你。以前这要花很多时间。我有个想法，好，我得在代码编辑器或 IDE 里敲一堆字符，然后看输出。如果我们压缩所有这些时间，太好了。你可以更快地做出上周做的东西。那么你用这些时间做什么？我认为设计师在这方面有独特的价值，能够真正思考和推动：这个体验的终极版本是什么？我们如何更好地在产品中体现和代表我们的品牌和价值观？如何将其贯穿始终？或者如何更好地解决问题，更好地在市场中差异化定位？无论是什么，你现在有更多时间，我认为你应该有更多时间去深入。而且设计师，无论好坏，我们把自己看作房间里最在乎的人。我不确定这是否真的正确，但我们就按这个思路来。它让你展示你有多在乎，展示那种考虑的程度。而以前，你只能口头描述，或者用粗糙的仿制品或人工制品来展示可能的样子。而现在，你可以直接出现说，嘿，你们知道产品这个部分很烂吗？大家都在抱怨。好，我刚做了这个原型，完全编码的前端流程，也许有模拟数据，也许就在你的应用里。这是我们可以修复的方式。大家觉得怎么样？现在这对每个设计师来说都是现实，无论你的技术能力如何。所以我认为这个时刻令人兴奋的是，我觉得无论我有什么天赋或能力，我现在都拥有了超能力，因为我可以把所有那些疯狂或古怪的想法交给 AI，它就能去做，或者它开始为我探索，然后我们合作做出伟大的东西。

There's that popular saying, right? Like may your reach always exceed your grasp. And I love that and I think about that a lot because we should always be aspiring to things that we can maybe never get to. You know, Plato has this idea of form, right? Like the platonic idea of a thing, and I think like my view is we can never actually get it. We can get close, but we can't actually create the perfect onboarding, right? Or the perfect feature. That's really hard to do in software or in life, I think in a lot of ways, but we should always be striving for that, always reaching for that. So what AI has enabled is like it compresses your ability to reach, right? So it brings those ideas that used to be like way up there. It's like, oh, how do you make like a responsive holographic specular highlight thing? How do you make that real? It's like, I mean, I would have to spend a lot of time doing that. Versus now, you can just start like reach one more level up, right? And so as designers, you always have that little inkling of like, oh, wouldn't this be cool if or like, oh, what if we went further and did this thing, right? Like we have that in whatever we're making at any time. That probably resonates with a lot of listeners. What AI lets you do is like, cool, just try it. Just do it. Right? Maybe you don't get anywhere, and that's totally fine, but it lets you cover more ground quickly. And so, I think that's what's most exciting about it and in terms of the value prop of what that does for designers or even like engineers, founders, like anyone making something, is it gives you back more time from translating your idea to a shipped product. That used to take a lot of time, right? I have an idea, cool. I have to like type a bunch of characters into like a coding editor or an IDE, then try to see my output. If we compress all that time, great. You can make what you used to make last week, you can make it more quickly. Again, what do you do with that time? That's where I think designers are uniquely valuable in terms of being able to really think about and push like, okay, what would the ultimate version of this experience be? Or how do we better manifest and represent like our brand, our values in our product? How do we imbue that throughout? Or how do we better solve our problem or better differentiate and position in the market? Whatever it is, you have more time now where you should have more time, I think, to be able to go deeper on that. And I think designers, for better or worse, we think of ourselves, in terms of being a designer, as like the people who care the most in the room. I'm not sure that's actually true, but let's just run with that idea. What it lets you do is like show how much you care and show that level of consideration. Versus before, you just had to tell or you would show with rough again, rough facsimiles or artifacts of what something could be. Versus you can just show up and be like, hey, so you guys know how this one part of our product like it sucks? Everybody's always complaining about it. Cool. I just made this prototype, fully coded, you know, front end flow, maybe there's mock data, maybe it's really in your app, I don't know. Here's how we could fix it. Like what do we think? Right? That is now reality for everyone who's a designer, regardless of your technical ability. And so, I think that's the exciting part of like this moment is it gives like I feel like whatever natural talent or abilities I have, I feel like I have superpowers now because it's like cool. All these ideas I've got that are maybe crazy or zany, I can just give it to AI and like cool, it can go do it, right? Or it can start to explore that for me and then we can collaborate together in terms of getting something that's great.

那对于正在听的设计师，也许他们没有那么多经验，也许他们职业生涯稍早，正在寻找方法快速培养这种概念性伸手的能力。如果他们想要能够伸手更高，想象出远超 AI 会给出的显而易见之物的想法。你对那个人有什么建议吗？

What about the designer who's listening who maybe they don't have as many reps, maybe they're slightly earlier in their career and they're looking for ways to fast track the growing of this muscle that is their conceptual reach. Like if they want to just be able to reach higher and be able to imagine ideas that are so beyond the obvious thing that AI is going to give you. Do you have any thoughts for that person?

是的。有一句很棒的 Kanye 歌词，老 Kanye 的，我非常喜欢，大意是：我连续三个夏天每天做五首节拍。数量本身就是一种质量，对吧？如果你想锻炼那块肌肉，你需要做的就是连续三个夏天每天做五首节拍。多射门，对吧？这就是你开始建立直觉的方式，知道什么有效，什么无效。我认为人们常常觉得与 AI 协作或让它为你做事需要比实际更高级的东西。所以，让我们聚焦在这里，比如第 98,028 帧。这只是在展示，如果你和我在同一个房间，我们会如何白板讨论。我会说，好吧，酷。那么，如果这个流程有两个版本，有时你会得到一张普通便签，有时不是呢？

Yeah. Yeah, there's great Kanye lyric old Kanye lyric that I really love which is something like you know, I made five beats a day for three summers. Quantity is a quality of its own, right? And what you need to do if you are trying to grow that muscle is just make five beats a day every day for three summers. Just take a lot of shots at the goal, right? That is how you start to build your intuition for what works great, what doesn't work great. I think folks often think that maybe what you need to collaborate with AI or get it to do something for you is like more advanced than like what is actually needed. So like this little let's focus on, you know, frame 98,028 here. This is just showing like if you and I were in the room, this is how we would whiteboard, right? I'd be like okay, cool. So like what if you know, there's two versions of this flow and sometimes you get like a normal note, sometimes it's not.

如果点击这个东西，或者导航方式是平移浏览呢？酷，你可以移动它。然后，如果点击时卡片放大到中心并缩放，其他卡片推开并淡出呢？任何人看这个都能在五秒内画出这种保真度的草图。这些甚至不是卡片，这几乎就是最原始的 Figma 了。我猜这里有一些自动布局，但这就像截了个图。我做的唯一特别的事是运用了关注点分离。我不在乎视觉设计，它很粗糙，很糟糕，完全没关系。这些其实保真度太高了，它们应该只是色块。我想表达的只是交互模型的想法。默认情况下你看到这个屏幕，然后平移，做这个。这是我尝试的众多方案之一，而这只是我给 AI 的指导级别。也许对有些人来说，哇，这是个革命性的想法，我不知道还能这样，但对另一些人，希望你会说，哦，这没什么，我能做到。我可以直接画出我想要的东西，然后去和 V0、Claude Code 或 Codex 协作实现它。没有真正的捷径，唯一的捷径就是做很多东西，尝试它们。不要限制自己，觉得可能只是因为不知道怎么实现，但这不意味着你不能用我们现在都有的工具去实现和尝试。

What if when you click this thing, or what if the way you navigate is you pan around? Cool, so you can shift it. And then, what if when you click it, the card zooms to center and scales up, all other cards push out and fade? This would take anyone who's watching could sketch this out at this level of fidelity in like five seconds. These aren't even cards. This is just like almost as raw Figma as you get. I guess there's some auto layout here, but this is like a screenshot of a thing. The only special thing I'm doing here is applying the muscle of a separation of concerns. I don't care about the visual design. It's rough. It's awful. Literally doesn't matter. These actually are too high fidelity. They should just be color blocks. All I'm trying to express is my idea for the interaction model. By default, you see this screen, and then you pan around, do this. This was one of many things I tried, and this is just the level of direction that I'm giving to AI. Maybe to some people it's like, wow, this is a revolutionary idea, like I didn't know you could do this, but to others hopefully you're saying, oh yeah, there's not much to that. I can do that. I can literally just sketch out a thing that I want and then go collaborate with V0 or Claude Code or with Codex to try to implement that. There are no real shortcuts. The only shortcut is to make a lot of things, try them out. Don't limit yourself into thinking, oh, this might be just because you don't know how to actually create that implementation doesn't mean you can't use the tools we all have now to actually implement it and try.

即使是 9828 帧，那也是你直接放进 Claude 的图片吗？

And even for the 9828 frame, is that an image that you were just putting into Claude?

Command Command Shift C，复制为 PNG，放进 Claude 然后说，酷，这是我想要创建的故事板。有争议的说法：我认为 Figma 仍然非常重要，但我认为大多数人对它的使用方式是错的。试图在 Figma 中以全保真度调校东西的问题在于 Figma 是个谎言。它不是你的实际代码库。甚至它表示颜色和类型的方式都与在浏览器中实际实现的不同。但好消息是，我喜欢用 Figma 做的是像这样的事。只是粗略地，如果它这样呢？然后把它给 LLM。这只是另一种向编码智能体传达意图或目标的方式。你可以用语言描述，你之前提到，“啊，我需要给编码智能体什么关键词？” 有一部分是那样，但你也可以给它图片。你可以把图片粘贴到 Claude Code 或 V0 里，它会推断，“好的，酷，给你。” 它并不总是有效，不是一次就成的。

Command Command Shift C, copy as a PNG, put that in Claude and be like, cool, here's a storyboard of what I want to create. Controversial statement: I think Figma is still really important, but I think what most people use it for is wrong. The problem with trying to use it to dial in things at full fidelity in Figma is that Figma is a lie. It's not your actual code base. Even how it represents color and type is different from how it will actually be implemented in a browser. But the good news, and what I love using Figma for, is stuff like this. Just roughly, what if it did this? And then give that to an LLM. This is just another way of communicating your intent to a coding agent or your goal. You could describe it in words, and you earlier mentioned, "Ah, well, what are the keywords that I need to give a coding agent?" There is some of that, but you can also give it images. You can paste images into Claude Code or into V0, and it will infer, "All right, cool. Here you go." And it doesn't always work. It's not one shot.

但越来越好了。

Better though.

没错。它正在变得更好，而且重点是让你更快地勾勒出替代想法。我之前给你看的那个，底部只有五张卡片，大概花了我 5 分钟来创建、评估，然后觉得，“嗯，不是这个。” 然后继续下一个。所以你可以退一步想，“好的，酷。我已经尝试了 38 种设计这张卡片的方式。现在我知道肯定是这两种之一。” 这让我想起 Mr. Beast 的一句话。他谈到很多人向他请教制作 YouTube 视频的建议，他的回答总是先做 100 个视频，然后我会回答你任何问题。等你做完 100 个视频，你就没有问题了。你通过反复练习就搞明白了。想到下一代设计师，我很兴奋。即使是你那个页面底部五张卡片的例子，那也不是一个轻率的交互。手工组装、构建和测试需要一些时间。而现在有人可以在 5 分钟内完成所谓的“练习”。5 分钟一次练习，太厉害了。以前我们用 Illustrator 和手写代码时，那种练习要花几个小时。比如这个原型，这是主页的核心交互模式。就像，好的，你有这些卡片，点击一张，它们移到中心。是的，它很好，非常精致。但实际上我就是这样开始做的。我根本没考虑视觉效果。我只想调校交互。然后这个提示，虽然有点长，但如果你把它粘贴到 V0 里，它会一次性生成完全一样的东西。所以这就是那种水平，哦，天哪，你可以在 60 秒内探索一个交互想法，然后探索另一个，再一个。这非常强大。所以我认为，如果大家要带走一个要点，那就是你应该用这些新技术更广泛地探索，从而更深入，不只是尝试做更多或别的事情，而是把你已有的东西真正提炼、精炼，回归本质，这样才能做出伟大的东西。

Exactly. It's getting better, and also the point is to let you more quickly sketch out alternative ideas. The one I showed you earlier, with just five cards at the bottom, probably took me 5 minutes to create, evaluate, and be like, "Eh, this isn't it." And then move on to what's next. So you can zoom out and be like, "Okay, cool. I've tried 38 different ways of designing this card. Now I know for sure it's one of these two." It reminds me of a Mr. Beast quote. He talks about the amount of people that ask him for advice on making YouTube videos and how his response is always to make 100 videos and then I'll answer any question that you want. And by the time you make 100 videos, you don't have any more questions. You figured it out just by putting in the reps. And it's something that I get excited about thinking about this next crop of designers. Even your example with the five cards at the bottom of the page, that's not that flippant of an interaction. It would take some time to hand assemble that and build it and test it out. And now somebody can get that quote-unquote rep in 5 minutes. That's a heck of a rep in 5 minutes. That type of rep when we were dealing with Illustrator and hand coding things would take hours. This prototype here, for example, this is the core interaction pattern for the homepage. It's like, okay, you've got these cards, you click one, they come to center. And yeah, it's nice, it's really refined. But literally this right here is how I started making it. I was not thinking at all about the visuals. All I wanted to dial in was the interaction. And then this prompt, it's a little bit longer, but if you paste this into V0, it'll one shot exactly like this thing. So that's the level of, oh man, yeah, you can just in 60 seconds explore an interaction idea and then explore another one and another one. That's really powerful. And so, I think that's maybe if there's one takeaway that folks have, I think it's that you should be using these new technologies to explore more broadly and go deeper as a result, not just try to do more things or other things, but take what you have and really distill it, refine it, again to its essence, and that's how you make something great.

Josh，这太棒了。光是看你工作我就学到了很多，非常感谢你今天来揭开帷幕，给我们一些幕后视角，聊聊你对好软件外观和感觉的看法。我每一分钟都很享受，只想说声谢谢。在你走之前，我想花一分钟给你介绍我最喜欢的产品，因为我经常被问到我的技术栈。Framer 是我建网站的工具，Genway 是我做研究的方式，Cronola 是我在 Crit 期间记笔记的工具，Jitter 是我给设计做动画的工具，Lovable 是我用代码实现想法的工具，Mobbin 是我找设计灵感的地方，Paper 是我像创意人一样设计的工具，而 Raycast 是我每一步的快捷方式。

Josh, this has been amazing. I've learned a lot just watching how you work, and I really, really appreciate you coming on today and pulling back the curtain, giving us a little bit of a behind-the-scenes, talking through some of the ways that you think about what good software looks and feels like. I've enjoyed every minute of it and just want to say thank you. Before I let you go, I want to take just 1 minute to run you through my favorite products because I'm constantly asked what's in my stack. Framer is how I build websites, Genway is how I do research, Cronola is how I take notes during Crit, Jitter is how I animate my designs, Lovable is how I build my ideas in code, Mobbin is how I find design inspiration, Paper is how I design like a creative, and Raycast is my shortcut every step of the way.

现在，我亲手挑选了这些公司，这样我就能全职做这些节目了。所以，支持本节目最重要的方式就是去看看它们。你可以在 dive.club/partners 找到完整列表。

Now, I've hand-selected these companies so that I can do these episodes full-time. So, by far, the number one way to support the show is to check them out. You can find the full list at dive.club/partners.