用 AI 代理构建创意工具：Pablo Stanley 谈 Ecto 与设计未来

我认为使用这些工具有一个危险：如果我们把太多事情委托给它，我们就不会强迫自己去思考。这正是我尝试做像素艺术时发生的情况。我正在被我使用的工具所塑造。这感觉像上瘾，因为它太好了。我的信念是，我们需要以一种能扩展我们想法的方式来使用它。它放大我们的好奇心，让我们既能深入也能拓宽视野——突然之间，你脑海中那个小小的火花可能被放大成一颗充满火焰的巨星。

There is a danger in using these tools, I think, because if we delegate too much to it, we're not forcing ourselves to think. And this is what was happening with me when I was trying to do the pixel art. I'm being shaped by the tools that I use. It feels like an addiction because it's so good. My belief is that we need to use it in a way that expands our ideas. It magnifies our curiosity. It allows us to go deeper but also broader, where suddenly maybe that thing that was like a little spark in your brain can be amplified into a gigantic star that is full of fire.

欢迎来到 Dive Club。我是 Red，这里是设计师永不停歇学习的地方。本周的嘉宾是 Pablo Stanley，他是我在这个行业里长期敬仰的人之一。我们将深入探讨他构建创意工具的历程——从他自己的产品，到他在 Vercel 担任 Staff Designer 的运作方式，在那里他负责构建 Vzero 的未来。这场对话内容非常丰富，Pablo 的分享令人愉悦。让我们直接开始吧。

Welcome to Dive Club. My name is Red and this is where designers never stop learning. This week's episode is with Pablo Stanley, who's one of the people I've looked up to in this industry for a long time. So, we're going to do a deep dive into his journey building creative tools. Everything from his own products all the way to how he operates as a staff designer at Vercel, where he gets to build the future of Vzero. There's a lot in this conversation and Pablo's a joy to listen to. So, let's dive right in.

我正在展示 Ecto，这是另一个没人需要的设计工具，但我想做出来。我的想法是：做一个设计工具，让机器人在画布上与你同在，你和机器人协作。这发生在 Figma 决定做这件事之前。我当时想，怎么回事？为什么画布上没有智能体？所以我为自己做了一个小工具。我当时在度假，然后就想，让我把这个东西做出来。实际上，它最初并不是一个设计工具，而更像是一个特效工具，带有着色器、网格和各种花哨的东西——现在每个人都觉得，如果你没有这样的工具，你就做不出东西。

I'm showing Ecto, which is yet another design tool that nobody needs, that I wanted to make. My idea was I want to make a design tool where little robots are actually there with you in the canvas and you collaborate with the robots. And this was before Figma decided to do this. I was like, what is going on? Why don't we have agents on the canvas? So I created my own little tool for that. I was kind of on vacation and then I was like, let me make this thing. Actually, this started not as a design tool but more as an effects tool with shaders and mesh stuff and all the fancy stuff that now everybody is like, if you don't have a tool like this, you're not making it.

是的，现在就是这样。

Yeah, right now.

没错，就是那种戏剧效果之类的东西。所以去年我做了这个。我尝试用图层来实现。比如，我们怎么用图层来做？怎么添加文字之类的？然后我想，老兄，我需要一个画布。我需要缩放并实际添加内容。然后我就一头扎进了把这个花哨的东西变成设计工具的兔子洞。所以，这基本上就像 Framer、Figma、Sketch 等其他工具一样，左边有图层，右边有属性面板，中间是画布。一切都是代码，这是我想做的。挑战的一部分是，所有东西实际上都是代码，而且非常固执己见，因为我希望元素有默认值，通常是 HTML，使用 div 和 Tailwind 类。所以我想，好吧，这通常是开发者喜欢的方式，所以我要做一个只使用这些的工具。例如，这里所有的类默认情况下都可以使用 Tailwind 类。我不知道这里是否看得见。

Yeah, exactly with the theater and all this stuff. So, I did this last year. I was trying to do it with layers. Like, how can we do this with layers? How can we add text and stuff? And then I was like, dude, I need a canvas. I need to zoom out and actually add stuff. And then I went down the rabbit hole of turning this fancy thing into a design tool. So, yeah, this is pretty much like any other tool like Framer, Figma, Sketch, where you have the layers on the left, you have properties panel on the right, and then you have the canvas. Everything is code, so that's something I wanted to do. Part of the challenge was that everything is actually code and it's very opinionated because I wanted to make it in a way that elements have defaults, which is usually HTML, using divs and using Tailwind classes. So I was like, okay, that's usually what developers love doing, so I'm going to do a tool that just uses that. For example, here all the classes by default are that you can actually use Tailwind classes. I don't know if this is visible there.

完全看得见。我喜欢你把它也整合进来了。那是一个很好的小细节。

Totally. I love that you brought that in line too. That's a nice little detail.

是的，这取决于你选择什么，工具就会相应显示。例如，这是一张图片，所以它会给你显示：适配方式是什么？是 cover、contain，还有不透明度。如果是一个盒子，它会给你显示背景颜色、内边距等等，所有你期望在画布上看到的控件。但除此之外，例如这里有一个内边距，这是你期望的。让我把它切换到浅色主题。我更喜欢浅色主题，不知道为什么它默认是深色主题。就像这里，所有的控件，正如我所说，都是 Tailwind。它有一个智能体，我称之为 Jewels，然后你可以把它连接到你自己的，例如如果你想使用你自己的 CLI 智能体，你也可以通过终端来做，或者只使用内置的。你可以点击任何东西，然后直接让它做一个变体。例如，它在画布中创建，复制一份，然后生成一个变体。我不记得了，我不知道它会怎么进行。顺便说一句，希望它能正常工作。我应该在开始之前检查一下的。嘿，看，它正在变化。所以你可以看到变化是实时流式传输的。而且由于画布实际上是代码的反映，你可以实时看到它发生。

Yeah, this just like, whatever depends on what you are selecting, then the tools are in line. For example, this is an image. So it gives you like, what is it going to be the fit? If it's going to cover, contain, and also opacity. If it is a box, then it gives you what is the background color, the padding, and all that stuff, all the controls that you would expect here on the canvas. But also, for example, here it has a padding that is something you would expect. Let me actually change this to the light theme. I prefer light theme, I don't know why it was on dark theme. Like here, all the controls are, as I was saying, it's all Tailwind. It has an agent, I was calling it Jewels, and then here you can connect it to your own, for example if you want to use your own CLI agent you can do it too, with your terminal, or just use the one that is internal. And you can say, you can click on anything and then just ask it, make a variation. For example, it creates it in the canvas, so it duplicates it and then it's going to make a variation. I don't remember, I don't know how this is going. By the way, hopefully it's working. I should have checked before jumping into this. Hey, look, it's changing. So, you can see it's streaming the changes as they're happening. And since again, since the canvas is actually a reflection of the code, you can just see it live happening.

快速插播一条消息，然后我们回到正题。如果你还没有尝试过 Paper，尽管感觉这个播客里每个人最近都在谈论它，但他们刚刚让入门变得更容易了，因为你现在可以直接从 Figma 复制粘贴到 Paper 的画布中。所有图层及其属性，包括图片和 SVG，都会瞬间导入。这相当了不起，你今天就可以试试。只需访问 dive.club/paper 即可开始。Framer AI 智能体刚刚发布，这正是我想要的构建专业网站的方式。你可以获得与 AI 智能体协作的能力，而且直接在一个专为发布生产站点而设计的画布中。例如，我为 Dive 设置了五个不同的 CMS，这可不是我最喜欢处理的事情。但现在我可以让 Framer 智能体直接在 Framer 内部完成所有与 CMS 管理相关的工作。当然，你还能获得 SEO、暂存链接、本地化以及其他所有你期望的功能。但说实话，归根结底，我最喜欢的是能够在 Framer 内部与智能体一起探索、设计和构建。如果你访问 dive.com/club/framer，你可以获得 Framer Pro 的 30% 折扣，立即开始构建。现在，回到节目。

Real quick message and then we can jump back into it. If you still haven't tried Paper, even though it kind of feels like everybody on this podcast is talking about it lately, they just made it way easier to get started because you can now copy and paste from Figma directly into Paper's canvas. All of the layers and their properties, including images and SVGs, are imported in an instant. It's a pretty big deal, and you can try it out today. Just head to dive.club/paper to get started. Framer AI agents just launched and it is exactly how I want to build pro websites. You can get the power of working with AI agents but directly in a canvas that is tailor made for shipping production sites. For example, I have like five different CMSs for Dive which isn't exactly my favorite thing to deal with. But now I can have the Framer agent do everything related to CMS management directly inside of Framer. And of course, you get SEO, staging links, localization, and everything else that you'd expect. But honestly, at the end of the day, the thing that I love most is just being able to explore, design, and build with agents all inside of Framer. And if you head to dive.com/club/framer, you can get 30% off Framer Pro to start building today. Now, on to the episode.

