Nate Parrott 揭秘 Claude Design 幕后

你知道吗，Claude Design 最初只是一个人的副业项目。Claude Code 就是文本，对吧？如果我把一堆 Claude Code 终端的截图粘贴给你，让你知道界面长什么样，然后让你通过输出 HTML 来模拟设计，会怎么样？我让 Claude 试了一下，它做得还不错。虽然不是完美——没有一条线是对齐的——但足以让人惊叹：哇，Claude 真的能做模拟图。所以我建了这个内部工具，后来就成了 Claude Design，它就是一个智能体加上输出 HTML 的能力。

Did you know Claude Design started off as a side project by one person? Claude Code is just text, right? What if I just paste a bunch of screenshots from the terminal from Claude Code into you so that you know what the interface looks like, and then I ask you to mock up stuff by outputting essentially HTML? And I asked Claude to do this, and Claude actually did an okay job. It wasn't perfect—none of the bars lined up—but it was enough to be like, whoa, Claude can actually make mockups. So I built this internal tool that became what is now Claude Design, which was just an agent plus the ability to output HTML.

在 Anthropic 内部领导这样一个项目的设计，感觉如何？

What's it like leading design of a project like this inside of Anthropic?

在以前的时代，我们根本不可能做出这样的原型，但我们做到了。而且感觉真的非常酷，甚至有点傻到不好意思展示。

We never would have prototyped it in the previous era, but we were able to do it. And it actually felt really, really cool and a little too goofy to show.

如果没有这种极速原型制作的能力，产品里有一整套功能根本不可能见天日。

There's a whole set of features in the product that never would have made it to the light of day without being able to be prototyped really, really rapidly.

欢迎来到 Dive Club。我是 Vid，这里是设计师永不停歇学习的地方。本周的嘉宾是 Nate Parrott，你可能记得我曾采访过他，当时他是 Browser Company 的创始设计师。今天 Nate 将带来 Claude Design 的终极幕后揭秘。首先，我请他整理了几个他在工作流程中使用该工具的例子，以便我们更好地了解 Claude Design 能实现什么。

Welcome to Dive Club. My name is Vid, and this is where designers never stop learning. This week's episode is with Nate Parrott, who you might remember from when I interviewed him as the founding designer of the Browser Company. Well, today Nate's going to come on and give the ultimate behind-the-scenes of Claude Design. And to start, I asked him to put together a few examples of how he uses the tool in his workflow, just so that we can get a better sense of what Claude Design makes possible.

这可能是最真实的我平时工作的样子。当然，我在 Claude Design 里做了很多 Claude Design 的设计。我尽量采用提示词优先的方式，只给模型一个大致的轮廓，然后让它给我一些选项。我发现模型在设计方面越来越好，但离优秀还差得很远，离好的品味也差得很远。所以通常我会让它们用数量来弥补。我会要求设计的每个可能方面都给出五个不同版本，然后我会逐一尝试，看看它们的感觉。

So this is probably the realest look at the way that I typically work. So of course I do a lot of design for Claude Design within Claude Design. And I try to go prompt-first, where I just give the model a rough outline of what I'm looking for and I ask it to give me some options. You know, what I've found is the models are getting better and better at design, but they're still really, really far from being good and really, really far from having good taste. And so typically what I will do is I will just ask them to make up for that in terms of sheer volume. So I'll ask for like five different versions of every possible aspect of a design, and then I'll go through and I'll sort of try them all and see what they feel like.

这太迷幻了。我愣了一下才反应过来，哇，左边真的在变。我明白了，这种套娃感是真实的。

This is trippy. It took me a second to be like, oh wow, that's actually changing on the left here. I understand the inception is real.

在现在的产品里，我们有这样一个功能：一旦你的提示词缓存过期，我们会轻轻提醒你开启新对话，这样你就不会浪费大量 token。所以我有布局、颜色、图标、文案大小等等的选项。通常我的工作方式是：我会说，给我一些选项，然后我会说，好的，我有点喜欢变体 A，也有点喜欢变体 B，你能再给我六个类似的选项吗？我也会给出更具体的指导。但通常，我就是这样工作的。我会说，给我一堆东西。我会把它当作一个初级设计师，然后说，让我给你反馈。让我用我的品味加上你快速模拟的能力。

In the product right now, we have this thing where once your prompt cache expires, we lightly nudge you to make a new conversation so that you don't end up spending a bunch of tokens. And so I have options for the layout, the color, the icons we use, the copy size, all that stuff. And typically the way that I'll work is I'll say, give me some options for this, and then I'll say, okay, I like variant A a little bit and I like variant B a little bit, can you give me six more options in that vein? And I'll give it more specific guidance as well. But typically, this is how I work. I'm like, give me a bunch of stuff. I'll treat it as like a little bit of a junior designer, and I'll say, let me give you feedback. Let me use my taste alongside your ability to mock things really, really fast.

这真的很酷，因为它完美地介于我使用 artifacts 或有时甚至原始 HTML 的方式和 Josh Puckett 的 Dial Kit 之间。原始 HTML 给了我合理的变体，而 Josh 给了我参数，这个两者兼得，非常有吸引力。

This is really cool because it's like the perfect middle ground between how I'm using artifacts or sometimes even just raw HTML and then something like Dial Kit by Josh Puckett. Whereas the raw HTML gives me the variance in a way that makes sense, but then Josh gives me the parameters, and this gives me both, which is very compelling.

没错，没错。我给大家的最大建议是，如果你不确定某样东西应该是什么样子，首先，你可以进入我们的编辑器进行调整，但也可以直接让 Claude 做任何你想要的调整。所以如果你不确定配色方案应该是什么样，或者不太确定动画应该如何阻尼，你都可以直接问 Claude。你可以说，给我五个不同的选项，或者给我一个滑块来选择，或者让我手动定位并移动它。Claude 实际上可以为你想要做的任何事情构建任何界面。

Exactly. Exactly. And the biggest tip I have for people here is, if you aren't sure what something should look like, first of all, you can go into our editor and tweak it, but also you can just ask Claude for whatever tweak you want. So if you're not sure what the color scheme should look like, or you're not quite sure how an animation should be damped, you can just ask Claude. You can be like, give me five different options, or give me a slider to pick them, or let me manually position something and move it around. And Claude can actually build whatever interface it is for whatever you're trying to do.

这里还有一个相关的例子。我们在尝试不同的视觉效果和配色方案，看看应用可能是什么样子。你知道，你可以自己手动更改所有的颜色 token。但我说，嘿，你知道，我还处于只想用眼睛看的阶段。所以我说，嘿 Claude，你知道吗？如果这感觉就像 Instagram 呢？给我一堆对所有颜色变量的高层控制。于是它给了我几个不同的主题，然后给了我照片编辑风格的滑块，我可以调整色相、饱和度、亮度等等。这感觉是一种非常快速的方式，让我在最终确定精确颜色之前，先得到看起来不错的效果。

So here's another example that's kind of related to this. We were playing around with different visuals and color schemes for what the app might look like. And you know, you can just try manually changing all the color tokens yourself. But I said, hey, you know, I'm still at this phase where I kind of just want to eyeball it. And so I said, hey Claude, you know what? What if this just felt like Instagram? Give me a bunch of really, really high-level controls over all the color variables at once. So it gave me a couple different themes, and then it gave me photo edit style sliders where I could tweak things like the hue, the chroma, the lightness, and all that. And it felt like a really fast way to get to something that looked really good to me before dialing it in and actually figuring out the precise set of colors.

太好了。几年前，颜色主题化会非常费力，我看着这个简直难以置信。我会花很多时间在 Figma 里创建这种环境。

That's so good. The color theming would be so painstaking a couple years ago, and I'm just looking at this like unbelievable. I would have spent so much time creating this type of environment in Figma.

快速插播一条消息，然后我们继续。Figma 在他们的技术栈中加入了动效，但说实话，我很难离开像 Jitter 这样的工具。它非常简单，因为它只做好一件事，但相比 Figma 也非常强大。比如你可以从单个素材生成数百个品牌变体，或者生成一整批 CSV 视频，甚至设计你自己的自定义文字效果。它功能丰富，却是我整个工具链中最直观的产品之一，毫无疑问。如果你还没用过 Jitter，我强烈推荐。只需访问 dive.club/jitter 即可开始。

Real quick message and then we can jump back into it. So Figma added motion to their stack, but I'll be honest, I'm having a hard time leaving a tool like Jitter. It's just so simple because it does one thing really well, but it's also super powerful compared to Figma, too. Like you can spin up hundreds of on-brand variants from a single asset, or generate a whole CSV's worth of videos, or maybe even design your own custom text effects. There's so much to it, and yet it's one of the most intuitive products in my entire stack. Hands down. So if you haven't used Jitter yet, I cannot recommend it enough. Just head to dive.club/jitter to get started.

我提前看到了 DES 新的私有测试版。让我告诉你，他们把无限画布提升到了一个全新的水平。它不仅仅是随机的模拟图或一次性的原型。你可以直接在画布上运行真实的产品页面。想想这为并行探索解锁了什么。你可以随意分支，让智能体并排探索多个想法，这对于团队对齐非常完美，因为你有一个空间来审查原型、留下评论，甚至让智能体根据你收到的反馈采取行动。这很重要。但问题是，Destin 每周只接纳几个团队。但如果你访问 dive.club/desen，你可以与他们的联合创始人 Gav 预约聊天，告诉他们 RID 让你来插队。所以去 dive.club/desen 吧，就是 dsn。现在，回到正题。

So I got a sneak peek of DES's new private beta release. And let me tell you, they are taking the infinite canvas to a whole other level. It's not just random mock-ups or one-off prototypes. You can run real product pages directly on a canvas. I mean, just think about what that unlocks for parallel exploration. You can branch as much as you want. Get the agent to explore multiple ideas side by side, which is perfect for aligning the team because you have one space to review prototypes, leave comments, and even get the agent to act on the feedback you receive. It's a big deal. But here's the thing. Destin is only onboarding a few teams every week. But if you go to dive.club/desen, you can book a chat with their co-founder, Gav, and tell them RID sent you to jump the queue. So head to dive.club/desen. That's dsn. Now, on to the episode.

得到这些一次性的小编辑器真是太有趣了。

It's just so fun to get these little one-off editors.

这里有个很酷的功能，你可以拖入一张图片，它会直接从图片中提取配色方案。比如，我桌面上有一张橘子的照片，我把它拖进去，它就会给我一个橘子主题，我还可以调整，这挺棒的。它感觉像个玩具，但在确定我想要的风格时非常有用。

One cool thing you can do here is you can drop in an image and it will pull the color scheme straight from the image. So, if I have this photo of a tangerine on my desktop and I drop it in, it'll give me a tangerine theme that I can tweak, which is pretty neat. It feels like a toy, but it's very useful in terms of trying to figure out what vibe I actually want to go for.

