From Skeptic to Builder: A Designer's Leap into AI
打开互动全文版(中英对照 + 朗读 + 问答)→一位曾对 AI 心存疑虑的视觉设计师,如今通过构建 Mac 应用找到全新创作掌控力。
A visual designer who once feared AI discovers the joy of building a Mac app, unlocking new creative control.
能够利用我迄今为止积累的所有技能,把 AI 引导到我想要的方向,这对我来说是最激动人心的部分。拥有这种掌控感真的太有趣了,但这么说又感觉很奇怪、很别扭,因为一个月前,一个半月前,我根本不会这么想。我当时会觉得你完全没有控制力。这就是 AI 的问题所在:你对什么都控制不了。我觉得这些工具落在有品味、有判断力的人手里,效果简直惊人。
Being able to leverage all the skills that I've developed at this point to direct AI in the direction I wanted it to go is the most exciting part about this for me. It's so much fun having that level of control, which again just feels so weird and backwards to say because a month ago, a month and a half ago, I would not have thought that at all. I would have thought that you have zero control. That's the whole problem with AI: you don't have control over anything. I feel like these tools in the hands of someone with good taste and good judgment is just crazy.
欢迎收听 Dive Club。我是 Rid,这里是设计师永不停止学习的地方。本周的嘉宾是来自 DesignJoy 的 Brett,他是当今设计圈里比较公众化的人物之一。他会带我们看看他如何构建自己的新 Mac 应用 Gather。所以,如果你想了解作为一个创造者真正从 0 到 1 需要什么,那这期节目就是为你准备的。但在我们聊具体战术和他实际构建的东西之前,我想先聊聊让 Brett 拿起这些工具、真正看看自己能创造出什么的那种心态转变,因为他一开始是有点怀疑的。
Welcome to Dive Club. My name is Rid, and this is where designers never stop learning. This week's episode is with Brett from DesignJoy, who's one of the more public figures in the design community today. He's going to give us a behind-the-scenes look at how he built his new Mac app called Gather. So if you want to see what it takes to truly go from zero to one as a builder, then this is the episode for you. But before we get into the tactics and what he actually built, I want to start with the mental shift that led Brett to pick up these tools and actually see what he could create, because he started off a little bit skeptical.
我当设计师已经很久了,确切说是视觉设计师。我不知道你多大,Rid,但我的意思是,我干这行已经有,天哪,15 年、20 年了,大概这样。所以很明显,关于设计师学编程,或者最近设计师学着去构建、直接绕过代码的讨论,如果你像我一样是 X 的重度用户,这基本上是无法回避的话题,对吧?所以我尝试稍微去消化这些。我从来不会认为自己是一个非常非常优秀的视觉设计师,我当然投入了时间和精力去提升这个方向,而且我一直非常保护它。不是因为我害怕被取代,而是因为设计的文化价值在贬值。我在 AI 出现的时候就看到了这种趋势,AI 几乎占据了一切,让人们不再关注我们过去在产品中和过程中所珍视和热爱的东西。所以我对此一直直言不讳,也许有点烦人,也许没有,我只是想保护设计这门艺术和手艺。所以,这可能就是为什么我直到最近才真正投入到我工作的这个领域里,我甚至都不去碰那些编程工具之类的东西。但是,当你日复一日地看到同样的事情,一遍又一遍,好几个月,到现在感觉像是好几年了,你知道,我终于开始想,也许我错过了什么,对吧?也许我完全看错方向了,也许对于像我这样的视觉设计师来说,可以用这类工具不是来取代我做的事情,或者简化、降级,而是真正增强我的工作,让我能够进入那些此前真的没能进入的工作领域,无论是对我的客户项目还是对我自己来说都是如此。所以,大概一个月前,我第一次真正扎进去。我之前也稍微玩过 Bolt、Lovable 这类文本生成应用的工具,但都很浅,从来没发布过任何东西,甚至都没接近发布。最多就是输入一个提示词,看下输出,然后觉得“嗯,这有点垃圾”。然后就回 Figma 了,对吧?我是个超级 Figma 粉。那才是我所有客户工作所在的世界。但说实话,直到一个月前,我才真正深入研究 Claude 和所有其他工具,真正看到了它们到底是什么,我想,它们和我以前看待它们的方式不一样了。所以我对这些非常陌生。这不是我一直试了很久的东西。你在这个对话里也会听出来,我真的不知道怎么聊这些话题。我用终端很吃力,用 GitHub 很吃力,理解这些概念也很吃力,但我正在做,对吧?然后我终于到了真正发布产品的阶段,你看,结果比我以为的容易太多了。也没有那么吓人,而且超级好玩。真的像上瘾一样。这是最令人满足的试验。
I've been a designer, specifically a visual designer, for a really, really long time. I don't know how old you are, Rid, but I've been doing it for, gosh, 15, 20 years, something like that. So obviously, the discourse around designers learning to code, or recently designers learning to build and bypassing code altogether, has been an unavoidable conversation if you're like me and you're religiously on X, right? So I tried to internalize this a little bit. I would never consider myself to be a really, really great visual designer. I certainly put in the time and effort to grow in that category, and I've been very protective over that. Not that I'm scared of being replaced, but just the cultural devaluation of design. I saw that kind of coming with the introduction of AI, and that's sort of taken over everything and really distracted people from what we used to value and love in a product and in the process. So I've been rather outspoken about it, maybe to an annoying degree, maybe not, about protecting the art and the craft of design. And so maybe that's why I haven't, until recently, really dived into that sector of my work, and I've kind of abstained from even playing around with coding tools and things like that. But yeah, when you just keep seeing the same thing over and over again, day in and day out, for months and, at this point, it feels like years, you know, I finally was like, maybe there's something I'm missing, right? Maybe I'm looking at this completely wrong, and maybe there is something for a visual designer like me to leverage tools like this to actually not just replace what I do, or simplify it down, or dumb it down, or whatever, but actually enhance what I do and allow me to enter into areas of this work that I really haven't been able to enter up until this point, both for my client work and personally. So yeah, a month or so ago, I dived into it for the very first time. I had played around with Bolt and Lovable and these sort of text-to-app tools a bit on a very light level. Never launched anything, never even got close to launching anything. At the most, I put in a prompt, saw the output, and was like, "Eh, that's kind of garbage." And then I went back to Figma, right? I'm a huge Figma guy. That is the world that I live in for all of my client work. But yeah, it wasn't until a month ago that I really dived into Claude and all these other tools and really saw what they were, I guess, different from the way I looked at them before. So I'm very new to this. This is not something I've been trialing forever. You'll hear it in this conversation, like I don't really know how to talk about these things. I struggle with terminal, I struggle with GitHub, I struggle with understanding all these concepts, but I'm doing it, right? And then I finally got to the point where I actually released a product and, lo and behold, it was a lot easier than I thought. It wasn't as scary. It was so much fun. It was like an addiction, really. It was like the most satisfying experiment.
我觉得正是这种视角让我特别想深入了解。因为请一位设计工程师太容易了,你知道,他们可能是滑铁卢大学计算机科学毕业的,既是设计师,又完全懂技术,对吧?所以,能从这样一个人那里捕捉到这段旅程——据我了解,你几乎没有什么技术背景,你就是个纯粹的视觉设计师——你完成了跃迁,对,你可以称自己为创造者了。你在大概一个半月、两个月,不管多久的时间里,发布了一款非常精致的 Mac 应用。所以我想记录这个故事,因为我的希望是,你这个人、你讲述的方式,以及你学到的教训,能激励很多人。那么,你到底是从哪里开始的?
I think it's that perspective that I'm so excited to just tap into, because it's really easy to bring on somebody who's a design engineer, who, you know, got a CS degree from Waterloo, and they're kind of a designer, but they also totally know their stuff, right? So to be able to capture the journey from somebody who, my understanding is, you have very little technical background at all. You are literally just a visual designer. You just made the jump to, yeah, you could call yourself a builder. You launched a really polished Mac app over the course of, you know, a month and a half, two months, whatever it is. So I want to capture that story, because my hope is that you and the way that you talk about it, and the lessons that you learn, can inspire a lot of people. So, where did you even start?
是的,我想挑一个我天真地以为会非常简单的东西,不是一次搞定,但可以相对快点到达,一两周内。但我想推自己一把。我当时甚至不太理解构建浏览器应用、Mac 应用或移动应用之间的区别。我不知道这些都需要什么,对吧?这些东西我全都不懂,但我想要自己想要的东西,这是第一位的。我记得我跟我老婆说,我真的没什么期待,只求能看到它走完整个流程,看到自己能做成。我完全不知道每一个拐角后面会有什么,但我会继续往前推,直到真正的分发、有人使用、为他们做更新,以及看看这一切到底是怎么运作的,对吧?我就是一步一步往前走。我没有做任何计划,我也不需要一开始就把一切都搞清楚,就是一步一步来。Claude 的教授方式显然是根据你的水平来,你可以把它往下引导,比如蒸馏到我这个新手第一次接触时的认知水平。它在这方面做得非常好。但说实话,我想挑一个我自己能用的东西,同时我也觉得市场里可能存在一个空缺。所以我最终落在了 Gather 上,它是一款,我会称之为收藏类应用,你可以在里面收集设计资源和灵感。
Yeah, I wanted to pick something that I naively thought was going to be a very simple thing that I could, not one-shot, but get there relatively quickly, within a week or two. But I wanted to push myself. I didn't even quite understand the difference between building a browser app, a Mac app, or a mobile app. I didn't know what all of that entailed, right? All these things I didn't understand, but I wanted what I wanted for myself, number one. And I remember just telling my wife, I didn't really have any expectations other than the fact that I wanted to see it through and see that I could do it. I didn't really know what was going to be around every single corner at all, but I was going to keep pushing through and get to actual distribution, and people using it, and updating it, and making updates for them, and just seeing how all of that even works, right? I just put one foot in front of the other. I didn't plan anything out. I didn't have to understand everything at the start. I just took one step at a time. The way Claude obviously teaches you is at your level, and you can kind of direct it down to, like, distill it down to my ignorant first-time level of knowledge on this. So it did a really good job with that. But yeah, I wanted to pick something that I could use personally, that I also thought maybe there was a gap in the market. And so I landed on Gather, which is, I would call it, a collection app, where you can collect design resources and inspiration.
我现在也开始收藏 X 上的书签之类的。它就像是一个你喜欢的东西的集合库,不管你是设计师,还是正在装修房子的人。比如我妻子就在用,她为每个房间建了收藏夹,上传相应的灵感图。所以它不止能用于设计,但主要还是设计师工具,而且是个 Mac 应用。
And now I'm getting into bookmarks from X and things like that. Kind of just a collective repository of things you enjoy—whether you're a designer or you're building a house right now. My wife is using it: she's creating collections for every room and uploading inspiration for those rooms. So you can use it for more. It's more than just design, but it's primarily a designer's tool and it's a Mac app.
先说一条快讯,然后我们继续。Framer 3.0 刚发布,它正是我想要用来搭建专业网站的工具。你可以获得 AI 智能体的能力,而且是直接在一个为发布生产级网站量身定制的画布上使用。比如,我为 Dive 配了五个不同的 CMS,那可不是我爱打交道的。但现在我可以在 Framer 内部直接让 Framer 智能体处理所有 CMS 管理相关的事情。当然,你还有 SEO、暂存链接、本地化等等你期望的一切。不过说实话,到头来我最喜欢的还是能够在 Framer 内部用智能体探索设计和构建。如果你访问 dive.club/framer,可以从 Framer Pro 获得 30% 折扣,今天就开工。Jitter 刚刚发布了动画组件,你可以设计一次,在文件里复用,然后用一次编辑更新所有实例。我个人对此非常兴奋,因为我用 Jitter 做很多事情,从给 Inflight 标志做动画,到给 Dive 简报里的按钮做动画。所以这会让你轻松同步一切,而且现在就能用。只要去 dive.club/jitter 就能开始。
One quick message, and then we can jump back into it. Framer 3.0 just launched, and it is exactly how I want to build pro websites. You get the power of working with AI agents, but directly in a canvas that's tailor-made for shipping production sites. For example, I have 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 Framer. And of course, you get SEO, staging links, localization, and everything else you'd expect. But honestly, at the end of the day, the thing I love most is just being able to explore design and build with agents, all inside Framer. If you head to dive.club/framer, you can get 30% off Framer Pro to start building today. Jitter just released animated components. You can design once, reuse across your file, and update every instance with a single edit. I'm personally very excited about this, because I use Jitter for everything from animating the Inflight logo to animating the buttons in the Dive newsletter. So this is going to make it a breeze to keep everything in sync, and it's available today. Just head to dive.club/jitter to get started.
好,我们回到正题。你从哪里开始?当你意识到自己想做什么之后,是直接用了 Claude 吗?还是先在 Figma 里做了很多设计?最开始那几步是什么样的?
Now, on to the episode. Where do you start? Once you realized what you wanted to build, did you jump into Claude? Did you design a lot of it in Figma first? What were some of those first few steps?
所以,我当时想,如果我要以这种方式用 AI,我肯定会从 Figma 开始,因为那是我脑子里的思路——你得先有一个好的设计。但这次实际上我直接跳进了 Claude。我不太了解 Electron,也不知道任何构建应用的框架之类的东西。所以我一开始就是给 Claude 发提示,把技术路线搞清楚——我需要用什么、需要创建哪些账户。身份验证怎么工作?邮件怎么发送?我这辈子从没用过 Resend。所有这些工具我都没用过,完全没有接触过。API?我从来没有把 API 连接到任何东西上。所以……
So, I thought that if I were ever to use AI this way, I would inevitably start in Figma, because that's where my mind was: you've got to start with a good design first. Actually, in this case, I just jumped straight into Claude. I didn't quite know about Electron. I didn't know anything about frameworks or anything like that for building apps. So I first started prompting Claude, getting the technology down—what I needed to use, what accounts I needed to create. How does authentication work? How do emails work? I'd never used Resend in my life. All these tools I'd never used. I had no exposure to them whatsoever. APIs—I'd never connected an API to anything. So...
我喜欢。
I love it.
然后我不知道怎么把 OpenAI 集成进去,完全没头绪。我先把这些大致理清楚,这样至少能给 Claude 一个方向。然后我让它搭出骨架——比如给我生成一个分成不同阶段的提示词。我不是以专家身份说的,因为我这个月才开始用 AI,但我个人喜欢的工作方式就是一次做一点点。我先把大的阶段分开:嘿,先把后端建出来,然后把前端建出来,先不碰那些复杂功能,一次只干一件事。等到第一阶段建好了,我再深入第一阶段,一个元素一个元素地打磨:下拉菜单长什么样,一组筛选器长什么样,标签页长什么样。我喜欢抠每个小细节,不喜欢只写一个笼统的提示词干所有事,因为那样我还得回头调整、排查、调试,诸如此类。所以我就是一点一点来,我花了——天哪——大概一百多个小时才把 Gather 做出来。现在有些人看着它说:“这个我一小时就能做完”,但我把你能想到的每个边缘情况都过了一遍,对吧?每种类型都做了。我经历了无数次迭代,从头到尾把应用重设计了好多遍,用了各种不同风格、美学,什么都有。不过说到底,我就是从 Claude 开始的。我让它教我到底该做什么、该构建什么、该怎么构建。然后我就顺着它的指引,建了 GitHub,然后就那么一路走下来了。
And then I didn't know how I was going to integrate OpenAI into that. No clue at all. I got all that roughly figured out first, so I gave it some sort of direction. Then I had it scaffold things out—like, build me a prompt that had different phases. I'm not speaking from an expert level, because I've only been using this for a month, but the way I personally like to work is one little thing at a time. I'll start with the big phases: hey, let's just get the back end built; then let's get the front end built. Let's not get into all these other complex features yet. Let's do one thing at a time. Then once phase one is built, I drill into phase one—each element one by one, fine-tuning what a dropdown looks like, what a filter set looks like, what the tabs look like. I like to get into the nitty-gritty details of every little thing. I don't like to just create one sweeping prompt to do everything, because then I have to go back and tweak it, troubleshoot it, debug it, and all that sort of stuff. So I just went bit by bit, and I spent—gosh—probably over a hundred-something hours building Gather. Some people today look at it and say, "I could do this in an hour," but I worked through every edge case you could think of, right? And every type of thing. I went through so many iterations of everything. I redesigned the app from the ground up multiple times, in various different styles, aesthetics, all sorts of stuff. But yeah, I just started with Claude. I had it educate me on what the heck I should even be doing, what I should be building, and how I should be building it. Then I just kind of took its lead, set up GitHub, and went from there.
那么,Figma 是在什么时候进入这个流程的?
So, at what point did Figma come into the process?
有句话说得好——我忘了是谁说的——用 AI 构建应用,最后 20% 的工作要花掉你 80% 的时间。我建应用建得挺快,但 Figma 是在最后 20% 才进来的,那时我在实验各种小东西,比如按钮长什么样。我想要一个拟物风格按钮,描边是渐变,填充是另一种渐变。但 Claude 一直不明白我要的是描边渐变。所以我不直接描述需求了——我改用 CSS。我打开 Figma 的开发者模式,设计好那个元素,复制 CSS,直接喂给 Claude,它一下子就搞定了。后来我发现还有种叫 MCP 的东西,我甚至不知道它代表什么,也不知道它怎么工作,但我开始用了。但确实,那是在最后 20%,所有功能都做好了,只是看起来一团糟,所以我需要让它不难看。这就是 Figma 派上用场的地方。但我实际用它的次数比我预想的少得多。我很想说自己大量使用了 Figma,但实际上并没有。我知道我想要什么,也知道怎么描述。当然有些情况 Figma 确实有用,但我觉得自己用设计语言——描边、透明度等等,一般人不大会用的东西——已经足够准确地描述了我的需求。所以我觉得大多数时候不用 Figma 我也能很好地指挥它,这让我自己都很惊讶。
There's a saying—I forget who said it—that the last 20% of building an app with AI is 80% of your time. I had built the app relatively fast, but Figma came in during that last 20%, where I was experimenting with things as small as what a button looks like. I wanted this skeuomorphic button where the stroke was a gradient and the fill was another gradient. But Claude wasn't understanding that I wanted the stroke to be a gradient. So instead of instructing it directly—well, I started with CSS. I went into dev mode in Figma, designed the asset, copied the CSS, and just fed that into Claude, and it nailed it. Later I was like, "Oh, there's something called an MCP." I don't even know what it stands for or how it works, but I started using that. But yeah, it was really the last 20%—everything's built, and now it just looks like crap, so I need to make it not look like crap. That's where Figma came in. But I really didn't use it as much as I thought I would. I'd love to say I leveraged Figma a lot, but I really didn't. I knew what I wanted and how to describe it. There were some cases where Figma was helpful, but I feel like I did a decent enough job of describing exactly what I wanted using design language—strokes, opacity, all these sorts of things that people normally probably wouldn't use. So I think I was able to direct it well enough without Figma for the majority of the work, which really surprised me.
你能聊聊在这个流程中,哪些地方 Figma 最有价值吗?你觉得在什么情况下特别值得使用这个工具?
Can you talk a little about the parts of the process where Figma was most valuable? Where did you see a lot of value in reaching for the tool?
它在我之前几个版本中最有用,那时候我更多追求非常独特的风格和美学。我在 X 上分享的很多东西本质上都是拟物风格——金属质感、光泽、闪耀效果之类的。这个应用在发布之前经历了很多次演变。
It was most helpful in previous versions of the app, where I went a lot more into very unique styles and aesthetics. A lot of the stuff I share on X is very skeuomorphic in nature—metals, shininess, shimmer, and things like that. This app has gone through many evolutions before it was released.
在那个场景下它帮助更大,相比之下,现在这个应用里我几乎找不到一个地方可以说“嗯,Figma 在这里帮了大忙”。
So it was a lot more helpful there, versus now there isn't much I can point to in the app and say, 'Yeah, Figma was super helpful in this.'
有意思。
Interesting.
这对我来说才是令人惊讶的地方,而且我觉得自己说出这话都很不应该。这是不允许的,你懂的。
That was the surprising part to me, and it feels really wrong of me to even say that. It's not allowed, you know.
三个月前你敢这么说吗?
Can you imagine saying that three months ago?
不会吧,兄弟。我现在坐在这儿看着这个应用,心里想:这里面关 Figma 什么事?当然,过去确实有一些 UI 元素它做得不对。但我确实用到了,像我说的,Figma 的开发者模式,复制了 CSS 让按钮样式之类的东西完全正确,这简单得让人难以置信。我很欣慰地知道我可以在需要时借助它。但我为这个应用定的风格方向,其实并不太需要 Figma。我用了很多截图。也许这个顶栏我稍微用了点 Figma 来定位,但说实话,这地方 99% 都是 Claude 和我在非常积极地指挥它。不是说我随便丢个提示词,然后 Claude 就吐出完美的东西。别误会。而是我非常非常具体地描述我想要什么。
No, dude. I'm sitting here looking at the app and thinking, 'What did Figma have in this?' Now again, there were some things in the past around certain UI elements that it just wasn't getting right. And I did leverage, like I said, the dev mode in Figma and copied the CSS to get button styles and things like that absolutely correct. And it was mind-boggling how easy it was. I like knowing that I can leverage that if I need to. But the style direction I went in for this app didn't really warrant using Figma all that much. I used screenshots a lot. I think maybe for this top bar I used Figma a little bit to show the position of it, but really honestly, 99% of this is Claude and me very much directing it. Not just me putting in a prompt and Claude spitting out the perfect thing. Don't get me wrong there. It's me being very, very specific on what I want in describing that.
好,我们稍微聊聊这个。因为我觉得仍有一类设计师,他们把用 AI 工作等同于失去控制,更喜欢直接操作,感觉跟模型一起工作几乎没法做到这种掌控。那么,你在 Figma 里和写代码时,对控制感的把握是什么样的关系?
Okay, let's talk about that a little bit, because I think there's still a category of designers who associate working with AI with a loss of control and prefer direct manipulation, and it's almost like you can't get that working with the model. So what's your relationship with the level of control you have in Figma versus in code?
我是说,显然在 Figma 里你拥有一切控制权,这不用多说。而且我很多场合都喜欢这一点,尤其是客户项目。但当我在给自己做工具、可以随心所欲的时候,我要说,我非常非常——怎么强调都不为过——对 Claude 里你实际拥有的控制力感到惊讶。我当时没用 Claude Design;我到现在都还没用过它。我不太清楚它是怎么工作的。但我并不是在那儿指指点点说“把这个移到这儿”。我只是大致地用 Claude Code 的网页平台来做这些。但还有一层,就是你显然得知道自己该做什么,对吧?然后你得能描述清楚该怎么去做。当然要经过很多次迭代。它很少一次就能做对。我很震惊——我觉得这是最大的转变,对吧?我以前以为 Claude 就是你输入一个提示词,然后得到一个结果,你就得接受它,或者你只能来回试,像买彩票一样。我没有想过,只要我知道怎么描述,我就能让 Claude 精确地做出我想要的东西,而它也确实会输出。它可能第一次、第二次、第三次都不对,但最终会做到。最让我大开眼界的其实是控制感——这个应用里每一个部分,我都能完全按我想要的方式去实现。这对我来说又是一个彻底的觉醒,一个改变游戏规则的东西。我可以诚实地说,没有哪一部分——功能上、特性上、复杂程度上、技术上、设计上——是我做不到的。
Well, obviously you have all the control in Figma; that goes without saying. And I like that for a lot of things, especially client work. But when I'm doing a tool for myself where I can do whatever I want, I will say I was very, very — I can't overstate it — very surprised at the level of control you actually have in Claude. I wasn't using Claude Design; I haven't used it yet. I don't really know how it works. But I wasn't pointing and clicking on things and saying 'move this here.' I was just generally using the Claude Code web platform to do this. But again, it comes down to obviously you have to know what you should do, right? And then you have to be able to describe how you should do it. You go through many iterations, of course. It rarely gets it right the first time. I was shocked — I guess that was the biggest shift, right? I used to think Claude was like you put in a prompt and you get something out, and you have to live with it, or you go back and forth and it's like playing the lottery. I didn't really look at it in the sense that I could tell Claude exactly what I want as long as I know how to describe it, and it'll actually output that. It may not output it the first time, or the second, or the third, but it'll eventually get there. That was the biggest eye-opener for me: the control piece, and being able to build every part of this app exactly the way I wanted to build it. That was again a complete eye-opener, a game-changer for me. I can honestly say there was no piece — functionally, feature-wise, complexity-wise, technically, design-wise — that I wasn't able to do.
而且在 Figma 里,你显然对视觉有 100% 的控制。但我的确觉得,和 Claude 一起工作让你能操纵一些 Figma 内部不暴露的控制杆。比如我就在玩顶部这个标签栏。还有你让图标缩放进来的方式——缩放那个图标其实有很多种不同的做法,对吧?
And obviously, in Figma, you have 100% control of the visuals. But I do think working with Claude gives you the ability to control different levers that aren't exposed inside Figma. Like, I was playing around with this tab bar up at the top. And the way you're scaling the icon in — there's actually a lot of different ways to scale that icon in, right?
确实是这样。是的。
There are. Yeah.
跟我聊聊这个吧。就那个细节程度,以及应用里你还想强调的其他地方。你觉得你在哪些地方真的和 Claude 一起抠细节?一路下来,你有没有学到做这类事情的最佳方式?
Talk to me a little bit about it. Like that level of detail, and anywhere else in the app you want to highlight too. Where do you feel like you were really sweating the details with Claude? And did you learn anything along the way about the best ways to do that?
是的,我是说,标签栏当然是其中一部分。我花了大量时间——做了好多不同版本的标签栏。而且这个应用有些版本根本没有标签栏,用的是完全不同的导航方式。另外,那个图标是我知道自己想要的东西。我不是搞动画的人,所以我不太懂那些术语——比如怎么指挥 Claude 用这种精确的方式把它弹出来,还要有那个尾巴——我想你是这么叫的——就是活动悬停背景,随你怎么叫。我不知道它叫什么。
Yeah, I mean, the tab bar was certainly one piece of it. I spent a good amount of time — I did so many different versions of this tab bar. And there were versions of this app that didn't have a tab bar at all, and had a completely different way to navigate it. Now, I can also say that icon was just something I knew I wanted. I'm not an animation guy, so I didn't quite know all the terminology — like, how do I direct Claude to pop this in in this exact way, and sort of have the trailing — I think that's what you call it — like the trailing active hover background, whatever you want to call it. I don't know what it's called.
我也一样。我就直接用技能(Skills)。
I'm the same way. I just use skills.
是的,我知道自己想要那个效果,而且说实话,我觉得当我指挥 Claude 时,我不记得它用了超过一次就把它弄对了。显然,我构建了
Yeah, and I knew I wanted that, and honestly, I think when I directed Claude, I don't remember it taking more than one time to get that right once I got there. Obviously, I built
有意思。
Interesting.
默认情况下,就是一个能正常用的基础标签栏。它其实没有图标,然后我就说,嘿,我要让当前激活的标签图标显示出来。好,没问题。现在,我希望标签能有点拖尾的感觉,从一个标签滑到另一个标签,让你能直观地看到它在移动。然后,我要让图标弹出来,以某种方式做动画。所以那是我的描述语言。我在描述我想要的东西时,用词并不太技术化。那是一个好玩的环节。再说一次,这个应用里没有完美的东西。我甚至都没点过这个——你看到的是开发版本。所以有一些东西你在应用里看不到,比如书签。眼前这个视图,我花了很多时间反复实验,想找到对的感受,因为我希望它和瀑布流网格之类的不同。我想让它根据你正在看的艺术作品,有自己的美学气质,对吧?所以我花了很多时间在这个页面上。
a basic tab bar by default that just worked normally. It actually had no icons, and I was like, 'Hey, I want the active tab icon to show.' Okay, cool. Now I want the tab to kind of trail, to go from tab to tab to tab where you can visually see it moving. And oh, now I want the icon to pop up and animate in a certain way. So that was kind of the language I used. I wasn't technically correct when describing exactly what I wanted. That was a fun piece. And again, nothing's perfect in this app. I've never even clicked this — what you're seeing here is a dev version. So there are certain things you don't see in the app, like the bookmarks. This view right here was a view I spent a lot of time experimenting with, getting the right feeling, because I wanted it to feel different from a masonry grid or anything like that. I wanted it to have its own aesthetic based on the artwork you're looking at, right? So I spent a lot of time on this page.
天呐,这个微光效果——微光效果太棒了。哦,还有悬停倾斜,这真的很妙。
Dude, the shimmer — the shimmer is so nice. Oh, and the hover tilt, that is really wonderful.
所以这些都是些老概念,但我就是觉得,你知道吗?这是个挺好玩的应用。我想怎么弄就怎么弄,懂吧?所以当你加载它的时候,会有一道很酷的微光扫过。但确实,我花了很多时间在这个上面,因为我觉得这是最关键的页面之一——这些元素放在哪、长什么样,甚至到,天哪,我试了那么多套图标,就是想弄清楚哪一套效果最好。然后还要解决一堆问题。
So, these are all kind of old concepts, but I'm like, you know what? This is kind of a fun app. I'm going to do whatever I want, you know? So when you load it in, it gives a cool little shimmer across it. But yeah, I spent a considerable amount of time on this, because I felt like this was one of the most key pages — where these elements go, what they look like, down to, gosh, I went through so many icon sets trying to figure out which one works best. And then troubleshooting all of that.
一开始我不想加入深色模式,因为我知道每做一个改动都得重复一遍。所以一旦引入深色模式,就带来了一整套新的 bug,我不得不全部重新测试。这个应用里其实有很多东西,大家可能并没有真正意识到。多选功能以及它的工作方式——能拖动多选、批量收集、批量加入收藏、批量打标签,甚至你还能点下面这个小东西创建一个灵感板(mood board)。它会生成一张 JPEG,这样你就可以分享给别人。然后还有 Spaces 这个功能,据我所知 Gather 是第一个做这个功能的应用。也许有其他应用做过类似的东西,但它们不一定是收藏类应用。而这打开了一个全新的世界。这个应用里有某些东西,我早就知道一旦加入最初的功能,就会打开一个全新的麻烦盒子。所以这又是一个这样的功能——我想要一个类似 Figma 的自由画布,可以在上面随意摆放东西,比如‘如果你在创建一个新品牌,你希望能看到这些颜色、这些 logo、这些图案或纹理’。所以能在里面添加各种不同的东西。我做了很多工作,甚至包括对齐线和分布线。这个应用里的功能真的很多。
I didn’t want to incorporate dark mode in the beginning, because I knew every change I made would have to be duplicated. So once I introduced dark mode, it introduced a whole other level of bugs, and I had to retest everything. There’s actually a considerable amount to this app that people don’t really realize. Multi-select and how that works—being able to drag and multi-select, doing bulk collection, bulk adding to collections, bulk tagging, and even creating a mood board from that little thing down here. It puts it onto a JPEG so you can share it with someone else. Then you get into Spaces, which to my knowledge Gather is the first app to do. There might be other apps that do something similar, but they’re not necessarily collection apps. And this opens up a whole other world. There are certain things about this app where I knew that once I added the initial feature, it was going to open a whole other can of worms. So this was another one of those features—I wanted to have a free-flow canvas, kind of like Figma, where you can arrange things and say, ‘If you’re creating a new brand, you want to see these colors, these logos, these patterns or textures.’ So being able to add different things here. There was a lot I had to work through, even down to alignment lines and distribution lines. There are a lot of features in here.
确实很多。
There’s a lot.
确实很多,但看起来不像那么多。是啊,我的意思是,大概花了——我最初估计是 75 个小时。我问了我妻子,她说:‘哦,大概接近 100 到 150 小时吧。’所以确实很多。关键就在这里——我曾在 X 上的一条评论里说过这个,有人说:‘哈哈,我今晚就要做出来。’我就想,你当然可以这么说,因为我已经把所有边界情况都处理完了。我觉得一比一复制一个工具,比从一张白纸开始、然后不得不去思考所有这些边界情况要容易得多。这东西涉及的方面太多了,尤其是当你引入深色和浅色模式,以及所有这些不同的媒体类型,现在还有视频等等。
It is a lot. It doesn’t look like a lot. Yeah, I mean, it took me probably—I guessed initially 75 hours. I asked my wife, and she said, ‘Oh, probably close to 100 or 150.’ So it was a lot. That’s the thing—I said that in a comment on X at one point, and somebody was like, ‘Haha, I’m going to do this tonight.’ And I’m like, it’s kind of convenient for you to say that because I’ve already worked through all the edge cases. I feel like it’s much easier to copy a tool one-for-one than to start from a blank slate and have to think through all these edge cases and everything. There’s so much to this, especially once you introduce dark and light mode and all these different media types, now with video and everything.
比如说,我现在已经完成的最有意思的事情之一——我从没想过自己能做出来,而且它还没上线——就是把 X 书签、Twitter 书签整合进来,而且没有用 API。我一直想做一个 Twitter 书签应用,因为我讨厌 X 上的书签体验。但 API 贵得离谱,让所有人都望而却步。我想出了办法,做了一个 Chrome 扩展。它会监控你在 Chrome 里的活动。当你收藏某条内容时,它会自动加载到 Gather 里。然后你打开它,就能看到各种推文格式:纯文字推文、带文字的图片、长线程(threads)、引用推文(quote tweets)。把所有这些都整合进来,在这个应用里都能正常运作。然后你还会遇到这种边界情况:‘要是我在手机上收藏了东西怎么办?我的扩展怎么把它弄进 Gather?’我不得不去解决这个问题,想明白这一切是怎么运作的。你只要一直往前走,它就会自己找到解决办法。感觉就像没有什么它做不到的,或者说找不到变通办法的。所以这就是下一个例子。
Right now, for example, one of the most interesting things I’ve accomplished—which I wouldn’t have thought I could, and it’s not out in production yet—is incorporating X bookmarks, Twitter bookmarks, into this without using the API. I’ve always wanted to build a Twitter bookmarking app, because I hate the bookmark experience on X. But the API is so incredibly expensive that it keeps everyone from doing it. I figured out a way to build a Chrome extension. It watches your activity in Chrome. When you bookmark something, it’s automatically loaded into Gather. Then you open that up and you have all these tweet formats: text-only tweets, text with images, threads, quote tweets. Incorporating all of that works in here. Then you have the edge case of, ‘Well, what if I bookmark something on mobile? How is my extension going to get that and put it into Gather?’ I had to problem-solve that and figure out how it all works. You just keep going, and it figures it out. It seems like there’s nothing it can’t do or can’t find a workaround for. So that’s the next example.
停一下,停一下,停一下。我要问一个特别具体的问题。从‘我想做这件事’出发,我猜你甚至不知道它是否可能实现。你当时到底给 Claude 写了什么提示?你是如何开始那个非常具体的项目的?
Pause, pause, pause. I’m going to ask a ridiculously specific question here. But going from the point of ‘I want to do this,’ I would imagine you don’t even know if it’s possible. What did you literally prompt Claude? How did you start that very specific project?
基本上我就是告诉它我想做什么,然后我希望它能告诉我:‘嘿,是的,我能做。’我得说,也有几次它说做不到,它其实说这是不可能的之类的话。幸运的是,这正是经验派上用场的地方。举个例子,我希望我的 Chrome 扩展看起来是某种样子。比如我希望它有圆角。然后它回来说:‘实际上 Chrome 在这方面限制了你。’但我知道另一个扩展做了类似的事,我就说:‘可是他们就在这么做啊。’于是我把这个反馈给 Claude,它就说:‘哦对,你说得对。他们是用这种方式做的,他们其实是在页面上面放了一个 iframe。让我也这么做。’所以你的确需要具备一些知识,才能越过那些障碍。我觉得 Claude 的一个强项——我也不是说只有 Claude 才有这个能力,我相信其他模型也能做到——它非常擅长给你的选项排序。它会说:‘这是风险最低、成本最低的选项。这可能会带来这些缺点。这是最昂贵、最直接的选项。’就拿这个书签功能来说吧。它默认就很擅长给你提供选项。当你说‘我想做这个,最好的方式是什么?’的时候——每当我遇到一个新功能,并且不太确定它是否能实现,我都会从这里开始,尤其是书签这个功能,因为我根本没想到可以为此创建一个 Chrome 扩展。所以是的,那就是我的起点。我会说:‘嘿,我想做这个,最好的方法是什么?’然后它通常会给我三四个、五六个选项,按顺序排列,还会有它的推荐选项。有时候它会给你最后一个混合了方案的选项。然后你只需要挑你想要的那个,而且你掌握了它的全部背景信息。
Basically, I just told it what I wanted to do, and then I hoped it could tell me, ‘Hey, yes, I can do it.’ I will say there were a couple of cases where it didn’t—it actually said that’s not possible or whatever. Luckily, this is where experience comes in. As an anecdotal example, I wanted my Chrome extension to look a certain way. I wanted it to have rounded corners, for example. And it came back and said, ‘Actually, Chrome limits you to this.’ But I was aware of another extension that did something similar, and I’m like, ‘Well, they’re doing it.’ So I fed that back into Claude, and it was like, ‘Oh yeah, you’re right. They’re doing it this way. They’re actually putting an iframe on top of the page. Let me do that.’ So you do have to have some knowledge in order to get over some of those obstacles. I feel like with Claude—and I’m not saying this is exclusive to Claude, I’m sure other models can do it too—it’s very good at ranking your options. It’ll say, ‘Here’s the lowest-risk, least-expensive option. Here are some of the downfalls that might occur. Here’s the most expensive, most instant option,’ let’s say, just for this bookmark thing. So it’s really good at giving you options by default. When you say, ‘I want to do this, what’s the best way to do it?’—that’s where I would start with every new feature that I wasn’t quite sure was possible or not, especially the bookmarking thing, because I would never have thought to create a Chrome extension for that. So yeah, that’s where I would start. I’d say, ‘Hey, I want to do this, what’s the best way to do it?’ And then it would usually give me three, four, five, six options, rank them in order, and have its recommended option. Sometimes it would give you a last option that’s a blend. Then you just pick whichever you want, and you have the full context of it.
好,我想深入聊一些视觉细节,因为你刚才很谦虚——但我确实认为你是一位世界级的视觉设计师,所以你有一个需要弥合的差距,对吧?你在 Figma 里有这些技能,但你能把它们用代码变成现实吗?我觉得有很多小的细节,可能人们一开始甚至都不会注意到。
Okay, I want to drill into more visual details, because you were being humble in the— but I do think you are a world-class visual designer, and so there’s this gap that you have to close, right? You have the skills in Figma, but can you bring them to life in code? And I think there are a lot of little details that maybe people wouldn’t even notice at first.
让我印象很深的一点是多选。你做了这种双边框效果,内浅外深——真的很好看,非常好看。你把这个拿捏得很好。就连这张品牌卡片上的阴影也是。你是怎么把卡片的阴影调出来的?
And one thing that stood out to me was the multi-select. You have this double border effect, with a light inner and a dark outer — it's really nice, really nice. You're able to nail that. Even down to the shadows on this branding card. How did you dial in the shadows with the card?
说实话,这是我最喜欢的部分之一。如果我说阴影是我自己调出来的,那是在骗你。它第一次就做对了,我从来没改过。我告诉它我想要顶部有收藏卡片。那张特定的收藏卡片我反复迭代了很多版本,但扇形展开它一下子就做对了。我说“我想要一叠卡片,悬停时扇形展开。”它大约在开发这个应用的第一天或第二天就做到了,我再也没改过。
Honestly, one of my favorite pieces of this. And I would be lying to you if I said that I directed the shadows at all. It literally got it the very first time, and I never changed it. I told it I wanted collection cards at the top. I went through so many versions of that particular collection card, but it got the fan thing right away. I said, 'I just want a stack of cards that fan out when you hover over it.' And it got that, I'd say, day one or day two of building this app, and I never changed it.
悬停一下,让大家看看。
Hover over it, so people can see.
对,悬停时它会扇形展开。甚至有一些会让我不舒服的元素——比如它会跑到文字后面——但我会想,这还挺酷的,对吧?非常自然,也很原始。我在整个应用里都用了这种感觉。所以你去收藏页,也是一样的。这是这个应用我最喜欢的部分之一,也是其他收藏工具真正做不到的。而且还有很多小细节——这就是你真正……你可以悬停在右下角,它会弹出来——哦,视频那块我还没搞明白——但它会把图片以前置预览的方式弹出来,对吧?都是你不会注意到的东西。有个很酷的功能——我喜欢说字体。如果你到这里往下走到标签,输入“font”,它足够聪明,会给你字段,让你可以输入字体名称、按 URL 输入字体,等等。然后你会看到我需要修一个 Bug,因为下拉菜单在深色模式下不正常。
Yeah, so when you hover over it, it fans out. There are even things that would bother me—like it goes behind the text—but I'm like, it's kind of cool, right? It's very natural and raw. I use that throughout. So if you go to collections, it's the same sort of thing. That's one of my favorite pieces of the app, and something that no other collection tool really does. And then there are even little things again—this is where you really... You can hover over the bottom right-hand corner and it pops open—oh, I haven't figured out the video thing yet—but it pops open the image in a quick view, right? Things you wouldn't ever notice. One of the cool things—I like to say fonts. If you go down here to tags and actually type in 'font', it's smart enough to give you fields, so you can type the font name, the font by URL, all that good stuff. And you can see I need to fix a bug, because the dropdown is not working with dark mode.
还有太多这样的东西,真的需要你去使用这个应用才能发现。比如我最喜欢的一个是重新发现模式,你可以快速筛选并浏览:“嘿,我要跳过这个。我要把这个加到收藏里。”
There are so many things that, again, you really have to use the app to discover. Like one of my favorite things is the rediscover mode, where you want to just sort through things and go through quickly: 'Hey, I want to skip this one. I want to add this one to a collection.'
酷。
Cool.
我要把这个丢进回收站。都是些很酷的小功能。或者,如果你去未分类,下面有一个聚焦排序按钮,你可以快速——我现在只有一个收藏——但你可以直接用快捷键把它加到收藏里,对吧?快速处理所有内容。所以,真的,只有你真正使用这个应用,才能看到表面之下的各种功能。我觉得构建和思考这些功能很有意思。
And I want to add this one to trash. It's just cool little things. Or, if you go to unsorted, you have this focus sort button down here, so you can quickly—I only have one collection right now—but you can just use hotkeys to add it to collections, right? To quickly sort through everything. So yeah, there are all kinds of things like that that you don't see on the surface until you really use the app. I thought that was a lot of fun to build and think through.
有一个问题我忍不住一直在问自己:如果是公司申请来跟你谈,而不是你去找他们,会怎样?这个问题正是全新 Dive Talent Network 的基础。而且它正在奏效。现在,我正在帮助我认识的最令人兴奋的初创公司,去招募收听这个节目的设计师和开发者。所以如果你好奇外面有什么机会,或者你想进入我的名单,又或者你正在寻找下一位设计人才,那就去 dive.club/talent 加入吧。
There's one question I can't stop asking myself: what if companies apply to talk to you rather than the other way around? That question is the foundation for the all-new Dive Talent Network. And it's working. Right now, I'm helping many of the most exciting startups I know to hire the designers and builders who listen to this show. So if you're curious what might be out there, or 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.
你会有多频繁地刻意给 Claude 留出发挥空间?我们聊了很多关于你能在最后 1% 的打磨中非常清晰地表达意图。你会有那种近乎老虎机心态的时候吗?你会刻意去依赖那种随机性,还是不会太多?
How often are you intentionally leaving wiggle room for Claude? We've talked a lot about how you can very clearly articulate your intent at that final 1% of polish. Are you ever kind of in that almost slot machine mentality? Do you ever lean into that, or not so much?
会,而且分不同的形式。如果是一个新功能,我不太确定自己想要什么,或者不确定 Claude 会怎么实现,我通常会跟 Claude 来回探讨,获取一些关于它可能做什么、可能会筛选哪些选项的背景信息。我不喜欢等到构建的时候再让它去迭代,搞那些乱七八糟的。我更希望 Claude 先描述它打算怎么做。但有些东西我就是知道自己想要什么,对吧?我其实喜欢在所有事情上都留出余地——只是留多少取决于我在做什么。这正是这件事的乐趣所在,对吧?你得把 Claude 当作一个伙伴。它可能知道你不知道的东西,可能想到你想不到的事情。所以我确实很喜欢大量借助 Claude 来帮我想问题、头脑风暴,构思做某些事情的方式——而不是反过来。我不喜欢直接说“这就是我想要的,别做任何别的”。但如果我真的要给它明确指令,我通常会在提示词结尾说:“让我知道有没有遗漏,或者有没有更好的做法,又或者我没想到某些边界情况——考虑一下这些。”所以,我确实会给 Claude 相当大的自主空间去做它认为对的事,然后我再审查,需要的话再修改。
I do, in different formats. If it's a new feature that I don't quite know how I want it, or how Claude will implement it, I'll usually prompt back and forth with Claude to get some context around what it might do and the options it might sift through. I don't like to just wait for the build process and then have to iterate and all that sort of stuff. I'd rather have Claude describe what it's going to do first. There are certain things though that I just know what I want, right? And I like to leave wiggle room on everything—it's just the degree depends on what I'm doing. That's the fun of this, right? You have to use Claude as a companion. It may know stuff you don't know. It may think of things you might not think of. So I do like to leverage Claude a lot in thinking for me, brainstorming, and theorizing on ways to do certain things—more than the opposite. I don't like to just say, 'This is exactly what I want to do. Don't do anything else different.' But if I do direct it, I'll usually end the prompt by saying, 'Let me know if I missed anything, or if there's a better way to do this, or maybe I haven't thought of some edge cases—consider those.' So yeah, I'd say I leave a pretty high degree of margin for Claude to do what it thinks is right, and then I'll review it and change it if I need to.
对,我大概也会这么回答。其实就取决于输出是什么。如果输出是视觉层面的,很多时候我会说:“这个就按像素级完美来做,匹配选中的画框”之类。我到现在还是在画布上直接工作。如果输出更偏向转场动画——我又不是动画师,我正在努力提升交互设计能力——但很多时候我就很宽泛地描述一下然后看看。先看到某个东西再往下调,真的很有帮助,而不是——你懂的——从零开始硬抠。这里其实有很多巧妙的页面转场,连网格淡入回来的方式都很特别。这些是有意为之的吗?有多少是你开箱就得到的?
Yeah, I think that's probably my answer too. It kind of just depends on what the output is. If the output is visual, a lot of times I'm like, 'Build this exactly, pixel-perfect, match the selected frame,' kind of thing. I still work on the canvas all the time. If the output is a bit more transition-based—and I am not an animator; I'm trying to get better at interaction design—but a lot of times I'll just describe something very loosely and see. It's super helpful to just see something and then tweak it down rather than—you know—I'll drill down from there. There's a lot of clever page transition things happening, even the way the grid fades back in. How is that stuff intentional? Did you get a lot of that out of the box?
这些大多不是开箱就有的。这就是作为设计师的地方——你的指尖就掌握着整个世界,有这些应用你可以做任何事。真的很难不去过度设计,对吧?我还是希望这个应用感觉非常轻盈、非常舒服,不要太碍事。我真的很想让艺术作品成为这个应用的展示重点。所以我不想做太多,但如何把握我想要的那种微妙程度——比如卡片上的阴影——是我借助 Figma 处理的地方,因为我就是没法完全调对。要么太夸张,要么太弱,然后我就去找合适的阴影——毕竟有些卡片的背景是浅灰色的。
I didn't get a lot of that out of the box. That was something where—this is where, as a designer, you have the world at your fingertips with these apps. You can do anything. It's really difficult not to over-engineer, right? I still wanted this to feel very lightweight, very pleasant, not too much in the way. I really wanted the art to be the showcase of the app. So I didn't want to do too much, but figuring out how subtle I wanted things—like the shadows on the cards—was something I leveraged in Figma, because I just couldn't quite get it right. It would either be too drastic or not enough, and then I'd figure out the right shadow for—well, some cards have a light gray background.
这些在上面的效果要怎么处理?当然,你能看到这张卡片像是漂浮在空间里。但到头来,你没法把所有场景都照顾到,也不可能让一切看起来完美。但不管怎样,卡片的加载方式——比如昨晚我还在琢磨,保存图片时应该呈现什么效果。之前我用了一种微光加弹跳的动效。然后我想把它压缩成更微妙的感觉。接着我选了我的弹跳音效,但也许别人不喜欢这个声音。于是我去设置里,让 Claude 给我大概 10 来个不同选项,这样你就能逐个试听并挑选。但话说回来,Eagle app 是我在 Gather 之前用的同类收藏工具,功能集非常庞大。你能看出它是一款存在了很久的应用,开发者已经不知道该加什么功能,就只好不断堆新东西。所以我非常非常注意不要加太多,而是加对的东西。而这归根结底取决于品位和判断力——你在做产品时听到的所有这些,显然很重要,也是区分好产品与差产品的关键。但这确实是个挣扎:我两秒钟就能做完,那我到底该不该做?你会怎么处理?我会先加进去,然后再删掉,因为我觉得,嗯,有点过了。我刚才玩得太开心了,得收一收。
How are those going to work on there? And of course, you can even see this card over here kind of seems floating in space. But you kind of have to—at the end of the day, you can't account for every situation and make everything look perfect. But anyway, the way the cards load in—like even last night I was figuring out, you know, when you save an image, what that should look like. Before, I had like a shimmer and a pop. And then I wanted to kind of drill that down, condense that into something more subtle. And then I picked my pop sound, but maybe somebody else doesn't like the sound. So I went into settings and I asked Claude to give me like ten or so different options so you can actually go through and pick. But again, Eagle app is the app that I used previous to Gather. It's a very similar collection tool, but their feature set is massive. You can tell it's an app that's been around forever, and they just don't know what else to do with it, so they keep adding new features. So I was very, very cognizant of not adding too much, but adding the right kind of things. And so again, that's where it comes down to taste and judgment—all the things you hear about that are obviously significant when building products and are going to separate good products from bad. But that is a struggle, where it's like, I can do this in two seconds, so should I do it or should I not do it? And how do you go about that? I'll add things in, then I'll remove them because I feel like, okay, that was a little too much. I was having a little too much fun there. Let me dial that back.
真是 Slop 啊,哥们。我刚看到一条很棒的推文,他在讲把应用“做过头”的问题,我一直在想这件事。因为当你看孤立的每一个细节时,把它调到我深深自豪的这个小小的悬停状态——哪怕也许只有 1% 的人会体验到——真的特别好玩。但这种事情你做得多了,你就会想:‘哇,为什么这个应用用起来这么怪?’你懂吗?这正是赶上现在这个拥有超能力时刻的风险所在。
Slop, man. So, I just saw a really good tweet where he talked about overcooking an app, and I think about that all the time, because it's like, in isolation, every single thing that I do is genuinely so fun to dial in to a degree where I'm just deeply proud of this tiny little hover state that maybe 1% of people are going to experience. And then you do that any number of times, and you're like, 'Whoa, why does this app feel weird?' You know? It's the danger of leaning into this moment in time where we kind of do get superpowers.
很快说一下声音设计这一块,这些声音是生成的吗?你是从哪里弄来的?
Really quickly, talk to me about the sound design piece. Are those generated? Did you get them from somewhere?
我也不知道。其实一开始我是自己选的声音。我去了 Artlist.com——好像是这个名字——找了个我喜欢的声音传上去。那是种老式 Windows 97 那样的复古音效。但后来我越保存图片越觉得那个声音用久了会烦。我需要更细微的声音。于是昨晚我跟 Claude 说——用到了我的 Prototype MD skill——‘嘿,你能帮我做大概 10 个不同的音效让我试试吗?’然后我就可以点着试听,实际测试一下保存图片这类操作。接着它给了我所有选项,对吧?我挑了一个。然后我想:‘嗯,我应该让用户自己选才对。’于是我又说:‘算了,干脆把它们都上传到应用里,放进设置面板,这样就好了。’然后我又说:‘好,现在我需要一个回收站的音效。’我就用同样的方法做了回收站的。我想要一个“把图片丢进回收站”和一个“清空回收站”时不同的声音。它也做到了——它给了我所有选项,各有不同的层次。所以其实我不知道这些是不是真的由 AI 生成的。它们只是来自 Claude。我不知道它们从哪来的。我假设它们可以免费使用,但我其实不确定。
I don't even know. Actually, at first I picked my own sound. I went to Artlist.com—I think it's called—found a sound I liked and uploaded it. It was kind of this old retro Windows 97 sound or something. But then, the more I started to save images, the more I felt that sound got annoying after a while. I needed something more subtle. So last night I asked Claude—using my Prototype MD skill—'Hey, can you prototype me like ten different sounds to use?' And I could click through them and actually test them out, save an image, and that sort of thing. Then it gave me all the options, right? And I picked one. Then I thought, 'Well, I should actually allow the user to pick.' So I was like, 'Forget it. Just upload all of them to the app into a settings panel and do it that way.' And then I said, 'Well, now I need a sound for trash.' And I did the same thing for trash. I wanted a different sound for when you're adding an image into the trash can and when you're emptying the trash can. And it did that—it gave me both options at various different levels. So I don't know if they're actually AI generated or not. They just came from Claude. I don't know where they came from. I assume they're free to use, but I don't actually know.
有意思。我以前从来没做过声音原型,我也不知道为什么没做过。
Interesting. I've never prototyped sound before. I don't know why I haven't.
这种东西容易做过头。是的,用的时候要有选择性,而且我觉得还应该提供关闭的选项。
It can be overdone. Yeah, you have to be selective with when you do it, and I think you should also give the option to turn it off.
嗯,我觉得这是如今设计师能接触到的设计类型的又一个例子。以前,那种层面的决策——我是说,直到大约一年前,我做的产品里都没有音效,是有原因的。因为——
Well, I think that's another example of the type of design that is now available to designers. Previously, decisions at that level—I mean, there's a reason I didn't have sound in any products that I made up until about a year ago. Because—
哦,当然。
Oh, for sure.
做声音设计不像是我的分内事,你懂吗?但现在突然之间,你会想:好吧,没错,这就是体验的一部分。这就是 UX 设计,你知道吗?
It didn't feel like my job, you know? But now all of a sudden it's like, well, yeah, this is part of the UX. This is UX design, you know?
嗯。
Mhm.
而且我现在就能做到,直接去实现、去原型设计,这多酷啊?
And it's available to me, and I can just do it and prototype. How cool is that?
是啊,我完全没概念。我是说,我完全不知道怎么弄这些,更别说给特定操作用加上音效了,但它每次都能搞定。你只要选个声音,或者让它帮你选,然后你就能筛选选项。所以,我并没有在全应用里都加声音,只在新增照片和把东西丢进回收站时才有。我就到此为止了。不过,你确实可以尽情地在声音上玩,但到了某个程度就会变得有点烦人。
Yeah, I wouldn't have a clue. I mean, I wouldn't have a clue how to do any of this, let alone add sound effects to certain actions and stuff. But it nails it every single time. You just got to pick out the sound, or it'll pick it out for you and you can select options. So yeah, that was one of those things where I don't have sound all throughout the app. I only have it when you add a new photo in and when you add something to trash. I kind of stopped it there. But you know, you can definitely go hog wild with sound, and it would get kind of annoying at a certain point.
好,跟我讲讲你用的那个 Prototype MD skill 的概念吧,你是怎么弄的?
All right, tell me a little bit about the Prototype MD skill concept you were working through.
我其实在看一个视频,应该是 Claude 的工程师讲的。有些观众可能已经看过了。我没有看完整部,只看了前四分钟,然后收藏了以后再看。但就前四分钟里,他说了类似‘对,我们做的一件事是……’的话。有些观众可能会觉得:‘这早就过时了,我已经这么干了一两年了。’但我是新手,才刚刚开始。不过我还是会分享,因为对我来说这超级有用。现在,我往应用里加任何东西的时候——昨晚我之所以那么开心地打磨一切——就是因为我创建了一个 MD skill 文件。它大概就是说:‘嘿,Claude,当我让你做原型时,我要你给我做五个不同版本,但把它们都放在一个 HTML 文件里,这样我就能直接从 Claude 打开,然后在不同版本之间点来点去。’所以我可以实际分享给你看……
I was actually watching a video by, I think, a Claude engineer. Some people watching this might have already seen it. I didn't watch the whole thing—just the first four minutes. I bookmarked it to watch later. But in those first four minutes, he said something like, 'Yeah, one thing we do is...' And some people watching this might think, 'This is so old news. I've been doing this for a year or two.' But I'm new to this. I just started. Still, I'm going to share it because it's super helpful for me. Now, whenever I add anything into the app—that's why I was having so much fun last night refining everything—I created an MD skill file. It basically says, 'Hey Claude, when I tell you to prototype something, I want you to prototype five different options, but put them all in one HTML file that I can open directly from Claude and tap through the different options.' And so I can actually probably share...
请吧。
Please.
这就是其中一个 HTML 文件的示例。Claude 会直接给一个链接,你把它放到终端里——或者你平时用这个的任何地方。这是我设好的格式,所以你总是有——我总有五个选项。当然,如果你不太在意 token 消耗,你也可以要求更多。
So this is an example of one of the HTML documents. Claude will just spit out a link to this, and you put it in your terminal—or wherever you're using this. This is the format I've set up, so you always have—I always have five options. Of course, you can do more if you don't really care too much about your tokens.
但这是昨晚的一个例子——我在调试一些新的保存入场效果。当你把图片保存进应用时,实际效果就是这样。第一个我可以点击的是淡入上升,我最终也选了它。然后你还有那个弹跳和弹出。
But this was an example from last night. I was troubleshooting some of the new save entrance effects. When you save an image into the app, this is what it actually looks like. The first one I can click is a fade and rise, which is ultimately what I ended up going with. But then you have your spring and pop.
酷。
Cool.
然后还有 develop,然后是那种 shimmer。还有这一个,我觉得太过了。但这是一个例子:我会回去找 Claude 说‘我真的很喜欢第一个’。然后它就会被实现。它显然不会用这种精确的风格来实现——它会拿你的 tokens 和 CSS,然后放进你的风格里。所以看到它如何转换到我的应用里,其实挺好玩的。但这只是我现在做任何 UI 工作之前的一个例子。我其实是昨天才发现这个的。所以我遍历了应用里的所有东西,一直到下拉菜单,用这个原型技能跑了一遍,得到了更好的 UI。
And then you have your develop, and then your kind of shimmer. And you have this one, which I think was just too much. But this is an example: I'll go back to Claude and say, 'Hey, I really like number one.' And then it gets implemented. It obviously won't implement it in this exact style—it'll take your tokens and CSS and put it in your style. So it's fun to see how it translates to my app. But this is an example of what I do now before doing any UI work. I actually just discovered this yesterday. So I went through everything in my app, down to drop-downs, ran it through this prototype skill, and came up with way better UI.
哦,酷。有多具体?你有没有描述这些选项应该是什么样?
Oh, cool. How specific? Are you describing anything about what these options should be?
不不不,完全没有。我只是想做一个卡片保存时进入灰地图的入场方式原型。我不用多说什么——就说‘做原型’。它会引用我的技能文件,知道该怎么做。当然,你也可以给它更明确的指令。我当时就是‘给我创建一个技能,做五个例子’。我没有什么又大又长的总提示词。但光是这个——我不知道我以前怎么没想到——完全改变了游戏。
No, no, absolutely. I just wanted to prototype the way a card enters into the gray map when you save it. I don't have to say anything more—I just say 'prototype it.' It references my skill file and knows exactly what to do. Of course, you can be way more directive with it. I was very much like, 'Just create me a skill that prototypes five examples.' I didn't have this big, long master prompt. But this alone—I don't know how I didn't know to do this before—completely changed the game.
我觉得你并没有落后太多,说句公道话。我觉得 HTML 最近有点火。我也就是在过去一个半月里才开始用 HTML。
I don't think you're that far behind, for what it's worth. I think HTML is kind of having a moment recently. I've started using HTML just in the last month and a half.
是的,能够快速并排看到所有这些,而且放在一个文件里,很有帮助。它几乎成了我的第三种探索方式。有时我在代码里探索,生成某个产品的一部分,或者起一个 /playground 路由。我经常这么做,尤其是在 Web 应用里工作的时候。或者我用 Paper 在画布上生成东西。但突然之间,这成了一个中间地带……
Yeah, it's just helpful to be able to quickly see all these things side by side and have them in one file. It's almost becoming this third way of exploring for me. Sometimes I explore in code and generate something that's part of my product, or maybe I spin up a slash playground route. I do that a lot, especially when I'm working inside a web app. Or I generate things using Paper on the canvas. But all of a sudden, this is a middle ground where...
嗯。
Mhm.
HTML 很棒,因为你可以玩交互。做起来又便宜又快。你可以很快看到各种效果——就像你说的——我很难描述五种不同的交互感受。
HTML is awesome, because you can play with the interactivity. It's cheap and quick to make. You can really quickly see things—again, like you said—I would have a hard time describing five different ways that an interaction should feel.
哦,完全同意。是的。
Oh, absolutely. Yeah.
你知道,这有点——至少在我的脑子里,找不到太多词汇去描述。所以我总是说‘给我五个’。其中三个会很糟糕,然后一和二会很有趣。我会说‘好,其实再给我三个像第二那种的’,然后在里面玩。几乎就像这样来回。比如五天前,我开始用 HTML 不仅仅做原型,而是真正和 Claude 对话。当我想搞清楚一件事时,我会让它用 HTML 给我一个可视化答案,然后我就读这个网页,开始口述一切。我会打开 Superwhisper,开始读出来并谈论它。我还会让它特意加入开放式问题,或者想让我权衡的东西,做成小段文本,几乎像 Notion 风格的提示框。然后我就直接说,把你能想象到的最原始、最乱的提示词倒进去,我的光标在 Conductor 里,再按一下 Option+Space,它就把这一段丢进去,Claude 就会生成另一个 HTML。举几个例子。一个是我想设计这张卡片,最难的部分不一定是 UI,而是想清楚我能拿到哪些元数据,因为它更像一个技术性的……
You know, it's kind of—there's not a lot of language, at least in my brain, that I could reach for. So all the time I'll be like 'Give me five.' Three of them will be horrendous, and then one and two will be interesting. I'll be like 'Okay, actually just give me three more like number two.' And then play with it there—almost have this little back and forth. Even like five days ago, I started using HTML not just for prototyping, but for my actual conversation with Claude. When I'm trying to figure something out, I'll tell it to create me a visual answer in HTML, and then I'll read this web page and just start dictating. I'll start Superwhisper and just start reading and talking about it. And I have it specifically bake in open-ended questions or things it wants me to weigh in on as little blurbs, almost like a Notion-style callout. Then I'll just talk, dump the most raw messy prompt you could possibly imagine, and my cursor is focused in Conductor. I hit Option+Space again, it dumps this paragraph, and Claude spins up another HTML. A couple examples. One was trying to design this card, and the hardest part was not necessarily the UI. It was thinking about what metadata I can even reach for, because it's like a more technical...
嗯。
Mhm.
产品。我当时很难想明白我手头有什么可用。比如,帮我想想怎么把东西表达出来。然后它就生成了所有元数据的清单,还有一个小型的视觉 mock,展示每个可以用在哪。它给我的比我脑子里多了三倍,启发了所有这些想法。然后我就拿着它说,好,我们在这里做原型吧。
product. I was having a hard time wrapping my head around what I have available to me. Like, help me think about how I can communicate things. And it just created this rundown of all the metadata, and then a tiny visual mock-up of how I could use each one. It gave me three times as much as what was in my head and sparked all these ideas. And then I take it and say, okay, let's prototype over here.
这太天才了。
That's genius.
我觉得我对想怎么用 HTML 这件事只是刚刚触及皮毛。就我看到改进自己流程的机会而言,这是目前最让我兴奋的东西。
I feel like I'm just barely scratching the surface of how I want to use HTML. I think it's the thing right now that I'm most excited about, in terms of where I see opportunity to improve my own process.
哎呀,尤其是 Claude 不能生成图像。它挺有意思的——它用文本去做视觉效果时,还挺有创造力的。它有时也这样对我,我就想,好吧,那挺有用。但我从没想过用一个开放的 HTML 画布来可视化东西。这太棒了。
Dang, especially since Claude can't do image generation. It's funny—it's pretty creative the way it tries to use text in a visual way. It does that sometimes with me and I'm like, okay, that was helpful. But I've never thought about leveraging an open-ended HTML canvas to visualize things. That's amazing.
另一个小技巧是,准备一个单独的假内容文件夹很有价值。你只要让 Claude 在原型里用这些内容,就能得到更真实的图像。即使我在 Paper 里生成东西,我也会有一个 SVG 图标文件夹,因为我在自己的产品里用很多 Figma、Lovable、V0、Claude 的图标。然后我还有一个落地页文件夹,里面有一堆 mock 和人像。所以我只要说‘用这些来设计’,因为否则它只会给我那种……
Another little pro tip is the value of having a single folder of dummy content. Then you just tell Claude to use that in the prototypes and you get realistic imagery. Even when I'm generating things in Paper, I have a folder of SVG logos, because I use a lot of Figma, Lovable, V0, Claude logos in my own product. And I have a folder for the landing page that has a bunch of mock-ups and faces. So I just say, 'Hey, design with that,' because otherwise it'll only give me the...
当然。
Sure.
或者它会用一个心形表情符号来代表 Lovable。但如果我说用落地页里的那些文件夹,那么我所有的原型都会变得更真实。
Or it'll use a heart emoji for Lovable. But if I say use these folders from the landing page, then all of my prototypes become more realistic.
老兄,是啊。很明显——我们所有人,不管经验多丰富,都只是刚触及这件事的表面,还在学着怎么用手头的一切。我觉得我每天都有新的顿悟,然后就想‘天哪,改变游戏规则’。我不知道。这超级令人兴奋,也非常让人分心。
Dude, yeah. It's so evident—all of us, regardless of how experienced you are, are just scratching the surface of this thing and still figuring out how to use everything at our disposal. I feel like every day I have a new epiphany, and then I'm like, 'Holy crap, game changer.' I don't know. It's super exciting and also very distracting.
但你知道,我一直在努力跟进客户项目,在项目间隙我会奖励自己十分钟,用 Claude 做点东西。我没用过 Conductor,完全不知道那是怎么运作的。市面上还有一大堆产品,我连智能体都没用。现在 loops 又成了大事?我不知道。我一步一个脚印来。我很舒服,也很喜欢。
But you know, I'm trying to keep up with client work, and in between projects I'll award myself like ten minutes building in Claude. I haven't used Conductor. I don't know how any of that works. There's still a world of products, and I don't even use agents. And now loops is the big thing? I don't know. I'm taking it one step at a time. I'm very comfortable with that — I love it.
是啊,一步一个脚印。你平时现在用的是 Claude 桌面应用,还是 Claude Code?
Yeah, one step at a time. Are you usually using the Claude desktop app right now, or are you using Claude Code?
没有,就用浏览器和终端。是的,我用终端。我经常得提示 Claude:“嘿,请给我正确的命令,让我在本地打开这个。”因为我连记命令的兴趣都没有。所以每次开一个新的上下文窗口,我都得从最基础的开始:“嘿,我不知道终端怎么用,你得非常具体地告诉我每一步怎么做。”有时候我会和帮我调试问题的工程师共享屏幕。那是最不舒服的体验,因为在一名工程师面前,你必须待在终端里,然后意识到:“哦,我其实根本不用任何终端命令。”我连 git pull 之类的都不会敲。我只是描述每一件事,然后等 Claude 的转圈图标。但兄弟,这真的让我开了眼界。开发人员是怎么记住这些东西的?这里东西太多了,命令又长又多。我就想,我到底该去哪里学这些东西?谢天谢地,所有这些都直接在 Claude 里。但这确实让我对开发人员有了新的敬意——他们竟然能知道怎么做这一切。
No, just the browser and the terminal. Yeah, I use the terminal. The amount of times I have to prompt Claude, 'Hey, please give me the correct command to open this locally,' because I'm not even interested in memorizing the commands. So every time I start a new context window, I have to start with the basics: 'Hey, I don't know how terminal works. You need to tell me very specifically how to do everything.' Sometimes I'm screen sharing with an engineer who's helping me debug something. It's the most uncomfortable experience, because in front of an engineer you have to be in terminal and then realize, 'Oh, I don't actually use any terminal commands.' I don't type git pull or anything. I just describe every single thing and then wait for the spinner in Claude. But dude, it opened my eyes. How do developers memorize all this stuff? There's so much here, and so many commands that were so big and so many different ones. I'm like, where would I even go to learn this? Thank goodness it's all just there in Claude for us. But it really gave me a new appreciation for developers — that they would just know how to do all of this.
随便问一下,你最后用了哪个图标库?
This is random, but what icon library did you land on?
我最后选了 Lucid。实际上就在这通电话之前,我还在想也许我应该试试 Lucid,因为我正在做一个新的 Mac 应用。然后我心想:要换吗?我一直用 Phosphor,所有的图标都用 Phosphor。我还用 Branch Out,兄弟,我用 Branch Out。所以我就想,那就试试 Lucid 吧。说实话,我一直没找到自己真正喜欢的图标库。我在其他产品里看到各种图标,总想着要是我知道他们用的是哪套图标库就好了。也许有办法能查出来,不过算了,我就用 Phosphor 这类基础款。所有设计工作我都用 Streamline Icons。最后选了 Lucid,是因为我已经厌倦了不停试来试去,我觉得,暂时先用这个吧。对了,他们有动画库,内置动画,就是这样——我之前还不知道。我发现了一个 Lucid 的动画库,心想:我以前不知道。我会去玩玩那个。说个有趣的事:就在最近几天,我第一次生成一个用于生产环境的图标。我感觉我们距离“直接指定一套现有图标”已经很近了,因为我正在 Paper 的画布上使用 Quiver API。
I think I landed on Lucid. Actually, right before this call, I was like, maybe I should play with Lucid, because I'm working on a new Mac app. And I was like, should I? I always use Phosphor. I use Phosphor icons for everything. I use Branch out, man. I use Branch out. So I just was like, I'm going to try Lucid. Honestly, I haven't found an icon set that I love. I see all kinds of icons in other products, and I'm like, I wish I knew what icon set they were using. There's probably a way to figure it out, but yeah, I just use the basics like Phosphor. I use Streamline Icons for all design work. I landed on Lucid because I was tired of experimenting, and I'm like, this works for now. Yeah, they have an animated library with built-in animations, which is what it is — I didn't know that. There's like an animated Lucid library that I found, and I'm like, I didn't know that. I'm going to play with that. Fun fact: actually, in the last few days, for the very first time, I generated an icon that I used in production, and I'm kind of feeling like we're close to being able to point at an existing icon set, because I'm using the Quiver API in Paper.
真的吗?
Really?
是的。所以我通过 Paper 画布上的 Quiver 来生成,我还能让它指向现有的图标库,然后说:“嘿,匹配这个风格。我要 16 像素,在边界框内大概 13 到 14 像素的矢量图形,还要 1.2 像素的描边。让它们全都保持一致。”然后它就能生成大概 10 个图标方案,我直接挑一个。就像你用 HTML 做的那样。我在想,如果今天我从零开始做一个应用,我会很想尝试直接生成图标。
Yes. So I generate through Quiver on the Paper canvas, and I can point it at the existing icon library and say, 'Hey, match that style. I want 16 pixels. I want roughly a 13-to-14-pixel vector inside the bounding box, and I want a 1.2-pixel stroke. Make it all consistent.' Then it can just generate like 10 options for an icon, and I just pick one. In the same way that you're doing with the HTML. I wonder if I was starting an app from scratch today, it would be very tempting to try to generate icons.
是啊,是啊。
Yeah, yeah.
说实话,我用 Quiver 做过别的,它挺好的。我觉得我目前拿它做的事还不太适合这个应用——那更像更复杂的线条艺术作品。为什么直到刚才我才想到用 Quiver 来生成图标?我不知道。不过我见过你做的东西,你喜欢 Paper 那类东西。我其实没怎么深入用 Paper,除了一些设计工作。我在需要 shader 之类的东西时会用它,但我真的完全不像你那样用 Paper。我觉得那里面肯定有些东西适合我。不过我说过,我现在太专注于手头的事了,以后我会去弄的。
Honestly, I've used Quiver for other things, and it's good. I think the things I'm using it for haven't really suited the app yet — it's a little more complex line artwork. Why haven't I used Quiver for icons until this very moment? I don't know. But I've seen your stuff — you like the Paper stuff. I haven't really gotten into Paper that much other than for design work. I use it for some things, like when I need shaders and things, but I really haven't used Paper the way you use Paper at all. I feel like there's definitely something there for me. But like I said, I'm so engrossed in what I'm doing right now. I'll get to that at some point.
是啊,你总得有所取舍。
Yeah, you kind of have to pick your battles a little bit.
我总会比别人落后 3 英里,但我会赶上去的,对吧?这就是我的方式。
I'll always be like three miles behind everybody else, but I'll get there, right? That's just the way it is.
好,我们快速拉远一下视角。过去这两个多月对你来说是一个非常特别的窗口,你完成了一件以前也许——我的意思是,这很难。当然,你能够亲身体验到 AI 让什么成为可能,过程中也许有些部分比你想象的容易得多,或者比你想象的没那么可怕。但你毕竟做了一件很难的事。你从零到一做出了一款 Mac 应用,而且它还挺好,对吧?那么这段经历如何影响了你对设计未来的看法——不仅是设计师这个角色,还有设计师带来的价值?
Okay, let's zoom out real quickly. This has been a heck of a two-month-plus little window for you, where you've done something that previously maybe you would — I mean, it's a hard thing. Obviously you're able to experience what AI makes possible, and maybe there were parts of the process that were way easier than you thought they would be, or way less scary than you thought they would be. But you still did a hard thing. You went zero to one on a Mac app, and it's good, right? So how has that journey impacted the way you think about the future of design — not only the role of designers, but also the value that designers bring to the table?
对我来说最大的转变是:AI 从一个“提示一下,直接给我做出来”的工具,变成了——我一直把它想象成你所能拥有的最有耐心的合作者,它以人类永远无法企及的超快速度构建。你只需要知道怎么引导它。同时还需要品味和判断力,不仅是在做什么上,也包括怎么做,细化到那些极微小的 UX/UI 决策。这让我对设计师的未来没那么害怕了,反而更有希望。以前我真的不太清楚该怎么看待它。我知道某些东西有风险,但我不太确定谁会受影响,以及我要如何应对。我总想领先行业两步,告诉自己必须为未来做准备。说实话,现在一切发展得太快了,我甚至不知道几年后会是怎样。对我来说,我还在想办法如何把它融入我的客户工作,因为那是付账单的收入来源。那是我的主业,是我做的事。而这一切——都只是为了好玩,对吧?我并不是靠这个来谋生的。
The biggest shift for me is going from AI being a 'prompt, just build me something' tool to something like — the way I've been thinking about it is like the most patient collaborator you could ever have, one that builds at hyper speeds that humans could never build at. And you just have to know how to direct it. It also takes taste and judgment, not only in what to build, but how to go about it, down to just the finite UX/UI decisions. It's made me less scared of the future for designers and more hopeful, I think. Before, I really didn't quite know what to make of it. I knew that there were certain things at risk, but I wasn't quite sure who would be affected and how I would navigate that. I'm always trying to stay two steps ahead of the industry, telling myself I need to prepare for what the future holds. And quite honestly, things are moving at such a fast pace right now, I don't even know what that looks like in a couple of years. For me, I'm still trying to figure out how this incorporates into my client work, which is what pays the bills. It's my thing, that's what I do. All of this — this is just for fun, right? This is not something I rely on to make a living.
我不需要做任何东西。但如何把它融入我的客户工作,是我接下来要问的问题,而实际做起来会是什么样子,对吧?那是一种风险高得多的服务类型。我该怎么着手,能不能自己做?我是不是终于需要扩大规模、雇个人来帮我?这件事我还在消化——它如何影响这个行业,也如何影响我个人。一两年后,甚至几个月后,我的角色会是什么样?我觉得这些工具落到有品位、有判断力的设计师手里,简直太厉害了。真的非常厉害。可惜,如果你只待在 Twitter 的圈子里,或者你所在的任何地方,你是看不到多少这种东西的。大多数对这些工具夸夸其谈的人,其实并不具备这些素质。他们要么是 AI 公司的代言人,要么纯粹是网红——他们不是设计师,对吧?这样的人并不多见。我知道你在节目里请过很多这样的人,但他们很稀有,而且常常没有得到应有的关注。所以我认为,这是我至今一直对使用它感到犹豫的部分原因,也是我花了这么长时间的原因。讽刺的是,阻止我进入 Claude 的那个东西,恰恰会让我在使用它时变得最强大。我对低质量的工作容忍度非常低。能够利用我至今积累的所有技能,让 AI 朝着我想要的方向走,这对我来说是最令人兴奋的部分。而这是我以前没有意识到的,我确实在很大程度上低估了它。
I don't need to build anything. But how do I incorporate this into my client work is my next question, and what that actually looks like, right? That's a much higher risk type of service to offer. How do I go about that, and can I do it myself? Do I need to finally scale and hire someone to help me? It's something I'm still digesting—figuring out how this affects the industry, but also how it affects me personally. What does my role look like in a year or two, or even a few months? I feel like these tools in the hands of a designer with good taste and good judgment are just crazy. It really is crazy. Unfortunately, if you're just in the Twitter bubble or wherever you are, you don't see a lot of that. Most of the people spouting off about these tools don't actually have any of those things. They're either mouthpieces for AI companies or strictly influencers—they're not designers, right? You don't see too many. I know you feature a lot of them on your show, but those are rare. They're often not in the spotlight they should be. So I think that's partly why I've been shy about using it up to this point, and why it's taken me so long. Ironically, the thing that stopped me from getting into Claude is actually going to be the thing that makes me most powerful with it. I have a very low tolerance for low-quality work. Being able to leverage all the skills I've developed to direct AI in the direction I want it to go is the most exciting part about this for me. It just wasn't something I was aware of before—I had literally underestimated it to a high degree.
是的,我认为这是我从这次对话中得到的主要收获之一。关键在于控制力。之前所有那些犹豫,现在都成了你作为构建者发光的地方——那最后 1% 的精细雕琢和细节。你为让产品感觉惊艳、感觉用心所做的一切,突然之间都向你敞开了,这真的太令人兴奋了。
Yeah, I think that's one of my main takeaways from this conversation. It's the control piece. All of the previous hesitations are where you're able to shine now as a builder—all of that final 1% of finesse and details. Everything you've made that makes the product feel amazing and considered—it's all just been opened up to you all of a sudden, which is so exciting.
也许它一直都在。也许 AI 已经进步到了这样的程度——它在某种程度上真的变得更聪明了,或者在某种程度上更擅长设计了。我不认为 AI 擅长设计,但它擅长接受指令。只要你能够清晰地引导它,并且知道自己在做什么,你就是在做正确的决定,对吧?你可以很擅长引导 AI,但你也可能走上一条糟糕的路,一条不够有品味、不够有美学的路——这又是你在网上看到的大多数东西。我不知道。我想把我整个应用库里的东西都重新做一遍,因为拥有那种控制力实在太有趣了。这说起来又觉得奇怪和倒退,因为一个月、一个半月前,我根本不会这么想。我会以为你完全没有控制力。那正是 AI 的问题:你什么也控制不了。而这就是 Figma 的用武之地。你有控制权。只是需要时间。需要大量时间、大量迭代、大量排错,但最终你会得到一个能用的产品,这太有意思了。
Maybe it was there all along. Maybe AI has advanced to the point where it's actually—I don't know—smarter in some way, or better at design in some way. I don't think AI is still not good at design, but it's good at taking direction. As long as you can direct it clearly and know what you're doing, you're making the right decisions, right? You can be good at directing AI, but you may be going down a bad road that isn't very tasteful or aesthetic—which is again the majority of what you see online. I don't know. I want to go back through my entire app library and re-build everything, because it's just so much fun having that level of control. Which again feels so weird and backwards to say, because a month, a month and a half ago, I would not have thought that at all. I would have thought you have zero control. That's the whole problem with AI: you don't have control over anything. And that's where Figma comes in. You have control. It just takes time. It takes a lot of time, a lot of iterating, and a lot of troubleshooting, but you actually get a working product in the end, which is fun as heck.
感谢你来做客,分享一点这段旅程。你做出的东西太棒了。你已经……
I appreciate you coming on and sharing a little bit about the journey. It is amazing what you built. You've...
谢谢。
Thank you.
你该为自己感到骄傲,你知道吗?真的很酷。我真心希望这次对话能激励很多人,那些可能一直站在场边、或者只是随便鼓捣、但还没真正承诺要发布一个东西的人,对吧?我从这段旅程和你所做到的事情中得到了巨大激励,也期待看到你接下来会做什么。
You should just be proud, you know? It's cool. I really hope this conversation inspires a ton of people who maybe have either been on the sidelines or loosely tinkering but haven't actually committed to shipping a thing, right? I'm so inspired by the journey and what you've been able to do, and I'm excited to see what you build next.
完全同意,兄弟。谢谢你邀请我。
Absolutely, man. Thanks for having me on.