顺便说一句，是的，我保留了着色器。所以你可以看到这个东西仍然有所有的特效，所有的着色器都还在。另外，在 Figma 做这些之前，我还做了动画相关的东西。我想我陷入了兔子洞，就想，我要构建一个自己的全能设计工具。所以你可以进入动画，然后就可以对任何东西进行动画，完整的 timeline。

By the way, yeah, I kept the shaders. So, you can see that this thing is also still all the effects, all the shaders are still there. And also something that I did again before Figma was doing any of this, I was also doing animation stuff. I think I went down the rabbit hole of just like, I want to build my own design tool that does it all. So you go to animation and then you can just animate anything, full timeline.

但 timeline 是……我当时想，我不想处理关键帧。我真的很喜欢其他工具做动画的方式，比如……叫什么来着？有一个动画工具叫 Jitter。

But the timeline is... I was like, I don't want to deal with keyframes. I really like how animation is done by other tools like... what is it called? There's an animation tool, Jitter.

对，没错。

Yeah, exactly.

那是我最喜欢的术语。

That's my favorite term.

实际上，它更像是你在编辑动画，而不是编辑元素。所以，例如这里，让我们看看 AI……好了。现在 AI 为你制作了所有这些动画。然后你就可以像编辑形状一样编辑它们，你知道，就像所有这些事情。你可以，我希望它更干脆一点。

It's actually more about you're editing the animation. You're not editing the element. So, for example here, let's see if the AI... There you go. So now the AI made all this animation for you. And then you can just edit almost like shapes, you know, like all these things. You can, I want it to be a little bit snappier.

所以它持续时间短一点，你知道。你可以随便选一个。现在还是太慢。所以这几乎就像在编辑矩形。现在它更灵敏了。你还可以做错开，就像微妙的错开。这样所有东西都错开了。

So it lasts a little bit less, you know. So you can just like select any of this. And now it's still too slow. So it's almost like editing rectangles, you know. Now it's a little bit snappier. You can also do stagger just like a subtle staggering, you know. So that way everything is staggered.

你花了多长时间做这个？我的意思是，你构建了这么多完整功能，还有很多小交互和用心的细节，这相当令人印象深刻。我们说的是多久？

How long did you spend on this? I mean, because you've built so many full features but also there are a lot of little interactions and thoughtful details and this is quite impressive. What are we talking here?

几个月。我觉得很奇怪，因为我花了很长时间试图让这个效果生效。我整整花了一个半月。这一切都在着色器里工作，而且是 3D 的，我试图让它以 3D 方式工作。所以我实际上——让我看看这个是否还在运行。是的，还在。你可以看到我在用着色器，实际上是在一个真正的画布上工作，我试图添加自己的工具。我试图让它在画布上工作，这样我就可以在这里添加文本图层。嗨。但这一切看起来是 2D 的，实际上是 3D 的。这些都是 3D 图层。但 LLM，我试图在这里做所有事情，但 LLM 对此非常困惑，老兄。因为我试图用这些东西做自动布局，你懂吗？我试图用 flexbox，然后说，嘿，让它水平排列，像 command G 那样，但这完全搞砸了。哦天，看看那个。不不不。这简直是一场噩梦，因为数学和一切都很疯狂。元素会非常困惑，因为这一切并不明显，但实际上是 3D 的，在一个真正的 3D 画布和 3D 空间中，有一个平面相机，因此它不是真正的 HTML。我花了大量 token 试图让它工作，然后我说，去他的，这太蠢了，我在干什么？我为什么要强迫 LLM 以这种方式理解效果？这太疯狂了。我打算从头开始，但这次用基本的 HTML。然后我就跳到了这个。然后它就神奇了。变得非常容易，因为突然 LLM 在画布中使用了它真正理解的语言。所以我花了很长时间在错误的方向上。我不知道这是否有教训，有时你会钻进兔子洞，但你需要知道何时停止，何时说好吧这很蠢，这行不通。通常的评论和信念是，你必须继续推进，老兄，当事情变得困难时你必须继续推进，但我说不，不，不，停——必须有一个时刻你说不，这很蠢。这件事也发生了，在某个时刻我停止了在 Effecto 上的工作，我说好吧这很蠢，我不知道我为什么还要做这个。我在画布上用智能体构建 Effecto 这个工具，它有设计系统——哦对它有设计系统——所有东西都喂给 LLM，这样它就能理解——所有设置、所有 UI，都在这里，LLM 能理解。但我意识到我在构建一个我自己都不用的工具。我没有吃自己的狗粮。你知道，理想情况下我应该用 Effecto 来构建 Effecto。但我没有。我只是直接和智能体一起工作。

Couple of months. I think it's weird because I spent a very long time trying to make this thing effects. I spent a solid month and a half. This all works in shaders and it works in 3D and I was trying to make it work in 3D, you know. So like I was actually—let me see if this is still live. Yeah, this is still live. So you can see that I was working with shaders and actually with an actual canvas and I was trying to add my own tools. So I was trying to make it work with the canvas meaning that then I can actually add text layers here. Hi. But this is all—this all looks 2D but it's actually 3D. This is all 3D layers. But the LLM, like I was trying to do everything here, but the LLM gets so confused about this, dude. Because I was trying to do auto layout with this stuff, you know? I was trying to do flexbox with this and just like, hey, let's make it horizontal like command G, but this just breaks so much. Oh man, look at that. No, no, no, no. It was just like a nightmare trying to make this work because the math and everything just is insane for it to work. And elements will just get so confused trying to make this work because all of this is not—this is not apparent but this is like actually 3D, it's in an actual 3D canvas and a 3D space in it with a flat camera and because of that it's not real HTML. I spent so many tokens trying to make this work and then once I said like screw this, this is dumb, what am I doing, why am I trying to force an LLM to understand effects this way? That is just insane. I'm just going to do it everything from scratch but now with actual basic HTML. And then that's when I jumped into this. And then it was magic. Then it was so easy because then suddenly the LLM was using the actual—in the canvas the actual language that it understands. So I spent a long time on the wrong direction. I don't know if there's a lesson there like sometimes you go down the rabbit hole but you need to know when to stop and when to say like okay this is dumb, this is not working. The usual commentary and the usual belief is like you have to keep pushing man, you have to—whenever things get hard you just have to keep pushing and it's like no no no hold—there has to be a moment where you say like no this is dumb, you know. And this actually happened with this too like at a certain moment I stopped working in Effecto, I was like okay this is dumb, I don't know why am I even doing this. I was building this tool Effecto in the canvas and with agents and it has design systems—oh yeah it has design systems and stuff—and everything is just like something that all of this is fed to the LLM so it's going to understand it—all the settings, all the UI, it's here and it's something that the LLM understands. But I was realizing that I was building a tool that I was not using. I was not dog fooding this tool. You know, ideally I should have been using Effecto to build Effecto. You know, I was not doing it. I was just like straight up working with the agent.

是啊。为什么不呢？为什么不呢？发生了什么？脱节在哪里？

Yeah. Why not? Why not? What was happening there? What was the disconnect?

嗯，脱节在于我不再这样设计了。就是这样。我不再用画布了。我用画布画画、做漫画、做手绘。在这里做事情。我更多用 TL Draw。这是我用的工具。我不知道——哦，你可以看到还有一些旧的——这有点像我的设计工具。这就是我真正需要的全部。这个——我不知道我在这里做什么。哦对，看那个。我在画一个蠢东西的草图。比如，这是一个我正在做的新东西——一个新工具——我当时想这就是我想要的样子，这是——

Well, the disconnect is that I don't design like this anymore. That's it. Like I don't use the canvas anymore. I use the canvas to draw, to make my comics, to do hand-drawn stuff. Doing things here. I was using more TL Draw. This was the tool that I was using. I don't know like—oh, you can see that there's still some old—this was kind of like my design tool in some stuff. This was really what all I needed. This—I don't know what I was doing here. Oh yeah, look at that. I was doing a sketch of a dumb thing. I think for example, this is a new thing that I was working on—a new tool—and I was like this is how I wanted it to look and this is—

哦，我能想象那个设计。我知道高保真版本是什么样子。看到这个表示很酷。

Oh, I can picture that design. And I know what the high fidelity version looks like. It's cool to see this representation.

对。对。对。没错。所以这就像一个——对。还有一个非常基础的——

Yeah. Yeah. Yeah. Exactly. So, this is like a—yeah. And also like a very basic—

你以前用过 Balsamiq 吗？就像 Excalidraw 和 Balsamiq。我不知道怎么发音。

Did you ever use Balsamiq in the day? It was like Excalidraw and Balsamiq. I don't know how you say it.

我记得它，但我从来没——是吗？

I remember about it, but I never—is it?

我以前经常用它。它太棒了。我有点好奇这是否是配合编码智能体的正确工具——就是快得离谱的线框图，仅此而已。

I used to use it all the time. Like it was so great. And part of me wonders if this is actually the right type of tool to pair with coding agents—just ridiculously fast wireframes and that's it.

也许这类工具会卷土重来。实际上还有一个，我想叫 Whimsical。