另一个关于构建你自己的编辑器的例子是，当我们启动这个项目时，我们想做一个小的介绍预告片，向人们展示你可以在 Claw Design 里做什么。有一段时间，这个预告片在你打开产品时会播放。我不是 After Effects 的专家，完全不知道怎么做。所以我就让 Claude 帮我做这个动画。然后我打算在 Cleot 里录制并下载。我发现模型在动画时序上不是特别擅长，也不擅长把光标放在正确的位置。所以我说：“嘿，给我一整套调整参数，比如 173 个参数，覆盖这个动画的每一个细节。”这样我就可以进去自己看着调。如果我不确定光标应该放在哪里，我可以直接拖拽，把它放到我想要的位置。除了这个特定项目，我不需要这个编辑器做其他事，但 Claude 能帮我把它调出来，效果还挺好。

Another thing in that vein of building your own editors is when we started the project, we wanted to have a little intro teaser that showed people what you can do in Claw Design. For a while, this played when you opened the product. I am not a pro at After Effects, and I have no idea how to do this. So I just asked Claude to make this animation for me. Then I was going to record it in Cleot and download it. What I found is that the model is not super great at getting animation timing working, and it's not super great at positioning the cursor in the right place. So I said, 'Hey, give me a full set of tweaks, like 173 tweaks, for every single parameter of this animation.' So I can go in here and eyeball it. If I'm not sure exactly where the cursor is supposed to be, I can drag it around and position it exactly where I want. It's like I don't need this editor for anything else besides this one particular project, but Claude was able to call it up for me. And it worked pretty well.

看你拖来拖去有点让我脑洞大开。我觉得你展示的所有东西都存在于我熟悉的媒介之间的一个有趣中间地带。对我来说，你刚才做的很难归类。

Seeing you drag it around kind of breaks my brain a little bit. I guess it's like everything that you're showing exists in this interesting middle ground between mediums that I'm familiar with. That doesn't fit in a box for me, what you just did.

是的。我是说，这就是我的全部理念，对吧？这就是我试图向人们表达的，尤其是当人们在制作非交互式软件的东西时，比如幻灯片或文档。我试图让人们接受这个想法：你可以存在于中间地带。你可以做幻灯片，也可以做原型，或者做动画，但你也可以做一些介于所有这些之间的东西。所以，你知道，我刚才演示的是创建一个幻灯片来推销一个想法会是什么样子。这是我的一个愚蠢的想法：我们应该填平东河，在那里建住房。顺便说一句，这不是一个真正的建议。它的酷之处在于，你可以制作交互式的文档，我认为很多人没有真正意识到现在你可以做到这一点，因为任何人都可以让模型为他们编码。所以，如果我想说服人们，比如一个政策建议，我不必只给他们看文档，我可以给他们看一个交互式的东西，他们可以调整参数和假设，看看提案的各个方面如何变化。你可以对任何东西这样做。你可以把它嵌入文档，嵌入演示文稿，甚至理论上可以有一个交互式动画。所以我对如何构建位于旧静态形式和新动态形式交叉点的视觉制品感到非常兴奋。你也可以在很小的方面这样做。比如，我之前在 Shopify 做过一个演示，我想为每个部分制作非常漂亮的视觉分节幻灯片。这种事情在其他任何情况下都不合理，但现在因为超级容易，我可以制作这些漂亮的、动画丰富的、视觉化的分节标题，然后展示它们。

Yes. I mean, this is my whole thing, right? This is what I try to express to people, especially when people are making stuff that's not interactive software. They're making stuff like decks or documents. I try to pull people on this idea that you can exist in the middle ground. You can make a deck, or you can make a prototype, or you can make an animation, but you can also just make something that's right in the middle between all of this. So this is, you know, I was demoing what it might look like to create a deck to pitch an idea. This is my dumb idea of we should fill in the East River and build housing there. Not a real suggestion, by the way. What's cool about it is that you can make documents that are also interactive in a way that I think a lot of people don't really internalize that now you can do because anybody can ask the model to code for them. So if I'm trying to convince people about, you know, a policy suggestion, I don't just have to show them a doc, I can show them an interactive thing where they can tweak the parameters and tweak the assumptions and see how various aspects of the proposal change. And you can do this for anything. You can embed this in a document. You can embed this in a presentation. You could even, in theory, have an interactive animation. So I'm very excited about how do we build visual artifacts that live at the intersection of the old static forms and new dynamic forms. And you can do this in really small ways as well. Like I did a presentation at Shopify a while back and I wanted to make really neat visual section slides for each section. This is the kind of thing that would not make sense to do in any other world, but now that it's super easy, I can make these nice animated, richly visual section headers and just show them.

太酷了。讲故事的天花板肯定提高了。

It's cool. The ceiling for storytelling has definitely risen.

是的。我是说，我一直在自己的实践中努力提高讲故事的天花板，但我们也能够把这一点传播到公司其他部门。所以 Anthropic 做了一个调查，我们问了一堆人他们想要从 AI 得到什么，创意团队没有做一个静态的东西，而是做了一个漂亮的、轻度交互的视觉动画，当你滚动时，你会看到不同的点以各种方式变化。我不完全知道这是如何工作的，它展示了什么，但很有趣，因为这是你通常不会做或不会让它交互的东西。在其他任何情况下，你都不能拖动地球仪来改变你的姿势，但在这里你可以，因为一切都是交互的，而且超级容易。

Yeah. I mean, so I've been trying to raise the ceiling for storytelling in my own practice, but also we've been able to seed this to the rest of the company as well. So Anthropic did this survey where we asked a bunch of people what they wanted from AI, and the creative team, rather than doing a static thing, was actually able to do this nice little lightly interactive visual animated thing where as you scroll you see the different dots change in ways. I don't know exactly how this works and what it's showing, but it's fun because it's the kind of thing that you wouldn't normally do or make interactive. In any other world, you wouldn't be able to drag the globe and change your posture, but you can here because it's all interactive and it's all super easy.

现在，关于触手可及的交互性，我喜欢的另一件事是，你可以让它被授权去做更傻、更蠢的事情。所以不久前我们开了一个会，那是在发布之前，我们有一个非常傻的想法。我打开 Claw Design，打开语音模式，口述我想要的东西，Claude 基本上一次就搞定了。也许试了两三次，但这个想法在这个时代之前永远不会见天日。我们没有发布它，但至少我们能够尝试。所以，这个想法是这样的。想象你在一个设计中，你想给出反馈，你想用一种有点有趣的方式。你打开这个“天气预报员”按钮，允许使用摄像头，然后它实际上把你绿幕抠像到设计之上，我可以指着东西给出反馈。是的，我喜欢蓝色。这不是这个产品的好名字。说实话，我们差点就发布了这个，因为在以前的时代我们永远不会做原型，但我们做到了，而且感觉真的很酷，只是有点太傻而不适合发布。

Now the other thing that I love about having interactivity at your fingertips is that you can kind of get it licensed to do sillier dumber things. So we were in a meeting a while back. This is pre-launch, and we had this really silly idea. I just opened up Claw Design and turned on voice mode and dictated in what I wanted, and Claude basically one-shot it. Maybe it was two or three shots, but it was this idea that never would have seen the light of day before this era. We didn't ship it, but at least we were able to try it. So here's the idea. Imagine you're in a design and you want to give feedback, and you want to do it in a little bit of a fun way. You open this weatherman button and you allow your camera, and then it actually green screens you on top of the design, and I can point at stuff and give feedback. Yeah, I love blue. This is not a good name for this product. Honestly, we almost did ship this because we never would have prototyped it in the previous era, but we were able to do it, and it actually felt really cool, and a little too goofy to ship.

产品中有一整套功能，如果没有能够非常非常快速地原型化，它们永远不会见天日。

There's a whole set of features in the product that never would have made it to the light of day without being able to be prototyped really, really rapidly.

所以我在这次通话之前做的是，我用 Supercut MCP 制作了一个视频，我在视频中讲述我的设计，然后我把它作为提示词提供给 Quad。但整个过程我都在想，这是一个非常有趣的婴儿步骤，但肯定有一种媒介更适合这个特定用例，它更有主见，比如我谈论一个非常具体的元素，帮助 Claude 弥合一点差距。就是这个。就是这个。也许“天气预报员”有点傻，但它很棒。我喜欢这个原型。

So what I did right before this call is I was using the Supercut MCP to make a video of me talking through my designs, and then I served that up as my prompt inside of Quad. But the whole time I'm like, this is a really interesting baby step, but there's definitely a medium that's a little bit better and more opinionated for this specific use case where I'm talking about a very specific element and helping Claude bridge that gap a little bit. And this is it. This is it. Maybe Weatherman's a little bit goofy, but it's awesome. I love this prototype.

嗯，所以它最终变成了一个不那么有趣但仍然相当有用的东西。这是 Claude Design 中我最喜欢但被低估的功能之一，如果你能用的话，你应该试试。所以我们有这个语音模式，它按你期望的方式工作。

Well, so what it actually ended up becoming was a little less fun, but still pretty useful. This is one of my favorite underrated features of Claude Design, but you should try it out if you're able to. So we have this voice mode that worked like you'd expect.

你按下一个按钮，就可以对 Claude 口述指令，但你也可以指向某些东西，Claude 会知道你在指什么。所以，比如，我可以进入这个模式，像平常一样口述，但然后我可以指向东西，它们会与我在指向时所指的内容关联起来。所以，我可以做类似的事情，比如，嘿，这个滑块上的旋钮有点太小了。让我们把它做大一点。嘿，Claude，你又在做那种经典的事了，左边有彩色边框，但其余部分没有边框。让我们尽量避免那样。酷的地方在于，它确实提高了你与 Claude 沟通的带宽。而且它超级容易发现吗？不。

You press a button and you can dictate to Claude, but you can also point at things and Claude will know what you're pointing at. So, for example, I can go into this mode and I'm just dictating like normal, but then I can point at things and they'll be associated with whatever it is I was pointing at when I did that. So, I can do things like, hey, the knob on this slider is a little too small. Let's make it a little larger. Hey Claude, you're doing the classic thing where you have a colorful left border, but no border on the rest of it. Let's please try to avoid that. And what's cool is that it really increases the bandwidth with which you're able to communicate with Claude. And is it super discoverable? No.

这太棒了。而且仍然很有趣。文字后面的小尾随动画，太神奇了。我甚至不知道有这回事。我几周前还在描述 iMessage。我当时想，“这就是我在构建时想要与 Claude 交互的方式。”直到现在我才意识到你已经……

This is so great. And it's still fun. The little trailing animation with the text, that's amazing. I didn't even know this was a thing. I literally was describing an iMessage just a few weeks ago. I was like, "This is the interaction that I want for interacting with Claude while building." And I didn't actually realize until just now that you had already...

