用 Claude 打造精美网站：James McDonald 的设计流程

它给了你自由去探索一些你在 Figma 里可能无法完全做到的东西。以前和工程师合作时，我几乎得先做故事板，说明我希望动画看起来和感觉起来是什么样。但现在，我只要把一个画板之类的东西交给它，通过 MCP 链接起来，告诉它我想让它做什么，然后你就得到一个 11 分（满分 10 分）的想法，接着只需打磨它。

It just gives you the freedom to explore something that you might not be able to fully do in Figma. When I've been working with engineers, I would have to almost do storyboarding of how I want the animations to look and feel. But just being able to hand it one artboard or whatever and link it through the MCP, tell it what I want it to do, and then you've got an 11 out of 10 idea that you can then just massage.

欢迎来到 Dive Club。我是 Red，这里是设计师永不停歇的学习之地。本周的嘉宾是 James McDonald，他无疑是我最喜欢的视觉设计师之一。所以我总是找借口请他上节目，就为了看看他是怎么工作的。他会带我们稍微看看他工作流程的幕后，以及他今天在尝试什么。我们的目标是试着了解要达到这种顶级工艺水平需要什么。

Welcome to Dive Club. My name is Red and this is where designers never stop learning. This week's episode is with James McDonald, who's easily one of my favorite visual designers on the planet. So I'm always looking for an excuse to have him on the show just to see how he works. So he's going to give us a little behind the scenes of his process and what he's experimenting with today. And the goal is to try to learn what it takes to reach this top-tier of craft.

如果你在 Twitter 上关注我，就知道我喜欢分享我正在做的项目。这是为我的一个客户 Access Card 做的，他们是一家让移动钱包凭证轻松存入你设备、用来进入大楼和公寓之类的公司。我接到的任务是——现有的首页基本上只是一个落地页，作为进入公司不同部分、网站不同区域的跳板，用来了解公司的各个部分之类的。但你刚到达那里时，它现在做得并不好。所以这就是目标——计划是为这个做一个新的首页。我的 Figma 文件也一样乱。

If you follow me on Twitter, you know I like to share the projects that I'm working on. So this is for one of my clients, Access Card, and they're a company that basically make mobile wallet credentials easily on your device to access buildings and apartments and just all that fun stuff. I've been tasked to—the existing homepage right now is basically just a sort of landing as a launchpad to get into different parts of the company, the website to find out different parts of the company and stuff like that. But it doesn't really do a good job right now when you first arrive there. So this is the goal—the plan was to sort of come up with a new homepage for this. My Figma files are also just as messy.

不，那挺干净的。我不骗你。

No, that's pretty clean. I'm not going to lie.

我是说，你又能看到它在哪里逐渐变少，你知道，到这里就有点像——

I mean, again, you can see where it sort of tails off, you know, and it gets to like here and it's like—

我有点按这种线性的方式来做——另外补充一下背景，它看起来好像从一开始就处于不错的位置，你知道，这部分其实没怎么变。但那是因为之前我显然已经设计了网站上其他一堆页面。他们其实只是缺一个首页，那是一种不同的做法，但当时并不是真的需要。但现在，显然我们想在首页上做更多的叙事、突出更多功能。所以这就是为什么我们给首页做了这种环绕式的背景。所以你会注意到这大概已经处于不错的位置了，但那只是因为我们之前显然已经设计了一堆这些——一堆视觉设计。很多这些，尝试不同的布局，比如这个，你知道，像——我马上给你看线上版本——但像这些方块。我把大致想法放进去了。这个其实也挺好玩的。所以这个图案已经出现在我几个月前做的之前的设计工作里了。我真的很想把它变成品牌的一部分，贯穿整个网站。

I kind of go in this linear fashion of—and also for more context, it almost looks as if this is in a good position from the start, you know, like this doesn't really change much. But that's because previously I had designed, obviously, a bunch of the other pages for the website. It was just really a homepage they didn't really have, which was a different approach, but it wasn't really required at the time. But now, obviously, we want to do a lot more storytelling and highlighting a lot more features on the homepage. So that's why we've sort of done this kind of full circle background to the homepage. So you will notice this is probably in a good spot already, but it's just because we obviously designed a bunch of these—a bunch of the visual design—previously. A lot of these, trying different layouts like for this, you know, like—I'll show you the live version in a second—but like these kind of cubes. I get the rough idea in there. And this is quite fun actually as well. So this pattern is already on the previous design work that I did a few months ago. I really wanted to try and make that a part of the branding and throughout the website.

让我直接进入实际项目本身吧。

Let me just jump into the actual project itself.

就像现有的首页，你知道，它真的只是一个标题、一些副文本，然后你可以看一个关于 Access Grid 做什么的视频，它稍微介绍了一下他们。然后你进入这些不同的用例页面，这些——你又会注意到很多设计语言已经在那里了。这是我实际上一直在 Claude 里构建的新版本，这真的非常有趣，也让人振奋。所有动画之类的东西都是我构建的——

Like the existing homepage, you know, it's literally just a heading, some subtext, and then you can watch a video about what Access Grid does and it kind of tells you a bit about them. And then you go into these different use case pages, which—and again, you'll notice a lot of the design language is there already. This is the new one that I've actually been building in Claude, which has been so much fun and sort of invigorating. All the animations and stuff I've built—

所有那些——

All that—

在 Claude 里。对，对。

In Claude. Yeah, yeah.

有点疯狂，对吧？

Kind of crazy, right?

是有点疯狂。

That's kind of crazy.

太野了。我注意到，甚至就在过去几周，Opus 5.5 甚至——如果你直接告诉智能体或 LLM 你想做什么，我真的注意到它一开始就做得非常好。以前，它做的东西可能会应用一些动效，要么太快要么太慢，或者总感觉你得进去真正调整一大堆东西。但 hero 部分我大概调了很多——H1 和副文案怎么错开进入，然后设备进来。但没错，我想让那个几乎模仿把手机贴到读卡器上的感觉。就像，你知道，那种把它轻触到某个东西上的感觉。所以那就是我在那里追求的效果。

It's wild. And I have noticed even just over the last few weeks, like Opus 5.5 is even just—if you just tell the agent or the LLM what you want to do, I've really noticed that it does such a great job right away initially. Previously, it would do something that maybe would apply some motion like too quick or too slow or just always felt as if you had to get in there and really tweak a lot of the stuff. But the hero I probably messed about with quite a lot—how the H1 and the sub copy staggers in and then the device comes in. But yeah, I wanted that to sort of mimic almost like putting your phone up against a reader. Like, you know, like that sort of tapping it against something. So that's what I went for there.

先来一条短消息，然后我们继续。好消息。你现在可以在 Claude、Codex、Grok Bot 里，或者任何你工作的地方，通过全新的 Jitter MCP 使用 Jitter。我一直说 Jitter 让动画制作比市面上任何其他工具都更容易，但这把它提升到了另一个层次。比如，你可以正在开一个关于即将发布产品的会，会议一结束就让 Jitter 立刻开始探索动画社交帖子。或者你甚至可以在一个提示里把设计适配到不同的宽高比。而且 MCP 创建的一切都是原生 Jitter 文件。所以你不只是被另一个视频导出困住、还得从头提示。你可以轻松进去手动微调动画。这只是 Jitter 是我动画首选工具的又一个原因。所以如果你想试试新的 MCP，请前往 dive.club/jitter。

Real quick message and then we can jump back into it. All right, big news. You can now use Jitter inside Claude, Codex, Grok Bot, or wherever you work using the all new Jitter MCP. I mean, I've always said that Jitter makes animating easier than any other tool out there, but this takes it to a whole other level. Like, you can be in a meeting about some kind of an upcoming product launch and have Jitter immediately start exploring animated social posts right after it ends. Or you can even adapt your designs to different aspect ratios in a single prompt. And everything the MCP creates is a native Jitter file. So you're not just stuck with another video export that you have to prompt from scratch. You can easily hop in and fine-tune your animations by hand. It's just another reason why Jitter is my go-to tool for animation. So if you want to give the new MCP a try, head to dive.club/jitter.

我电脑上只有一个应用我每天真的会用上几百次，那就是 Raycast。现在他们把听写功能直接内置到 Raycast 2.0 里，我的使用量又上了一个全新的层次。我真的取消了 Super Whisper 订阅，因为它就是那么好。设计一如既往地优雅，符合你对 Raycast 团队的期待，但还有一些非常强大的功能真正把它提升到下一个层次。我最喜欢的功能之一是样式。它允许你为特定应用和网站设置自定义指令。所以我在写代码时可以得到干净的提示，甚至在口述 Dive 通讯时自动把输出结构化为 markdown。这只是 Raycast 是我推荐在电脑上安装的第一个东西的又一个原因。所以如果你不知怎么还没在用，请前往 dive.club/raycast 注册。