Maybe there's a comeback for a tool like this. Actually there was another one I think it was called Whimsical.

Whimsical。对。

Whimsical. Yep.

对。Whimsical。我也喜欢那个工具，我喜欢用它，它像图表，但也有线框图。他们也有这个功能。

Yeah. Whimsical. I love that tool too and I love using it and it was like diagrams but they also had like kind of a wireframes. They had this thing too.

对。这类工具会卷土重来，因为 LLM 已经知道了。你可以告诉 LLM，老兄，这只是线框图。这只是为了展示流程，但用我的设计系统。你已经知道我的 token 是什么了。

Yeah. Like there's a comeback for tools like this because the LLM already knows. You can tell the LLM, dude, this is just a wireframe. This is just to show you the flow, but use my design system. You already know what my tokens are.

这听起来开始像——

This is starting to sound like—

我甚至不太在意画布里的 token。有时在意，但 90% 的时候我只想要一个粗略的近似，然后我发现自己给模型加免责声明。不要使用画布中的精确设计。优先考虑设计系统。我写过那个提示 500 次了。

I don't even really care about my tokens in the canvas that much. Like sometimes I do, sometimes I do, but 90% of the time like I just want a rough approximation and then I find myself giving the disclaimer back to the models. Don't use the exact designs from the canvas. Prioritize the design system. I've made that prompt 500 times.

对。对。对。没错。就像只把这个当作指南。

Yeah. Yeah. Yeah. Exactly. Like take this only as a guideline.

所以你有这个时刻。你一直在用 Teal Draw。你意识到你没有吃自己的狗粮。然后呢？

So you have this moment in time. You've been using Teal Draw. You're realizing you're not dog fooding your own product. Then what?

对。它真的不适合我。老实说，我更像是在为市场营销人员构建一个工具。

Yeah. It wasn't really for me. Honestly, I was more like building a tool for people in marketing.

我觉得我一生都在致力于让设计更易用、更民主化。但同时我意识到，我的实际工作是在终端里和这些智能体一起完成的。我最近一直觉得，这东西挺孤立的。所以我建了这个工具。最重要的是，我想和智能体协作，而不是各自为战。我在 Vercel 和 uzero 的团队里注意到，我们都在用这些工具，但都是在自己的终端、自己的电脑上。我们用 Gather 这个工具，有站会，用 Slack，分享东西。你做的事情和谁真正在做之间是脱节的。你说‘嘿，我们需要搞这个’，然后你带着你的智能体去终端，那个黑色虚空，说‘嘿，老兄，咱们干这个’。它干完了。然后你回到 Slack 说‘嘿，大家看，我搞定了’。其实你没搞定。大家都知道你没搞定。没关系，我们知道你用了智能体，但你把它当成一个 PR 提出来。每个人都这样。然后可能有反馈：‘嘿，这不行’或者‘我们得修一下’。于是你拿回来对智能体说：‘嘿，老兄，你让我丢脸了，这不行，别犯错。’每个提示词的结尾，我的预提示都是‘别在我的工程师同事面前让我丢脸’。没错。真正的工程师会看到这个。我去修，然后回来说‘大家，我修好了’。不，是智能体修的。为什么不直接让智能体在那儿呢？为什么不让我的智能体参与对话，真正看到别人在说什么？很多计划和反馈都是和其他人一起进行的，但智能体却被孤立在别处。协作本身也发生在孤立中，对着那个黑色虚空和一个绿色机器人。我给你看看登陆页面。

I feel like my whole stick for my whole life has been trying to make design more accessible and democratize design. But at the same time, I was realizing that my actual work is happening in the terminal and with these agents. The thing I've been feeling lately is that this stuff is pretty isolating. So I built this tool. More than anything, I wanted to work with agents but in a collaborative way. Something I noticed with my team at Vercel and uzero is that we all use these tools, but we use them on our own terminals, on our own computers. We use a tool called Gather, we have standups, we use Slack, and we share things. There's a disconnect between what you're doing and who is actually doing it. You go, 'Hey, we need to work on this,' then you go with your agent to the terminal, the black void, and say, 'Hey dude, let's do this.' It does it. Then you go back to Slack and say, 'Hey guys, look, I made this.' You didn't make this. Everybody knows you didn't make this. It's okay, we know you use an agent, but you present it as a PR. Everybody's doing this. Then there might be feedback: 'Hey, this isn't working,' or 'We should fix this.' So you grab that and bring it back to the agent: 'Hey dude, you embarrassed me, this isn't working, no mistakes.' At the end of every prompt, my pre-prompt is 'Don't embarrass me in front of my engineering colleagues.' Exactly. Real engineers are going to see this. I'll go and fix it, and come back saying, 'Guys, I fixed it.' No, it was the agent. Why not just have the agent there? Why not have my agent be part of that conversation and actually see what others are saying? A lot of the planning and feedback happens with other humans, but the agents are in isolation in a different place. The collaboration is happening in isolation too, with this black void and a green robot. Let me show you the landing page.

而且这一切都有音乐。所以，我不知道你玩不玩音乐。

Also, all of this has music. So, I don't know if you play music.

我玩。是的。

I do. Yeah.

好的，酷。所以你也许用过像 color 或 synth pad 这样的工具。

Okay, cool. So maybe you've used a tool like a color or a synth pad.

所以，这个在背景里。实际上是一个合成器垫。

So, this is in the background. It's actually a synth pad.

我也喜欢你把它又带回了涂鸦风格。

I love that you brought doodles back into it too.

不管我做什么，我都会带上涂鸦。总之，我们实际用一下。让我开始吧。它就像 Discord 或 Slack，但智能体和你一起工作，也有人类和你一起工作，同时你可以直接和智能体对话。这就是我想做的。就像‘嘿，我能让智能体来做事情吗？’你可以连接 Claude Code、Codex 或 Cursor，它们在你的电脑上运行，或者你可以添加一个在沙盒中运行的智能体。例如，我们叫它 Ilo Reid。你可以给它指令，但其实它就像系统提示词，如果你想要的话，但它已经很好了。嘿，你能在主页页脚加一个关于 Red 的 Dive Club 的小彩蛋吗？一个 shout-out。看看它怎么做。哦，顺便说一句，这东西连了我的 GitHub。它已经连了我的仓库，所以它已经知道了。这里它会创建一个线程，它在编码，在沙盒上运行，做所有事情。我可以在最后让别人智能体被 @。我本可以让 Eery @一个智能体来审查它的 PR。但我也可以在最后让另一个智能体审查 PR。好了。它完成了。我们看看。好了。所以它创建了这个东西。我可以去，它在构建预览，但我可以去看拉取请求。我可以看到改了什么。所以嘿，好了。有一个彩蛋。一个安静的，我猜它会在页脚。是的，在页脚的 TypeScript 文件里。是 diveclub 吗？嗯。搞定了。好的，酷。所以我加了那个。这是用 Vercel 的。它还在构建，这里酷的是它实际上在看 Vercel 的预览，所以一旦准备好，你可以从这里直接预览，然后你可以批准、请求修改，甚至拒绝。

Whatever I make, I will bring doodles. Anyway, let's actually use it. Let me just get started. It's like Discord or Slack, but where agents work with you, and you have humans working with you, but at the same time you can just talk to agents. This is what I wanted to do. Just like, 'Hey, can I bring agents to do stuff?' You can connect Claude Code or Codex or Cursor, and they run on your computer, or you can just add an agent that runs on a sandbox. For example, let's call it Ilo Reid. You can give it instructions, but really it's just like a system prompt if you wanted to, but it's already good. Hey, can you add a little Easter egg about Dive Club by Red in the homepage footer? A shout-out. Let's see what it makes. Oh, by the way, this thing is connected to my GitHub. It's already connected to my repo, so it already knows. And here it's just going to create a thread and it's coding, running on a sandbox, doing everything. I could have someone else's agent be tagged at the end. I could have asked Eery to tag an agent to review its PR. But I could also at the end ask another agent to review the PR. There you go. It finished. Let's see. There you go. So now it created this thing. I can go and it's building the preview, but I can go see the pull request. I can see what was changed. So hey, there you go. There's an Easter egg. A quiet and I guess it's going to be in the footer. Yeah, it's on the footer TypeScript file. Is it diveclub? Mhm. Nailed it. Okay, cool. So I added that. This is using Vercel's. It's still building it, and over here the cool thing is that it's actually looking at the preview from Vercel, so once it's ready you can actually just preview it from here and then you can approve it, request some changes, or even reject it.

我觉得很多人都在感受这种转变，你的两个工具完美地体现了之前你虽然和智能体一起工作，但在画布上，你可以触摸、感受、移动东西，直接操作它们，点击一下就能改一点点内边距。而这几乎是一种稍微抽象的工作方式。我敢说是编排。

I think a lot of people are feeling this shift, and I think your two tools perfectly exemplify where previously you were working with agents but on the canvas, you can kind of touch and feel things and move things around and directly manipulate them, and click and just change that padding a little bit. Whereas this is almost like a slightly abstracted way of working. It's dare I say orchestration.