我的意思是，这是我们的问题，对吧？我们必须让很多这样的东西更容易被发现，并在……之间走钢丝。

I mean, this is our problem, right? We have to make a lot of these things a little more discoverable and walk the line between...

这很酷，我们希望你去使用它，同时我们也想退后一步，让你去设计。这就是构建设计工具的挑战，但希望很快会有更多这样的东西落地。

It's cool and we want you to use it and also we want to step back and let you design. Such is the challenge of building a design tool, but hopefully a lot more stuff like this will land pretty soon.

所以我选了一些不是我做的东西，而是由其他几个人做的。Twitter 上有一位叫 Yanlu 的艺术家兼设计师，她一直在发布一些我最喜欢的 Claude 设计作品。这里有一个例子。她做了这个漂亮的小邮票，上面有鸭子动来动去，还有非常逼真的纹理，当你移动鼠标时，视角会变化，还有高光。我喜欢这个的原因是，首先，它很美，我觉得是非常好的作品，而且它是那种今天没有真正工具可以用来构建的东西。也许你可以在 Origami 里做，或者在 After Effects 里伪造，但除此之外，你必须完全从头开始编写一个网站才能做到。她谈到 AI 让她能以思维速度构建她那些傻傻的随机想法。

So I chose some stuff that was not made by me but was made by a handful of other folks. There's this artist and designer on Twitter named Yanlu who has been posting some of my favorite Claude design stuff. Here's one example. She made this beautiful little postage stamp with these ducks moving around and this very visceral texture that as you move your mouse, the perspective changes and there's a highlight. What I love about this is, first of all, it's just beautiful and I think really nice work, but also it's the kind of thing that there's not really a tool that you could use to build this today. Maybe you could have done this in Origami or you could have faked it in After Effects, but besides that, you would have had to just code a website entirely from scratch to do this. And she talks about how AI lets her build her silly random ideas at speed of thought.

另一个很酷的东西来自 Ryan Mather，他也在 Anthropic 工作，是内部 Claude 设计的主要倡导者之一。他当时有点怀旧，我想，想做一个受 Susan K 启发的图标编辑器，他就在 Claude 设计里直接做了。所以我们构建了这个非常丰富的界面，玩起来真的很有趣，但也是一个真正有趣的创意工具，对吧？我们有传统的像素编辑器，但你也有这个迭代设置，可以创建新的迭代。说实话，我不太明白这是怎么工作的，但我只是觉得太神奇了，任何人都可以构建自己独特的小型编辑工具，并用它来创作作品。这几乎感觉像是在这些工具中创作出惊人作品的最佳方式是先非常刻意地思考你想要设置的环境。而且这确实是我们可用的方式。你可以花所有时间构建完美的环境来创作你的作品。而这才是真正让作品脱颖而出的东西。

Another really cool thing comes from Ryan Mather, who also works at Anthropic and is one of the big proponents internally of Claude design. He was in a retro mood, I think, and wanted to build a Susan K inspired icon editor, and he just did it right within Claude design. So we built this really rich interface that is just really fun to play around with, but also a legitimately interesting creative tool, right? We've got the traditional pixel editor, but you've also got this iteration setup where you can create new iterations. And I'll be honest, I don't quite understand how this works, but I just find it amazing that anybody can build their own little idiosyncratic editing tool and use it to create work. It almost feels like the best way to create amazing work in one of these tools is to think really deliberately about the environment you want to set up first. And that's honestly how this is available to us. You can spend all this time building the perfect environment for creating your work. And that's really what's going to set apart the work itself.

这让我现在脑子里冒出很多不同的想法。

This is getting my brain going in a lot of different directions right now.

我是自定义编辑器的忠实粉丝，你可能看得出来。

I'm a big fan of custom editors, as you can probably tell.

我想进入起源故事，了解你是怎么做出这一切的，但很快，我能听听你作为工具制造者、在前沿工作的人的观点吗？你现在如何看待设计工具领域的格局？有几个不同的角度我挺感兴趣的。显然现在有各种各样的工具。我知道很多听众都在想，天哪，有点不知所措。什么时候才真正值得去用新东西？然后还有另一群人，你知道，也许他们在 Figma 里，也许他们在纸上，他们加了 Claude Code 作为另一件事，这彻底突破了他们能做的上限。而 Claude 设计在这个格局中处于什么位置还有点不清楚。你怎么看？

I want to get into the origin story and how you made all of this, but really quickly, can I just tap into your perspective as a toolmaker, someone who's working on the frontier? How do you see the landscape for design tooling right now? There's a few different angles that you could take that I'm kind of interested in. Obviously there's a bunch of different types of tools right now. And I know a lot of people listening are like, man, a little bit of overwhelm. Like when is it actually worth reaching for the new thing? And then there's another camp of people where, you know, maybe they're in Figma, maybe they're in paper, and they've added Claude Code as this whole other thing that's kind of blown the roof off of what they can do. And it's a little bit unclear where Claude design sits in that landscape. How do you think about it?

我的思考方式是，让我们专注于那些从事软件设计工作的人，他们的公司最终产出是软件设计。有很多人不做这个，但让我们谈谈做这个的人。我认为像 Claude Code 这样的东西对我来说，对我们团队基本上每个人，以及很多其他公司来说，都是一个巨大的解锁。没有什么能替代直接进入你正在生产的实际材料，能够直接发布到生产环境，并调整特定的交互、特定的视觉效果和动画，确保东西在发布时是完美的。所以我的看法是，如果你的团队最终产品的一部分是编码，那么每个设计师都应该使用 Claude Code，哪怕只是因为这比和工程师来回沟通、烦他们做修改、希望他们有耐心等待并做对要容易得多。但像 Claude 设计或 Figma 或任何其他设计工具这样的工具，则是用于其他一切。随着构建软件变得越来越容易，你构建什么的问题变得越来越重要。当工程被压缩时，设计变得非常非常有价值。我不想说商品化，但有点像现在每个人都有一个真正好的软件工程的基线水平可用，所以当然差异化将是你的设计、你的想法、你的定位和你的创造力。所以设计工具是你磨练这些的地方。所以我做了大量的设计工作、原型设计和实验，在真正的编码工具中产生我们最终会交付给客户的实际输出。但老实说，我越来越多的时间花在纯设计工具上，只是玩想法，因为如果你是一名设计师，当然，你的很多工作是交付屏幕和交付软件，但很多工作只是与他人达成一致，处理非常简单的想法，或者试图把一个非常复杂模糊的空间驯服，弄清楚这里什么才是真正重要的？我们到底想用用户的什么体验？所以我发现像 Claude 设计这样的工具，但也包括像 Figma 这样的工具，对这类事情非常非常有价值。我不认为有任何全能的设计工具存在。

The way that I think about it is that let's focus on people who work at a software design job where the final output of the company is software design. There's a lot of people who don't do that, but let's talk about the folks who do. I think something like Claude Code has been an enormous unlock for me and for basically everybody on our team and a lot of other companies. There's no substitute for just getting into the actual material that you're producing and being able to ship right to prod and dial in specific interactions, specific visuals and animations and making sure that things are perfect when they go out. So the way that I see it is that every designer should be using Claude Code if part of your team's end product is coding, if only because it's so much easier than going back and forth with an engineer and bugging them to make changes and hoping they have the patience to wait and get it right. But then a tool like Claude design or Figma or any of the other design tools is for everything else. As it becomes easier and easier to build software, the question of what you build becomes more and more important. Design becomes really, really valuable when the engineering becomes compressed. I don't want to say commoditized, but a little bit like now everybody has a baseline level of really good software engineering available to them, and so of course the differentiator is going to be your design and your ideas and your positioning and your creativity. So design tools are where you hone that. So I do a ton of design work and prototyping and experimentation in real coding tools that produce real output that we'd ship to customers. But I spend an increasing amount of time honestly in design-only tools just playing around with ideas, because if you're a designer, sure, a lot of your work is shipping screens and shipping software, but a lot of it is just getting alignment with other people and working through really easy ideas or trying to take a really complicated ambiguous space and tame it and figure out okay what's actually important here? What experiences do we actually want to take the user's time with? And so I found tools like Claude design, but also just tools like Figma, really, really valuable for that type of stuff. I don't think there's any be-all end-all design tool out there.

我们仍然处在一个一切都相当粗糙的世界里。像 Claude Design 或 Paper 这样的工具能解锁很多新可能，但它们都还处于早期阶段。像 Figma、After Effects 和 Origami 这样真正成熟的工具依然非常有用。然后还有第三个秘密领域：构建你自己的设计工具。这是最不成熟的领域，但也是最令人兴奋的。你思考自己面临的具体问题，以及解决该问题的完美工具是什么——无论是配色方案、动画、图标设计，还是试图理清 16 种不同的引导流程变体。很可能没有现成的完美工具来设计那件事，除非你自己动手做——而现在你可以了。所以那是我最兴奋的领域。坦白说，我们还没有在 Claude Design 中触及这个领域的皮毛，但我真心希望我们能做到。

We're still in a world where everything is fairly rough. There are a lot of new possibilities you can unlock with tools like Claude Design or Paper, but they're all pretty early. Really polished tools like Figma, After Effects, and Origami are still super useful. And then there's the secret third thing: building your own tools to do design. That's the most nascent area but also the most exciting. You think about the specific problem you have and the exact right tool for solving it, whether it's figuring out a color scheme, an animation, designing an icon, or trying to wrap your head around 16 different variants of an onboarding flow. Chances are there's no perfect tool for designing that one thing unless you make it—and now you can. So that's the area I'm most excited about. Frankly, we haven't scratched the surface of this with Claude Design, but I really hope we do.

好，我们来聊聊起源故事吧。带我们回到这一切开始的那一刻。你参与了多少？让我们像旁观者一样看看开端。

Okay, let's talk about the origin story here. Take us to the moment where this started. What's your involvement? Help us be a fly on the wall here for the beginnings.