There's only one app on my computer that I use literally hundreds of times per day and it's Raycast. And now that they have dictation built right into Raycast 2.0, my usage has gone to a whole other level. I literally canceled my Super Whisper subscription because it's that good. The design is as elegant as you'd expect from the Raycast team, but there are some seriously powerful features that really take it to the next level. And one of my favorites is styles. It allows you to set up custom instructions for specific apps and websites. So I can get clean prompts when I'm building in code or even automatically structure my output as markdown when I'm dictating the dive newsletter. It's just another reason why Raycast is the very first thing I recommend installing on a computer. So if you're somehow not using it already, head to dive.club/raycast to sign up.

现在进入正片。我欣赏你作品的一点是，你非常擅长找到这些小图案或视觉母题，然后把它们延展、外推到品牌的其余部分。我觉得这个——甚至你有的这个小网格，以及里面的连接线。

Now on to the episode. I think one of the things that I admire about your work is you're really good at finding these little patterns or visual motifs that you then pull on and extrapolate into the rest of the brand. And I think this—even the way that you have this little grid and you have the connectors inside of it.

你能稍微讲讲创作过程中的那一部分吗？因为其他部分都是标准布局，对吧？但正是那一部分让它真正脱颖而出。

Can you talk a little bit about that part of the creative process? Because everything else is standard layout, right? But it's that part that makes it really stand out.

这里这一部分是我设计的——原始版本你可以在这儿的背景里看到——是用网格做出来的。就算在这里，这也全是静态的。它是背景里这种蓝色的组合，然后全部矩阵式地过渡到白色。这就是我大致想追求的效果。这背后其实没有太多深思熟虑——我只是被那种设计语言启发了，然后试着把它做成 Access Grid 的品牌元素。所以显然，能把它再推进一步就是：我怎么把它带进 Claude，看看它会把我带到哪里，你懂吧？这就是我的起点。我买了这个工具——我记不太清了，好久没打开过了——但我想确保……我记得这是主视觉尺寸，我在里面加了几个不同的预设。不过没错，这是最早做这个的工具之一，我基本上是想试试——你看这 logo 里这些奇怪的 L 形？它是这些 L 形的组合。那个想法就是从这儿来的，试着给它们做动画，同样是为了强化品牌。这就是起点：我买了这个小工具，我可以随便在哪里画这些，然后它就会开始试着画出 L 形，你还可以调整描边宽度。是实线？是虚线？你知道的，你还可以随机化一堆这些东西。我不知道你会不会喜欢这么做，但每次我做这些工具，我都喜欢加一个随机按钮，因为有时候你就是能弄出些奇怪的东西来。

That part on here was designed — and the original, you can see it in the background here — it was done with the grid work. Even here, this is all static. It's a combination of the blue in the background here, and then it's all matrixed out into the white. That was what I was kind of trying to go for. And there's no real thinking behind that — I was just inspired by that sort of design language and I tried to make that the brand element for Access Grid. So obviously being able to take that a bit further was like, how do I bring that into Claude and just see where it takes me, you know? So this was where I started. I bought this tool — I can't really remember, it's been a while since I've opened this — but I wanted to make sure that... I think this was the hero size and I added a few different presets in there. But yeah, this was one of the original tools for this, and I basically wanted to try — you know how in the logo here there are these weird L shapes? It's a combination of the L shapes. That's where that idea came from, to try and animate those, just to again reinforce the brand. And this is where it started: I bought this little tool where I can just draw these anywhere and then it will start trying to draw the L-shapes, and you can mess about with the stroke width. Are they solid? Are they dashed? You know, you can randomize a bunch of this stuff as well. I don't know if you'll love doing that, but anytime I make these tools, I love to add a random button, because sometimes you can just get weird stuff happening.

我有时候在提示词里也会这么干。我会说：“做这三个我想要的概念，然后再做两个我没想到的概念。”

I even do it in my prompts sometimes. I'm like, "Do these three concepts that I want, and then also just do two concepts that I'm not thinking of."

你能想象吗？

Can you imagine?

说实话，18 个月前，如果你看到这个——如果这是你设计流程的一部分，自己造工具这个想法——我是说，很长一段时间里，我联想到的你，就是那个在 Figma 里为每一个小自定义矢量抠细节的人。而现在你在自己造的工具里按随机按钮。

Honestly, 18 months ago, if you saw this — if this was part of your design process, the idea of building a tool — I mean, you're the person that for the longest time I associated with just sweating the details of every little custom vector in Figma. And now you're hitting a random button in a custom tool that you built yourself.

是啊，太疯狂了。甚至 6 个月前都还是这样。说实话，我觉得在这件事上我算是大器晚成的那种，因为——

Yeah, it's crazy. Even like 6 months ago. Like honestly, I feel like I'm sort of a late bloomer when it comes to this stuff, because like —

我可没打算这么说。还好你自己说了。

I wasn't going to say it. I'm glad you did.

不，我百分百同意。所以当我看到设计师们没有全身心投入这件事时，我会挺沮丧的，因为我知道我自己也有过那种感觉，你知道的，就是想到 Figma 之外的东西会觉得有点吓人——比如，我能不能把我的技能用在能让我手头工作受益的地方？我觉得这就是——哪怕只是这个非常简单的例子——但如果我只是在 Figma 里设计这个，你总能在某种程度上、到某个程度为止把它可视化出来，你知道吧？但就像——我知道这个的动画可能太快了，但这时候你就得用你的设计思维说：“好，我明白这里动画进来得太快了。那我怎么造一个工具，帮我打磨这些细节，你懂吧？”所以这基本上就是我在做任何这些小工具时想做的事。你可以放慢它们绘制的方式、退出的方式，它们会模糊成淡出。你可以做这些——

No, I'm 100%. And so it disheartens me when I see designers sort of not being all in on this stuff, because I know I felt that way, you know, like where it was kind of intimidating to think beyond Figma — like, can I apply my skill set in a way that will benefit the work that I'm doing? And I think this is just — even just this really simple example — but if I was just designing this in Figma, you can always visualize it to a certain degree, to a certain point, you know? But just like — I know the animation for this is probably too quick, but that's where you use your design mind to say, "Right, okay, I understand this is animating in too quick here. How do I build a tool that then helps me massage those details, you know?" So that's essentially what I try and do when I'm building any of these little mini tools, if you like. You can slow down how these draw, how they exit, they sort of blur into a fade. You can do things like —

你是给 Claude 一个 SVG 的图案示例，然后让它照着描吗？因为就连那个描边动画都做得非常好。我很好奇做到那一步花了多少功夫。

Did you give Claude one pattern example in an SVG and then just tell it to trace it? Because even that tracing animation is really good. I'm wondering what it took to arrive there.

说实话，我都不确定我是不是那么做的。我想我只是把 Figma 里的那种图案给了它。所以我想我只是给了它类似这样的东西。这是我在 Figma 里画的，你知道的，然后我想我只是把它指出来——我指向了这一段，说背景里的这个图案——我想做一个图案生成器来帮忙构建这个。我想大部分情况下，这类工具大概几个提示词就出来了，你知道的，因为它其实没什么复杂的。它只是帮我把我在实际构建中想达到的效果可视化出来。这个其实挺有意思的。这是 Figma 之前的，在我开始在 Figma 里设计之前。我当时在试着构建我们如何演进我已经做好的 Access Grid 作品，然后我想，我怎么在品牌上继续做文章。所以我其实很喜欢这个工具。它最后演变成了一个可能不会用在 Access Grid 上的东西，但它是我可以回头找灵感的东西。又是，就是输出些随机的——

I honestly don't even know if I'd do that. I think I just gave it the sort of pattern that was in the Figma. So I think I just gave it something like this. I drew this in Figma, you know, and I think I just pointed it — I pointed it to just this section and was like, the pattern in the background — I want to make a pattern generator that helps build this. I think for the most part it was probably a few prompts for this sort of tool, you know, because there's nothing really to it. It's something just to help visualize what I was trying to achieve in the actual real build. This was actually a fun one. This was pre-Figma, before I even started designing in Figma. I was trying to build out how we can evolve the existing Access Grid work that I had done already, and I was like, how do I try and build on the branding as such. So I actually love this tool. It ended up evolving into something that probably won't get used for Access Grid, but it's something that I could maybe revert back to for inspiration. Again, just outputs like random —

像这样疯狂、好玩的东西。