感觉很奇怪。我一直为自己亲手做的东西感到自豪，我复制画板然后改来改去，先画草图再描线。感觉都来自我的手。那有一点自豪。然后我们衡量，我觉得是错误地衡量，我们通过产出数量或产出来衡量价值或成功。如果你像我一样更艺术一点，那里面有多少是你自己？哦，好了。我们看看。嘿，看那个。不错。哦，老兄，看那个。好了。你知道吗？我们批准它。批准了，兄弟。漂亮。好了。它批准了。你没听到，但有一点音乐。哦，不错。

It feels weird. I've always taken pride in the things that I make, that I put my hands into, that I duplicated the artboard and then changed things around, did a sketch first and then inked it. It all feels like it's coming from my hands. There's a little bit of pride on that. And then we measure, I think wrongly, we measure value or success by the amount of output or the quality of that output. If you are a little bit more artistic like me, how much of that is a little bit of you? Oh there you go. Let's see. Hey, look at that. Nice. Oh dude, look at that. There you go. You know what? Let's approve it. Approved, bro. Beautiful. There you go. It approved. You didn't hear it, but there was a little music. Oh, nice.

也喜欢竞争性的部分。

Love the competitive, too.

我觉得这也是和 AI 一起工作的一个搞笑缩影，你正在做一件事，然后突然出现一个新东西要审查，你过去审查，然后又可能另一个要审查，感觉就像在和智能体玩打地鼠。

I think this is a hilarious microcosm of what it's like working with AI, too, as an aside where it's like you're doing a thing, you're doing a thing, and then it's like, oh, a new thing to review, and you go over here, and you review it, and then maybe another thing to review, and it just feels like I'm playing whack-a-mole with the agent.

我们的工作越来越像编排、管理、指挥这些事。这很奇怪，因为我一直有种危机感：这还是我吗？这还是我的作品吗？如果我不是亲手制作，不是亲手画那个矩形，不是亲手写代码，不是亲手摆放东西并尝试不同方案，那这算什么？我觉得这是一种不同的创作方式，需要大脑的不同部分。你可以说管理和指挥没那么有创意，我也有同感。我见过自己几年前做的东西，可以给你看一些很棒的作品。我做了那个页面和视频，全是精心制作的。图片是 AI 生成的，但屏幕录制、动画、背景分离——我用 AI 填补空白和分离照片，但其余部分都是亲手做的。我觉得最近没做过这样的东西了。这比我现在的作品更有创意。相比之下，现在这个感觉很机械，因为我借助 AI 来制作，我只是在指挥我想要什么，但我没有在 Figma 里做。我先在 TLDraw 里画了个草图，然后说：“做个网格吧。这里有张车的图片，我生成了一堆图，选一张，再放些文字。”所以很多决定是和 AI 协作完成的，但我把很多思考也委托给了它。我觉得如果继续这样把大量创作委托给 AI，我会变得更笨，成为更差的设计师。但与此同时，你可以说很多艺术家也不是亲手制作的。他们会教别人去做。他们有特定的方法，然后让学生去执行。迭戈·里维拉就是这样，他的很多壁画其实不是他画的。我确信米开朗基罗也是如此——他让其他画家去画，他指挥他们。他有草图和愿景。还有伦勃朗，他的一些画也不是他画的，他指挥学生。安迪·沃霍尔甚至不掩饰，他称之为“工厂”。他说：“这是个工厂，我不制作，我最后只签个名。”但这一切都是他的指导、他的判断、他的签名、他的声誉。我觉得这并不新鲜。问题只是你愿意把多少创作交给 AI，以及你在哪个节点上觉得自己达到了安迪·沃霍尔或伦勃朗的水平，可以赋予 AI 智能体自主权，让它们在你的指导下为你做事。

A lot of our work is becoming more like orchestrating, managing, directing these things. And it's weird because I've been having this kind of crisis where it's like, is this even me? Is this even mine? What is this if I'm not making it with my own hands? If I'm not actually drawing the rectangle, if I'm not writing the code, if I'm not placing the things by myself and trying different things. I feel it's a different way of creating. It requires a different part of your brain. And you could argue that managing and directing is not as creative. And that's how I feel. I have seen stuff that I did years ago, and I can show you something gorgeous. I made this page and this video, all done with care. The images are AI, but the screen recording, the animations, the separation from the background—I used AI to fill in the blanks and separate the photo, but all the rest was made by actually making it. I feel like I haven't done stuff like this recently. This feels more creative than what I do now. Now this feels robotic in comparison because I had help from AI to make this, and I was directing what I wanted, but I didn't make it in Figma. I did a TLDraw sketch of what I wanted, then I said, 'Let's do a grid. Here's a car image, I made a bunch of images, just use one of those and put some text here.' So a lot of those decisions were made in collaboration with the AI, but I was delegating a lot of that thinking to it. I feel that's not great if I continue on this path where I'm delegating a lot of the creation to the AI. I feel like I'm going to become dumber and a worse designer. But at the same time, you could argue that a lot of artists didn't make it themselves. They would teach others to actually make it. They would have a specific way of doing things and then have students make it. Diego Rivera would do this. A lot of his murals he didn't actually paint. I'm pretty sure Michelangelo did this too—he had painters actually doing it, directing other painters. He had the sketches and the vision. Also Rembrandt, some of his paintings he didn't paint; he would direct students. Andy Warhol wouldn't even hide it, he called it the factory. He said, 'It's a factory, and I'm not making it, I'm just signing it at the end.' But it was all his direction, his judgment, his signature, his reputation. I don't think this is new. It's just accepting how much of that creation you want to give to AI, and at what point you feel you are at that level of Andy Warhol or Rembrandt, where you give AI agents the agency to do it for you with your direction.

你知道艺术家索尔·勒维特吗？他做了很多极简主义作品，但他用的是所谓的“绘画指令”。你了解这个吗？

Do you know this artist Sol LeWitt? He did a lot of minimalist work, but he used these things called drawing instructions. Do you know about this?

不，我不知道。

No, I don't. No.

这家伙才是最初的提示词工程师。他就是这么做的。他认为想法是一种机器，一种创造艺术的机器。他会给博物馆这样的指令：“在墙面上，任何连续的一段墙，用硬铅笔随机点上很多点，然后让所有线条互相连接。”然后他就这么做了。最后他会说：“这是我的艺术。我只给了指令。”即使他去世后，他的一些指令仍被使用，而且仍然被认为是索尔·勒维特的作品。想象一下。还有一个关于“四小时做四件事”的指令：“在四个相邻的 4x4 英尺正方形内，你付给这些绘图员每小时 4 美元。”他对数字四有执念。比如：“嘿，四英寸长，四种颜色。”然后他会创作出这样的作品，全是线条，他没有亲手制作，但他写了提示词。这可是在 60 年代。

This guy was the original prompter. This is how he would do it. He believed that ideas are a kind of machine, a machine that creates art. He would give this to a museum: 'On a wall surface, any continuous stretch of wall, use a hard pencil and put a lot of points around at random, then make all those lines connect to each other.' And that's what he would make. At the end, he would say, 'That's my art. I only gave the instructions.' Even when he was dead, some of his instructions were still being used, and they were still being said as this is a Sol LeWitt. Imagine that. There's another one about doing four in four hours: 'Within four adjacent squares that each 4x4 ft, you will pay these draftsmen $4 an hour.' He had a thing for four. It's like, 'Hey, it's four inches long with four colors.' And he would create stuff like this, all lines, and he didn't make it, but he wrote the prompt. This was in the '60s.

这很酷，因为问题是：我作为设计师的肌肉在萎缩吗？是的，在某些方面肯定是。我不可能不萎缩。但偶尔我会有一个两三年以前不会去追求的想法。现在我觉得自己几乎能实现任何想到的东西。所以我会有一个新颖的概念，然后执行它。也许一次就搞定，但我其实不在乎，因为新颖的是那个想法。但这变得很模糊，因为每当我这样做一次，可能就有另外五次我在说：“嘿，给我看一个变体。实际上，给我看六个变体。”然后我选一个，我确信沃霍尔也这么做过。他就是指挥丝网印刷，然后说：“这是我拍的照片，放大它，放在那里，画出来，做多个变体。我们选一些，然后我最后签个名。”他这样做也是对艺术的一种反叛。他在说：“嘿，看看这个重复的东西，你可以说它不是艺术，但我告诉你它是艺术。谁来决定什么是艺术，对吧？”但你可以说，我们正在经历的更大例子是伦勃朗。他的很多画都不是他画的。而且至今仍有历史学家和博物馆人员不知道哪些是他亲手画的。但事实就是这样。