这个故事始于 2025 年底。我是 Claude Code 的两位设计师之一，另一位是 Megan，你最近和她聊过。Megan 非常棒。当时有我、Megan 和一大群工程师，而所有工程师都刚刚获得了 Opus 4.5 的访问权限，这是智能体能力的一次巨大飞跃。所以他们突然变得非常高效，而我们也处于同样的效率水平。我们也在使用这些工具，比如提交 PR、清理生产环境中的问题。但渐渐地，我们流程中的瓶颈变成了：我们怎么做 Figma 工作？怎么做早期构思？怎么探索各种不同的想法？怎么做决策并传达决策？我们还在用一直以来的旧工具，真的很难跟上节奏。所以我想，也许有办法让 Claude 帮我做设计。幸运的是，我们当时在设计一个命令行工具。所以有一天我说，嘿 Claude，Claude Code 就是文本，对吧？如果我把终端里 Claude Code 的一堆截图粘贴给你，让你知道界面长什么样，然后我让你通过输出 ASCII 来模拟界面，会怎么样？我让 Claude 这么做，它实际上做得还行。虽然不完美——没有一条线是对齐的——但足以让我觉得，哇，Claude 真的能做模拟图。虽然思考得不够深入，但至少有点东西。如果我提供思路和指导，Claude 大概能完成很多基础工作，做出看起来合理、能传达想法的东西。所以我对此着迷了，努力让它工作。最终我意识到 ASCII 不是正确的方向，一方面因为 Claude 不太擅长，另一方面因为大多数界面都不是文本界面。所以我转向了 HTML，并构建了一堆技能、插件和各种工具，帮助人们弄清楚用 Claude Code 到底能设计什么。我构建了一整套技能，你可以让 Claude 稍微使用一下应用，提出改进想法，模拟功能，并用 HTML 解释其推理过程。它在传达想法方面确实做得不错，但想法本身并不太好。但我说，没关系，我觉得我有好点子，我可以提供这些。所以我构建了这个内部工具，后来变成了 Claude Design，它就是一个智能体加上输出 HTML 的能力。在此之前，我只是用 Claude Code 让它输出 HTML 文件。效果还不错，但缺少两样东西：一个漂亮的界面，让我能并排看到提示和输出；以及一个方便分享输出的方式。实际上还有第三样：它缺少对 Anthropic 产品样貌的认知，缺少上下文，以及像标志、颜色、按钮样式等基本元素。我花了很多时间试图把这些变成 Claude 能理解的技能和上下文。我制作了一个 Electron 应用，包含一个智能体和一个输出界面，让你能看到 Claude 制作的 HTML，然后把它移植到网页上，方便分享。基本上就是这样。我们在内部发布后，很快就火了起来，最初是在设计团队，但很快一个更大、更兴奋的群体出现了：那些不会用旧工具但有想法、有表达欲望的人。所以最初你看到的是产品经理们。产品经理有很多想法，但时间不多，而且往往对设计工具不太熟悉。所以他们写文档，对吧？每个产品经理都知道，你写个文档，要让人读是很费劲的。向人们推销想法的最好方式是让设计师做出实际想法的模拟图或原型。有了 Claude Design，你可以得到次优选择：一个在你的产品上下文中、看起来像我们产品的粗略模拟图。所以你可以想象，哦，这个功能在 Claude 主页上可能长这样。他们可以分享出去。这立刻在产品经理中引起了巨大反响。我经常听到内部的人说，天哪，我的产品经理昨天给我发了三个 Claude Design 文件。我说，我很抱歉你遇到这种事，但我很高兴他们感到自己有能力。

The story of this begins in late 2025. I was one of the two designers on Claude Code, alongside Megan, who you talked to very recently. Megan's amazing. It was me and Megan and a ton of engineers, and all of those engineers had just gotten access to Opus 4.5, which was a big step change in agent capability. So they were suddenly so productive, and we were kind of at the same level of productivity. We were using these tools too when we were going in and making PRs and cleaning stuff up in production. But increasingly, the bottleneck in our process was: how do we do Figma work? How do we do early ideation? How do we explore a bunch of different ideas? How do we make decisions and communicate decisions? We were using the same old tools we had always been using, and we were really struggling to keep up. So I thought, maybe there's a way I can get Claude to help me design stuff. Luckily, we were designing a command line tool. So one day I was like, hey Claude, Claude Code is just text, right? What if I paste a bunch of screenshots from the terminal from Claude Code into you so you know what the interface looks like, and then I ask you to mock up stuff by outputting essentially ASCII? I asked Claude to do this, and Claude actually did an okay job. It wasn't perfect—none of the bars lined up—but it was enough to make me think, wow, Claude can actually make mockups. They're not thought through very well, but at least there's something. And if I provide the thought and the guidance, Claude can probably do a lot of the legwork of making stuff that looks reasonable and communicates an idea. So I became obsessed with this and trying to make it work. Eventually, I realized ASCII is not the way to go, both because Claude is not very good at it and because most interfaces are not text interfaces. So I switched to HTML and built a bunch of skills and plugins and all sorts of stuff to help people figure out what you can actually design using Claude Code. I built this whole skill where you could ask Claude to use the app a little bit, come up with ideas for how to improve it, mock up features, and explain its reasoning in HTML. It actually did a pretty good job of communicating the ideas, but the ideas themselves were not very good. But I said, okay, that's fine. I think I have good ideas. I can just provide that. So I built this internal tool that became Claude Design, which was just an agent plus the ability to output HTML. Before this, I had just been using Claude Code and having it output HTML files. It worked pretty well, but it was missing two things: a nice interface that let me prompt and see the output side by side, and an easy way for me to share the outputs. Actually, a third thing: it was missing awareness of what Anthropic's products look like, what the context was, and basic things like logos, colors, button styles, and so on. I spent a lot of time trying to figure out how to turn those into essentially skills and context for Claude to understand. I made an Electron app with an agent and an output UI that let you see the HTML Claude had made, and then ported it to the web so you could share it easily. And that was basically it. We put it out internally, and it took off pretty quickly, initially with the design team, but then really quickly a bigger and much more excited group came along: folks who didn't know how to use the old set of tools but had ideas and things they wanted to express. So initially you saw it with PMs. PMs have a lot of ideas, but they don't have a lot of time, and often they don't have deep familiarity with design tools. So they write docs, right? And every PM knows you write a doc, and it's kind of an uphill battle to get people to read it. The best way to sell people on ideas is to get a designer to mock up or prototype the actual idea. With Claude Design, you could get the next best thing: a really rough mockup of your idea in context, in something that looked like our product. So you could imagine, oh, here's what this feature might look like on the Claude homepage. And they could share it out. It was immediately a big hit with the PMs. I would constantly hear from people internally like, oh my god, my product manager sent me three Claude Design files yesterday. And I was like, I'm sorry that happened to you, but I'm glad they feel so empowered.

这里的时间跨度大概是多久？有没有一个时刻你转变了，觉得这就是我的事，这就是我现在的角色？因为你原本在 Claude Code。你是在空闲时间做这个，只是探索和摆弄吗？你自己的角色在什么时间范围内是如何演变的？

What kind of time frame are we talking on here? Was there a moment in time where you switched like, this is my thing, this is what my role is now? Because originally you're on Claude Code. Were you doing this in free time, just exploring and tinkering? How did your own role evolve over what kind of time frame?

它最初是去年年初的一个支线任务。我想我们是在 2026 年 1 月底有了第一个真正形态合适的 Claude Design 版本。它作为我的副业项目大约一个月左右，然后我碰巧转到了一个叫 Labs 的团队，那里有很多不同的内部赌注，我们一直在尝试孵化新产品。我被分配到了其他项目，但我继续在这个项目上工作，大约每周一天。过了一段时间，我收到了太多反馈，以至于我每周花两天、三天在这上面。最终，团队领导说，嘿，这应该成为一个正式项目。

It started as a side quest at the beginning of last year. I think we had the first version of what was actually the right form factor of Claude Design at the end of January 2026. It was my side project for about a month or so, and then I moved over coincidentally to this team called the Labs team, which has a bunch of different internal bets where we're trying to spin up new products all the time. I was staffed on other projects, but I continued working on this, about one day a week. After a while, I was getting so much feedback that I was spending two days a week on it, then three days a week. Eventually, the team leadership was like, hey, this should just be a real project.

我们会真正给你实际的支持，给你一个真实的理由来投入时间在这上面。所以我们花了一点时间精心打磨产品，看看能把它带到什么程度，然后说：“好，我们把它交给其他团队做外部反馈，然后发布吧。”整个时间线大概是，我想是一月底开始，四月中旬发布。现在看，时间并不长。

We're going to actually give you real support and give you a real excuse to spend your time on this. And so, we spent a little bit of time really finessing the product and seeing where we could take it, and then said, 'Okay, let's try to give this to some other teams for external feedback and then let's ship it.' And the whole timeline ended up being like, I guess it was end of January when we started and middle of April when we shipped. And now it's not a long time.

时间确实不长。而且你知道，我觉得这在产品上有点体现。这是个粗糙的产品，绝对是个测试版。我为此感到自豪。我认为在这个 AI 时代，工具变化如此之快，以至于“不舒服地早到”想法有很多价值。这当然有权衡，对吧？上一代工具非常成熟、非常可靠，那很棒，很了不起。我们最终也会达到那个状态，但眼下行业的状况迫使我们采取一种更……我不想说“快而松”，但我们确实更看重快速推进，而不是完美打磨。这意味着每天都要做很多我不喜欢的权衡，但我认为最终，这能帮助我们交付一些真正新颖的东西。

It was not a long time. And you know, I think it shows in the product a little bit. It's a rough product. It's a beta for sure. I'm proud of it this way. I think that in this AI era, the tools are changing so rapidly that there's a lot of value in being uncomfortably early to ideas. And there's trade-offs to that, right? The previous generation of tools is super mature and super reliable, and that's wonderful and amazing. We will get there at some point, but right now the state of the industry kind of forces us to take a little bit more of a, I don't want to say fast and loose, but we prioritize moving fast over perfectly polishing and dialing in stuff. That means a lot of trade-offs every day that I don't love making, but I think at the end of the day, it helps us deliver something that feels really novel.

好，3 个月确实不算什么。你提到了很多不同的决策和权衡。但当你推向市场时，你觉得最重要的是什么？当你考虑产品策略、顺序安排和如何定位这个工具时，你认为哪些事情是最重要的，是你想围绕它构建 V1 功能集的核心？

Okay. 3 months is no time. A lot of different decisions, trade-offs that you're mentioning. What did you think was most important to nail though when you went to market? Like when you thought about the product strategy and the sequencing and how to position the tool, what were the things that you thought were most important that you wanted to really build that V1 feature set around?