Crazy, fun things like this.

我完全不知道它是怎么做到的，但是——因为这并不是这个生成器、这个图案生成器最初的意图。我想要的类似这样，它拿 Access Grid 的 logo 来构建——它用的是竖线。我想你可以在这里改颜色。你可以用自定义颜色。最初这就是这个工具的想法，但后来我想我开始玩——当你点这个，也许那个颜色不太好。我们看看。对，所以当你点它，它就会泛起不同的效果。这是什么？对，你可以随便玩。我做了所有这些不同的参数，所以你可以做出好玩的、不同的图案，你知道吧，而这就是我现在喜欢开始项目的方式——就是加一堆这种东西，看看它会把你带到哪里。就是无尽的灵感可能性。有意思的是，一旦你把这些不同的参数都放进去玩，你知道的，你就可以——就像我之前说的，那个随机按钮——它真的就是把我左边所有这些参数随机化，然后输出一些狂野的，你知道——

I don't have any idea how it's doing this, but — because it wasn't the original intention for this certain generator, this pattern generator. I wanted something like this, where it took the Access Grid logo and it was building out — it was using vertical lines. I think you can change the color here. You can use a custom color. Originally this was the idea for this, but then I think I even started playing around with — when you click this, maybe that's not a good color. Let's see. Yeah, so when you click it, it just ripples different effects. What's this? Yeah, you can just mess about. I did all these different parameters so you can just do fun, different patterns, you know, and this is how I like to start projects now — just adding a bunch of this stuff, you know, just to see where it takes you. It's just endless possibilities of inspiration. And it's funny because once you've got all these different parameters in here that you're playing around with, you know, you can then just — like I said before, like the random button — it literally just randomizes all of those parameters that I've got on the left-hand side and just outputs some wild, you know —

是啊，对一个工具来说，这个范围真的很广。这挺有意思的。

Yeah, this is a really wide spectrum for a tool. This is quite interesting.

对。就连这个图层也挺酷的——它把线条稍微挤出一点立体感。

Yeah. Even this layer is pretty cool — it sort of extrudes the lines a little bit.

你能从宏观层面谈谈这对你的创造力有什么影响吗？因为这几乎就像你在发现视觉语言的一部分，而不是手动去探索它们。从人的层面来说，那到底是什么感觉？它甚至改变了你自己的流程吗？

Can you talk at a high level about how this impacts your creativity? Because it's almost like you're discovering parts of the visual language rather than manually exploring them on their own. Like what is that actually like at a human level? What does it even change for your own process?

老实说，我觉得那正是像我这样没有工程背景、从未自己建过网站的人的摩擦点。我一直是把设计文件交给工程师。我觉得用这种方式发现想法和灵感，能赋能很多这样的过程。所以就像我说的，你可以从一个非常简单的想法开始——这里的默认版本就是我拿了这个形状，想尝试找到一种方式来探索这个形状如何能以不同方式被看待。所以这里的想法是，这个区域会成为主视觉区，或者主视觉区下方某个部分的一部分，或者只是一种将品牌带入网站或设计的方式。但通过这样做，你通过要求它构建不同的参数，创造了所有这些不同的探索。所以你可能会看到这个的不同版本，然后另一个想法浮现，你就试着把它也构建出来。然后不知不觉中，就有了这种奇怪的组合——我不是说像 BO 和 end 那样的随机按钮，但很多东西你很容易就能在某种品牌指南书中看到，比如为新设计准备的。所以是的，我觉得很多东西正是我对于探索和摆弄这些不同工具（比如 Claude，显然你现在还有 Codex 以及不同的工具）有很多顾虑的地方。我觉得从简单的东西和简单的想法开始，真的可以非常快地演变。在所有这类工具和 AI 之前，还有 Figma，我一直发现那部分耗时最长，尤其是构建网站设计和落地页。真的就是试图找到那个核心想法，而我觉得这些工具能帮助你更快地推进这个过程。至少对我来说是这样。我觉得它真的能帮助演变想法，并尝试构建出你在 Figma 中可能有的那个想法的不同示例。所以是的，这大概就是我喜欢思考它的方式。

Honestly, I think that's the friction point for someone like myself who's never really had an engineering background, who's never built their own websites. I've always handed design files off to engineers. I think just discovering ideas and inspiration doing it this way, it empowers a lot of that process. So, like I said, you could start with a really simple idea—this default one here was I took the shape and I wanted to try to find a way to explore how that shape could be viewed in a different way. So the idea here was this area here would be the hero or part of a section that might be under the hero, or just a way to bring the branding into the website or the design. But by doing that, you create all these different explorations by asking it to build different parameters. So you might see a different version of this, and then another idea comes to mind and you just try to build that out as well. And then before you know it, there's just this weird combination of things that you've built—I'm not saying the random buttons like the BO and end though, but a bunch of this stuff could quite easily be seen in some sort of brand guideline book for a new design. So yeah, I think a lot of this stuff is where I definitely had a lot of apprehension about exploring and playing around with these different tools like Claude's, and obviously you've got Codex now as well and different tooling. I think just starting with something simple and a simple idea can really evolve really quickly. I've always found before all this tooling and AI or whatever, and Figma, that's the part that took the longest, especially building out website design and landing pages. It's really about trying to find that core idea, and I think these tools help you evolve that process a lot quicker. For me it does anyway. I think it really does just help evolve the idea and try to build out different examples of that idea that you might have inside Figma. So yeah, that's kind of how I like to think about it.

总结一下，你能解释一下你是如何考虑何时使用不同类型的工具吗？什么时候你倾向于深入使用 Figma， versus 什么时候你倾向于探索 Claude，或者可能在 Claude 中打磨最终产品的细节？我觉得这是我目前的主要问题，因为有两种非常不同的工作流程。

Just to summarize, can you explain how you think about when you reach for different types of tools? When are you prone to really go deep in Figma versus when are you prone to exploring Claude or maybe just sweat the details of a final thing in Claude? Like I think that's my main question at this point is when do you—because there's two very different types of workflows.

当然。我觉得我还在摸索。当我在为这个和 Claude 构建设计时，肯定有过这种思维转变。让我给你看——我想是这些功能部分之一。可能就是这个。发生了一种奇怪的主要转变，我用 Claude 实际设计东西比跳回 Figma 更快。而我还没有那种奇怪的分岔路口时刻。我认为在 Figma 中设计 100%——我仍然提倡，甚至从获取文案或网站内容开始。是的，你可以快速地在 wireframe 或其他东西中做到。但我是那种自动立即跳入高保真的设计师。我从未真正使用 wireframe。我从未真正喜欢构建或输出某种 wireframe。我觉得现在有有趣的方式可以做到。比如我见过有人——我记不得是谁说的，原谅我——但我见过有人提到，当他们拿到文案或其他东西时，他们现在就直接放进 Claude 或其他工具，然后要求它构建一个可能外观的版本一。所以就像快速开始复制。我知道我也会有那种感觉。但我为此尝试了，显然它从未输出任何像样的东西。但我觉得这是一种快速可视化部分可能外观和感觉的方式。但是的，在 Figma 中，如你所见，我仍然严重依赖构建——比如这个部分现在看起来完全不同了。我认为在 Figma 中探索这些东西的外观和感觉仍然超级重要。我仍然认为，这可能只是我在如何使用 Claude 做到这一点上缺乏知识，但即使只是快速获得不同的方向，我觉得我在 Figma 中比在 Claude 中做得更好。

For sure. I think I'm still trying to figure that out, and there was definitely this mind switch when I was building the design for this and Claude. Let me just show you—I think it was one of these feature sections. It's like that might have been these. There was this weird main switch that happened where I was quicker to actually design the thing using Claude rather than jumping back into Figma. And that's like, I've not had that sort of weird fork in the road moment yet. I think designing in Figma 100%—I still advocate for it, even from the inception of getting the copy or getting the content for the website. Yes, you could quickly do that in a wireframe or whatever. But I'm one of these designers that automatically just immediately jumps into high fidelity. I never really use wireframes. I never really like building or putting out a sort of wireframe. I think there's interesting ways you could do that now. Like I've seen someone—I can't remember who said this, forgive me—but I seen someone who mentioned that when they get the copy or whatever, they just put it right into Claude or whatever now and just ask it to build a version one of how that might look. So like just quickly, they just start copying. I know I would feel that way as well. But I tried it for this and obviously it never output anything decent. But I think it's a quick way to visualize maybe how the sections might look and feel. But yeah, in Figma, as you can see, I still heavily rely on building—like this section for example looks completely different now. And I think just exploring how this stuff looks and feels in Figma is still super important. I still think, and this is probably just my lack of knowledge on maybe how to do this using Claude, but just even getting different directions for this quickly, I feel like I'm a lot better at doing that in Figma rather than Claude.