That's cool because the thing is, am I atrophying muscles as a designer? Yeah, in some ways I have to be. There's no way that I'm not. But then every once in a while I will have an idea that I would not have pursued two or three years ago. But now I feel like I can do literally anything that I can think of. So I have a concept that is novel and then I execute it. Maybe I one-shot it, but I don't actually care because it was the idea that was novel. But it gets so muddy because for every time I'm doing that, maybe it's five other times where I'm like, 'Hey, show me a variation. Actually, show me six variations.' And then I just pick one, which is something that I'm pretty sure that Warhol did too. He would just be directing the silkscreening, and he would be like, 'Here's a photo that I took, now enlarge it and put it there and paint it and do it in multiple variations. We're going to select some of them and then I'm going to put my signature at the end.' He also did it in a way that was kind of a counter against just art. He was saying, 'Hey, look at this thing that is just repetitive and that you could argue is not art, and I'm going to tell you it is art. Who decides what's art, right?' But you could say that a bigger example to what we're going through is Rembrandt. A lot of his paintings it wasn't him who painted it. And still there are historians and people in museums who don't know which ones are actually his. But this was the deal.

交易是，他会教学生如何像他一样画画。所以最后，学生从中获得了一些知识。这是一种知识的转移，那些学生，比如迭戈·里维拉，也会这样。他会教他们如何画壁画，最后那些艺术家也能用那种风格或类似风格创作自己的壁画。所以这种知识转移也在发生。也许最终功劳归于艺术家，归于迭戈·里维拉、安迪·沃霍尔或伦勃朗，但那些艺术家也从中有所收获。我觉得我们在初级设计师身上正在失去这一点。因为这也是你会对初级设计师做的事情，对吧？你会雇一个还在学习的初级设计师，然后教他们：嘿，这是我们的系统怎么用，这是我们的工具怎么用，这是……他们会尝试一些东西，然后你试着指导他们怎么做。我觉得我们正在失去这一点，因为现在我们不是把这类事情委托给初级设计师，而是委托给大语言模型。我们会指导大语言模型去做。“不，不，不是那样。不是那个紫色渐变，兄弟。”然后你开始手动引导这个东西，让它生成一个还不错的输出，没有那些 AI 垃圾。但你拥有的所有知识，以及你作为一个更有经验的设计师所做的判断和过滤，不会再传递给初级设计师了。它只会流向另一个模型。而且我很确定这些模型也在从这些东西中学习。所以下次它们不会再犯那些错误了。但那些初级画家、初级设计师、还在学习并试图被指导的艺术家们会怎么样呢？可能发生的是，他们可以把 AI 当作导师。这就是我认为我们正在走向的方向。那些会胜出的人，是那些以转化新创作的方式使用工具，而不是把所有事情都委托给工具的人。他们带着好奇心，也许带着一个想法或一个问题，然后用这个无限机器来放大这些想法，或者把它们带向不同的方向。我对此感到兴奋。我觉得这可能已经在发生了，而我们没有注意到。而且我很确定这正在年轻人中发生。我们也说“AI 原生”。这很有趣。我们好像说，“好吧，我现在是 AI 原生了。”不，你不是 AI 原生。你是千禧一代。AI 原生的人是 18 岁，他们真的在这种环境中长大，他们会超越我们所有人。

The deal was he would teach students how to paint like him. So at the end there was the student who got some knowledge out of it. There was a kind of transfer of that knowledge to those students, and those students like Diego Rivera too. He would teach them how to do murals, and then at the end those artists would be able to create their own murals too with that style or with a similar style. So there was this transfer of knowledge that was happening too. And maybe at the end the credit was going to the artist, to Diego Rivera or to Andy Warhol or to Rembrandt, but those artists were able to get something in it. Which is something that I feel we're losing with junior designers. Because that's something you would do with junior designers, right? You would hire a junior designer who is still learning, and you would teach them like, hey, this is how we use our system, this is how we use our tool, this is how... They will try something, and then you will try to guide them on how to do that. I feel like we're losing that because now we're delegating, instead of to junior designers, we're delegating these kinds of things to the LLM. We will guide the LLM to do it. "No, no, not like that. Not that purple gradient, bro." Then you start manually guiding this thing to create an output that is okay, and that doesn't have all that AI slop. But all that knowledge that you might have, and all that judgment and filtering that you will do as a potentially more experienced designer, is not going to a junior designer anymore. It's just going to another model. And I'm pretty sure these models are learning from this stuff too. So next time they're not going to make those mistakes anymore. But then what's going to happen with the junior painters, the junior designers, the artists who are still learning and who are there trying to be mentored? What could happen is that they could use AI as their mentor. And that's where I think we're going. Those who are going to prevail are going to be those who just use the tool in a way that transforms new creations, and that don't just delegate everything to the tool, but actually come with curiosity, come with maybe an idea or maybe just a question, and then they use this infinite machine to just amplify those ideas or take them in different directions. And I feel I'm excited about that. I feel like it might already be happening and we're not noticing it. And I'm pretty sure that this is happening with younger people. We say "AI native" too. That's the funny thing. It's like we say, "Well, now I'm AI native." It's like, no, you're not AI native. You're a millennial. The AI native person is 18 years old and they've literally grown up in this, and they're going to fly by all of us.

完全正确。是的。在 80 年代，嘻哈音乐刚兴起时受到了批评，用合成器制作的音乐也是。我的意思是，现在我们接受嘻哈作为顶级音乐风格之一。电子音乐也一样。但曾经有一段时间我们会质疑，艺术家们会质疑这不是真正的音乐。你只是用其他音乐家的样本，把它们混在一起，声称创造了新东西，但你没有。这不是真正的音乐。哦，你没有用模拟的真实乐器。你把声音委托给一台只是合成声音的机器。所以，这不是真正的音乐，老兄。我们很多同龄人都在质疑 AI。我质疑它。我质疑自己使用它。我一直在用。说实话，不用才是傻瓜。但与此同时，我仍然有那种旧的思维方式，我会质疑。我想，我不知道这是不是真的。我在这方面写了很多……我想保持积极，但同时我的消极面也会出现。我需要改进这一点。我需要和我的治疗师谈谈。

Exactly. Yeah. In the 80s when hip-hop started it was criticized, and music made with synthesizers. I mean now we accept hip-hop as one of the top styles of music. And electronic music is the same. But there was a time when we would question that, and artists would question that this is not real music. You're just using samples from other musicians and mixing them up, supposedly creating something new but you're not. This is not real music. Oh, you're not using an analog real instrument. You are delegating the sounds to a machine that is just synthesizing sounds. So, this is not real music, man. A lot of us that are our age, we question AI. I question it. I question myself using it. I use it all the time. I would be dumb not to use it, honestly. But at the same time, I still have that old thinking where I question. I was like, I don't know if this is real. A lot of my writing on this is very... I want to stay positive, but at the same time, my negative side comes. It's like I need to work on that. I need to talk to my therapist about that.

有一个问题我一直在问自己：如果公司反过来申请和你谈谈，而不是你去找他们呢？这个问题正是全新 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 if 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.

也许我们可以花点时间，和那些正在收听、充满好奇、想要全身心投入这种工作方式、把 AI 视为工具和乐器、但还没有大量经验的年轻设计师聊聊。他们没有像 Vercel 这样非常 AI 前沿的环境和鼓励。所以，我们能不能聚焦一下你的工作流程，以及你每天与这些模型一起工作的样子？也许我们可以用最近的一个发布为例。我知道你刚刚做了设计模式和 v0，投入了很多。帮我们理解你每天是如何与这些模型协作的。探索不同想法是什么样子的。

Maybe for a second we could actually talk to the younger designer who is listening, who is curious, who wants to go all in on this way of working, who views AI as a tool, as an instrument, and yet they don't have a bunch of reps under their belt. They don't have the surrounding environment and encouragement that comes from a place like Vercel that is very AI-forward. So, can we just zoom in on parts of your workflow and what your day-to-day work looks like working on these models? Maybe we could use, you know, one of the recent releases. I know you just did like design mode and v0, a ton that went into that. Like help us understand how you are collaborating with these models on a daily basis. What it looks like to explore different ideas.

我用这个终端 Ghostty。我用 Claude，然后危险地跳过权限。我就说，别问我问题，就……让你自由发挥，你懂的。所以我还会用智能体，它会创建一个工具，生成一个事项列表。现在我只是在我的根目录里，但在这里我可以问它任何问题。所以它真的只是一个聊天。

I use this terminal ghostty. I use Claude and then dangerously skip permissions. I'm like, don't ask me questions, just... I'll let you cook, you know. So something that I do also is I use agents, which creates a tool that creates a list of the things. Right now I'm just in my root folder, but from here I can just ask it anything. So it's really just a chat.

帮我们想象一下，你在 Vercel 做一个中等项目时会用什么样的启动会议。这就是黑色虚空，对吧？我们只是看着黑色虚空。你甚至没有你正在做的产品界面的视觉。你从哪里开始？你怎么正确地指向它？

Help us imagine a type of kickoff session that you would use when you're working on like a medium project at Vercel. This is the black void, right? We're just looking at the black void. You don't even have a visual of the product surface area that you are working on. Where do you even start? How do you even point it correctly?