对我们来说，一个经常被问到、也是我们自己经常思考的大问题是：这在多大程度上是一个编码工具？它和 Claude Code 的关系是什么？还有那些能让你轻松生成视觉化网页作品的工具，比如 Lovable、Bolt 或 v0，又是什么关系？老实说，我们不得不明确地划清界限。我划的界限是：设计师应该写代码，设计师应该发布产品，而 Claude Design 是用于其他一切。Claude Design 用于你想传达一个想法的时候，用于你想在早期塑造一个想法的时候，用于你想做一堆餐巾纸草图、摆弄它们、发给团队获取反馈的时候。所以我们明确划了线，说：“我们不想做网站构建器，不想做创建生产级软件的工具，不想提供部署方式。我们只想让它成为一个用于快速、几乎一次性的视觉产物和沟通的工具。”这就是我们最难划清界限的地方。我们对很多兴奋的人说“不”，他们说“哦，如果我能有一个真正托管在 Claude Design 里的网站，那该多好”，但我们必须拒绝。那正是 Claude Code 的用途，也是 v0 和 Lovable 的用途。而我们是为了快速迭代。这在实践中如何体现呢？我们做了很多权衡，比如我们让平台的能力稍微弱一些，以换取极快的速度。例如，最近我们降低了所有人的默认“努力水平”，因为我们意识到，我们为 Sonnet 和 Opus 这类模型使用的努力水平，是针对构建必须无 bug、非常健壮的生产级软件的。而在 Claude Design 中，更有价值的是与人类一起的快速迭代循环，你可以看看效果，看看是否好看，征求反馈。所以实际上，模型写出不够可扩展的草率代码是可以的，因为你做的是相当于餐巾纸草图的东西。

So the big question for us that we get asked a lot and we also just think about a lot is: to what extent is this a coding tool, and what is the relationship between this and Claude Code, and also between this and tools that make it really easy to spin up very visual web artifacts, like something like Lovable or Bolt or v0? And honestly, we had to explicitly try to figure out where to draw the line. And the line that I've drawn is by saying that designers should code, designers should ship, and Claude Design is for everything else. Claude Design is for when you want to communicate an idea. Claude Design is for when you want to shape an idea really early. Claude Design is for when you want to do a bunch of napkin sketches and play around with them and send them out to your team to get feedback. And so we explicitly drew the line and said, 'We don't want to be a website builder. We don't want to be a tool for creating production software. We don't want to have a way to deploy. We just want this to be a tool for really quick, almost throwaway visual artifacts and communication.' And that's been the big thing that's been tough for us to draw the line on. We say no to a lot of people who are really excited about, 'Oh, it'd be amazing if I could have a real website that was hosted in Claude Design,' and we have to say no. That's kind of what Claude Code is for, and that's what v0 and Lovable are for. And we're for really quick rapid iteration. And so how that shakes out in practice is we make a lot of trade-offs to say we're going to make the platform a little bit less capable in the interest of making it really, really fast. For example, recently we turned down the default effort levels for everybody because we realized that the effort levels that we use for models like Sonnet and Opus are tailored towards building production software that has to be bug-free and really robust. And actually in Claude Design, what's much more valuable is a really fast iteration loop with a human, where you can look at something, see if it looks good, ask for feedback. And so actually it's okay for the model to write sloppy code that isn't so scalable, because you're doing the equivalent of napkin sketches.

传达一个想法。这个词确实让我眼前一亮，因为我觉得随着我把自己的整个世界从 Figma 转移到了这个主要围绕 Claude Code 的大杂烩中，这件事变得困难多了。但我总是在实验和修补，而且实际上很难，尤其是当有变体的时候。就像我现在已经比较擅长创建自己的变体，从中挑选并给出反馈，但我还没有掌握那部分：比如“好，我觉得这里有三个不错的东西，但我真的希望每个人都参与进来，捕捉这些想法”。就像你提到的 PM 例子，我想现在我觉得有趣的是，它不一定非得是一个文档，甚至不一定非得是某种带有元导航的原型——那是我一直在捣鼓的东西。你可以把两者融合，找到这些非常有趣的中間地带，那里有一点叙事，每个概念周围可能有一点背景，但概念本身感觉完全互动和真实。而且这个中间地带非常模糊，我觉得自己正在积极探索。这就是我认为这个工具目前最有趣的地方，也是我认为我自己实践中有机会提升的地方。

Communicating an idea. That's the phrase that definitely jumps out to me, because I do think that that has gotten a lot more difficult as I've moved so much of my whole world from Figma to this hodgepodge that mostly revolves around Claude Code. But also I'm always experimenting and tinkering, and it's difficult actually, especially when there are variations. It's like I'm now getting kind of good at creating my own variations to pick and choose from and give feedback on, but I haven't nailed the part where it's like, okay, I think there are three good things here, but I really want to have everybody weigh in and capture those thoughts. And like you were talking about the PM example, and I guess now what I find so interesting is it doesn't have to necessarily be a doc. And it's not even necessarily some kind of prototype with a meta navigation, which is kind of what I've been hacking a little bit. Like you can blend the two and find these really interesting middle grounds where there's a bit of storytelling, there's a bit of context around maybe each concept, but the concepts themselves feel fully interactive and real. And there's such a hazy middle ground that I feel like I'm actively exploring. That is what I think is most interesting right now in terms of where this tool fits in, but also just generally where I think the opportunity for my own practice exists to kind of level up.

是的。我的意思是，我喜欢我们身处这个 AI 时代的一点是，模型非常擅长做那些琐碎的工作，比如移动东西、拼凑东西、把想法变成不同的格式，但它们并不擅长真正的想法和设计思维。所以作为设计师，我能做的是，我发现我把更多时间花在长途散步、录语音备忘录、独自思考上，因为好的想法是当下的硬通货。我可以花很多时间只是闲逛、与我的想法相处，因为我知道把这些想法变成可呈现的形式不再需要大量时间。我不必担心“哦，这次头脑风暴之后我还需要 3 个小时来想办法呈现这个想法”，因为坦率地说，这很容易做到。一旦你有了那个想法，并且你有了某种格式，无论是 Apple 备忘录（我经常用）、语音备忘录、文档还是便签，你都可以把它丢进 Claude Design。你可以得到一个文档，但也可以得到一个演示文稿，还可以得到一个原型，甚至一个动画，你可以用任意多的不同格式来传达那个想法。归根结底，真正重要的只是想法本身。我发现这非常解放。这个时代可能终将结束。

Yes. I mean, I think the thing that I love about this era we're in of AI is that the models are really, really good at doing the sort of busy work of moving things around and piecing things together and turning ideas into different formats, but they're not so good at the actual ideas and the design thinking. And so what I can do as a designer is, I found that I spend a lot more of my time just going on long walks and recording voice notes and thinking to myself, because the good ideas are the currency these days. And I can spend a lot of time just kind of wandering and sitting with my ideas, because I know that it no longer takes a ton of time to take those ideas and turn them into a presentable form. I don't have to worry about, 'Oh, I'm going to need like 3 hours after this brainstorming session to figure out how to present this idea,' because frankly, it's pretty easy to do. And once you've taken that idea and you have it in one format, whether that's an Apple Note, which I use a lot, or a voice note or a document or a memo, you can drop it into Claude Design. You can get a doc, but you can also get a deck, and you can also get a prototype and even an animation, and you can convey that idea in as many different formats as you want. And all that really matters at the end of the day is the idea. And I found that to be very liberating. This era will probably end.

我认为模型可能会在产生好想法方面变得更好。但我真的很珍惜这个特别的时刻，我们人类仍然垄断着优秀的设计思维。

I think the models will probably get better at having these good ideas. But I'm really savoring this particular moment where we as humans still have a monopoly on good design thinking.

有一个问题我一直忍不住问自己：如果公司申请来和你交谈，而不是反过来，会怎样？这个问题正是全新 Dive Talent Network 的基础。而且它正在发挥作用。比如现在，我正在帮助我认识的最令人兴奋的许多初创公司，聘请收听本节目的设计师和构建者。所以，如果你好奇外面可能有什么机会，也许你想加入我的名单，或者你甚至正在寻找你的下一位设计人才，请访问 dive.club/talent 立即加入。

There's one question that I can't stop asking myself. What if companies apply 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.

我们能稍微谈谈你的实践吗？你提到要为散步、思考想法留出更多空间。你展示了一点你是如何使用 Cloud Design 来更深入地探索这些想法可能的样子，给自己设定参数。我假设在某个时候你会把这些想法传达给利益相关者、团队中的不同人，那么这条路径有多大变化？当你做一件事时，决定你流程的主要变量是什么？然后我特别感兴趣的是，你有多大程度会跳进 Claude Code，贡献更高保真的原型，甚至直接用于生产？你目前的工具和流程状态是怎样的？

Can we talk about your practice just for a second here? You talked about making more space for maybe going on walks, thinking of ideas. You showed a little bit about how you're using cloud design to help you go a little bit deeper on what those could look like, giving yourself parameters. I'm assuming at some point you're communicating those ideas to like stakeholders, different people on the team, like how much does that path kind of vary and like what what are the main variables that dictate what your process looks like when you're working on a thing? And then I'm specifically interested in how much are you jumping into Claude Code and contributing either in higher fidelity prototypes or even to production like how does the state of your tooling and process look right now?

我会说，最大的变量，最能改变我工作方式的事情，就是利益相关者是谁，以及需要沟通想法并获得认同的人是谁。例如，这些天我大部分时间都在 Cloud Design 上，我是关键决策者之一。所以有很多事情我基本上可以单方面决定，这是拥有自己事业的好处。对于很多这类事情，我会只为我自己做模型，看看效果如何。我会问 Claude Design。我会从文档中导入一堆上下文，或者让 Claude 拉取指标分解、错误报告或类似的东西、用户反馈。我会把这些导入 Claude，然后查看。我会花很多时间思考、走来走去，想着“我认为这里应该尝试的五件事是什么”，然后把这些放进 Cloud Design。通常我的流程是：我会录一段语音笔记并粘贴转录文本，或者直接使用 Cloud Design 的内置听写功能。我会要求一个快速模型。我通常会走开去做别的事情，然后有点分心，因为模型速度足够慢，你仍然需要坐在那里等待。而且，无论好坏，我都不太擅长坐在那里等待。但之后我会回来，看看模型创建了什么，然后给出大量快速反馈。在 Cloud Design 的界面中，我们有一个按钮叫“评论”，你可以点击特定元素并留下评论。这样你就不必提示模型并确切告诉它你在想什么、在说什么。你可以直接指向一个东西，说“删除这个”、“把这个放大一点”，或者“给我一个调整，提供四种不同的变体，让我们尝试一种更受这个启发而不是那个启发的样式”。当我提示 Cloud Design 时，我通常会附加代码库。这样 Claude 就可以从我们的 GitHub 拉取，从我们的真实来源（也就是我们的代码）拉取，重新创建任何需要重新创建的界面，然后从那里进行设计。如果我需要向人们传达这些想法，我通常会直接去找 Claude，因为我在制作模型时已经向 Claude 传达了推理和想法，我会说“把我和你说的所有内容都写下来并加上注释”。这样我们就会制作模型、演示文稿或文档，解释我已经传达给 Claude 的想法，这样我就可以很容易地发送出去，并从不同利益相关者那里获得反馈。然后对于很多事情，我直接进入代码，对吧？如果某件事是我们设计系统的直接应用，或者是一个不太视觉化、不需要感觉出来的行为改变，我会直接去 Claude Code，让 Claude Code 实现它，然后我尝试一下，然后发布。你知道，我们仍然在大力优化能够非常非常快地发布。所以我们经常早上想到一个想法，下午就发布。深受 Claude Code 团队的启发。