但这仍然是高层次的形状。就像我从这看到的那样。你没有像过去我可能预期的那样深入一些细节。也许你留下了更多空间在 Claude 中解决？这准确吗？

It's still kind of the high-level shape though. Like that's my takeaway from looking at this. You're not going as far into some of the details that maybe I would have expected you to in the past. Is maybe you're leaving more space to figure that out in Claude? Is that accurate?

是的，现在肯定有重叠，就像我可以在 Figma 中达到某个点，但然后把它带入 Claude 就给了你更多——我甚至不知道这个词——但它给了你自由去探索一些你在 Figma 中可能无法完全做到的事情。而且，在此基础上，你还能感受到它可能实际如何工作。就像很多——这个部分很奇怪，因为最后你有这个，顶部有三个标签，然后每个标签内又是一个不同的标签，以看到不同的插图。所以如果我进入实际构建，我是在 Claude 而不是 Figma 中解决这个的。就像我解决了这部分，在 Figma 中你看到——我就是无法完全得到——你可以看到这里标签在这里。有像右侧文案的奇怪尴尬。

And that's yeah, there's definitely an overlap there now, where it's like I can get to a certain point in Figma, but then just bring it into Claude just gives you a lot more sort of—I don't even know the word—but it just gives you a freedom to explore something that you might not be able to fully do in Figma. And again, on top of that, you also get the sense for how it may actually work. Like a lot of this—this section's quite weird because you have in the end up this where it has three tabs at the top and then within each tab is a different sort of tab again to see a different illustration here. So if I go into the actual build, I've worked this out in Claude rather than Figma. Like I worked this part out where, in Figma you're seeing like—I just couldn't quite get—you can see here like the tabs were here. There's like weird awkwardness of like the copy on the right.

你知道，我的一部分想法是，我是否要做另一个这样的部分，因为我总觉得我经常看到这些东西，而且我总是那样想。我想，我怎样才能以稍微不同的方式展示这个内容？但有时候就是行不通。有时候，看到那种设计语言的常见模式是有效的，而且它有效是有原因的。所以这就是为什么我简化了，然后我想，对了，回到基础。顶部有三个标签。我想这个部分的一个独特之处是这些标签如何错开进入。所以每个标签从左到右错开进入。这是我添加的一个小设计细节，因为我认为如果它们是静态的，它们就不会感觉对。可能会感觉有点卡顿，不会感觉太静态。所以是的，这一直是

You know, and part of me was just like, do I do another section like this where it just feels like I see this stuff all the time and I'm always thinking that way. I'm like, how do I display this content a little bit differently? And again, sometimes that just doesn't work that way. Sometimes it's like seeing a common pattern for that sort of design language works and it works for a reason. So that's why I kind of simplified, then I was like, right, just go back to basics. Three tabs at the top. And I guess this is sort of a unique part for this section would be how these tabs stagger in. So just kind of staggers in from left to right for each tab. And that's a sort of little design detail that I added because I think if they were static, they just wouldn't feel right. It might just feel a little bit janky, wouldn't feel a little bit too static. So yeah, this has been like

我有一些问题。

I have some questions.

是的，是的，是的。

Yeah, yeah, yeah.

一堆问题。我们看到这些卡片到处都是。我也在 Figma 中看到了那张卡片。那张卡片是在哪里制作的？你是在 Figma 中制作的，还是那只是一个截图，然后你在 Claude 中制作的？

Bunch of questions. So, we see these cards everywhere. I also saw that card in Figma. Where was that card made? Did you make it in Figma or is that just a screenshot and you made it in Claude?

所以，这些是在 Figma 中。很多这些是在 Figma 中。我在这里设计了这些。所以，这就是这个在 Figma 中的样子，然后我基本上把它带到 Claude，我基本上想在这里添加一些像 Unicode 奇怪字符。然后显然，想法是像中间列在 Figma 文件中向下射击。没有像那样的条围绕着小带子。就像我在 Claude 中添加了那个。所以，肯定有一种原始设计看起来和感觉如何，然后你如何继续并在 Claude 中构建它？这就是我在 Claude 中进行这种繁重工作的地方，显然所有的动画工作，从 A 到 B 构建。而且，即使这个，我也有这个奇怪的，所有这些不同的三角形或正方形，抱歉，像这样。然后在实际的，所有这些不同的立方体聚集在一起，组成卡片。

So, these are in Figma. A lot of these are in Figma. I designed these here. So, like this is how this one looked in Figma and then I basically took it to Claude and I basically wanted to sort of like add some like Unicode weird characters here. And then obviously the idea was like the middle column like shoots down in the Figma file. There's no like bar like that goes around the little sort of band that goes around. Like I added that in Claude. So, there's definitely like a sort of how does the original design look and feel and then how do you sort of continue that and build that in Claude? And that's where I'm doing this sort of heavy lifting in Claude is like obviously all the animation work in sort of like building out from like A to B. And again, like even this one like I had like this weird like all these different like trian- or squares, sorry, like this. And then in the actual all these different cubes come together like to make up the card.

老兄，那很有趣。

Dude, that's fun.

再次，这个想法实际上，这就是我认为 Claude 对我们如此好的地方。那个原始设计，立方体折叠到中心。如果你往下看，你会看到这些立方体在后面，它们发射出来。我最初为这个部分构建了那个，在顶部，基本上立方体会从文本中心折叠出来，它们会朝不同方向。那是一个旧设计，就像我一开始做的。大概在进入这个部分前两周。所以，这就是我认为 Claude 很棒的地方，因为我只是引用了那个旧材料，我想，哦，那实际上在这里会有效。那在这里会有效。我之前的一般想法只是这些正方形会聚集在一起，再次，我只是用正方形来尝试强化品牌，就像我给你展示的那个带有圆圈的原始想法。那就是那个想法的来源。所以我尝试使用那个动画的原始想法。显然输出了完全不同的东西，就像这里，再次，我真的很高兴我设法重用了那个想法。我不知道我是否会在 Figma 中首先想到或做到那样。我认为这就是 Claude 真正帮助的地方。你可能有一个想法，它不太有效，我想，好吧，我暂时搁置它。但后来它派上了用场，就像这里，我对那些折叠回来的方式相当满意。

And again, this idea actually this is where I think like Claude is like so good for us. That original design where the cubes sort of fold in to the center. If you go down here, you see how these cubes in the back, they sort of emit out. I built that for this section originally like in the top and basically the cubes would fold out of the center of this text and they would go in different directions. And that was like an old design like something that I'd done at the very beginning. Like maybe about 2 weeks prior to getting to this section. So, that's where I think Claude's great is because I just referenced that old material and I was like, oh, that would actually work here. Like that would work here. The general idea that I had before was just like these squares would come together and again I just used squares to try and reinforce the branding, you know, like that sort of original idea that I showed you with the circles in it. That's where that idea came from. So I tried to just use that original idea of that animation. Obviously outputted something completely different, you know, like here, which again I'm really happy that I managed to reuse that idea. And I don't know if I would have ever thought about that or done that in Figma first. Like I think that's where Claude alone really helped with that. And you can maybe have an idea and it doesn't quite work and I was like, right, I'll just shelf that for now. But then it came in handy like for here, you know, like I'm quite happy with how those folded back in.

我在这个节目中引用 Syleo 太多了，他在几年前谈过这个想法。他谈到伟大的设计师如何自我抄袭。这可能是一个想法，它只是没有成功，但他们知道它很好，你知道，它只是在那里没有成功。我甚至有自己的故事，我制作了多个版本的 Inflight 网站。这个版本只存活了一个月。我有一条虚线，我用 Claude 调整，让它有渐变脉冲。Claude 称之为“空灵连接器”。它已经很久没有上线了，但有很多次我说，嘿，你能像旧的空灵连接器那样做吗？然后它只是做了些什么，我想，哦，那太酷了。

I quote Syleo too much on this show and he had this idea that he talked about years ago at this point. He talked about how great designers self-plagiarize. And it might be this idea that like it just didn't work, but they knew it was good, you know, it just didn't work there. And I even have my own story about that where I made multiple versions of the Inflight website. It was only alive for a month this version. And I had this dashed line that I massaged with Claude to like have this gradient pulse. It was called the ethereal connector is what Claude called it. It hasn't been live for so long, but so many times I've been like, hey, can you kind of make that like the old ethereal connector? And then it just does something and I'm like, oh, that's so sick.