我用的一个东西是，比如我经常用 tldraw。我用它来……比如，这是为一个设计系统的事情，我试图整理如何显示不同的字体和字号比例，还有调色板，如何显示 UI。因为我已经在仓库里工作了，仓库里已经有了一个设计系统，我觉得我不需要那么高保真，因为很多像字体、间距之类的东西，都已经在智能体的设计系统规则里了。我只需要一个我想做什么的方向。

One of the things that I use is, for example, I use tldraw a lot. I use it to just like... For example, this was for a design system thing where I was trying to put together how to display the different fonts and type scales, and also the palettes, how to display the UI for this. And since I'm already working on the repo, and in the repo there's already a design system, I don't feel like I need to go into high fidelity as much, because a lot of that stuff like the fonts, the spacing, all of those are already rules in the design system with the agent. All I need is just a direction of what I want to do.

所以我会给智能体一些素材。比如，嘿，我写个提示词，就写我想要什么、我认为它应该做到的成功标准是什么。我也会让它向我提问。有时候我会想，给它一张截图是不是太多了。如果我还处在构思阶段，我就不会给截图，而是把它当作协作工具来用，就像：嘿，我有这个想法，你觉得我们应该怎么做？然后它给出一些想法，而我已经有了一个想法，我觉得它应该像这样，但你怎么看？

So this will be artifacts that I would give, for example, an agent. Just like, hey, I'll write a prompt, just like what I want, what is my success criteria of what I think it should do. I would also ask it to ask me questions too. Sometimes I wonder if giving it a screenshot is too much. If I'm still on the ideation part, I wouldn't give it a screenshot, and I will use it more as a collaboration tool where it's like, hey, I have this idea, what do you think we should do? You know, and then it comes with some ideas, and I had this idea, I'm thinking it should be like this, but what do you think?

所以它会给我一些选项。有时它会验证我的想法，这让我感觉很好。重复一下你的话，听起来你和 AI 进行的大部分对话或新会话，都不是直接跳到执行阶段。更像是：我想做这个，也许你有一些初步想法，你怎么看？你说了两次那个问题，这是你大多数时候都会问的吗？

So then it will give me some options. Sometimes it will validate my idea, which makes me feel really nice. Just repeating it back, it sounds like the vast majority of the chats or new sessions that you are doing with AI, you're not jumping right into execution. It is very much so: I kind of want to work on this, maybe you have some preliminary thoughts, what do you think? Like that question you said it twice, is that something that you're asking most of the time?

有时候。看情况。比如有些东西只是排版错了，字号不对，你需要考虑这个，而且有个 bug，这个不工作。这取决于你处在哪个阶段。比如，这里我觉得我真的只是刚开始，我有一个想法，比如它应该看起来怎样，但就像，嘿，一个小标题，我想要一个下拉菜单，带搜索功能，我还没做，但我只是描述了我需要画出来。所以在那种情况下，我有时就直接开始。我们来规划一下。不，其实甚至不是规划。我们来协作。我们来头脑风暴一下。而且让它问你问题真的很好，因为它会问你一些你甚至没想到的事情。

Sometimes. Depends. Like some stuff is just the typography is wrong, it should be the size, and you need to think about this, you know, and there's a bug, this is not working. It depends on at what stage you are. If you are, for example, here I think I was really just starting, you know, I had an idea like how this should look, but like, hey, one little heading and I want a drop down, you know, with a search which I didn't make, but I just described that I need to draw it, you know. So in that case, I sometimes just start. Let's plan it. No, actually not even plan it. Let's just collaborate. Let's do brainstorming, you know, in a way. And also ask it to ask you questions is really good because then it will ask you things that you didn't even think about.

我想多了解一下你在 Vercel 的工作方式。所以在这个光谱上，从修复一行 Tailwind 代码到发布完整功能，作为设计师，你实际拥有多少前端代码？

I want to get a bit more context for how you're working at Vercel. So on this spectrum from, you know, fixing one line of Tailwind all the way to shipping full-blown features, how much of the front end are you actually owning as a designer?

我认为产品开发团队中有不同类型的构建者、创造者或协作者。我不觉得这些角色还像以前那样分为设计师、UX 设计师、文案、PM、前端工程师和后端工程师。我觉得这些界限正在模糊。这些角色——我不知道它们是否会消失——只是多年来发生了很多事情，我不认为它们会消失，但在实际工作中，这些东西确实消失了。更多的是谁在制作原型。我认为很多设计师都在做这件事，也许 PM 也是。原型制作就是：我有一个想法，我们把它组合起来，测试一下。它可能只是一个疯狂的想法，你会做很多这样的原型。我认为原型制作者会做很多奇怪的东西，或者尝试很多不同的东西。所以回到你的问题，我写了多少代码？我认为我处于那个做了很多代码的领域。我会往我们的 GitHub 里放很多代码。但这并不意味着所有代码都会发布。有人分享了一张截图。我不知道现在是否还是这样，但至少在那个时刻，我是放代码最多的人。比如在 Claude Code 之后，我和另一位设计师 Tom John，他也在 Bzero 工作。我们两个设计师甚至比我们代码库里的其他软件工程师写了更多的代码。我们放了更多的代码出去。其中有多少真正发布了？不多。那是因为我们只是在尝试不同的想法。比如，嘿，如果我们做一个动画进入的编辑器会怎样？如果首页有更多内容会怎样？如果首页更简洁干净会怎样？如果侧边栏有这个，如果侧边栏有那个会怎样？所有这些现在都在代码中实现。所以这有点像，不再有大量的画板和 Figma 文件，现在一切都直接在代码中完成。你会有大量的 PR 和不同的尝试，它们处于草稿模式，或者可能准备好审查但从未被审查。我觉得这对我们来说是一个好的状态。然后还有那些完善代码的人，他们可能会拿走那些代码，从中挑选一些东西，变成真正会发布的 PR。例如，这是我发布的另一个功能：它叫什么？那是注释，然后设计模式在这里。我添加注释的方式是，嘿，你不想描述某样东西，而是直接说，嘿，把它变大。所以现在我不用再说，嘿，标题里的 hello world 跨度，把它变大。我只需指着它说把它变大。然后注释就在这里。它实际上附加到了节点上，并且做到了。另一个是设计模式。设计模式更像是一种模式，但实际上就是使用你期望的东西。实际上很多来自 Alcto 的东西，在我之后——

There are different types of builders or makers or people collaborating in product development teams, I think. And I don't feel it's the same as designers and UX designers and the copywriter and the PM and the front-end engineer and the back-end engineer. I don't feel those divisions. I feel those divisions are getting blurred, you know. And those types of roles are—I don't know if they're going away—it's just like there's so much stuff that has happened for years that I don't think they're going away, but actually in the actual work those things kind of disappear. And it's more about who is prototyping. That is one that I think a lot of designers are doing that, and maybe PMs. And prototyping as in: I have this idea, let's put it together and let's test it out, you know. And it could be just a wild idea, and you do a lot of those. Prototypers, I think, are making a lot of weird stuff or trying a lot of different things. So to your question, how much of the code you're doing? I think I'm in that area where I do a ton. You know, I would put a lot of code in our GitHub. That doesn't mean that all of it gets shipped though. Somebody shared a screenshot. I don't know if it's still the same, but at least in that moment, I was the one putting more code. Like after Claude Code, it was me and another designer, Tom John, who is also working in Bzero. So the two designers, we were even making more code, even more than other software engineers in our codebase. We were putting more code out there. How much of that was actually shipped? Not a lot. And that's because we were just trying different ideas. You know, we're like, hey, what if we do the composer that animates in? What if the homepage has more stuff? What if the homepage is just cleaner and simpler? Like, what if the sidebar has this and what if the sidebar has that? All of that stuff now it's happening in code. So it's kind of like instead of having a ton of artboards and Figma files, now it's happening all straight in code. And you're having a ton of PRs and different things that you tried that are in draft mode or maybe ready for review but they're never reviewed. I feel like that's kind of a good place for us to be. And then there's the ones who perfect that code, who might take that code and then cherry-pick some of that stuff to turn it into a PR that is actually going to be shipped. For example, this is another one that I shipped: what is it called? That's annotations and then design mode that is over here. So annotations I added in a way that is like, hey, you just want to, instead of having to describe something, it's like, hey, make it bigger, you know. So now I didn't have to say, hey, the hello world span in the heading, let's make that bigger. I can just point at it and say make it bigger, you know. And then the annotation is here. So it's actually attached to the node and it's doing that. And then another one is design mode. Design mode is more just like a mode here, but actually just like using the things that you would expect. Actually a lot of the stuff from Alcto after I was—

我正想说，顶部那个上下文小菜单。很酷。

I was just about to say, there's that contextual little menu there at the top. It's cool.

对，对，对。还有图层列表，它更像是块和元素列表，左侧的节点，然后你可以重新排列和移动。还有根据你选择的内容出现的上下文菜单。所有这些。我用一个巨大的 PR 构建了它，因为这些东西之前都不存在。这个不存在。这个不存在。注释不存在。很多侧边栏——这不是侧边栏。我做的检查器面板，我们还在做这个。如果先做这个，再做图层列表，再做很多其他东西，会很奇怪。你需要一次性完成整个东西。