I would say the biggest variable the biggest thing that changes the way I work is who the stakeholders are and like who the humans are that need to have an idea communicated and need to buy in. For example, I'm spending most of my time these days on cloud design where I am one of the key decision makers. And so there's a lot of stuff that I kind of just do unilaterally at this point, which is the nice part of having your own thing. For a lot of those, I will just do mockups just for myself to see what things look like. I will ask Claude design. I'll dump in a bunch of context from documents or I'll, you know, ask Claude to pull breakdowns of metrics or bug reports or stuff like that, user feedback. I'll dump those into Claude. I'll look at them. I'll spend a bunch of time thinking and walking around and like being like what are like five things I think we should try here and then I'll drop those into claw design. Typically my process looks like I'll record a voice note and paste in the transcript or I will just use the built-in dictation feature in cloud design. I'll ask for a quick mockup. I will typically go away and do something else and get kind of distracted because the models are are slow enough that you still kind of have to sit there and wait. And I'm for better or worse not very good at sitting there and waiting. Uh but then I'll come back. I'll see what the models have created. I'll give a ton of rapid fire feedback. We have this button in the interface in cloud design where you can called comment where you can click on a particular element and leave a comment on it. And so you don't have to like prompt the model and tell it exactly what you're thinking about what you're talking about. You can just point it at a thing and be like remove this uh you know make this a little larger or give me a tweak that gives me four different variations for how this might look and let's actually try a look that's a little bit more inspired by this instead of inspired by that. I'll typically attach the codebase when I'm prompting cloud design. So Claude can actually, you know, pull from our GitHub. It can pull from our source of truth, which is just our code, recreate whatever uh interface needs to be recreated, and then go and do designs from there. If I need to communicate those ideas out to people, I will I will typically just, you know, because I'm already communicating the reasoning and the ideas to Claude when it's mocking up, I I basically just go to Claude and I'm like, you know, take everything that I've told you and write it up and annotate it. And so like we'll make mockups or we'll make decks uh or we'll make documents that explain the ideas that I've already communicated to Claude so that I can really easily send those out and get feedback from different stakeholders. And then for a lot of stuff, I just go straight to code, right? If it's something where it's a pretty straightforward application of our design system or it's a behavioral change that isn't super visual or that doesn't feel like it needs to be felt out, I will just go to Claude Code and I'll have Claude Code implement it and I'll try it out and we'll ship it. You know, we're still very much optimizing for being able to ship really, really fast. And so we do a lot of just like coming up with an idea in the morning and shipping it by the afternoon. Very inspired by the Claude Code team.

你多久会从 Claude Code 回到 Cloud Design？有时我一开始觉得某件事很简单，然后我做到了，但我不喜欢那样，我觉得我需要退一步，用更多方式来看待它。比如现在，我一直在纸上或 HTML 中这样做，我想知道你是否会在 Cloud Design 中这样做？

How often are you going from Claude Code back into cloud design? Sometimes I start off on something that I feel like is pretty straightforward and I get it there and I'm like I don't love that and I'm like I need to take a step back and just see this more ways. Like right now I've been doing that either in paper or HTML and I'm wondering like do you ever do that in cloud design?

我会的。我会的。我觉得我已经很擅长知道一开始要先模拟什么，所以我通常不会从代码开始，然后再回到设计。但是

I do. I do. I think I've gotten pretty good at knowing what upfront I want to mock first and so I I don't typically start in code and then go back to design. But

你刚才是不是非常礼貌地说这是技能问题？

Did you just really politely say skill issue?

不不不不，绝对不是。我有时会。我有时确实会来回切换，但我认为更常见的是我们直接发布到生产环境。比如真实来源会存在于代码中，我们会让 Cloud Design 从当前提交的内容中拉取。并不太会直接从 Claude Code 到 Cloud Design。

No, no, no, no. Absolutely not. I do sometimes. I do sometimes go back and forth, but what I what I think I see much more often is we'll just ship something into into production. Like the source of truth will live in code and we will have cloud design pull from what's currently committed. Not a lot of like going straight from Claude Code to cloud design.

好的。我还想深入探讨的是，当你第一次发布研究预览时，那个最初的新用户引导流程的设计过程，因为你脑海中有一个格局，比如“好的，这里有视觉构建器、vzeros、lovables，这里有 Claude Code，这里有 Figma”。我想象你试图在那个流程中传达一些新颖性，帮助人们理解它能做什么，因为它能做很多我们不习惯的事情。所以跟我谈谈那个设计过程。你当时在纠结哪些事情？你探索了哪些事情？你最终是如何落地的？

Okay. Something else I want to dig into is your design process for that very first like new user onboarding flow when you first put the research preview out cuz you had like kind of the landscape shape in your mind where you're like okay you have the visual builders the vzeros the lovables over here you have claude code over here Figma over here I would imagine that you were trying to communicate some of the novelty in that flow and like help people understand what this could do because it can do a lot of things that we're not used to you know so talk to me a little bit about that design process. What were some of the things that you were wrestling with? What are some of the things that you explored? How did you land where you ultimately did?

说实话，我认为我们还没有接近搞定这件事。嗯，我认为我们还没有接近让人们理解这个想法：当你用 HTML 创建视觉工件时，你可以做各种事情，创建各种新颖的文档类型，否则你无法做到。

To be honest, I don't think we've gotten close to nailing this. Um, I don't think we've gotten close to getting people to understand this idea that like when you create visual artifacts with HTML, you can do all sorts of stuff and create all sorts of novel document types that you couldn't have otherwise.

我给你讲几个我们试过的办法。我们在首页上放了一个叫“示例”的小版块，里面有一些精选的例子，用来展示这个平台能做的一些新颖、动态的东西，是别的平台做不了的，比如做动画、用粒子系统、搞 3D 效果。我们做的一件大事就是，一开始人们试用这个工具时，甚至不清楚它能用来做幻灯片或文档这类东西。所以，你可以直接提示模型，比如“给我做个幻灯片”或“给我做个动画”，但人们没发现这个功能。于是，产品的第一个版本就有一个漂亮的小框，用来选择你想创建什么。里面还有标签页。你可以说，我想做个原型，或者我想做个幻灯片，或者我想做个文档、动画之类的。实际上，内部这全是个小把戏，它们只是映射到提示词上。比如你选了幻灯片标签，我们做的只是在第一次发送消息时，往提示词里插入一小段话，说用户点击了幻灯片按钮。所以如果他们没说要什么，他们可能想要幻灯片。但这主要是为了用户，对吧？是为了告诉人们，界面上有东西提醒你这里可以做幻灯片，否则人们怎么发现呢？这是我们经常遇到的问题，有很多人在这个工具里做很有创意的东西。但每有一个做创意东西的人，就有一千个人不知道你可以做社交媒体素材、动画或交互式聊天机器人体验。所以我们得想办法把这些功能推广给人们，但我们还没完全搞定。

I'll give you a couple things we tried. So we had a little section on the homepage called examples where you could see a handful of examples that were handpicked to sort of show you like here are some interesting novel dynamic things that you can do in this platform that you can't in others like making animations like using particle systems like doing 3D stuff. One of the big things we did is just like you know it wasn't even clear initially when people tried the tool that they could use it to create things like slide decks or documents. And so, you know, you could just prompt the model, you know, hey, create me a slide deck or create me an animation, but people didn't discover this. And so, the first version of the product just had like a nice little box that was for choosing what you wanted to create. And there were tabs. You know, you could say, I want to make a prototype or I want to make a slide deck or I want to make a document or an animation or whatever. And internally, it was all just a trick. Like they just mapped to prompts. Like when you picked the slides tab, all we did was we just inserted a little thing into the prompt the first time we sent a message saying the user clicked the slides button. So like if they don't tell you what they want, they probably want slides. But it was mostly for the user, right? It was to show people like hey there is something in the interface to remind you can make slides here because otherwise like how are people going to figure this out? And this is a constant thing we run into of like there's a lot of people making really creative stuff in this tool. And for everybody who makes a creative thing, there are like a thousand people who have no idea that you can make like social media assets or like animations or interactive chatbot experiences. And so we just have to figure out how to merchandise those to people and we haven't quite figured it out.

有一个我特别兴奋但还没真正做的领域，我真的很想做，而且也许我会直接拿这期播客的文字记录，喂给 Claude Design，看看我们聊完后它能不能先做一版，因为我一直没时间好好说说这个想法。

One area that I'm very excited about that we haven't actually done yet, but that I really want to do and actually maybe I will just take the transcript of this podcast and feed it into Claude Design and see if it can do a first pass after we're done with this cuz I haven't had the time to like talk about what it is.

一石二鸟。

Two birds with one stone.

没错。我想给人们一套词汇，用来讨论不同的视觉效果，因为我意识到我有一种独特的背景，我本职是工程师，我知道所有这些的工程术语，对吧？所以当我和 Claude Design 对话时，我经常用很工程化的术语。我会说，把这些东西放在 Zstack 里，或者加一些 CSS，或者我会说，我想让你做一个交错动画，带这些参数，比如弹簧阻尼，或者我想让你用 3JS 和粒子效果，在一定时间内发射。我懂这些，因为我知道怎么编码，所以我能很清晰地表达这些想法。但大多数人不行，因为他们根本不知道这些术语是什么，而且他们也不应该非得学。所以，我想尝试的一件事是在应用里建一个小词汇中心，向你展示一些你可以在提示词或给模型的反馈中使用的词，以及它们长什么样。比如，这是交错动画的样子，这是透视变换的样子。其中一些对设计师来说相当熟悉，但还有很多不是。但就是给人们这些词，让他们用文字做设计，因为我们越来越多地基本上就是用文字作为主要输入来做设计，这非常不同，也非常奇怪，我觉得我们可能可以做很多教育，帮助人们获得他们需要的词汇。

Exactly. I want to give people a vocabulary for talking about different visual effects because one thing that I realize is I have this kind of unique background of being an engineer by trade and I know all the engineering terms for all this stuff, right? So when I'm talking to Claude Design, I'll often use like very engineering terms. I'll be like, you know, put these things in a Zstack or I'll like put in some CSS or I'll be like, you know, I want you to do a staggered animation with like these parameters for like the spring damping or I want you to use 3JS and use particle effects that emit over a certain period. I have all this stuff that's like I know the language for it because I learned how to code it. And so I'm able to express those ideas really cleanly. But most people are not because they just have no idea what those terms are and they shouldn't really have to learn them. So, one thing I want to try is building a little vocabulary center in the app that just shows you like here are some words that you can use in your prompts or in your feedback to the model and here's what they look like. So, here's what a staggered animation looks like. Here's what a perspective transform looks like. And some of those are like fairly familiar to design folks and there's a lot that are not. But just like giving people the words to like do design with words because more and more we are just essentially doing design with words as our primary input and it's very different and it's very weird and I think there's probably a lot of education we can do to help people give the people the words they need.