是的。是的，老实说，这就是神奇的部分，当你有一个想法，然后你没有完全使用它，但后来有东西出现了，比如这个例子，这正是我想要的，你知道，那个旧想法设法被重新利用，以一种完美适合我想要的方式。我认为这就是这些工具的神奇之处，特别是对我来说，能够实际动画这些东西对我来说太令人兴奋了，你知道，就像那样。但我做这些东西多年了，之前在工作时，当我和工程师合作时，我几乎得像做故事板一样，描述我希望动画看起来和感觉如何。但能够把它交给一个画板或其他什么，通过 MCP 链接，告诉它我想让它做什么，然后你就有了一个活生生的想法，你可以通过告诉它你想要什么来调整，基本上完善它，你知道。这就是我处理动画东西的方式，特别是在 Figma 中，你知道，它从简单的想法开始，比如这最初是我添加的键，我对这个结果相当满意。

Yeah. Yeah, honestly that's like the magic part is like when you sort of have an idea and then you don't quite use it, but then something comes up where this one for example and this is exactly what I was like in my mind I was like, that's exactly what I wanted, you know, and it just that old idea managed to get repurposed in a way that just fit perfectly for like what I wanted here. I think that's the magical part of these tools, especially for me anyway, like being able to actually animate this stuff is like just so exciting for me, you know, like that's just like But like I've been doing this stuff for years and just been in previously and like when I've been working with engineers I would have to like almost like do storyboarding of like how I want the animations to look and feel. But just being able to hand it like one artboard or whatever and link it through the MCP tell it what I want it to do and then that's you got an 11 breathing idea that you can then just massage by like telling it what you want basically perfect it how you want it to, you know. That's like how I sort of approach like especially the animation stuff like in Figma it's just, you know, it starts off with simple ideas, you know, like this was originally this is the keys I actually added like I was quite happy with how this turned out.

是的，太好了，老兄。什么鬼？

Yeah, it's so good, dude. What the heck?

而且它甚至没有太多内容，就像

And it's not even there's not even much to it either, like

别开玩笑了。

Get out of here.

有很多内容。

There's a lot to it.

不，就像没有，真的，这个钥匙扣有三层，像钥匙

No, like there's not there's genuinely there's three layers for this fob like the key

是的，除了看效果、填充和描边，像老兄，这很美。

Yeah, except look at the effects and fills and strokes, like Dude, this is beautiful.

那就是很多乐趣发生的地方，你知道，像所有的混合模式之类的。但是的，然后它就像活过来一样，当你给它一点摇晃，你知道。

That's where a lot of the fun happens, you know, like in all the blending modes and stuff. But yeah, it just like then comes to life like when you just give it a little shake, you know.

有一个问题我无法停止问自己。

There's one question that I can't stop asking myself.

如果公司主动申请与你交谈，而不是你去找他们，会怎样？这个问题正是全新 Dive Talent Network 的基础。而且它正在发挥作用。比如现在，我正在帮助许多我认识的最令人兴奋的初创公司，招聘那些收听本节目的设计师和构建者。所以，如果你好奇外面有什么机会，或者你想加入我的名单，又或者你正在寻找你的下一位设计雇员，请访问 dive.club/talent 今天就加入。

What if companies applied to talk to you rather than the other way around? And that question is the foundation for the all new Dive Talent Network. And it's working. Like right now I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So if you're curious what might be out there and maybe you want to get on my list or maybe you're even looking for your next design hire, head to dive.club/talent to join today.

你在做什么特别的事情吗？比如你探索动画的工作流程是怎样的？如果你有一个视觉概念，想把它变得生动，你能谈谈你目前流程中的那部分吗？

Are you doing anything in particular? Like what's your workflow for exploring animation? Like if you have a visual and you want to bring it to life, can you talk a little bit about that part of your process right now?

我想我可以谈谈这个。我就是想不出该放什么。显然它讲的是 Face ID。我不想用你通常的那种 Face ID 图标之类的，比如一个对勾什么的。所以我实际上也为这个做了一个工具。这个工具生成的东西太诡异了，老兄。

I mean, I suppose I could probably talk about this one. I just couldn't work out what to put for this. Obviously it talks about Face ID. I just didn't want to do your usual sort of Face ID icon or whatever, like a check mark and all. So I actually ended up building a tool for this as well. The things that this tool generated are so creepy, man.

我正想说这让我感到不安。

I was going to say this makes me uneasy.

是的，真的很不安。这让我感到不安。基本上，我脑子里有个想法，我想要……你知道，我不确定你记不记得，当苹果首次推出 Face ID 时，他们有一个非常棒的视频，它展示了一个人拿着手机，然后几乎就像从摄像头视角，有所有这些点投射到人的脸上。所以这就是这个想法的起源。但我不想要完整的头部或完整的脸什么的，但我想要一个点阵，就像那样开始的，你知道吗？然后我有了在脸上进行扫描的想法。很多那些东西太糟糕了，老兄。让我说，你可能会搞砸它，就像那奇怪的 3D。

Yeah, it's really uneasy. It's making me uneasy. Basically, I had this idea in my mind where I want... You know how, I don't know if you remember, when Face ID was first launched by Apple, they had this really amazing video and it just showed you the person holding the phone and then it almost was like from the camera and it was all these dots that projected onto the person's face. So that was where this idea originated. But I didn't want a full head or full face or anything, but I wanted a dot matrix sort of like that started like that, you know? And then I had the idea of having the scan on the face. A lot of that stuff so bad, man. Let me just say, you could mess it up, like that is weird 3D.

它看起来像在窥视我的灵魂？

It looking into my soul?

是的，没错。就像这家伙是什么？看起来太疯狂了。但我注意到很多女性面孔不知为何比男性面孔好得多。我不能在这上面花更多时间了。我在那上面花了太多时间。是的，就像这些点，我想这里有几个例子。就像这很奇怪，老兄。所以我认为半色调那个是最好的，我想当我第一次构建这个工具时，它向我展示的第一个想法就是这个半色调的想法，我认为它效果最好，因为它有一种深度感，有阴影，而不是另一个感觉像……我想是的，还有一个网格版本，看起来像《猛鬼追魂》之类的，你知道吗？

Yeah, exactly. Like what is this guy? That is crazy looking. But I've noticed a lot of the female faces are just so much better than the male faces for some reason. I couldn't spend any more time on this. I was spending far too much time on that. Yeah, like the dots, I think there's a few examples here. Like this is just weird, man. So I think the halftone one was the best and I think when I first built this tool, the first idea that it showed me was this halftone idea, and I think it works best because you've got this depth feel where there's a shadowing rather than the other one where it feels like... I think yeah, there's a mesh one as well, which looks like Hellraiser or something, you know?

所以这就是这个想法的起点，然后显然从那里，你可以旋转它。你可以倾斜它。我想做类似这样的东西，但它看起来太疯狂了。所以我最终做了类似这样的东西，然后尝试了不同的点围绕脸部包裹的方式。是的，隐藏的点就像……

So that's where this idea started, and then obviously from there, you can turn that. You can tilt it. I wanted to do something like this, but it just looked crazy. So I ended up with something like this, and then messed about with the different ways that the dots actually wrap around the face. Yeah, the hidden dots was like...

我看着这个，意识到我还需要构建更多工具。比如我构建了很多工具，但即使现在在这之前，我正在做一个新网站。我只有大约 12 小时来完成这个。如果给我这个设计挑战——嘿，我有这张脸，我想让脸动起来——我可能会说：“嘿，创建一个独立的 HTML 原型，用八种不同的方式展示给我。”然后我会看着它说：“嗯，我喜欢第二种，我喜欢第四种。再做一次。”而实际上，构建正确的工具可能才是前进的道路。我没想到你会为此做一个工具，我猜。看到你做了这个……

I'm watching this and realizing I still need to build more tools. Like I build a lot of tools, but even right now before this, I was working on a new website. I have like 12 hours to finish this thing. I would probably, given this design challenge of hey, I have this face, and I want to animate the face, I would probably say, "Hey, create a standalone HTML prototype and show me that like eight different ways." And then I would look at it and be like, "Uh I like two, and I like four. Do it again." Where actually just building the right tool probably is the path forward. Like I wouldn't have expected you to make a tool for this, I guess. And seeing that you did this...