Yeah. Yeah. Yeah. Like also the layers list, which is more like the blocks and the elements list, the nodes on the left, and then you can rearrange and you can move around. And yeah, contextual menus depending on what you have selected. All of that stuff. I built it in a gigantic PR because none of this existed. This didn't exist. This didn't exist. Annotations didn't exist. A lot of the sidebar—this is not the sidebar. The inspector panel that I made, this is we're still working on this. It would be weird to just do this, for example, first, and then do the layers list, and then do a lot of that stuff. You need to do the whole thing, you know.

尤其是当你有时候也不知道方向的时候。就像你还在探索。我觉得这很棘手，我最终会做出非常大的 PR，但我想发布很多，因为我没有大团队，但我会想，好吧，我一开始不知道如何拆分，这已经取代了我在画布上的探索。

Especially when you don't know where you're going sometimes, too. Like a lot of you're still exploring. I find that so tricky where I end up making PRs that are way too big, but then I want to ship a lot of them because I don't have a big team, but I'm like, well, I didn't know how to split it up when I started, you know, like this has replaced me exploring on a canvas.

对。所以即使是这些手动操作，比如单词之间的间距、元素之间的间距、内边距，所有这些都值得拥有自己的 PR。但对我来说，像你说的那样测试它，并且实际去做，我不得不留下一个巨大的 PR。那个巨大的 PR 就是设计模式。

Yeah. So even these things that are manually you can just like the gap between the words, the gap between the elements, the padding, all of that stuff does deserve to be their own PRs, you know. But for me testing it as you're saying and for me actually doing it, I had to leave a gigantic PR. A gigantic PR where I was doing it was just design mode.

它实际上比已发布版本还要更先进，因为这里有侧边栏，还有一些尚未发布的交互。是我在制作这个原型，然后工程师会从中挑选一些东西，真正把它实现出来。就像，好吧，我要挑出这个东西，然后把它变成现实。我会做这个上下文菜单，然后把它变成现实。所以团队中有一个角色，可能其他人也提到过，他不是做原型的人，而是真正把它实现出来的人，这通常就是软件工程师。这取决于你在实现什么。如果只是前端的东西，那需要的是一个足够了解前端、可能还懂一些后端的人，来真正把它做出来，并确保性能，让它不会出问题。所以所有依赖都要到位，这样就不会引入一个你都没意识到的 bug，因为你只是想让它工作，但在这个过程中却引入了破坏代码库其他部分的东西，而你自己都不知道，因为我是个设计师，我是个笨蛋。

It actually still more advanced than what shipped because it has the sidebar here and it has some interactions here that haven't been shipped. I was the one prototyping this and then the engineer will be the one cherrypicking stuff and actually making it a reality. It was like, okay, I'm going to cherrypick this thing and then I will put it into reality. I will do the contextual menu and then I will make it a reality. So there's that role of the person who maybe, and I see that others have mentioned this, that is not the prototype but is the one that makes it for real more in a team, and this would be a software engineer, you know. And this depends on what you're making real. If it's just front end stuff, then it's going to be someone who knows enough of the front end and potentially some of the back end to just make it real and then ensure performance, so it doesn't break. So all the dependencies are there, so it doesn't introduce something that is going to create a bug that you didn't even realize because you were just trying to make this work, but while doing that, you just introduce something that is breaking other parts of the codebase that you didn't even know because I'm a designer and I'm a dummy.

你做的这个大原型，是基于生产代码库，还是你有一个单独的游乐场仓库，工程师们再从里面挑选？

The big prototype that you're making, is that off of production codebase or do you have a separate playground repo that you're building off of that the engineers then cherry pick?

哦，不。它是基于生产代码库的。

Oh, no. It's on top of production codebase.

哦，好的。酷。

Oh, okay. Cool.

我还希望能够使用真实的工具，一切都真实。你知道，有些东西你可以在沙盒里或者 HTML 里随便玩玩。但我相信，至少在这样一个工具里，你想要连接到真实项目，连接到真实的智能体，这样你才能以正确的方式测试它。从某种意义上说，PR 只是一个东西，至少取决于你仓库中的限制和权限，但除非别人批准，并且通过所有测试，否则它不会被发布。所以创建一个 PR，为了安全起见把它设为草稿，然后随便玩玩，用真实的东西，这完全没问题。这正是像 V0 这样的工具如此强大的原因，因为你连接到了仓库，连接到了 GitHub，你在实际的代码库上工作，而不是在一个静态的画板上模仿，试图考虑所有边缘情况，但最终很难想到那些。所以你最终只创建了快乐路径，或者静态路径，因为你没有测试，没有发现当你用真实数据、真实工具或真实组件进行测试时通常会发生的事情。

I also want to be able to use real tooling or real everything real. You know, there are some things that you could do that is just like on a sandbox or in an HTML or whatever when you're just playing around. I believe at least in a tool like this you want to connect to real projects, to the real agent, you know, and that way you will test it the right way. Which is something that a PR in a way is just something that is not, at least depends on the restrictions and the permissions that you have in your repo, but it's not going to be shipped unless someone else approves it and then unless it passes all the tests. So it's okay to just create a PR and then just to be safe put it on draft and just play around with it and just use the real thing. And that's a part that makes a tool like V0 so powerful, because you're connecting to the repo, you know, you're connecting to GitHub and you're working on the actual codebase and you're not just working on a static artboard where you're just mimicking and you're just trying to think of all the edge cases, but at the end it's hard to think of those. So you end up just creating the happy path, you know, or just the static path because you're not testing and you're not finding out the things that usually happen when you're testing the thing with real data or with the real tools or your real components.

你构建方式还有一个影响，以及这个大原型，我想多了解一点，就是这是一个媒体发布，对吧？这里面有太多策略、太多 UX 决策、太多总体产品决策了，我猜很多人都有自己的看法。那么，这种构建方式如何改变你与团队分享想法的方式？如何获取反馈，如何让所有人一路同行，确保大家步调一致，从而把这个庞然大物般的发布推出去？

There's another implication of how you're building and one big prototype that I'd love to learn a little bit more about, which is like this is a media release, right? There's so much strategy. There are so many UX decisions. There are so many overarching product decisions that I would imagine a bunch of people had opinions on. So, how does this way of building change the way that you share ideas with the team? Get feedback, bring people along from the journey, make sure that everyone's on the same page so you can get this monstrosity of a release out the door.

如果你只是孤立地在终端里工作，你可能会陷入一个像 AI 精神病一样的兔子洞，因为你去问，这个东西总是说“好好好，我们来做这个”，它总是同意你所有糟糕的想法，然后你就造出了一个没人想要的怪物。所以你要避免这种情况。但是，通过让人类带来我们真正创作所需的摩擦，是的。我不知道，那些感觉更原创的东西来自于多个视角，有摩擦，有推动你、反驳你、促使你以不同方式思考的力量。而大语言模型在这方面并不擅长。我认为人类仍然拥有这种能力。我们有时候可以当混蛋，你知道。那是我们的超能力，我们可以说“啊，这真烂”，这没关系，但分享这些东西并把它放出来是好的。就像录制一段你思考的视频，然后征求意见，寻求反馈，放到 Slack 上，放到 Loom 里，分享——现在有了这个东西，很酷的一点是你可以分享一个预览链接，比如 Vercel 预览链接，然后人们可以实际打开它，点击浏览，找到问题，然后他们可以告诉你哪里出错了。通常就是这样运作的。我们会有一个专门用于 PR 审查的频道，还有专门用于项目的频道。例如，设计模式项目有自己的 Slack 频道，我们就在里面讨论，推动自己做得更好，因为我会放一些东西，说“嘿，这个很酷对吧”，然后会有 PM 或工程师或其他人告诉我“啊，如果我们这样做呢”，“嘿，这个有点烂”，然后你就会修复它。所以，这一切都是关于协作和共享知识。

You can go into a rabbit hole like AI psychosis rabbit hole if you're just working with terminal in isolation, you know, because you go and this thing will always say 'yeah yeah let's build that', they will always agree with all your terrible ideas, then you go build a monster that nobody wants. So you want to avoid that. But yeah, by having humans bring the friction that we all need for real creation. And I don't know, things that feel more original are going to come from multiple perspectives, having friction and having pushing you, pushing back and pushing you to think differently. And LLMs, they're not that good at doing that. And I think humans, we still have that. We can be jerks sometimes, you know. That's our superpower that we can be like, 'Ah, that sucks.' you know, and it's okay, but it's good to share that stuff and put it out there. It's like record a video of your thinking and then ask for advice, ask for feedback, put it on Slack, put it in a Loom, share also like now with this thing, the cool thing is you can share a preview link, you know, like a Vercel preview link and then people can actually open it and click around and then find the things and then they could tell you where it broke, you know. That's usually how it works. We will have a channel that is specifically for PR reviews and then we'll have channels specifically for projects. For example, the design mode project had its own Slack channel and we're just like talking about it and we're just pushing ourselves to just do better, you know, because I will put something and it's like 'hey this is cool right' and then I will have a PM or engineer or someone tell me like 'ah what if we do this', 'hey this kind of sucks' and then you'll fix it. So, it's all about collaboration and that shared knowledge.