我其实很喜欢这个想法。它让我想起两件事。一是你在一些不同的界面里能看到这个。我现在想到的是 Jitters，他们有一个预置动画的右侧面板，你可以悬停在上面，它就会播放动画，你大概能感受到。第二件事是我自己的经历，比如几个月前我用 Dial Kit 的时候，我想调整一个着色器，但我没有着色器的语言。我完全不知道参数叫什么名字。所以我给 Claude 的提示词基本上就是，给我所有我可能需要的参数，我不知道它们叫什么，你就做吧。它做得不错。但后来我浏览并调整东西时，感觉有些参数好像没什么作用。我一个名字都不认识。如果能以某种方式生成每个东西的轻量视觉预览，让我悬停就能看到它可能是什么，那该多酷啊，你知道吗？否则我完全不知道，那只是文字。

I like that a lot actually. It reminds me of two things. One is you see this in a few different UIs. Jitters is the one that comes to mind right now where they have like the right panel of the pre-built animations and you can hover over them and it does the animations. You kind of get a sense. And then the second thing is my own experience like when I was using Dial Kit, this is months ago. I was trying to tweak a shader, but I don't have the language for shaders. I have no idea what the names of the parameters are. So my prompt to Claude was basically like give me all the parameters that I might need. I don't know what they're called. Just do it. And it did a good job. But then I'm going through and I'm tweaking things and it kind of felt like some of them weren't really doing anything. I didn't recognize any of the names. Like how cool would it have been if I could have somehow generated a little lightweight visual preview of what each thing was where I could like hover and like see what that could be, you know? Otherwise, I have no idea. It's just words.

沿着这条路有很多有趣的线索可以挖掘。

There's a lot of interesting strands to pull on down that route.

没错，没错。我也不知道我们会怎么解决，但肯定是我们会探索的东西。我知道未来某一集可能会有个有趣的小后续环节。

Exactly. Exactly. And I have no idea how we'll solve it, but certainly something we'll explore. I know a fun little follow-up segment in a future episode maybe.

好，我有个问题问你。你当时并不真正知道这会变成什么。你一开始真的只是想更好地给 Claude Code 做原型，听起来是这样。然后某个时刻你开始形成这个愿景，比如，嘿，我觉得有个东西，也许你甚至一度想过，也许这会叫 Claude Design。那该多酷啊，对吧？所以现在我们大概 7 个月过去了，Claude Design 目前的样子，和你最初脑子里的那个想法核心，最大的偏离在哪里？

All right, here's a question for you. So, you didn't really know what this would become. You start off and you're really just trying to like prototype Claude Code itself better is what it sounds like. And then at some point you start to develop this vision for like, hey, I think there's a thing that maybe at one point you even were like, maybe this is going to be called Claude Design. How cool would that be? Right? So now we're whatever 7 months later, where has the current shape of Claude Design deviated most from what was that original nugget of an idea in your brain?

它一开始非常明确是给专业软件设计师做原型和线框图的工具，然后我们在内部开始看到幻灯片这个想法有点热度。大约一个月前，我们在首页加了一个文档模板，这完全是事后才想到的，但这是那种我们预感如果人们知道这个工具能做这类东西，他们就会用，我们加了，结果确实如此。很多人想创建这类东西。所以指标上，你知道，很多人最终用了那个。所以现在我有点处于这种模式，让我们尽可能广泛地思考设计，让我们思考视觉传达和交互式视觉制品创作这个更广泛的概念，并思考在所有不同的生活场景中这可能有用。所以不仅仅是创建软件设计，不仅仅是创建原型，而是你知道，用这个工具创建传单、宣传册，或者做你的简历。

So it very much started as a tool for professional software designers to make prototypes and maybe mockups and then internally we started seeing like a little bit of heat around this idea of slide decks. About a month or so ago, we just added a documents template to our homepage which was a total afterthought, but it was one of those things where like we had a hunch that if people knew you could do this kind of thing in the tool, they would and we added it and it turned out to be the case. A lot of people wanted to create this type of stuff. And so the metrics, you know, a lot of people ended up using that. And so now I'm kind of in this mode of like let's think about design as expansively as we can and let's think about like the broader idea of like visual communication and creation of interactive visual artifacts and think about all of the different walks of life in which that could be useful. So not just creating software designs, not just creating prototypes, but like you know creating flyers or brochures or maybe doing your resume in this tool.

或者可能是创建 3D 物体、社交媒体素材，或者其他我现在想象不到的隐秘用途。所以我们正处于这样一个阶段：如何把我们正在做的事情扩展得更通用、更广泛，从而帮助发现那些我日常不会遇到、我们团队成员日常也不会遇到，但人们确实想用 Claude 去做、却还没完全想清楚怎么用 AI 实现的用例。

Or maybe creating 3D objects or social media assets or some other secret thing that I can't imagine right now. So we're very much in this phase where it's like, how can we expand what we're doing to be even more generic and broad, so that we can help find those use cases that I don't have day-to-day, and folks on our team don't have day-to-day, but that people actually really want to do with Claude and haven't quite figured out how to do with AI.

你刚才说的很多内容都是在回应——你提到了热度，你知道，用户需求，也许具体。我甚至不确定我是否会说问题，但就像是有用户研究的成分。就像是，嘿，这为路线图提供了信息。我会把这个放在这里。然后另一方面，这让我想起了产品设计负责人 Joel Leuenstein 在播客上说过的话，我不知道，大概 18 个月前，他谈到在 Anthropic 做设计很大一部分是这种“寻找问题的解决方案”的理念。我很好奇，你觉得这句话在今天对于在 Anthropic 做设计师来说有多大的代表性？

A lot of what you're talking about is responding to—you said heat, you know, user demand, maybe specific. I don't even know if I would say problems, but it's like there's a user research element. It's like, hey, this is informing the roadmap kind of thing. And I'll put that up here. And then on the other side, it reminds me of something that Joel Leuenstein, the head of product design, said when he was on the podcast, I don't even know, like 18 months ago, and he talked about how a big part of designing at Anthropic was this idea of solutions in search of problems. And I'm curious, how representative do you feel that that statement is today when it comes to being a designer at Anthropic?

有一点。说实话，我对此反复思考。我觉得有很多人非常有创意地使用 AI，他们很擅长看着一个非常通用的工具，然后想，‘哇，我有这个问题。也许它能解决我想做的事。’然后还有一大批人就是没有那种感觉，对吧？因为他们当然不会看着自己遇到的每个问题就说，‘我怎么能利用 AI 来加速我的业务流程？’所以我们的工作就是弄清楚早期采用者用它做什么并看到价值，以及我们认为对非早期采用者普遍适用的东西，还有早期采用者真正痛苦的地方，因为他们真的想在这个工具里做某事，但就是做不到。你在 Claude Design 里能做的一切，在 Claude Code 里也能做，而且还能做更多。我最初为 Claude Design 做的原型就是在 Claude Code 里，它们是 Claude 技能，我用起来相当有效，但发现它在公司内部并没有真正流行起来——在我为它构建界面之前，没人想用我的小设计技能。因为事实证明，把这些产品包装成对人们有意义的方式，并给它们所有漂亮的附加功能，让它们真正感觉像是做任何事情的完美场所，这里面有巨大的价值。所以我们总是感受到这种张力，核心的 Claude 产品是这种超级通用的东西，能做所有这些事情，而 Claude Design 是它的一个小分支，不那么通用，更专注于为人们创建视觉工件，这里面有很多价值。然后我们总是被拉向，好吧，如果我们做一个只用于幻灯片的幻灯片工具会怎样？如果我们说我们只专注于幻灯片，我们可以做各种非常好的事情。我们不会试图做一个也能用于其他 16 种东西的编辑器。我们不会担心交互性和动画之类的。我们可能会把幻灯片做得更好。所以我们的张力总是：你让它有多受限制？你让它对特定用例有多具体，而不是你多大程度上利用这些工具惊人的通用性，它们能做任何事情——但也许它们不能把每件事都做得很好。

A little bit. I go back and forth on this honestly. I think that there are a lot of people out there who are really creative about using AI and who are really good at looking at a really generic tool and being like, 'Wow, I have this problem. Maybe it can solve what I'm trying to do.' And then there's a huge set of people who just don't have that sense, right? Because of course they're not looking at every problem they have and saying, 'How can I utilize AI to speed up my business processes?' And so it's kind of our job to figure out what's at the intersection of what early adopters are doing with it and seeing value with, and what we think is broadly applicable to the types of folks who are not early adopters, and also what are the roadblocks where the early adopters are really suffering because they really want to do something in this tool but they're just not quite able to. You've been able to do everything you can do in Claude Design, you can do in Claude Code, and a lot more. And my initial prototypes for Claude Design were in Claude Code, and they were Claude skills, and I would use them pretty effectively, but found that it didn't actually take off internally at the company—nobody wanted to use my little design skill before I built an interface around it. Because it turns out that there's a ton of value in packaging these products up in ways that make sense to people and giving them all of the nice bells and whistles that make it really feel like it's the perfect place to do whatever it is that they're doing. So we always feel this tension honestly, where it's like the core Claude product is this super generic thing that can do all this stuff, and then Claude Design is this little offshoot of it where it's a little less generic and a little bit more targeted towards creating visual artifacts for people, and there's a lot of value in that. And then we always get pulled to be like, okay, what if we did a slides tool that was just for slides? There's all sorts of really nice things we could do if we said we're only going to focus on slides. We're not going to try to make an editor that also works for these 16 other things. We're not going to worry about interactivity and animations or anything like that. We could probably do a much better job of doing slides. And so the tension for us is always like, how on rails do you make it? How specific do you make it towards a particular use case versus how much do you lean into the kind of amazing generality of these tools where they can do anything—but maybe they can't do everything really well.

好的。所以，我想很多像我一样听的人都会受到启发。你有点打破了我脑子里对 Claude Design 的框框，以及它能做什么，如何融入我的工作流程。所以，假设有人在听，他们今天晚些时候就要试驾一下，你有什么快速实用的技巧、建议或窍门可以让人试试吗？

Okay. So, I would imagine a lot of people listening like me are pretty inspired. You've kind of broken the box of where I had Claude Design in my brain and what it's capable of and how it could fit into my workflow. So, assuming that somebody's listening and they're going to take this for a test drive like later today, do you have any quick hitting tips, suggestions, tricks that people should try?