我只是在 Figma 里找不到方法。比如我如何在 Figma 里做那张脸？我不知道。我一般不知道。所以我认为这些一次性工具，你可以快速构建，然后显然在提示中，他们会提到能够复制 SVG 之类的，你知道吗？所以我可以快速复制它，放入 Figma。那可能花了我大约 15、20、30 分钟来让它看起来像我想的那样，放入 Figma，然后如果看起来不太对，也许回到工具里，再调整一下。而且这个工具里还有动画的想法。所以这就是动画想法的来源。所以回到实际构建中，它进来了。然后我实际上是在事后添加了那个，比如脸部的白色扫描。那不在工具里。所以那是工具的一部分。那部分就是感觉不太对，就像只有那个，点落到位然后反转。所以实际的扫描是事后做的。我想，“我想知道如果只是白点实际上粘在扫描中会看起来怎样，你知道吗？”所以是的，我不知道。我仍然想改变那个，因为它感觉和其他部分有点不同，但我不知道。

I just couldn't find a way in Figma. Like how would I do that face in Figma? I don't know. I generally don't know. So I think these throwaway tools that you can just quickly build, and then obviously in the prompt, they'll mention something about being able to copy the SVG for this, you know? So I can quickly just copy it, put it into Figma. That could have taken me maybe 15, 20, 30 minutes of getting it how I wanted to look, put it into Figma, and then if it doesn't quite look right, maybe go back into the tool, mess about with it a bit more. And also within this tool is the idea for the animation. So that's where the idea for the animation comes in. So back on the actual build, it comes in. And then I actually added that in after the fact, like the white scan of the face. That isn't in the tool. So that's part of the tool. That's part of it where that just didn't quite feel right, like just being that alone, like the dots falling into place and then reversing. So the actual scan was done after the fact. I was like, "I wonder how that would actually look if it was just the white dots actually glued in a scan, you know?" So yeah, I don't know. I'm still tempted to change that one cuz it feels a little bit different compared to the rest, but I don't know.

但这很酷，因为了解你多年来的工作，你本来必须为此制作故事板。你本来会完全依赖像 Alex 这样的人的技能来把它变为现实。否则，绝对不可能。老实说，大多数工程师可能会说：“老兄，拜托，真的吗？”你知道吗？这需要一个特别的设计工程师来手工完成。

It's cool though because knowing your work over the years, you would have had to storyboard this. You'd have been completely reliant on the skills of maybe someone like an Alex to bring this to life. Otherwise, there's no way in hell. And honestly, most engineers would probably like, "Dude, come on, really?" You know? It takes a special design engineer to do this by hand.

我认为这就是像我这样的设计师现在感到有能力的地方，能够构建这些快速动画，感受一下，快速了解如何展示这些东西，你知道吗？显然希望很多这些插图和类似的东西保持一致，并且有正确的观感，显然是为了设计，但显然也是为了产品。而且是的，我认为很多这些设备之类的，动画的方式非常微妙，但我认为它比仅仅在这里有静态图像要好得多，能够快速构建这些东西并在云中完成这些事情对我来说非常有趣，你知道吗？就像我不知道。很多设计师可能和我有同样的感受，特别是像我之前提到的。

That I think that's where designers like myself feel empowered now being able to sort of build these quick animations and just get a feel for it and get just get like a quick sense for like how to show these things, you know? Like obviously wanted a lot of these illustrations and stuff like that to be consistent and have the right look and feel obviously for the design, but not but obviously for the product as well. And yeah, I think a lot of these devices and stuff like that the way that the animation is just super subtle, but I think it goes a long way a lot better than just having static imagery here and being able to quickly build that stuff and do that stuff in cloud is so much fun for me, you know? Like I don't know. A lot of designers probably feel the same way as myself, especially like I mentioned before.

我来自纯设计背景——从 Photoshop 到 Sketch 再到 Figma。我从未真正亲手构建过自己的作品。所以能够摆弄这些东西，并看到事物变为现实，对我来说是最棒的感觉。太有趣了。我喜欢做这些事，我认为它可以提升，尤其是网页作品。我只是觉得，如果你大量设计这些东西，你真的可以提升很多。

I come from a pure design background—Photoshop to Sketch to Figma. I've never actually built my own work. So being able to play around with this stuff and see things come to life is the best feeling ever for me. It's so much fun. I love doing this stuff, and I think it can elevate, especially web work. I just feel that you can really elevate a lot of this stuff if you're designing it a lot.

那我能带我们进入另一个兔子洞吗？因为你参与的另一个项目是 Onlook，那是你的宝贝。所以你不仅拥有这些新超能力，还获得了引擎创造力，你可以去任何你想去的地方。你能带我们了解一下你在那里构建了什么吗？我很想找机会深入了解你的创作过程，尤其是考虑到最大的创作自由，你是如何思考视觉语言、图案、动画之类的？

Can I take us down another rabbit hole then? Because another project that you've worked on is Onlook, which is your baby. So not only do you have these new superpowers, but you get the engine creativity and you can kind of go anywhere you want. Can you walk us through what you built there? And I'd love to just find opportunities to get inside of your creative process and especially given max creative freedom, how did you think about like visual language, motifs, animations, that kind of a thing?

是的，所以我觉得这个想法——我想这是几个月前的事了。我只是想找一个机会真正全力以赴：我现在真的能自己建一个网站吗？真的能自己建一个应用吗？我在 Twitter 等地方关注的一些人在做这个，我就想我要试一试。所以显然我从应用本身开始，就像——如果你把 Ring 门铃摄像头连接到你的应用里，你就能看到它们，这显然是在 Mac 上快速查看你拥有的门铃的一种方式。所以是的，我想显然是从 Figma 开始的。

Yeah, so I think this idea—I think this was a few months ago now. I was just trying to find an opportunity to really go all in on: can I really build a website myself and can I really build an app myself now? I've seen a few people that I follow on Twitter and stuff doing this, and I was like I'm just going to give it a shot, give it a try. So obviously I started with the app itself, and it's just like—you can see your Ring doorbell cameras if you've got them hooked up into your app, and it's obviously just a quick way on your Mac to be able to see your doorbells that you've got. So yeah, I think obviously starts in Figma.

Figma。

Figma.

这就像我最初想要的氛围。很多这些东西来自 Cosmos。我经常用 Cosmos 找灵感。我很确定很多设计师都知道——很多人用那个。

And this was like the vibe I was originally going for. A lot of this stuff came from Cosmos. I use Cosmos a lot for inspiration. I'm pretty sure a lot of designers know that—a lot of people use that.

我接触 Cosmos 比较晚，我觉得它——

Late to Cosmos like I think it's—

或者我喜欢它。它真的很棒，能让你找到很多你正在寻找的相似的 relatable 的东西。我不知道他们怎么做到的，但太不可思议了。显然我最初想走这种 90 年代摄像机感觉的路线。老实说，我现在有点希望我走了这条路。我不知道为什么我切换了。

Or like I love it. It's just amazing for getting a lot of the same relatable things that you're looking for. I don't know how they do it, but it's incredible. And obviously I wanted to go down originally down this 90s video camera looking feel. And honestly I kind of wish I went down this path now. I don't know why I switched over.

和你最终采用的非常不同。

Very different than what you went with.

是的，是的。我基本上是在尝试制作有趣的视频，短视频——我想实际上是 Midjourney，我在构建一些 90 年代随机前门场景的短片，但我只是想我不能把它放在网站上，因为人们会想，你知道，这是什么技术？这家伙受到威胁——嗯，所以我想那就是我停下来的地方。

Yeah, yeah. I basically was trying to come up with fun videos, short videos—I think it was Midjourney actually that I was building short clips of just random front door scenes from the 90s, but I just thought I can't put that on the website because people are going to think, you know, what is this technology? This guy's threatened with—um so I think that's where I just stopped.

某个疯狂的黑客家伙。

Some crazy hacker dude.

是的，就像它在 Midjourney 中输出的一些片段很搞笑。它就是不能——我没能让它正常工作。所以那是我构建的第一件事——我想这是在——我不记得我在哪里做了这张图。可能也是 Midjourney。显然我喜欢 Shed US 的人。他们的网站真的很酷。我追求那种奇怪的——很多东西都是随手丢弃的。我最终没有走这条路。所以这显然是实际应用本身的设计。我只是试图保持非常简单。还有很多东西我很想添加，但这里的很多 UI 只是非常非常简单，非常基础。但都是定制的——很多图标是定制的。我只是想尝试构建一些我自己会用的东西，以及我能快速完成的东西，因为我以前从未构建过 Mac 应用。我不知道那需要什么。我不知道我需要一个 Apple 开发者账户。就像我在经历这些。我想，哦，我需要这个东西。好的。