我想聊聊 Loom 这部分，因为你做了很多视频，对吧？你的经验比很多普通设计师都丰富，他们没有像你一样把自己放在镜头前。所以，我知道关于如何制作一个好的 Loom 视频，有一堆入门建议：提供背景、谈论问题，等等等等。我想忽略所有这些。我想要 Pablo 的 201 建议。你刻意做了什么让你的视频更有吸引力？

I want to talk about the Loom piece because you've made a heck of a lot of videos, right? Like you have a lot of reps under your belt more than a lot of average designers who have not put themselves in front of a camera like you have. So, I know there's like this 101 set of advice for what makes a good Loom video. Giving the context, talking about the problem, whatever, yada yada yada. I want to ignore all of that. I want Pablo's 2011 advice. Like what are you intentionally doing to make your videos more compelling?

没人想突然被标记在一个 10 分钟长的视频里，你知道吗？就像，“哦，老兄，真的吗？”所以你要保持简短，除非你真的需要它很长，那你最好讲一个好故事。那个长度必须值得。每当我意识到，哦，这会是一个比较长的视频，我就会试着讲一个故事，比如从“好吧，我为什么要展示这个？这一切从何而来？”开始。我有时会试着画草图。例如，这里我在谈论一个机器人。这是我几年前做的一个项目。

Nobody wants to suddenly see being tagged on a video that is 10 minutes long, you know? It's like, 'oh, dude, really?' You know, so you want to keep it short unless if you really need it to be long, then you better be telling a good story, you know? That length better be worth it, you know? And whenever I realize, oh, this is going to be like a longer video, so I would try to tell a story, you know, like start with, okay, why am I presenting this? Where did it all come from? I would try to sometimes I would sketch the stuff. For example, here I was talking about a robot. This is a project that I made some years ago.

这恰恰说明你涉猎了很多不同的方向，我很欣赏这一点。你既有 UI 技能，又有一些代码背景，你做着所有技术性的事情，生活在终端里，同时你又拥有所有这些艺术能力和插画技巧。我觉得有时候我们好像正在进入一个每个人都被拉向更技术化的世界。我相信很多听众都有同感，我自己也是。所以，在我放你走之前，最后一个问题是：当我们把越来越多的产出交给模型，用代码做越来越多的事情，我们的决策更多停留在编排层面时，你如何看待保护自己的创造力？作为一个真正靠这套技能建立起职业生涯的人，你对保持创造力的未来有什么想法？

It just points at the fact that you spike in so many different directions, which I appreciate. Like you got the UI skills, you have like a little bit of code background. You're doing all the technical things, you're living in the terminal, and yet then you have all of this artistic ability and the illustrations. And I think it feels sometimes like we're entering this world where everybody is being pulled more technical. I'm sure a lot of people listening feel that. I know that I do. So maybe before I let you go, one final question I have is how do you think about protecting your creativity as we hand more of our output to the models and we're doing more of the things in code and more of our decisions are at the orchestration level. Any thoughts on the future of staying creative as somebody who's really built a career on that skill set?

这个项目我之前从未做过像素艺术。大概两三个月前我做了这个，我制作了所有不同的东西来创造——大概有一万个角色或者组合吧——然后我强迫自己用手工完成。我没有用 AI 来做这些。所以这就像是我在学习一个不是 Procreate 或 Photoshop 的像素艺术工具。这对我来说是个挑战。我很难理解如何用这种图案做渐变来模拟阴影。每时每刻，我的大脑都想用 AI。它就像毒品一样。我感觉自己上瘾了，对这个什么都能做的工具上瘾了。所以现在我的大脑就想用那种方式，用那个工具。而不是去做我本来想做的像素艺术，我的大脑一直在想：为什么我们不做一个带 AI 的像素艺术工具，用代码来做，而不是直接做像素艺术呢？如果你做了工具，以后就能做艺术了。所以我的大脑就想那么做。不知道你有没有听过马歇尔·麦克卢汉说过，我们创造了工具，之后工具也塑造了我们，这很棒——新技术也改变了我们的思维方式。我想是苏格拉底反对书写，他反对书写是因为他认为书写会侵蚀我们的思考或记忆能力，他认为通过书写，我们突然就把思考委托给了文字，而不是用我们的大脑。这件事由来已久。这也是为什么即使我在使用工具时经常经历自己的存在危机，我仍然对 AI 非常积极和乐观。同时，我觉得我们会搞定的，因为几千年前，我们有过这样的辩论，最聪明的人反对书写，因为他们担心书写会稀释我们的思考。从某种意义上说他是对的，因为它确实改变了我们的思维方式，但他错在认为它只会让我们变得更笨。我认为使用这些工具有一个危险，因为如果我们委托太多，我们就不会强迫自己去思考透彻，这正是我在尝试做像素艺术时发生的事情——我正在被我使用的工具塑造，感觉像上瘾，因为它太好了。我认为你需要能够强迫自己不要把所有的思考都委托给这个工具，而正确使用这个工具的方式是，我们需要用它来扩展我们的想法。它放大我们的好奇心。它让我们走得更深，也更广，突然之间，那个你脑海中像小火花一样的东西，可以被放大成一个充满火焰的巨星。

This project I had never done pixel art before. I made this I don't know like two months ago or three months ago and I made all the different things to create just like I don't know I think it's like 10,000 characters or something or that you can do with combinations you know and then I forced myself to do it by hand. I didn't use AI to do this stuff. So this was like me learning a pixel art tool that is not Procreate or Photoshop. That was a challenge for me. It was a challenge for me to understand like how to do this gradients, you know, with this pattern to just like simulate shading. At every turn, man, my brain wanted to use AI. It felt like a drug, you know. It felt like I'm hooked to this tool that can do it all. So now my brain wants to do it that way, you know, wants to use that tool. And instead of trying to do the pixel art stuff that I wanted to do, my brain kept going to like why don't we create a pixel art tool with AI and code instead of doing the pixel art. If you do the tool then you can do later the art. So my brain wanted to do that. I don't know if you ever heard Marshall McLuhan he said that we create our tools and after that the tools shape us too which is great you know like new technologies change our way of thinking too I think it was Socrates who was against writing he was against writing because he thought that writing was going to erode our thinking or ability to memorize things he thought that by putting in writing we're just like suddenly delegating our thinking to the written word instead of trying to use our brain. This thing goes back for a while. That's why I'm also still very positive and very optimistic about AI even when I have my own existential crisis a lot of the times while using the tools. At the same time, I am like we're going to figure it out because back like I don't know thousands of years ago, we were having this debate where the smartest people were against writing because they were afraid it was going to dilute our thinking. In a way he was right because it did change our way of thinking but he was wrong in that it was going to just like make us dumber. There is a danger in using these tools I think because if we delegate too much to it then we're not forcing ourselves to think through and this is what was happening with me when I was trying to do the pixel art I'm being shaped by the tools that I use feels like an addiction because it's so good I think that you want to be able to force yourself to not delegate all of your thinking to this tool and use this tool the right way is that we need to use it in a way that expands our ideas. It magnifies our curiosity. It allows us to go deeper but also broader where suddenly maybe that thing that was like a little spark in your brain suddenly can be amplified into a gigantic star that is full of fire.

我非常感激你以这个 Pixabots 的例子作为结尾。看到它甚至让我感到挑战，因为使用模型太诱人了。用模型吧。我实际上不需要思考，直到 Claude 完成它的回复，然后我再重新开始思考。所以看到你手工做这些，拥抱摩擦，我觉得很美，也很有启发。我相信观众也会受到启发。老实说，Pablo，感谢你来做客，不仅分享了你的作品和工作方式，还分享了今天生活在这个世界上的感受，以及一切变化和拥抱这种新工作方式的样子。我非常感激你，仰慕你很久了，也很感激你一直在这个行业分享你的所学和所思。

I'm so appreciative that you ended on this Pixabots example. I'm challenged by seeing it even, you know, because it is so tempting to just use the models. Use the models. I don't actually need to think until Claude finishes its response and then I'll pick up thinking again, you know, and so seeing you do this by hand, embrace the friction. I think it's beautiful and I find it inspiring. I'm sure that people watching will be inspired as well. And honestly, Pablo, just thanks for coming on and sharing not only what you've made and how you're working, but also just what it's like, you know, living in this world today and everything that's changing and embracing this new way of working. I super appreciate you and have looked up to you for a while and just grateful for being someone who is continuously sharing what you're learning and thinking about in this industry.

哦，老兄，谢谢你。谢谢你。感激你。

Oh man, thank you. Thank you. Appreciate you.