我的意思是，第一点是，你投入什么就得到什么，对吧？所以不要只是让 Claude 给你做一个设计而不给它任何上下文。尽可能多地给它上下文。理想情况下，对你想要得到的结果要相当明确，让 Claude 去做建模和编码的艰苦工作。但不要指望 Claude 是一个了不起的设计师，为你做所有的工作。带上你的素材，带上你的品牌配色方案，带上你的字体，带上你当前产品的截图，也许还有你希望它未来感觉的情绪板。把这些都带进来，因为你不想要的是看起来和其他人一样的东西。每个人都会认出来。你创作它时不会感觉良好。也不会是你钱的好用途。投入很多真正有价值的东西。如果你让 Claude 从那里开始工作，你会得到真正好的结果。要求大量的选项是我第二大建议。Claude 有时会用它制作大量不同东西的能力来弥补它品味和技术的不足。要求调整，尤其是在你看到 Claude 一开始就不太擅长弄明白的地方。所以，例如，如果你试图制作动画或真正精细的视觉交互，Claude 在时间安排或弄清楚弹簧参数或动画之类的事情上不是很擅长，因为它看不到视频。它只能看到截图。所以，相反，如果你发现 Claude 在这方面遇到很多麻烦，就说，‘嘿，Claude，给我做一个工具，这样我可以自己调整。’这往往效果非常好。使用语音。我是语音的超级粉丝。这有点符合你投入什么就得到什么的规则。如果你给自己工具，更快地给 Claude 更多上下文，语音是最好的方式。我发现你会得到更好的结果，而且你会更愉快。真的酷的是，你有一个设计，进入语音模式，指出一个东西，然后说，‘嘿，Claude，你知道，把这个改一下，把这个改一下，把这个改一下，’并准确描述你想要什么。你感觉有点像一个大反派老板。但就像你可以完成大量工作，感觉非常高效。

I mean, number one is you get out what you put in, right? So don't just ask Claude to make you a design without giving it any context. Give it as much context as you can. And ideally be pretty prescriptive about what you want to get out and let Claude do the hard work of mocking it up and coding it. But don't trust Claude to be an amazing designer and do all the work for you. Bring in your assets, bring in your brand color scheme, bring in your fonts, bring in screenshots of the product that you have right now and maybe, you know, mood boards of what you might want it to feel like in the future. Bring all that in because what you don't want is slop that looks like what everyone else has. Everybody will recognize it. You won't feel good creating it. Won't be a good use of your money. Put in a lot of really valuable stuff. And if you let Claude work from there, you'll get really good stuff out. Ask for tons of options is my number two biggest suggestion. Claude makes up for its lack of taste and its lack of technical execution sometimes in its ability to make a ton of different things. Ask for tweaks, especially in areas where you see Claude is not very good at figuring it out right off the bat. So, for example, if you're trying to make animations or you're trying to make really dialed in visual interactions, Claude is not very great at doing things like timing or figuring out things like spring parameters or animations because it can't see video. It can only see screenshots. So, instead, if you're finding that Claude is having a lot of trouble at that, say, 'Hey, Claude, make me a tool so that I can dial this in myself.' And that tends to work really, really nicely. Use voice. I'm a huge voice fan. This sort of goes along with the rule that you get out what you put in. If you give yourself the tools to give Claude much more context faster, and voice is the best way to do that. I found you will get much better results and you'll just have a better time. It's really cool to just have a design and enter voice mode and point out a thing and be like, 'Hey, Claude, you know, make this different, make this different, make this different,' and describe exactly what you want. You feel a bit like a big evil boss. But it's like you can get an enormous amount done and it feels very productive.

我的意思是，拥抱你能创造的不同类型事物之间的模糊地带，对吧？如果有人让你做演示文稿，想想怎么让它变得互动。如果有人让你创建文档，想想，嘿，如果我把它做成一个微型网站 HTML 体验会怎样？我最喜欢的例子之一是，我做过一次演示，教人们如何使用 Claude。我有点厌倦了演示它，然后我意识到我其实可以让 Claude 自己来演示。所以当你进入会议时——我希望我能分享这个，但我没有——当你进入文档时，它看起来像 Google Meet。你点击加入，输入你的名字，然后 Claude，像真正的 Claude 模型输出，会说：“你好，某某，欢迎来到我的演示”，然后它会带你浏览演示，用语音，用语音识别，因为现在每个浏览器都有语音识别。你可以问它问题，它会根据内容回答。这是个有点傻的例子，但重点是，你看到任何网站能做的事，你都能让 Claude 做，这让你能创造出一些非常非常古怪的东西。

I mean, embrace the fuzzy space between different types of things you can create, right? If somebody asks you to make a presentation, think about how you can make it interactive. If somebody asks you to create a document, think about, hey, what if I made this a little micro site HTML experience instead? One of my favorite examples is I made a presentation once teaching folks about how to use Claude. I got kind of tired of presenting it, and then I realized I could actually ask Claude to present it itself. So when you entered the meeting—I wish I could share this, but I don't have it—when you entered the document, it looked like a Google Meet. You clicked join, typed in your name, and then Claude, like real Claude model output, would say, 'Hello, blank, welcome to my presentation,' and then it would take you through the presentation using voice, using speech recognition, because every browser has speech recognition right now. You could ask it questions, and it would answer based on the content. It was a kind of stupid example, but the point is anything that you see any website do, you can make Claude do, and it lets you create some really, really wacky stuff.

这就是我说的提高叙事天花板的意思。这对我来说太酷了，因为感觉我们就像有一盒乐高，里面只有五种不同的积木，你只能挑一个来展示你的想法。现在就像，你能创造出你能想到的任何积木，然后用它。这很令人兴奋，也有点吓人，你知道吗？

That's what I'm talking about in terms of raising the ceiling for storytelling. That's so cool to me because it feels like we've just had this box of Legos where there were only like five different Legos, and you just pick which Lego you want to use to present your idea. And now it's like create any Lego that you can think of and use that. It's exciting. It's also scary, you know?

这是另一套技能。太神奇了。

It's a whole other skill set. It's amazing.

百分之百。

100%.

另一个好建议是，如果你不知道要什么，你也可以直接和 Claude 聊聊，因为记住，Claude 比大多数人都更了解网络平台。所以如果你有一个动画，如果你在创作一个东西，不太确定怎么让它脱颖而出，你可以直接问 Claude：“嘿，既然这只是 HTML，有什么方法能让它脱颖而出？”它会给你一堆相当不错的主意。然后你带来品味，对吧？你带来“在这个语境下什么才是真正合理的”。别只是让 Claude 把它弄酷。但记住它是一个资源。Claude 知道怎么用这个工具，它能向你解释怎么用，还能修坏掉的东西，这很酷，需要一点时间适应，但一旦你适应了，真的非常非常神奇。

Another good tip then is, if you don't know what to ask for, you can also just chat with Claude about it, because remember Claude knows way more about the web platform than most people do. So if you have an animation, if you have a thing you're creating and you're not quite sure how to make it stand out, you could just ask Claude, 'Hey, what are some ways I could make this stand out given that it's just HTML?' And it will give you a bunch of pretty decent ideas. And you bring the taste, right? You bring the 'here's what actually makes sense in this context.' Don't just ask Claude to make it cool. But just remember it's a resource. Claude knows how to use the tool, and it can explain how to use the tool to you, and it can fix stuff if it's broken, which is pretty neat and takes a little bit of getting used to, but once you do, it's really, really amazing.

这很酷。是的，这本身就是个并行的设计过程。一旦你有了想法——我相信每个听众都经历过那个时刻，你有个概念，然后你想：“这太棒了。”你知道，就像我有一个原型，或者几个我觉得不错的原型。我觉得我们应该做这个。我得让人们和我一样兴奋，这样我们才能真正去做，并投入资源。然后就在那里画一条线，现在把它看作一个和 Claude 一起的独立设计过程。就像，好吧，我们应该构建什么？我们应该做什么来帮助我让人们和我一样对这个想法兴奋？然后看看那条岔路会把你引向哪里。这真的非常非常有趣。你谈到了一个未被开发的机会。我没看到很多人在那个领域玩，感觉那条路上真的有无限的机会。

That's cool. Yeah, it's like a whole parallel design process in itself. Once you get to the point where you have an idea—I'm sure everybody listening to this has been in that moment where you have a concept and you're like, 'This is pretty sick.' You know, like I have a prototype or maybe a couple prototypes that I feel good about. I think we should build this. I got to get people as excited as I am about this so that we actually do it and commit resources to it. And then drawing a line right there and now thinking about that as a separate design process with Claude. It's like, okay, what should we build? Like what should we make to help me get people as excited as I am about this idea? And then figure out where that rabbit trail leads you. That's really, really interesting. You talk about an untapped opportunity. I don't see a lot of people playing in that space, and it feels like there literally are endless opportunities down that path.

是的。我的意思是，你能做太多事了。这就是为什么我痴迷于 HTML，我认为 HTML 是唯一重要的文档类型，因为你能用它做太多惊人的创意事情，对吧？比如你可以把声音带进去，把摄像头带进去，把音频带进去，你能找到的任何 JavaScript 库都能拉进来。你能做 3D。你能做 2D。如果你愿意，你甚至能做 1D。你能做动画。你能做各种惊人的东西。而且我们甚至还没为这些东西的一半想出词汇。即使你是技术人，也有太多东西等着被发现。

Yeah. I mean, you can just do so much. This is why I'm obsessed with HTML, and I think HTML is the only document type that matters, because you can just do so much amazing creative stuff with it, right? Like you can bring your voice into it, you can bring your camera into it, you can bring audio into it, you can bring any sort of JavaScript library that you can find, you can pull in. You can do 3D. You can do 2D. You can do 1D if you wanted to. You could do animations. You can do all sorts of amazing stuff. And we haven't even figured out the vocabulary for half of this stuff. Even if you're tech, there's just so much waiting to be discovered.

好的，Nate，感谢你过来分享一些你脑子里的想法。你肯定让我思绪万千。我现在在想象我能基于这个做的所有不同的事情。超级鼓舞人心。真的为你在做的事感到兴奋。而且现在有机会——我们这些年互动过几次——我很高兴看到你处在一个能全力投入这类想法的地方，因为这真的是个天生的问题，我很兴奋看到你未来会怎么处理它。

Well, Nate, I appreciate you coming over and just sharing a little bit of what's on your brain. You have definitely got my mind racing. I'm now imagining all of the different things that I could do based off of this. Super inspiring. Really excited about what you're doing. And also just now having a chance—we've interacted a few times over the years—and I'm just so glad to see you in a place where you get to run full steam at this type of idea set, because it is just an innate shaped problem, and I'm so excited to see what you do with it moving forward.

好的，谢谢。非常感谢你邀请我。

Well, thank you. Thank you so much for having me.