Yeah, like some of the clips that it put out in Midjourney were hilarious. It just couldn't—I couldn't quite get it to work. So that was like the first thing that I built—I think this was on—I can't remember where I'd done this image. It might have been Midjourney as well. And obviously I love the guys at Shed US. Their websites are really cool. I was going for that weird—a lot of stuff's throwaway. I didn't end up going down this path. So this is obviously the design for the actual app itself. I just tried to keep things really simple. There's still a bunch of stuff that I would love to add, but a lot of the UI here is just really, really simple, really basic. But all kind of custom—a lot of the icons are custom. I just wanted to try and build something I'm going to use for myself and something that I can do quickly, because I'd never built a Mac app before. I didn't know what that entailed. I didn't know that I needed an Apple developer account. Like I was going through it. I was like, oh, I need this thing. Okay.

过程怎么样？跟我们谈谈——是比你想象的容易，还是更难？你有没有卡住的地方？就像那些也说“我从未做过任何事”的人——如果 James 能做到，也许我也能。那是什么感觉？

How was the process? Talk to us a little bit about—was it easier than you thought, harder than you thought? Did you get stuck places? Like people who are also like 'I've never done anything'—if James can do it, maybe I can. What was it like?

是的。老实说，很多地方我只是让 Claude 帮助我并指导我完成。我一直问它类似的问题，比如，我需要什么来构建这个应用？它会给我一个列表，然后我几乎把那个列表当作多个列表，所以我会从某个地方开始，构建出来，试着完成一个待办事项列表，然后我再做下一件事。所以我认为很多这些东西——我真的很想确保应用是安全的，没有人能看到你的摄像头和你的家之类的。很多这些东西我真的只是问 Claude，比如这安全吗？我不知道这是如何工作的。给我所有我需要知道的关于如何构建这个应用的信息。但它使用的 Ring API 已经内置了很多这些东西。从这个角度来说，我只是说，好的，给我一些布局的想法，我可能需要什么样的设置。然后我回到 Figma，我只是围绕它们构建。所以像这样非常 obscure 的情况，例如，有些摄像头是电池供电的。这就是这些东西所在。显然会有你的摄像头离线的情况。那么设计看起来如何？再次，这是一些其他设计示例，比如电池之类的。不太记得这是不是电池，我不确定。但是是的，很多这些，然后只是设计很多这些东西，它可能看起来如何与不同的图标。是的，所以我认为这只是来自 Claude。

Yeah. A lot of it, honestly, I just asked Claude to help me and guide me through it. I just kept asking it things like, what would I need to build this app? And it would give me a list, and then I would almost treat that list like multiple lists, so I would start somewhere, build it out, try to get through a to-do list, and then I would take the next thing. So I think a lot of this stuff—I really wanted to make sure that the app was secure, that no one was going to be able to see your cameras and your home and stuff like that. A lot of that stuff I literally was just asking Claude, like is this going to be secure? I don't know how this works. Give me all the information I need to know about how to build this app. But the Ring API that it works from has a lot of that stuff baked in already. From that standpoint, I was kind of just saying, okay, give me some ideas for the layout, what sort of settings that I might need. And then I just came back into Figma and I was just building around them. So really obscure cases like this, for example, some cameras are battery powered. That's where this stuff is. Obviously there'll be cases where your camera goes offline. So how does that design look? Again, this was some other design examples of the batteries or whatever. Can't quite remember if this was the battery, I'm not sure. But yeah, a lot of this and then just designing a lot of this stuff, how it might look with different icons. Yeah, so I think this was just from Claude.

这可能是最自豪的部分，实际上我最感激的。我们显然可以用动画等做很多事情，但太不可思议了——它能发现我会错过的边缘情况。

This is probably the proudest part that I'm most grateful for, actually. We obviously can do a bunch of things with animation and everything, but it's so unbelievable—it's spotting the edge cases that I would miss.

有时候我甚至真的不想为那种边缘情况设计什么东西。但就随便做点什么，你懂的？

And sometimes I don't even really want to design something for that edge case. But just make something, you know?

是啊。这就是让我不安的地方。因为我就讨厌当你下载那个应用，或者你，我不知道，你玩一个应用，然后它设计得很漂亮，但然后它们没有那个可能出现在你应用上的边缘情况，你就能立刻看出来，你懂的？

Yeah. That's where I get uneasy. Because I just hate when you download that app or you have, I don't know, you play around with an app and then it's all beautifully designed, but then they don't have that edge case that might appear on your app and you can just immediately tell, you know?

所以我觉得这就是为什么我经历了设计一堆这些东西的痛苦。但一旦我有了一个好的起点——这个没有很多边缘情况——Claude 在复制很多 UI 方面做得很好，你懂的？所以还好。我最终不必设计一堆东西。比如这个视图基本上就是当你收到警报时，它会告诉你，你可以滚动这个列表，并重放，比如如果有人敲你的门之类的。很多这些东西都很有趣，比如为实际的实时视图设计这些图标。是的，比如这里，我设计了，你知道，如果你点击麦克风图标，那是一个小光晕，会根据音量或其他什么移动。你管那叫什么？我不知道技术术语，但它就是很好玩的东西。所以是的，那就是这个应用。是的，网站在这里。网站的东西在这里。这个，就像我的 Figma 是个笑话。东西到处都是。我只想保持简单。很多在实际网站上，显然我们有这种完整的演示，展示某人可能如何使用这个应用。我觉得一些公司已经这样做了，你懂的，但所有这些，设计所有这些东西，构建所有这一切，比如这个光标点击不同相机的小动画。那是我第一次在 Claude 中来回交流，告诉它我到底想要它做什么。来回引用 Figma 文件，告诉它指向 UI 的某些部分，比如把这一部分 UI 带到这里。这是在 access grid 的东西之前。这绝对是我第一个项目，你只是构建按钮之类的，动画。

So I think that's why I went through the pain of trying to design a bunch of this stuff. But once I had a good starting point—there wasn't a lot of edge cases for this—Claude did a good job of replicating a lot of the UI, you know? So it was fine. I didn't end up having to design a bunch of stuff. Like this view was basically when you get an alert and it'll tell you and you can scroll through this list and replay if someone knocks on your door or whatever. A lot of this stuff was fun, like designing these icons for the actual live view. Yeah, like here for example, I designed, you know, if you click the mic icon, that's a little glow that'll move based on the volume or whatever. What do you call that? I don't know the technical term for it, but it was just something that was good fun. So yeah, that was the app. Yeah, the website's here. The website stuff's here. This, like my Figma is a joke. Like things are all over the place. I just want to keep things simple. A lot of the on the actual website itself, obviously we have this full sort of walkthrough of how someone might use the app. I think a few companies have done this, you know, but like all of this stuff, designing all this stuff, building it all, like this little animation of the cursor clicking the different camera. That was like my first taste of going back and forth in Claude telling it exactly what I wanted it to do. Referencing the Figma file back and forth, telling it to point to certain parts of the UI like this part of bringing this UI here. This was like the before the access grid stuff. This was definitely the first project where you've just building out the buttons and stuff, the animations.

你第一次做的时候感觉像魔法一样。

It felt like magic the first time you did that.

确实是。

It was.

特别是如果那是你最早的 Claude 实验之一。

Especially if it was one of your first Claude experiments.

是的，就像那样。就像来自 Midjourney 的。这就像 Midjourney 的一些好例子，看起来还凑合，但你还是能看出来。

Yeah, it was like that's it. As if from Midjourney. This is like some of the good examples from Midjourney where it kind of looks half decent, but you can still kind of tell.

甚至像这些动画，有点喜欢这个，呃呃

Even like these animations like kind of loved how this one uh uh

哦，那很酷。

Oh, that's cool.

你知道，在 Ring 应用里，我不知道你有没有 Ring 摄像头，但在 Ring 应用里，它有类似的 UI，你可以在应用里拖动运动事件，要让这个工作起来，这个视频如何来回拖动，那对我来说就像魔法一样。我觉得这个花了一段时间才做对。它总是试图快速浏览视频文件。它总是来回移动得非常快。但显然这里的拖动应该是相当慢的。所以我觉得那花了一段时间。然后像这个，但我想我让 Claude 参考了——我想有一个动画库，我看到了那种脉冲效果。我就让它参考那个，然后调整背景中一些脉冲细节。背景中有双重脉冲。是的，就像那样的事情，真的就像我说的，这是我第一个真正享受那部分工作的项目，你知道，试图从零到一，老实说构建这些东西太有趣了，这就是我尝到甜头的地方，你知道，就像如果我能构建这个，我现在就能构建我自己的项目了，你懂的。

You know, in the Ring app, I don't know if you've got Ring cameras, but in the Ring app, it's got sort of similar UI to this where you can scrub the motion event in the app and to get that to work with this, how this video scrubs back and forth, that was just like magic for me. I kind of think this one took a while to get right. It kept trying to quickly zip through the video file. It kept going away back forth like really fast. But obviously the scrub is meant to be quite slow there. So I think that took a while. And then like this one, but I think I pointed Claude to—I think there was an animation library and I seen a kind of pulse effect like that. And I just pointed it to that and just kind of massage some of the pulse details in the background. There's like a double pulse in the background. And yeah, just things like that, just like really—like I said, this was the first project where I really had fun with that part of it, you know, trying to just take it from zero to one and honestly just so much fun building this stuff and that's where I got a taste for it, you know, like I can actually if I can build this, I can build my own projects now, you know.

所以，你尝到甜头了。显然，你变得相当熟练。你和 Claude 配合得很默契。你做的一些东西令人难以置信。你承担了很多历史上需要工程合作伙伴才能完成的输出。这如何改变你对自己作为自由设计师未来定位的思考？

So, you have a taste. Obviously, you're getting pretty comfortable. Like you're in a groove with Claude. Some of the stuff that you're making is incredible. You're owning a lot of the output that historically would have required an engineering partner. How does this change the way that you think about positioning yourself even as a freelance designer moving forward?

我觉得这只是另一种可以加入你工具包的技能，你懂的。我不会试图从那个角度思考如何定位自己，但一家公司可以雇佣你做所有事情，你知道。我认为这对他们和你自己都有更大的好处。我觉得就像我说的，这只是另一种你可以添加到自己的技能，而且还是很早期，你知道，只做了几个项目，但事实上它很有趣，我真的很享受，这带来了巨大的不同，你知道。我想如果我还讨厌它，我还讨厌来回交流，我只想待在 Figma 里，那当然，但事实上我真的很享受，我真的想参与，甚至考虑与不同的工程师合作或能够与他们协作——我还没有机会这样做，但能够真正参与那些与工程师关于如何构建这些东西的对话，并成为这些东西如何组合的一部分，也很令人兴奋，你知道，就像能够快速推出这些想法。所以，是的，它绝对打开了更多的大门，你知道，从定位的角度回答你的问题，你知道，我真的没有详细思考过。就像我之前说的，Access Credit 的 Austin 给了你很多自由去真正探索想法，他非常信任我来构建这些想法，他本可以很容易地说，你知道，“我想要一个资深工程师来构建这个，”你知道，但能够有那种自由和信任来构建它真是太有趣了，就像上周我们建立了代码库。所以，希望很快能够真正对网站做出有意义的改变，不仅仅是从，你知道，我只是在 Claude 里有一个项目，而是真正能够将想法上线，你知道，我对这部分也很兴奋。

I think it's just another skill set to add to your toolkit, you know. I wouldn't try to think about how to position myself in that sense, but a company can hire you to do all, you know. I think that's a bigger benefit not only to them but to yourself. I think it's just like I said, it's just another skill set that you can add to yourself and still very early days, you know, like only been working on a couple of projects, but the fact that it's fun and I actually enjoy it makes a huge difference, you know. I think if I still hated it, I still hated going back and forth and I just only wanted to be in Figma, then of course, but the fact that I actually enjoy it, I actually want to be involved and even thinking about working with different engineers or being able to collaborate with them—I've not had that opportunity yet to do that, but being able to actually be in those conversations with engineers on how you actually build this stuff and be a part of how this stuff comes together is also pretty exciting, you know, like being able to quickly put out these ideas. So, yeah, it definitely opens a lot more doors, you know, to answer your question from a positional sense, you know, I've not really thought about it in great detail. Like I said before, that the Austin at Access Credit gives you a lot of freedom to really explore ideas and he puts a lot of trust in myself to build these ideas and he could have quite easily have said, you know, "I want a veteran engineer to build this," you know, but being able to have that sort of freedom and that trust to build it as well has been so fun and like just last week we set up the code base. So, hopefully soon be able to actually make meaningful change to the website, not just like from a, you know, I've just got a project in Claude, but actually be able to push ideas live, you know, I'm excited about that part as part of it as well.

这是你作为自由职业者接的第一个由你构建的项目吗？

Is this the first project that you've taken on as a freelancer where you're building it?

是的，是的，是的，第一个。

Yeah, yeah, yeah, first one.

是的。

Yeah.

老兄，这也太酷了吧？

Dude, how cool is that?

我知道，太让人兴奋了，真的特别好玩。说实话，很长一段时间里，我一直特别羡慕工程师能把想法做出来——甚至不只是羡慕，有时候还挺沮丧的，因为工程师做出来的东西可能不完全是你设想的样子，不是你脑子里那个想法。所以能真正把一个想法从零到一实打实地做出来、搭起来——我觉得，就像我说的，这真的让我更有能力去做更多这样的事。而且我觉得，对于和我处境相同的设计师来说，现在真是个激动人心的时代——就像我之前说的，我没有工程背景，只是在尝试这些工具。我从来都不是那种技术型设计师，我记得我跟你说过。系统化思维——我根本不是那种设计师。但这些工具解锁了流程中的一部分：只要你足够有耐心，不断去玩、不断去尝试把简单的想法做出来——我一开始做得挺简单的，就是试着做点小工具，可能帮忙给插画做动画之类的，从那儿开始。然后我觉得这些工具的本质就是，事情进展得很快，你也会进展得很快——你必然会快速上手，学会这些东西是怎么运作的。所以我特别享受，真的，做这些东西太有意思了。

I know, it's so exciting. It's been so much fun. For the longest time, honestly, I was always just so jealous of engineers being able to build ideas — or not even jealous, sometimes frustrated as well, because maybe an engineer doesn't quite do what you envision, you know, the idea that you have in your mind. So being able to actually tangibly put an idea together from zero to one and build them — I think, like I said, it really sort of empowers me to do a lot more of that. And it's just such an exciting time, I think, for designers that are in the same sort of boat as me, where — like I said before — I didn't have an engineering background, who are sort of experimenting with these tools. I've never been a sort of technical designer whatsoever. I think I've mentioned that to you before. Thinking in systems — I'm just not that designer at all. But these tools sort of unlock just a part of the process where, if you're just patient enough to keep playing around and keep trying to bring simple ideas over — I started pretty simple, just trying to build little tools that might help with animating an illustration or whatever, you know, starting there. And then I think the nature of the beast with these tools is things just move fast, and you will move fast — it's inevitable you'll move fast and pick things up and learn how this stuff works. So I'm loving it, you know, it's so enjoyable working on this stuff.

太酷了，老兄。现在我更理解你那篇《Things Are Weird》文章的由来了，因为我知道你正处在第一个项目的中途。做一件事做了那么多年，做到行业顶尖，然后去做一件你从没做过、甚至没想过会作为专业人士去打包呈现的事——太酷了，老兄。我很欣赏你的这段旅程，以及你愿意跳进来做这些东西，甚至愿意问自己那个问题：我能做到吗？我是不是该试试看能不能从零做一个完整的产品？

It's cool, man. I understand the genesis now of your "Things Are Weird" article a little bit more, now that I know that you're in the middle of your first project. To be doing something professionally for so long, to be at the top of the game, and then you're doing something that you've just never done or even imagined yourself packaging as a professional before — it's cool, man. And I find your journey and willingness to jump in and build all these things and even just ask yourself the question of, you know, can I do this? Should I just see if I can build a whole product from scratch?

是啊。

Yeah.

我觉得正是这种心态让人如今能走得很远。所以谢谢你来做客，带我们走过这段旅程、你的创作过程。只要我还做这个播客，我就会继续找借口采访你。你是我最喜欢从中获得灵感的人之一。

I think that's the mentality that gets people really far nowadays. So I appreciate you coming on, taking us through the journey, your creative process. I will continue to find excuses to interview you as long as I do this podcast. You're one of my favorite people to be inspired from.

谢谢。没问题。不，我一如既往地感谢你。

I appreciate it. No problem. No, I appreciate it as always.

嘿，如果你喜欢这期节目，别忘了每周四我都会和 Tommy Geoco 一起直播 Dive Radio，我们会深入探讨热门话题，并听听业内众多优秀设计师的分享。所以如果你想把它加进日历，就去 dive.club/radio，我们周四美国东部时间下午 4 点见。

Hey, if you enjoyed this episode, don't forget that every Thursday I go live with Tommy Geoco for Dive Radio, where we deep dive into trending topics and hear from a ton of incredible designers in the industry. So if you want to get that on your calendar, just go to dive.club/radio and I'll see you on Thursdays at 4:00 p.m. Eastern.