主导 ElevenLabs 网页设计：从克拉尼图案到品牌标识

为全球增长最快的 AI 公司之一负责网页设计，是什么样子的？

What does it look like to own web design for one of the fastest growing AI companies in the world?

所以，我们又看了几页。

So, we went through a few more pages.

你刚才做的网页设计工作量之大让我恍然大悟。如果你的简历上没有苹果或爱彼迎这样的公司，你怎么能得到这样的机会？

The scale of the amount of web design that you just did dawned on me. How do you even get this opportunity if you don't have companies like Apple or Airbnb on your resume?

我的意思是，你总是希望有一个核心交互或某种“膨胀因子”，让人真正容易理解你在做什么。我最近一直在玩 Claude Code，它解锁的能力令人惊叹。你知道，作为设计师，你拥有所有想法，知道最终应该是什么样子。所以现在，如果你有一点技术知识，就能构建很多东西。我可以说这让我夜不能寐。我对能构建这么多东西感到非常兴奋。

I mean, you always want to have one main core interaction or like the swell factor or something that really makes it easy to understand what you're doing. I've been playing a lot with the CL code and it's amazing how much it unlocks. You know, if you're a designer, you have all the ideas, you know how it's supposed to look in the end. So, like now you can, if you have a little bit of technical knowledge, you can build so many things. And I could say that keeps me awake at night. I'm just so excited about, you know, building so many things.

欢迎来到 Dive Club。我是 Red，这里是设计师永不停歇学习的地方。本周的嘉宾是 Roman Tesliuk，他负责 ElevenLabs 的网页设计。他将带我们了解从最微小的决策到他对整个网页系统的思考。但我最喜欢这一集的部分是听到 Roman 的所有副项目，以及他如何利用 AI 成为构建者。但在我们深入之前，这一集从 ElevenLabs 的 Figma 开始。

Welcome to Dive Club. My name is Red and this is where designers never stop learning. This week's episode is with Roman Tesliuk, who's leading web design at ElevenLabs. So, he's going to walk us through the tiniest of decisions all the way to how he thinks about the broader web system. But one of my favorite parts of this episode is hearing about all of Roman's side projects and the different ways that he's becoming a builder with AI. But before we get into all of that, this episode starts in the ElevenLabs Figma.

当你想到 ElevenLabs 时，它是一家语音公司，研究在幕后进行。它不是一家包装公司，研究或模型来自别处，你只做 UI 界面。所以计划是尝试在品牌、营销和产品部分将其可视化，这有点棘手，对吧？所以我们寻找不同的方式。从更色彩缤纷的风格开始，你可以想象那些彩色球体、有点粉彩的调色板、大量白色，试图找出什么可以成为品牌的独特身份和核心。所以我们与外部机构合作收集想法。这是我们正在工作的文件。老实说，我们经历了很多不同的概念，花了一些时间。我们尝试过用形状和不同颜色来玩。某个时刻，我们偶然发现了克拉尼图案这个概念，觉得它与品牌产生了共鸣。对吧？这与语音和产品身份有关。

When you think of ElevenLabs, it's a voice company, research going on like behind the scenes. It's not a wrapper company, you know, where the research and the models come from somewhere else and you just do the UI interface all that. So that was kind of the plan to try and visualize that in the brand and on the marketing side of things and part of the product, and that was kind of tricky, right? So, we're kind of looking for different ways. Coming from this a bit more colorful, if you can imagine like these colorful orbs, a bit pastely color palettes, a lot of whites, and trying to see, you know, like what can be this unique identity and kind of core for the brand. And so we worked with an outside agency to try to collect some ideas. And so here's just a file that we're working in. And so we went through a lot of different concepts, to be honest, and it took a bit of time there, right? So you know we had something with trying to play with shapes and with different colors. At some point we stumbled upon this concept of cymatic patterns and we felt there was something that kind of really resonated with the brand. Right? So this is something that is connected to the voice and to the identity of the product.

所以克拉尼图案就是那些当特定音乐频率播放时形成的图案，这是一个非常有趣但有点抽象的概念。你可以大量尝试，然后得到许多不同的有趣图案和形状。

So cymatic patterns are like those patterns that form when certain frequencies of music play, which is a really interesting concept but it's kind of abstract. You can play with it a lot and then you get a lot of different interesting patterns and shapes.

我们尝试了很多不同的东西。感觉还没有完全到位，对吧？但从一开始就有一些有趣的想法。最终，我们得到了一种混合体：克拉尼图案、一点色彩、那种情绪化的图像、小图案和动态，再加上图案、一点噪点、玻璃和模糊效果。

We tried a lot of different things. It wasn't feeling like it was 100% there, right? But there were already some interesting ideas from the very beginning. Eventually, we ended up with something that is a mix of cymatic patterns, a little bit of color, you know, these kind of moody images and little patterns and motions, and a mix of that with patterns, a bit of noise, and glass and blur effects.

那是品牌实验的一个良好起点。我们创建了一些在线生成器，可以玩转不同的图案并组合这些层次。从那时起，我们必须找出如何完成最复杂的部分，对吧？所以这是内部与外部团队的合作，我们寻找不同的使用方式，并在此基础上构建，尝试将这些图案和情绪用于不同的用例，因为 ElevenLabs 仍然非常初创，有很多事情和项目在进行，我们不能停下来重新设计整个网站。所以我们经历了一个过渡，实际上仍在进行中。所以这算是基础和根基。

And that was the nice point to start with the brand experimentation. We created some generators online where we could play with different patterns and try to combine these different layers. From that point, we had to figure out how to do the most complex part, right? So this was a collaboration internally with an external team, and from that we were looking for different ways how to use it, and we had to take it and build on top of that and try to use these patterns and these moods in different use cases, because ElevenLabs is still very startupy and there's a lot going on and so many projects happening, we could not stop and redesign the whole website. So we had a bit of a transition that is actually still happening. So this was kind of the base and the foundation.

快速插播一条消息，然后我们继续。有趣的事实：我正好处于 Granola 用户前 1% 的边缘。所以当我说我对这个产品爱不释手时，我是认真的。它就是这么好。但在看到他们的年终 Crunch 报告后，我更加尊重这个产品了。我每次讨论设计都会用到 Granola。它总能完美地为我组织一切。无论是与 Dive Club 嘉宾聊天、做用户研究，还是跟踪进行中的任务。Crunch 给了我一份漂亮的摘要，涵盖了所有关键主题，甚至过去一年的一些有趣时刻。这真是一个好产品。所以如果你还没用 Granola，请访问 dive.club/granola，在下次会议中试试。Lovable 刚刚发布了一个重大更新。你现在可以构建和定制由 Shopify 和 Lovable 驱动的在线商店。在我职业生涯早期，我非常喜欢 Shopify，但总觉得模板受限，对任何定制都感到害怕。但现在，你可以在几分钟内从想法到店面再到销售。这对商业的未来意义重大。所以如果你一直想建一个在线商店，现在就是时候了。前往 dive.club/lovable 开始吧。好了，现在回到节目。

Real quick message and then we can jump back into it. Fun fact for you, I'm right on the cusp of the top 1% of Granola users. So, when I say I cannot get enough of this product, I mean it. It is that good. But after seeing their end-of-year Crunch report, I have even more respect for this product. But I never have a conversation about design without Granola. And somehow it perfectly organizes all of it for me. Whether it's chatting with guests for Dive Club or doing user research or keeping track of tasks for in-flight. And then Crunch gave me this beautiful synopsis of all of the key themes and even some funny moments from the past year. It's just a good product. So if somehow you're not already using Granola, head to dive.club/granola to spin it up for your next meeting. So Lovable just had another big time release. You can now build and customize online stores powered by Shopify and Lovable. And earlier in my career, I was really into Shopify, but I always felt limited by their templates and was super intimidated by doing anything too custom. But now you can go from idea to storefront to selling in just a few minutes. It's a big deal for the future of commerce. So, if you've ever wanted to build an online store, now is the time. Just head to dive.club/lovable to get started. Okay, now on to the episode.

可能有趣的是我们如何审视所有这些图案，并尝试将它们用在网站上。

Something that might be interesting is how we kind of went through, you know, looking at all of these patterns and how we try to use them on the website.

这是很多设计师都会遇到的点：拿到很酷的情绪板和品牌手册，一切看起来都很棒，然后就是“现在用它”。那么你在思考如何应用、如何外推时，是从哪里开始的？我很想回到最初的阶段。

This is a point that so many designers find themselves in where they get this cool mood board and brand book and everything looks really nice and then it's like 'now use it', you know. So where'd you start when you were thinking about how to apply this, where to extrapolate it? I'd love to kind of go back to even the beginning stages.

是的。某种程度上，它看起来不错，就像机构喜欢放在横幅广告上的那种干净风格。你放上视觉上好看的东西，但它不一定能讲述你希望在特定页面上讲述的故事。你知道，我们的产品相当庞大，有很多不同的子产品。当你想到 ElevenLabs 时，可能只想到语音克隆和声音，但还有很多不同的子产品，它们彼此差异很大。

Yeah. It was like in a way something that looked pretty good and like you know how agencies like to put it on some banners, ad banners where it's very clean. You just put something that's visually nice but it doesn't necessarily tell the story that maybe you want to tell on a very specific page. You know, our product is pretty massive and so we have a lot of different sub-products. You might not think of when you think of ElevenLabs, you might think of just voice cloning and voices, but a lot of different sub-products and they're all very different from each other.

所以我们试图弄清楚如何利用所有这些。我实际上是从智能体开始的，那是我最早的大项目之一，我们有机会尝试一些新的品牌系统，并找到使用它的方法。我们从中得出的一个结论是，保留现有的 ElevenLabs 设计，而不是完全抛弃它，但你可能想到的是极简主义、非常干净整洁的布局，大量留白。现在我们有了这些漂亮的视觉效果，有 cliny 图案在视觉上连接语音，还有漂亮的玻璃效果。所以我认为这是我们采纳并尝试结合到不同资产中的东西。例如，这个是为智能体设计的，AI 智能体，或者当时叫对话式智能体，但有很多名字。这是我们尝试应用这些颜色的地方。所以你可以从最开始看到这部分，而且我认为这些页面大部分都是在线可访问的，你可以去看看。上面有很多非常棒的交互，讲述着故事，但这一部分是动画的，这些是新的资产。每个都是一个视频，展示不同的用例，这就是我们最初尝试的方式。是的，那就是那个模式。所以我们尝试结合 cliny 图案，一些情绪化但仍然干净的图像，带有模糊效果和一点颗粒感。是的，这是第一次实现，我们的第一次尝试。

So like trying to figure out how to use all of that. I actually started with the agents and it was one of my first big projects where we got to play with some of the new branding system and try to find a way to use it. Something we took out of that was taking maybe the existing ElevenLabs, not fully throwing it out, but you probably think about a minimalist, really nice clean layout, a lot of white space. And now we have these nice visuals, we have cliny patterns to connect with the voice a little bit visually, and then we have nice glass effects. So I think this is something that we took and tried to combine in different assets that we use. For example, this one was for agents, AI agents, or back then it was like conversational agents but multiple names. This is where we try to apply some of these colors. So you can see from the very start, this part, and I think most of these pages are live so you can go and check them out. A lot of really nice interactions on it that tell the story, but this part is animated and these are new assets. Each of them is a video showcasing different use cases, and this is how we tried in the beginning. Yeah, that was that pattern. So we try to combine cliny patterns, some of these moody but still clean images with blur effects and a bit of grain. Yeah, this was the first implementation, our first try at it.

我真的很喜欢这个英雄区域，因为它感觉非常干净和熟悉，你知道那就像 sassy 布局，只是顶部有来自页眉的构图。这相当新颖。我不常见到这种实现。

I really like this hero section because it feels very clean and familiar, and you know that's like the sassy layout except you have the composition up top coming from the header. That's pretty fresh. I haven't seen that implementation very often.

这是一个有趣的过程。我们尝试了很多不同的布局，对吧？所以对于这个，这是一个几乎在上线前很晚才做的改动，老实说我很高兴我们做了这个改动。所以从概念上讲，你作为用户登陆这个页面，然后有三个不同的交互层来理解整个想法，因为核心是对话式的。所以有很多语音交互。如果你只是登陆页面，你看不到这些，你必须点击某个东西。所以第一件事是尝试在聊天中可视化对话，特别是工具调用。这样智能体可以检查订单状态并做类似的事情。所以这作为第一次交互发生。这样你就能大致了解发生了什么。然后底部这部分总是有大约五个视口高度可见，大约 5% 到 10% 的高度总是保留。所以你知道这不会被截断，或者你只看到顶部这部分然后 CTA 被截断之类的。然后这是第二层，试图解释我们做什么以及对话式智能体做什么。这些是你可以播放的视频。你可以听到音频。但这些仍然是被动的，对吧？所以此时你只是在观看视频，但你已经可以看到智能体可以做很多不同的事情，无论是作为客户支持智能体，还是在游戏中作为角色，你已经理解了很多东西。第三层是你在这个视图中看不到的，但有一个始终存在的浮动小部件，与传统的 ElevenLabs 小部件略有不同，它集成到页面中，这个是为了让你自己说话和体验。所以这需要最大的努力，因为你必须点击并说话，你可能不在合适的地方说话，但一旦你做了，你会真正被说服。你可以真正体验智能体和语音质量等等。所以这就是背后的想法，只是演示产品，保持简洁。

It was a fun process. We tried a lot of different layouts, right? So with this one, this was something like a very late change almost before going live, and I'm very happy that we did that to be honest. So from the concept, you land on this page as a user and then three different layers of interaction and understanding what the whole idea is, because the core of this is conversational. So there's a lot of voice going on. So you cannot see that if you just land on the page, you have to click on something. So the first thing is try to visualize the conversation in chat and specifically tool calling. So that the agent can check the order status and do different things like that. So this happens as the first interaction. So you kind of get an idea of what's happening. And then this bottom part is always like five viewpoint height visible, there's about 5 to 10% of height that is always reserved. So you know this is not cut off or you only see this part on top and then have CTA being cut off or anything like that. And then this is kind of the second layer of trying to explain what we do and what conversational agents do. These are videos you can play. You can hear the audio. But these are still passive, right? So you're just watching videos at this point, but you can already see that the agent can do so many different things, be it as a customer support agent, in gaming as a character, and you're already understanding a lot of things. And the third layer is something you cannot see in this view, but there's a floating widget that is always present, a little different from the traditional ElevenLabs widget that is kind of integrated into the page, and this one is for you to talk and experience this yourself. So this takes the most effort because you have to click and talk, and you might not be in the right place to talk, but once you do, you will be really convinced. You can really experience the agent and the quality of the voice and stuff like that. So that was the idea behind that, to just demo the product, keep it clean.

我能快速深入探讨一下那个组件吗？因为如果没有所有这些交互性，它可能会显得平淡，而在很多方面，它的移动方式和展示内容正是设计的质量所在。所以跟我谈谈你是如何探索交互的。你与开发人员的合作有多紧密？你是自己制作原型吗？这部分流程是如何运作的？

Can I go a little bit deeper into that component really quickly? Because it could land kind of flat without all that interactivity, and in many ways how it moves and what it shows is kind of the quality of the design. So talk to me a little bit about how you're exploring the interactions. How closely are you working with developers? Are you prototyping those yourself? Like how did that part of the process work?

是的，我们有不同的方法。我们实际上与开发人员合作非常紧密。我算是半技术型的，所以我可以进入代码并自己摆弄一下，这也是我在这个步骤中做的事情。但它是如何开始的呢？我们有一个想法。通常我们在 ElevenLabs 的时间线很短。我们没有时间创建大量不同的原型，并原型化许多不同的交互和动画。我很幸运能与一个非常有才华的团队合作，他们可以接受一个设计，真正理解它并明白应该发生什么。所以我们紧密合作来打磨它。对于这个，我们有几种不同类型的动画。我们有在代码中构建的编码动画，这就是其中之一。那里总是有协作。我可能会跳进代码，尝试摆弄小交互，或者尝试打磨一些缓动曲线或动画的顺序，看看发生了什么。所以我们就这样合作，直到它达到一个点，直到我们觉得它到位了，可以发布了。这个很棒，因为它是用代码构建的。你可以本地化文本。我们在不同的页面中使用它，也有 SEO 用例。所以我们使用一个叫做 Payload 的 CMS。所以这是一个组件。我们可以直接选择这个组件，说“我想要这些聊天”，然后它会动态创建聊天，这真的很棒。

Yeah, there are different ways that we go about it. We work actually pretty close with developers. I'm semi-technical so I can go into the code and play with it a bit myself, and it's something that I was also doing at this step as well. But how it starts is we get an idea. Normally our timelines at ElevenLabs are pretty short. We don't have the time to create a ton of different prototypes and prototype a lot of different interactions and animations. I'm lucky to also work with a really talented team that can just take a design and really pick it up and understand what's supposed to happen. So we align pretty closely to polish this. With this one, we have a few different types of animations. We have coded animations that are built in code, and this is one of them. There's always a collaboration happening there. I might jump into the code and try to play with the small interactions or try to polish some easing curves or the order of animations, what's happening. And so we kind of collaborate on that until it hits a spot and until we feel it's there, it's ready to be released. This one is awesome because this one is built in code. You can localize the text. We use that in different pages and there's an SEO use case as well. So we use something CMS called Payload. So this is one of the components. We can just pick this component and say 'I want to have these chats' and then it will create dynamically the chat, which is really awesome.

是的，那真的很酷。

Yeah, that's really cool.

在此之前，我们实际上也为这个探索了 Framer。所以我甚至有一个稍微不同的 UI，但第一个版本是在 Framer 中构建的。在我们这种情况下使用 Framer 的一个小缺点是，你不能使用语音，而在我们的情况下，语音对于这个小部件来说也非常重要。我们选择了内置代码，我们还有一些其他例子，我会展示一些图形或视觉部分，它们是在 Rive 中构建的，还有一些其他东西，比如视频。有些我自己做，但大多数时候我们有视频设计师在制作大量很棒的视频。

Before that actually we explored Framer as well for this one. So I even had a little different UI for this, but the first version built of this was in Framer. A little drawback of using Framer in our case is because you cannot use voice, and in our case voice is also pretty important for this widget. We went with built-in code and we have some other examples that I would show where we have some graphics or some visual parts that were built in Rive and some other things, like the videos. Some of them I do myself sometimes, but most of the time we have video designers that are creating a lot of awesome videos.

最近我们更深入地构建了许多这些小部件和代码，以实现那种锐利度并完全控制动画。你可以看到我们是如何尝试使用粘土图案的。我们很快意识到，如果你试图放置很多这样的图案，即使形状不同，并用于每个图形，也会变得非常杂乱。所以你不会想在每个 UI 镜头或每张图片上都用这个。但我们有几个不同的变体。我们在玩大小不同的图案和不同的镂空效果。在这个例子中，你可能看不太清楚，但这里部分是模糊的，这里部分是不模糊的。我们也在玩模糊效果。

Lately we try to go a lot more into building a lot of these widgets and code to achieve that sharpness and have all that control over the animation. This is how you can see how we're trying to use the clay patterns. Something we realized pretty soon is that if you try to put a lot of these patterns, even if you have different shapes and use them for every single graphic, it becomes really overwhelming. So you don't want to use this for every single UI shot or every single image. But we had a few different variants. We were playing with smaller and larger patterns, different cutouts. In this case, you can't see it so well in this example, but this part is blurred, this part would be unblurred. Playing with the blurs as well.

你还建了一个网页生成器来创建这些？

And you built like a web generator to create those.

我们把它作为实验过程的一部分，用来观察粘土图案的表现，因为品牌设计工作的一部分——我最初给你看的一些粘土图案被简化了很多。当简化到一定程度时，它们会失去那种数学感和精确感，变得像随机的斑点。所以我们试图找出它们在数学上实际的样子。这部分玩起来很有趣。

We built that as part of the experimentation process to see how clay patterns behave, because part of the branding exercise, one of the first things I showed you were clay patterns that were a lot simplified. At some point when you try to simplify them a lot, they lose that mathematical feel and the accuracy feel, and they kind of feel like random blobs. So we're trying to find how they actually look mathematically. So we have this part that is pretty fun to play with.

太酷了。

That's so cool.

基于粘土图案的数学行为，你可以用不同方式操控它们，这真的很棒，比如线条粗细。你可以看到这就是我们最初的效果。上面叠加了一点噪点效果。还有模糊，但模糊只出现在图像的部分区域，这产生了很酷的效果。比如我们在这里玩的东西。所以你不必总是展示整个图案。你可以只取图案的一部分，取一个角落，放大它，然后就会产生一种很酷的效果，图像的一部分非常清晰，另一部分则不然。

And based on the mathematical behavior of clay patterns, you can play with them and control them in different ways, which is really awesome, like thickness of lines. You can see that's the kind of effect we started with. There's a bit of noise effect overlaying. There's a blur, but blur only on parts of the image, and that creates a pretty cool effect. Something we play with here, for example. So you don't always have to show the whole pattern. You can take just part of the pattern, take the corner, zoom that in, and then you have a really cool effect where part of the image is very visible, part is not.

是啊，太棒了。而且可以看到对之前展示的品牌手册的玻璃质感呼应。

Yeah, it's amazing. And you can see the glassy nod to the brand book that you showed earlier.

这感觉独特而棒，非常接近我们追求的品牌感觉和氛围。所以我们从那里开始，并尝试玩它。我们还有一些版本只有粘土图案，这是我们的第一页。我正在浏览一些例子。这也是一个很有趣的部分，比如开发者部分，我们试图让它看起来更技术化。所以它看起来和其他部分有点不同。计划是当我们最终构建开发者页面时也这样做，那个页面还没有完全按照新品牌构建。我等不及了，因为我觉得那会非常有趣。但这里这部分，如果你查看网站，它是动画的。所以这部分是动画的，这部分完全用 Rive 完成。

This felt unique and awesome, something very close to the brand feeling and vibe we're going for. So we started with that and tried to play with it. We also had versions where you would only have the clay pattern, and this was our first page. I'm just going through some of these examples here. This was a very fun section too, like the developer section, and we tried to make it look a bit more technical. So this can look a little bit different from the rest. The plan is to do the same whenever we end up building the developer page, which isn't fully built yet with the new brand. I can't wait because I think that's going to be really fun. But this part here, if you check the website, it's animated. So we have this part animated, and this part is fully done with Rive.

嗯，做这个太棒了。

Uh, so that was awesome to work on.

所以我们混合使用了代码、Rive 和一些视频。也很早就意识到不能只依赖粘土图案作为唯一的视觉元素。所以我们试图找到平衡，并找到创建一些图形的方法。一部分是放一些产品截图，但考虑到所有复杂性，我们不想让 UI 过于复杂。所以试图简化图形，找到平衡，同时保持干净，匹配整个网页的美学。在某些情况下，我们也想有一些不属于 UI 的图形。所以这是我们最初尝试的事情之一，我们有一些等距的、技术性的、基于线条的插图。这个很有趣，因为你在网站上可以点击它。酷。所以那也很酷。

So we have a bit of a mix where we use code, Rive, and some videos. Also realized pretty early on that we could not solely rely on clay patterns as the only visual element. So we're trying to find a balance and also find a way to create some of the graphics. One part would be to have some product shots, but with all the complexity, we did not want to overcomplicate the UI. So trying to simplify the graphics a little bit and find the balance there, while still keeping it clean and matching the whole aesthetic of the web page. In some cases, we would also want to have some graphics that are not part of the UI we want to show. So this was one of the first things we tried, where we have these isometric, technical, line-based illustrations. This one is fun because you can click on it on the website. Cool. So that was pretty cool too.

周围的虚线对我来说真的很出彩，让它们相当独特。

The dotted lines around it really make it for me. They make it quite unique.

是的，谢谢。那仍然保留着，我也很高兴。网上可以看到很多种线条作品，但虚线用得不多，这从视觉上带来了技术感。好的，我可以再给你看几个例子，我们在尝试不同的线条作品和一些抽象图形。

Yeah. Thank you. That was something that is still there, which I'm happy about too. There are a lot of kinds of line work that you can see online, but dotted lines are not so widely used, which gives a technical look from here. Okay, I can show you a few more examples that we are trying, playing with different line works and a bit of abstract graphics.

是的，这已经进入了更技术化的感觉。我们也很早就意识到，一部分是如何将那种声音的感觉带入品牌核心。但第二部分也是技术部分。我们不想让它过于技术化，或者看起来只面向开发者，因为产品非常广泛，整个公司的核心是研究。所以我希望确保这一点得到体现，这就是我们最终探索这种美学的原因。接下来的一个项目，你可以看到它仍在玩类似的美学，但正在发展。那是第二页，我们所有着陆页和网站设计语言的核心理念是，在开发所有这些部分和页面时，我们试图构建一个系统。这关乎设计独特性，但也关乎构建一个系统，确保所有组件在一定程度上可复用。我们有很多页面不仅用于功能页面，还用于 SEO 和其他一些非常具体的项目。所以从一开始，我们就将所有这些东西构建为组件，这也是思考过程的一部分。但当我们进行时，当然每个产品都如此不同。所以英雄区域是我们试图做一些不同、有趣的事情的地方。这实际上是 Nev 的一个非常棒的主意，这部分是一个轮播，你可以与之互动并立即播放所有音乐演示。

Yeah, and this is already getting into that more technical feel. We also realized pretty early on that one part was how to bring that feeling of the voice and put it in the center of what the brand is. But the second part was also the technical part. We did not want to make it too technical or make it look like it's only made for developers, because the product is so wide, and at the core of the whole company is the research. So I wanted to make sure that it's reflected, and that's how we ended up looking into this aesthetic. One of the next following projects, you can see it's still playing with a similar aesthetic but how it's developing. So that was the second page, and the whole idea with all of our landing pages and the design language on the website is, as we're developing all these sections and pages, we're trying to build a bit of a system. It's about design uniqueness, but also about building a system to make sure we have all these components that are somewhat reusable. We have a bunch of pages that are used not only for feature pages but for SEO and some other very specific projects. So from the very start, we built all of these as components, and that was part of the thinking process as well. But as we're going through this, of course, every product is so different. So the hero section is where we're trying to do something a little bit different, something fun. And this was a really awesome idea from Nev actually, where this part is a carousel and you can interact with it and play all the demos of the music right away.

我进入这个页面时做的第一件事就是拿起光标，抓住它旋转，感觉棒极了。

The first thing I did when I got on this page, I just took my cursor, I just grabbed it and spun it. It felt great.

我喜欢这个。我喜欢这个组件。是的。而且，如果你播放音乐，我的意思是它太不可思议了，对吧？听起来多棒。

I love this one. I love this component. Yeah. Also, if you play the music, I mean it's incredible, right? How awesome it sounds.

这又是另一个疯狂的部分，从可以成为独立公司的智能体，到还能告诉你公司背后研究质量的音乐页面。我们经历了这部分，再次尝试加入更多技术感，以及 UI 中的这些小片段，它们有动画效果，然后通过一些故事叙述来展示生成一首歌并经历几个版本的过程。我们已经开始使用分隔符，并尝试如何在视觉上分组各个部分，因为这一直是个棘手的问题。很多时候你可能需要一个居中标题，或者左对齐标题，然后整理该部分内的所有内容，而背景非常干净、白色，分组起来有点棘手，对吧？所以我们想出了一个简洁的系统，使用分隔符，比如虚线，加上部分的标题，这在最初的页面中用过，也延续到了音乐页面。我们在这里也用了它。而这一部分，做起来真的很有趣：左侧是滚动内容，右侧是固定的，并且被裁剪了。所以当你滚动时，不同的图形部分会滚动过去，然后你还能看到另一个不同的用例，其中有一些噪点。它是玻璃噪点、碰撞图案和一些情绪化图像的组合。这里的视差实现可能是整个页面中我最喜欢的部分。但同样，这是那种你可能有想法，但很难脱离矢量图和 Figma 来实现的东西。这是那种你需要向开发者推销想法的情况吗？比如，“嘿，如果它这样工作会怎样？你能试试看，我们感受一下效果吗？”你能做出原型吗？你是如何把这样的东西变成现实的？因为这是一个非常不直观的实现，但它完全有效。

That is another part how crazy it is, you know, going from agents that could be its own standalone company to music that also tells you like the quality of the research behind the company. We went through this part and again we'll try to play with a bit more kind of technical feeling and these little snippets from the UI and they kind of animated and then going through a bit of storytelling of generating a song and going through a couple versions. We already started playing with separators and trying to see how we can visually group the sections because it's always a tricky part, you know, how to visually group the sections. Often times you might need to have a center title or you might have to have a left-aligned title, then you sort all of the content within the section, and with having the background really clean and white, it was kind of tricky to group them, right? So we came up with a neat system of using separators like the dotted line, we have the title of the section, and that's something that we used in the first pages and it also went to the music page. We use it here. And in this part, this one was really fun to work on: the left side is kind of scrolling through and the right side is sticky and this is clipped. So as you scroll, different parts of different graphics are scrolling through, and then you can also see again a different use case where we have a bit of noise. It's a combo of glass noise, colliding patterns, some moody images. This parallax implementation here is probably my favorite part of this entire page. But again, it's one of those things where maybe you have the idea, but it's kind of hard to bring to life without getting out of just vector and Figma. Is that something where you kind of have to pitch the idea to a developer and be like, "Hey, what if it worked like this? Can you just try it and we'll see how it feels?" Were you able to prototype it? Like how do you bring something like this to life? Because it's a very non-intuitive implementation, but it totally works.

是的，这就是有趣的部分。我的意思是，在 ElevenLabs，每个人都乐于构建有趣的东西。所以，很多时候，当我们不确定这在技术上是否可行——我不会说是否可行，一切基本上都是可行的，对吧？——但就我们而言，如果它在技术上是否可实现还不确定，那我们就会快速做个原型。所以，团队很棒。向 Gerge 和 Brad 致敬。我们只是快速尝试制作原型，如果合理就继续，最后一步是打磨所有东西。我有时也会参与编码。老实说，我知道在过去，推销某个东西，无论是产品还是网站，推销某种交互，通常都很棘手，但我认为团队非常渴望构建很棒的东西。

Yeah, that's the fun part. I mean, at ElevenLabs, everyone is really down to build something fun. So, often times when we are not sure if it's technically feasible—I wouldn't say feasible, everything is pretty much feasible, right?—but if it's technically achievable or not in our case, then we kind of try to prototype it real quick. So, awesome team. So, Gerge, shout out, and Brad. So we just try to quickly go and prototype this, and if that makes sense, we continue, and then the final step would be polishing everything. I would jump in the code sometimes. So to be honest, I know often times in my past as well, it would be really tricky to pitch something, whether it's a product or just a website, to pitch some interaction, but I think the team is very eager to build awesome stuff.

是的，答案往往归结为你只需要和在乎的人一起工作，这太棒了。没错。老实说，网上有很多有趣的例子。所以你经常会看到一些灵感，然后我们觉得，好吧，这些人用这种方式做到了，那我们肯定也能做点什么。所以网上的灵感让事情容易多了。

Yeah, it's amazing how often the answer comes down to you just have to work with people who care. Exactly. And to be honest, you know, there are a lot of fun examples online. So often times you would see something as an inspo and we kind of see okay, these guys did that this way, so we can for sure do something as well. So there's some inspiration online that makes it a lot easier.

在那之后，我们开始思考，在某个时候，我们内部团队偶然尝试了网格系统，看看还能做些什么来进一步提升。所以我们最终采用了网格系统，为页面添加更多线条。然后我们做了几个版本，几种页面风格，现在我们就坚持用这些。这已经是 Studio 3.0 的东西了。你可能在网上见过，而且你已经看到这个版本有点不同。所以这算是我们流程的下一个版本，我们可能还得回去清理一些之前的页面，以确保保持一致性。但这已经更接近我们的最终外观了，你仍然有英雄区域来推销功能，因为每个功能都非常不同。我们已经有了这个有趣的网格，对吧？这有助于我们分隔各个部分。例如，另一个页面有类似的概念，右侧固定、左侧可滚动，我们这里也有类似的概念，但我们已经使用了网格，还有一些 Bento 网格，以及一些我马上要展示的视觉效果，这也是另一个有趣的部分。

After that we started thinking, you know, at some point we stumbled upon internally in the team experimenting with the grid system and trying to see what else we can do to even step this up even more. So we landed eventually on the grid system to add more lines to the page. And so we did a few more versions, a few more styles of the page that we are sticking to now. So this is something already with Studio 3.0. Maybe you've seen that online, and you already see that this one is a little different. So there was kind of a next version of our process, and we'll have to probably go back and also clean up some of the previous pages to make sure we keep the consistency level. But this is something already closer to our final look, where you still have the hero section that serves as the place to sell the feature, because every feature is really different. We already have this interesting grid, right? So that helps us separate the sections. For example, where the other one had a similar concept of right side sticky and left side scrollable, we have a similar concept here, but we are already using grid, some bento grids as well, and some visuals that I'm going to also show you in a second, that's also another fun part of it.

我喜欢这些图像的用心程度。所有内容都非常符合品牌调性且连贯。

I love how intentional the imagery is. Like all of it is so on brand and cohesive.

是的，这是另一个挑战。我们非常想展示 UI 的部分，但不想过度复杂化。仍然坚持确保它符合页面的 UI，并稍微简化。所以我们有意去掉了一些在产品中重要但在营销网站上可能不那么关键的噪音。这就是为什么其中一些有意简化了。它现在也有了一点真实的外观。所以，这不是纯白色，而是有点灰的背景色。

Yeah, that's another challenge. That's something that we really wanted to show parts of the UI but not try to overcomplicate it. Still stick to make sure it fits the UI of the page and simplified it a little bit. So we try to intentionally cut off some of the noise that is important in the product but maybe not as crucial on the marketing website. So that's why some of these are intentionally a little bit simplified. It also has now a little bit of an actual look. So, this is not purely white. This is a bit of a grayish background color.

哦，是的。你说得对。我正在滚动这个页面。

Oh, yeah. You're right. I'm scrolling this right now.

是的。这是一个非常有趣的效果，因为它有助于让一些图形突出。所以，如果我们有时使用白色，以及图形中的一些元素，或者我们有一个次要按钮或开关，并且有轻微的凸起效果，那么我们就使用白色填充，这会让整个元素更突出一点，这是一个相当不错的效果。

Yeah. Which it's a really interesting effect because then it helps some of the graphics stand out. So, if we use sometimes, you know, white color and some of the elements of the graphics or we have a secondary button or a toggle and we have like a slightly elevated effect then we use like white fill and it makes the whole element stand out a little bit more, which is a pretty nice effect.

是的。所以我们又看了几个页面。有很多。你刚刚完成的网页设计工作量让我意识到。过去 15 年我每天都在设计产品，但在过去 6 个月里，一切都变了。有了 AI 的加入，我比以往任何时候都更快地产生想法。但如果我无法获得让团队对齐所需的反馈，这一切都无关紧要。而目前获取异步反馈仍然很糟糕。所以我正在构建我一直想要的产品，它叫 Inflight。我每天都用它来分享想法并从团队获得反馈，它彻底改变了我的工作方式。所以我很兴奋地向你展示。目前我只向 DiveClub 听众开放访问权限。所以请访问 dive.comclub/inflight 来获取你的名额。

Yeah. So, we went through a few more pages. There's a bunch. The scale of the amount of web design that you just did dawned on me. I've been designing products every day for the last 15 years, but in the last 6 months, everything has changed. With AI in the mix, I'm cranking out ideas faster than ever. But none of that matters if I can't get the feedback that I need to get the team aligned. And right now getting async feedback still kind of sucks. So I'm building the product I've always wanted and it's called Inflight. I use it every day to share ideas and get feedback from the team and it's totally changing the way that I work. So I'm excited to show you. Right now I'm only giving access to DiveClub listeners. So head to dive.comclub/inflight to claim your spot.

好的，那我们稍微退一步，因为你有很多已经上线或即将上线的精美作品。我们能不能快速深入探讨一些最终没被采用的设计，聊聊原因，看看这些成品背后的一些混乱过程？

Okay. So, let's take a step back here because you have an incredible amount of polished work that either has shipped or is shipping. Can we just duck down a rabbit hole really quickly of some stuff that didn't make it and talk about why and look at some of the mess behind the scenes of these finished concepts?

我们即将重新设计文本转语音页面。所以，我先给你看最终版本，然后是之前的版本，这样能多一些背景。这个页面，我们想解释、展示并演示我们的语音转文本和声音。现在，如果你打开页面，可能会看到一个全能框，我们叫它这个部分。但网站上旧的版本，问题是它首先是一个文本框，然后你得输入文本，再选择声音，最后点击播放。步骤太多了，对吧？所以我想让演示所有声音变得更简单，而这正是整个文本转语音的核心。我们有超过 5000 种声音，非常逼真且出色。所以演示必须尽可能简单。

We are about to redesign the text to speech page. And so, I'm just going to show you first our final version and then the version before that to kind of get a bit more context. This page, we're trying to explain and show and demo our speech to text and our voices. So we have now, if you open the page now you might see an omni box, what we call like this part here. But the older version we have on the website, but the problem is you have to, you know, it's kind of like a text box first and then you have to type in the text and then you have to select the voice and then click play. So it takes like too many steps, right? So I want to like make it easier to demo all of the voices and that's kind of the core of the whole text to speech. We have like over 5,000 voices and they're really humanlike and awesome. So this has to be as easy as possible to demo, right?

所以，我最初确定的版本来自其他页面的几次迭代。我们做的企业页面非常棒，就是在那时我们确定了这个方案。我展示一下背景，这样更清楚。我们想出了这个概念：一边是你在应用和产品中看到的，另一边是输出和用户交互的内容。所以我们会展示 AI 智能体以及你在产品中看到的，然后是最终输出。如果是创意平台，你会看到创意平台、应用内的内容，以及输出——这里我们会展示一个带配音和旁白的视频。我喜欢这种分屏概念，我们在此基础上继续构建，这也是我在这里使用的第一个想法。所以当用户进入这个页面，立刻就能看到所有声音，有一个声音列表。你可以直接播放，右侧可以看到结果，你可以播放它，或者点击编辑。

So, the first version I landed on came from a few iterations from other pages. We work on the enterprise page that was really awesome and that's where we landed on this. Maybe I'll show you for context so it makes more sense. We came up with this concept: on one side you have like what you see in the app and we see in the product, and the other side you see the output and what the user interacts with. So we would have the AI agents and what you see in the product, and then the final output. And then if you have the creative platform, you would see a creative platform, what you see in the app, and then the output, which would be in this case we would show a video that is dubbed and with voiceovers. So I like the split screen concept that we then built on, and that was like my first idea to use that here as well. And so it would land on this page and right away you would see okay, you would have all the voices, you have list of voices. You can play right away and on the right side you can see the result and you can play it or you can click and edit.

但我们收到的反馈很有道理。右侧的视觉重量很大。你进入页面时，眼睛会先落在这里，这也许不算太糟，因为这是选中的声音，但你可能需要一秒才能意识到这个部分与左侧的声音相关联。

The feedback we got though made a lot of sense, right. So like there's a lot of visual weight on the right side. One of the first things you land on this page, your eyes will land here, which might be not so bad because it's kind of the voice that's selected, but it might take like a second for you to connect that this part is linked to a voice on this side.

所以视觉上，视觉重量低了很多。

So like visually the visual weight is a lot lower.

嗯，所以你可能需要一秒才能发现，哦，我可以点击这里进行交互。而且，在我的最初概念中，有些东西对我来说很有道理，比如你可以尝试悬停在这个部分。是的，那会是一种交互。但缺点是，这个部分看起来不太像可交互的，对吧？所以视觉重量失衡了。于是我尝试了几个版本，试图让它看起来更像我们现在有的全能框。你可以点击并与之交互，就像这样，也更接近现在的样子。是的，这算是初始想法。然后你悬停时，会有一个小小的变形效果，然后进入……

Um, so it might take a second for you to like find out that okay, I can click on this to interact here, and then something again that you know in my concepts first for me made a lot of sense, right? That you know you can try to hover over this part. Yeah. Okay. That would be an interaction. But the downside was that you know this part here is not so it doesn't look so interactive, right? And so like the visual weight is off. So I try to play with a few more versions, you know, try to make this look a little bit more like an omni box that we have now. You can click and interact with this something like this where also like a little bit closer to what we have now. Yeah, this was kind of the initial idea. Then you hover over, you have a little morphing effect and you land on the, you know.

嗯，这很酷。

Yeah, that's cool.

让你知道它是可交互的。然后我们确定了这个版本。整个背景让你看到整体都在焦点上，你的眼睛会落在整个卡片上。左右两侧的视觉重量相同，所以视觉上它们更连贯。你可以点击左侧播放音频，点击右侧更改文本、重新生成，从而看到这些不是一次性效果，你自己也能感受到声音真的很逼真。

Let you know that it's interactive. Then we landed on this. You know, the whole background lets you see that the whole thing is in focus and your eyes land on the whole card all together. And the left and right side, they have the same visual weight. So, you know, visually they're more connected. So you can click on the left side, play the audio, you can click on the right side, change the text, regenerate to like kind of see that, you know, these are not some one-off shots and you can see yourself that the voices are like really humanlike.

这也让网格更扎实了。第一个概念中那个非常突出的渐变框，实际上在网格内缩进了 12 像素或 8 像素，视觉上稍微打乱了线条。而这个版本两侧都有完美的强边缘。所以我理解你为什么最终选择了这个方案。

It kind of grounds the grid more too, like something from the first concept when you have the really prominent gradient box, but it's actually indented inside of the grid by like whatever it was, 12 pixels or 8 pixels. And so it just like visually throws off the lines just a by a little bit. Whereas this really like you have that perfect strong edge on both sides too. So I see why you landed on this concept.

嗯，这个模式你可能会在我们很多其他页面上看到，有些已经上线，有些即将推出。说实话，我们很快就确定了这个模式。实际上我们已经建立了一个相当不错的系统，我可以回头给你看更多我们着陆页的版本。但在每个页面的每次迭代中，我们都会尝试所有区块，看看它们是否有效。如果某个区块有效，我们满意，就会想办法以某种方式复用，比如增加一些变化，让它们变得可交互。所以我构建的很多东西，

Well, it's a pattern that you're probably going to see on a lot of other pages from us that are already live and then that are going to be coming out. And the rest to be honest, we kind of land on it pretty soon. So we actually have already built like a pretty decent system and I can go back and show you like a few more versions of the landing pages that we have. But as we go through each page in each iteration, we try to experiment with all of the sections and see if they work. And so like if you pull a section and it works and we're happy with it, we're going to try to find a way to, you know, reuse it in some way like add a bit of variance to it, make them interactive. So, a lot of these things that I kind of built,

听你说话，我最大的收获是你不只是在设计网站。你是在设计一个非常强大的系统，用来展示无数个网站，并找出在所有不同用例中都有效的主题、组件和模式。这是一个有趣的挑战。这种规模是我以前在网页设计中没有遇到过的。我看得出来你乐在其中。这不只是看一个功能，无论是产品设计还是网页设计。你试图不把单个页面或功能孤立看待，因为产品不是那样构建的，它们不是那样运作的，技术上也不是那样设置的，对吧？所以技术上的设置方式是，你有组件和系统。你必须时刻牢记这一点，作为设计师，我百分之百相信这一点。而这正是有趣的部分，对吧？所以不仅仅是构建一个按钮或一个区块。你试图想象未来可能构建的任何东西，以及如何应用它。它不会百分之百完美，但你会思考一个组件，带有几个变体，可以应用并在多个地方复用，这样你就有了一致性，但当你稍微定制它们，放入不同的内容、不同的动画或图形，你就有了独特的外观。

That's been like my takeaway listening to you talk is you're not just designing websites. You're designing this really robust system to display infinite number of websites and trying to figure out all the motifs and components and patterns that work in all those different use cases. It's a fun challenge. Like, this type of scale is something that I haven't worked on in web design before. And I can tell you're having a lot of fun with it. It's not only looking at like one feature, one whether it's product design or web design. You're trying to see like this one page or one feature isolated from everything else because like that's not how that's not how products are built. That's not how they work. That's not how they're technically set up, right? So how you technically set it up is you have components and you have systems. So you have to always keep that in mind and as a designer that's what I believe 100%. And that's the fun part of it, right? So it's not only about building one single button or one single section. You're trying to imagine whatever you might build in the future and how that can be applied. It will not be 100% but you kind of think of one component with a few variants that you can apply and then like reuse in multiple places and so you have the consistency but once you customize them a little bit, you put a different content inside, different animation or graphic, and then you have like a unique look.

我想把视角拉远，多了解你的故事和职业经历。

I want to zoom out and get more of your story and career journey that kind of a thing.

但在继续之前，为了确保我们覆盖全面，有没有什么你特别自豪或想向我们展示的东西？

But before we move on, just to make sure we cover our bases, is there anything that you're particularly proud of or that you want to show us today?

这是我们最新的页面之一。我们经历了一些过渡，过程中有很多挑战，但最近我们真正找到了感觉，对最终成果感到非常开心。团队里有 Brad，他也参与过 Tailwind 的开发，所以我们的营销网站也用了 Tailwind。我们开始真正享受这个过程，用代码构建了很多酷炫的东西。其中一个很棒的地方是，你可以看到背景中的渐变和噪点不再是静态的，而是动态变化的。当你切换时，有一个深度图让我们可以给图像添加动画，效果非常棒。

One of our latest pages, right? So, we had a bit of a transition, right? There were a lot of challenges along the way to really get there, but I think lately we've been really feeling it and having a lot of fun with what we ended up with. We have Brad on the team who also worked on Tailwind. So, we also use Tailwind for the marketing website as well. We're starting to really play with this and enjoy the process, and build a lot of cool things in code. One of the awesome things here, as you can see, the transition like this gradient that we set up in the back, the noise, it's no longer static. It's been morphed now. So, once you transition, there's some depth map that allows us to also animate the image, which is really awesome.

太美了。介绍一下这些便当盒式区块吧，我们会在很多不同地方复用它们，当然内容会不同，所以我们开始在那里使用很多动画，非常……

It's beautiful. Walk through these bento sections which we'll be reusing in a lot of different places but of course with different content and so we're starting to use a lot of animations there that are very...

我非常喜欢便当盒式网格，左上角那张卡片的对比度远高于其他卡片。这种模式我很喜欢，看起来很棒。

I'm such a big fan of bento grids where there's one card top left that has a way higher contrast than all of the other ones. That pattern, I'm such a big fan of, looks great.

太棒了，非常感谢。我们真的玩得很开心。这也创造了一种平衡。我们从最初的页面开始，每个功能在传送带页面上都必须有这种颜色。现在我们最终实现了纸感背景、微妙的线条和插图、微妙的动画以及一点色彩之间的平衡，效果非常好。我们有一些很棒的微小交互来帮助讲述故事。它们是用一种很酷的方式构建的，对吧？不是 RIV，全部用代码实现。当你悬停时，它会触发交互，即使你移开鼠标，它也会完成交互并重置，这真的很棒。

Awesome, thank you so much, man. Yeah, we're having so much fun with this. Also, it creates this balance. We started with the first pages where every single feature on the conveyor page had to have this color. Now we ended up with something where we have this balance of paper-like backgrounds, subtle line work and illustrations, subtle animations, and a little bit of color, which creates really nice effects. We have these awesome little interactions that help us tell the story. They're built in a really cool way, right? It's not RIV. It's all built in code, and it lets you, as you hover, place the interaction, and then it always finishes the interaction even if you hover out. It will still finish the interaction and reset it, which is really awesome.

是的，很美。这些图片是你们生成的吗？每个页面似乎都有自己的色彩主题。你们是怎么想到这些的？

Yeah, it's beautiful. Are you generating these images? Like each page kind of has its own color motif going. How are you coming up with those?

我们最初生成了一些不同的背景。我们有一套品牌团队设计的集合。所以有很多云纹图案和背景，大概二三十种。我们会对它们进行混搭。我们可以选择云纹图案和背景，然后进行搭配和调整。

We had a few different backgrounds that we generated initially. We have a collection set that our branding team came up with. So we have a bunch of cloudy patterns, a bunch of backgrounds, maybe about 20 or 30 something like that. We kind of mix and match them. So we can take the cloudy pattern, take the background, pick that, and just play with it and match them a little bit.

好的，酷。我只是好奇。

Okay, cool. I was just curious.

是的，我们还生成了一些这样的东西。你在产品中可能也会看到。它们用于音效。它们还混合了一些抽象元素和调色板，比如这种情绪化的运动模糊也产生了很酷的效果。

Yeah, we also generated a couple of these things. So you might see them in the product as well. They use for sound effects. They also like a mix of a little abstract with a color palette, like these moody motion blur also creates a pretty cool effect.

感谢你带我们领略了你 Figma 中的疯狂，你整合的像素量确实令人印象深刻。我有点想退后一步，多了解一些你的经历。因为即使快速浏览你的 LinkedIn，你在 ElevenLabs 工作，这显然是一家顶级公司，完全以设计作为差异化因素，但你并没有那些知名大公司的背景。你不是从 Airbnb 之类的地方被挖来的。我看着你，受到启发的原因之一是你一直在互联网上展示自己，不断修补，做了很多实验，很明显这在你获得这份工作时起了一定作用。那么，你能谈谈你是如何进入 ElevenLabs 的，以及你为了达到这个目标在职业生涯中采取了哪些不同的方法吗？

I appreciate you taking us through the craziness that is your Figma and the amount of pixels that you're putting together is truly impressive. I do kind of want to zoom out and learn a little bit more about your journey because even just doing a quick glance at your LinkedIn, you're working at ElevenLabs, which is very clearly in that top tier of companies, leans all the way into design as a differentiating factor, and yet you don't have this background of all of these high-profile companies. It's not like you got hired from Airbnb kind of thing. And I look at you and one of the reasons that I'm inspired is you've continuously put yourself out there on the internet and tinkered and have all these experiments and it's clear that's played some role in you landing this job. So can you talk to us a bit about how you wound up at ElevenLabs and the different ways that you've even approached your career to get to this point?

我过去有意不专注于大公司。我刻意留在创业领域，因为对我来说这是一个有趣的过程。构建是整个过程中最有趣的部分，对吧？我想从第一步开始了解公司是如何建立的，不仅从设计方面，还从创始人角度，以及公司结构等等。第二部分也让我能够顺便构建很多想法。我并没有放弃一切去尝试建立一个价值数十亿美元的公司，但我有一些零碎的小想法。你可能也有类似的情况，对吧？所以构建的乐趣，不仅在设计中存在，而且每当你有一个想法并想把它变成现实时，这种乐趣就会出现。我构建过一个文件共享应用。为了尝试电商，比如 B2C，在去年疫情期间，我开始构建更多应用，但后来创建了一个叫 App Stacks 的网站，在那里我会做类似你正在做的事情——与我钦佩的手选创始人以及更多应用创作者交谈。就像 Amy，一点也不无聊。

I intentionally in my past try to focus a little bit not to go to big companies. I intentionally try to stay in startup area because it's a fun process for me. The building is the most fun process of this whole thing, right? I wanted to learn everything about how companies are built from the very first step, not only from the design side but also from the founder side and how the companies are structured and everything like that. But the second part that also allowed me to build a lot of ideas on the side. I've been using that as not as much as dropping everything and trying to build a massive billion dollar company, but I've had some little ideas here and there. That's kind of like you probably have that too, right? So the joy of building, and that's got that in design but also you got that anytime you have any kind of idea and you want to make that idea real. I had a file sharing app that I built. To play with e-commerce like a B2C during corona time last year, I started building more apps, but this created website called App Stacks where I would kind of talk, do similar what you're doing, talk to handpicked founders that I also admire myself, and more like makers of apps. It would be like Amy, not boring.

一点也不无聊，是的。我想我实际上就是通过你和 Andy Allen 的那期节目发现 App Stacks 的。

Not boring, yeah. I think that's actually how I found App Stacks was your piece with Andy Allen.

是的，和 Andy 一起，那很棒，对吧？所以从他们身上学到很多，聊天和建立联系真的很棒。

Yeah, from Andy, it was awesome, right? So you learn a lot from them and it's really awesome to chat and connect.

我们能深入聊聊这个吗？因为这是一个很酷的项目。我们会在节目笔记中链接 App Stacks。你为什么做这个？你是怎么做到的？你是如何下定决心，真正去实现它，而不仅仅是想想而已？

Can we go down that rabbit hole for a second? Because it's such a cool project. We'll link App Stacks in the show notes. Why'd you do it? How did you pull it off? How did you get to the point where you're like, you know what, I'm actually going to do this and make it real and not just think about it.

我当时实际上在做一个叫 Portal 的项目，试图重新思考自由职业。我当时也在做自由职业和自己的项目，自由职业有很多空白。所以我试图构建另一个项目，那时我开始思考……

I was actually working on another project called Portal, where I'm trying to rethink freelancing. I was also freelancing and working on my own projects, and there are a lot of gaps in freelancing. So I was trying to build this other project, and at that point I started thinking...

所以每次你开始构建新产品时，你都会想什么是最好的技术栈。市面上有那么多技术栈，你可以用原生开发，也可以用很多 Web 工具，对吧？有那么多产品可以选择，所以你总是在想哪条路最好。这就是我起步时的想法，也是“Appstax”这个名字的由来。当我开始深入思考时，我发现最有趣的部分永远是应用背后的故事。你不仅想知道那些营销话术或官网上看到的东西，你还想了解一些背景故事。你想知道他们是怎么想出那个点子的。我觉得这非常鼓舞人心，你可以从中为自己的项目和公司学到很多东西。无论你是设计师还是正在做产品，你都能学到很多。我就是这样开始这个想法的，当时我甚至不确定它能不能成功。我只是有了那个想法，然后在一周内，我开始列出一份我想采访并了解他们故事的人的名单。于是我开始给他们发邮件，在 Twitter 上私信，令人惊讶的是，很多人都回复了。几乎我做的每一个故事都有一通电话，几乎所有人都是这样，有些是异步沟通的。在正式发布之前，我大概积累了 30 个故事，那真是太棒了。所以我们和很多很棒的创客和创始人聊过。这个想法其实很简单。我觉得它非常鼓舞人心。还有很多类似的项目，我觉得你所在的类别也是灵感来源之一。有一个叫 Starter Story 的网站，你听说过吧？但他们关注的东西我个人不太喜欢：那就是分享 MRR 的趋势，首先谈的都是你的收入，而不是手艺，对吧？不是产品中的小细节，不是从一个很棒的点子开始，真正关心它，努力打造一个出色的产品，然后把 MRR 作为结果。所以我想确保不谈收入，不谈那些东西，而是更多地谈论设计方面和工艺层面，我认为这在我们的社区里更重要、更有价值。

So every time you start to build a new product, you think about what's the best tech stack. There are so many tech stacks out there, so you can go native, there are so many web tools you can use, right? There are so many products that you can pick, and so you always think what is the best route. That's something where I started with, and that's where the name came from: Appstax. Once I started thinking about it more, the interesting part always is the backstory of apps. You want to know not only the very marketing stuff or whatever you see on the website, you want to see a bit of the backstory. You want to see how they came up with that idea. And that, I thought, was very inspiring, and you could learn a lot from it for your own projects and your own companies. You can learn a lot whether you're a designer or you're building something. That's how I started the idea, and I was not even sure if it was going to work. I just got that idea, and in one week I started creating a list of all the people I would like to talk to and hear all the stories about. So I started just emailing them and DMing on Twitter, and surprisingly a lot of them answered. Almost for every story that I did, there was a call. Almost all of them, some of them were async. I had about 30 stories even before I launched everything, and that was really awesome. So we talked to a lot of awesome makers and founders. The idea was pretty simple. I thought it was very inspiring. There are a lot of other similar projects. I think you in the category were also part of the inspiration. There's a site called Starter Story, if you've heard about them, right? But they focus on something that I don't personally like: that is a trend of sharing MRR, and it's all about your income as a first thing, and not about the craft, right? It's not about the little details in the product, it's not about starting with an awesome idea and really caring about it and trying to build an awesome product, and then having MRR as an outcome of that. So I wanted to make sure not to talk about the income, not to talk about any of that, but more about the design aspect and the craft side of it, which I think is more important and valuable in our community.

我很喜欢，因为你有一种“我就是要做”的态度，你知道，就像“我就是要让它发生”，而且你已经这样做过很多次了，这真的很能说明你作为一个创客和建造者的身份，显然在你自己的旅程中扮演了非常重要的角色。我很受启发。真的。

I love it just because you have this attitude of 'I'm just gonna do it', you know, like 'I'm just gonna make it happen', and you've done that so many times now, and it really speaks to who you are as a maker and as a builder, and it's obviously played a pretty significant role in your own journey. I'm inspired. I genuinely am.

非常感谢。也许回答你之前的问题，嗯，我是怎么发现 ElevenLabs 的，对吧？大概是今年四月左右，对吧？我当时有这么多项目和想法，而且用所有 AI 工具来构建真是太棒了，对吧？你感觉非常有能力。所以我的计划是，我开始做自由职业，全职专注于项目，并在 Twitter 上发布更多内容。Appstax 就是其中一个项目。是的，它有点小爆，按我的标准来说，反响还不错。我有这么多项目，我在想，我怎么能只有一个地方呢？我有这么多独立的网站。我需要一个地方来放链接。那就是我的个人网站。所以我想，让我创建一个非常简单的网站，可以分享并列出我所有的项目。我只是有了一个小想法，很多概念就是这样开始的，对吧？我想你大概也有同样的经历。你在脑海中想到一个很酷的交互或概念，然后你会想，‘嗯，在脑子里挺有道理的，但看看能不能行得通。’之前用的是 Framer 和 Webflow，对吧？所以那个东西是用 Framer 构建的，我想看看我能不能在 Framer 里做到。于是我想出了这个交互，但我想，嗯，让我试试看。想法是我们要有一个非常干净的布局。我挺喜欢那些很棒的小细节，对吧？所以不能失去产品设计的灵魂。所以我总是试图找到一个有趣的概念，至少让我自己满意，并且我也乐意在网上与朋友分享。于是我想出了这个概念，想法是这些都是我的项目，当我悬停时，会有这种有趣的小交互。

Thank you so much. Maybe to answer your question before, um, yeah, how I found ElevenLabs, right? So around April this year, right? I had all these projects and ideas, and it was a really awesome time to build with all of the AI tools, right? So you feel really empowered. So my plan was, I started freelancing and focusing full-time on projects, and I started putting a lot more out on Twitter. So that was Appstax, one of the projects. Yeah, I got some viral, you know, in my terms, and pretty good reception. I had all these projects and I was thinking, how do I need one place? I have all these separate websites. I need one place to just link. And that was my personal website. So I was like, let me just create a very simple website that I can share and list all of my projects. I just got a little idea, and that's how a lot of concepts start, right? So I think you probably have the same thing. You think of some really cool interaction or a concept in your mind, and you're like, 'Yeah, it kind of makes sense in my mind, but let's see if that works.' Framer and Webflow before that, right? So that stuff was built in Framer, and I was like, let me see if I can do that in Framer. So I came up with this interaction, but I was like, yeah, let me give it a shot. The idea was that we have a very clean layout. I'm kind of a fan of awesome little details, right? So not to kind of lose the soul of product design. So I try to always find something like an interesting concept that at least for myself I'm happy with, and I'm kind of happy to share online with my friends. So I came up with this concept, and the idea is these are all my projects, and I hover over and have this little fun interaction.

嗯。

Yeah.

尝试在 Framer 中构建这个效果真是太棒了，而且它居然能工作，这太不可思议了。它的构建方式，在 Framer 里有很多不同的场景，对吧？所有这些状态，我会有所有这些独立的图层，对吧？所以我们只是在悬停时隐藏和显示所有这些元素。设置非常简单，但效果很酷。

And that was amazing to try to build this in Framer, and the fact that it worked was incredible. The way it's built, it's a lot of different whatever it's called in Framer scenes, right? These all of these states, and I would have all of these separate layers, right? So we are hiding and showing all of these things on hover. Pretty simple setup, but it's so cool though.

我记得不久前我还在 newsletter 里把这个作为灵感分享过，因为我太喜欢了。真的很棒。把一个非常好的悬停交互作为个人网站的核心，在我看来是终极操作。这个效果真的很好。

I remember a while ago actually sharing this as inspiration in the newsletter because I liked it so much. Like it's amazing. Just one really really good hover interaction as the core of a personal website is the ultimate move in my opinion. Like this just works so well.

非常感谢。这也是我们试图——我现在在 level lab 也试图继续这样做。我认为你总是想有一个核心交互或“哇”的因素，让人很容易理解你在做什么。一方面，你想让整个页面或整个产品的主题非常清晰。但另一方面，你也总是想带点趣味，对吧？所以这个小部分也是一个自定义字体。

Thank you so much. And that's something that we try to, I try to continue now also at the level lab. I think you always want to have one main core interaction or the 'wow' factor or something that really makes it easy to understand what you're doing. On one hand, you want to make it really easy to understand what the whole page is about, what the whole product is about. But also, you always want to have a little bit of fun, right? So this little part is a custom font as well.

我刚才正想着，我脑子里真的在记笔记。我想，我得检查一下元素，看看他用的是什么字体，因为看起来真的很酷。

I was going to, I was literally making a mental note in my head. I was like, I need to inspect element and figure out what font he's using there because it looks really cool.

有一个小网站，我忘了名字，但之后可以分享。它让你在 iPad 上写字，对吧？你也可以在纸上写，用你自己的手写，然后它会把你自己的笔迹转换成真正的字体。所以这不是 SVG 或图片。这是一个我可以实际使用的字体。还有另一个有趣的小事，我想放一点关于我自己的信息。但问题是，我不想为 Framer 的专业版付费。我有点抠门，对吧？最低的套餐是 5 美元，但只有一个页面。我当时想，我真的需要第二个页面。

There's a little website, I forgot the name, but I can share afterwards. It lets you just write on the iPad, right? You can also write it on paper, and you can write it with your own hand, and it would convert your own handwriting into an actual font. So this is not an SVG or a picture. This is an actual font that I can use. And another fun little thing, I wanted to put a little bit of info about myself. But the thing is, I didn't want to pay for the pro plan on Framer. The cheap part of me, right? The lowest plan is five bucks and it's only one page. I was like, I really need the second page here.

我看到你的项目列表里没有 Cali，也就是你正在做的新项目。能聊聊你最新的实验吗？你之前给我透露了一点点，非常酷。我想接下来深入聊聊这个。

So, I'm looking at your list of projects here and you don't have Cali, which is the new one that you're working on. So, can we talk a little bit about your latest experiment because you gave me a tiny glimpse and it's very very cool. So, I'm wondering if we can kind of do a deep dive into that next.

完全同意。大概十月初到中旬吧？我和妻子去墨西哥旅行了一趟。我一直在大量使用 Claude Code，它解锁的能力太惊人了。你知道，如果你是个设计师，你脑子里有所有想法，知道最终效果应该是什么样。现在只要有一点技术知识，就能构建出很多东西。我可以说这让我兴奋得睡不着觉。我想尝试很多方面：一方面用我们自己的 API 做实验，看看 ElevenLabs 的开发者体验；另一方面，我是 Mac 应用的超级粉丝。如果有选择，我只想做 iPhone、iOS 和原生 Mac 应用，因为那种体验和设计细节。所以我有时间用 Cali 做实验。太棒了，一周的业余时间就能实现这么多。这只是个小演示，它能做什么呢？它可以把文字转成多角色语音，还能克隆你的声音。你可以为不同项目创建不同页面，把文字转成语音。另一个很棒的功能是克隆声音。这是个很酷的实验。

100%. Yeah, back in early to mid October, right? So, I had a little trip with my wife in Mexico. I've been playing a lot with Claude Code and it's amazing how much it unlocks. You know, if you're a designer, you have all the ideas, you know how it's supposed to look in the end. So now you can, if you have a little bit of technical knowledge, you can build so many things. And I can say it keeps me awake at night. I'm just so excited about building so many things. I wanted to try and, on one hand, experiment with our own APIs and see the developer experience of ElevenLabs, and on the other hand, I'm a huge fan of Mac apps. I think if I had a choice, I would just build only iPhone, iOS, and native Mac apps because of all the experience and the detail to design. And yeah, so I had time to experiment with Cali. And this is really awesome how much can be achieved in, I think it was part-time during one week. So just a little demo what it can do, right? So it lets you first convert text to audio with multiple voices, and as well clone your voice. So you can create different pages for different projects. You can convert the text into voice. Another awesome thing, you can also clone your voice. So it was a nice experiment.

我喜欢那些交互和大量动画。比如你尝试录音时，会出现这个视图，这个动画就在这里，带来一点小确幸。看到那个动画，感觉特别好。

I love that interactions and a lot of animations. And so, if you try to record your voice and you get this view, you get this animation right here, you know, that is like brings a little bit of joy, right? So like when you're seeing that and the animation's so good.

谢谢。对，就是这些小细节。比如有个按压效果，这个浮动条。视觉上它是浮在顶部的，按下去时，你自然会期待它朝按压方向倾斜，然后缩小。如果你按左边，它左边会压得更低一些。

Thank you. Yeah. And like small little details, right? So they're playing with like a little press effect. So this little floating bar. So the idea is that it's floating on top visually, right? So when you press on it, I think naturally what you expect is to kind of tilt like wherever you're pressing. Then it's scaling down. If you press on the left side, it's like press a little bit more on the left side as well.

作为一个有点技术背景、现在被 AI 和 Claude Code 加速的人，你在自己构建软件的过程中积累了哪些经验、建议或教训，能让他人学习或受到启发？我相信听众中有不少人一直听说 Claude Code，看到别人用它在实现想法，但他们还在观望，不确定能做什么，甚至不知道如何策略性地使用这些工具。

As someone with a little bit of technical knowhow that's now been accelerated with AI and all these advancements and Claude Code. Any lessons or advice or even just learnings that you've accumulated on your own journey building your own software that you think other people could learn from or be inspired by? Because I'm sure there's a good subset of people listening who keep hearing about Claude Code. They keep seeing examples of people who are building their ideas, but they're still kind of on the sidelines, not really sure what's possible or maybe unsure of even just how to strategically think about using these tools.

我有几个小技巧，但我觉得你得自己摸索，看看是否有效。情况一直在变。我经常用 Claude Code 的一个方法是：先把它当成你的队友。在开始之前，不要随便说“给我建这个”“给我建那个”，而是先研究最佳实现方式。比如我启动 Cali 时是这样做的：解释“我想用这个 API，我有这个用例，我想做这个和那个”，然后让它在线研究，找最佳实践，给我一些选项，再制定计划。它会去网上搜索，回来给你一份巨大的文档，包含选项和具体实现。看到那个，你会超级兴奋。

A couple tricks that I have that I use and something that I think you kind of have to find for yourself, right, to see if that works. It's changing all the time. But something that I use for Claude Code all the time is, first making sure you treat it as, I don't know, like your teammate that works for me, right? So before you start, you just kind of randomly say 'build me this' and 'build me this', like try to research the best implementation. So how I started with Cali here is: explain 'I want to try to use this API, I want to have this use case, and I want to do this and this', and trying to research online and find best practices and give me some options, and then build a plan around that. And it would go online and research and come back with a massive document with options with exact implementation. And when you see that, you just get super excited, right?

我记得就在一年前，我还没用这些工具。当时我用的是 FlutterFlow，做我的第一个应用 Portal。我花了很多时间搞懂 Stripe API，那个文档太疯狂了，有各种版本和构建方式。我花了几周时间，还遇到一些错误，才解决了一些问题。现在你只要说“嘿，我想建这个和这个”，它就会去找最佳构建方式。真的节省了大量时间。太不可思议了。开始构建后，我会创建很多 MD 文件。他们常说创建一个 CLAUDE.md 文件来写简介和信息。我会尽可能多地创建。不管是什么功能或学到的东西，我都会说“把这个保存到 payments API”或“保存到 ElevenLabs API、ElevenLabs 语音或语音克隆”，这样它就有上下文了。因为现在的一个问题是它会忘记，有上下文窗口限制。所以我把所有上下文保存在特定的 MD 文件里。下次需要信息时，它会去文档里找，理解需要做什么。另一个小技巧是用待办列表。它会创建并跟踪你正在做的事。一旦你制定了实施计划，它会再创建一个 MD 文件作为待办列表或任务清单，然后在 Claude Code 里做点项目管理。另外，我总是用分支，每次完成一个大功能就提交，确保提交到 GitHub，然后创建分支、合并、再创建新分支。这样大的改动就不会丢失。

I remember actually, you know, just one year ago before I would even use any of these tools, right? So I was using something called FlutterFlow. So for my first version of my app Portal, I remember trying to sort out how Stripe APIs work, and that documentation is insane because all these different versions and all the different ways you can build. So that took me a while to sort out. It took me, I remember with some errors, weeks, a couple weeks to try to solve some problems that I had. Like now you can just say 'hey I want to build this and this' and it will actually go and find you the best ways to build. So you're really cutting all the time and saving all the time. It's incredible. And then once you start building, what I do is I have a bunch of MD files, right? So they always say create a CLAUDE.md file for the brief, for the info. I create as many as possible. I would, whatever the feature is or the learning is, say 'save this in the payments API' or 'save this in the ElevenLabs API, ElevenLabs voices or voice cloning' so that it has context. Because one issue right now is it's kind of forgetting, so there's a context window. So it will save all the context in a specific MD file. Then whenever we need the information again, it would go to the document and understand what needs to be done. Another little trick is using to-do lists. So it would also create, like, keep track of what you're doing. So once you create a plan of implementation, it would also create another MD file that is a to-do list or tasks or something like that. They would go and kind of do a little project management in Claude Code. Another thing: always using branches and committing every time some big feature is completed, making sure it's committed to GitHub, and then you set up a branch and then you merge and create a new branch. So the big changes are not lost.

这个项目你提前在 Figma 里设计了多大比例？

How much of this, if any, did you design in Figma ahead of time?

对我来说，这样容易很多。因为要把 UI 做对还是有点 tricky。所以我先在 Figma 里视觉化规划一切，至少把主要界面做出来。

For me, it makes it a lot easier, right? Because with the it's still a little tricky to get the UI right. So I had this one. So like just visually planning everything in Figma and trying to get at least the main screens.

你真的，我是说你就直接在 Figma 里设计了这个产品，像传统设计师一样，然后又把它实现了。

You really, I mean you straight up designed this product in Figma like you acted as a traditional designer and then also built the idea.

对，没错。

Yeah. Yeah. Exactly.

所以这非常酷。我就是这么做的。我想这只是一个题外话。我之所以要强调这一点，并觉得它特别鼓舞人心，是因为我觉得很多人看待 AI 时，会直接否定它，觉得“我搞不定视觉效果，AI 不擅长设计”。我有点理解你的意思。如果你想一次性生成视觉效果，那确实，你可能会得到一堆紫色渐变。但 AI 能让你逐像素地构建脑海中的想法。所以你完全可以在 Figma 中设计任何东西，然后把它变成现实。没错。用 Claude Code 来实现。这就是为什么我真的很喜欢这个例子——你在 Figma 中完美地把握了像素级的设计细节，但还有那么多其他的小设计细节，你只有通过 Claude Code 才能发现，比如那种按下的 3D 倾斜效果。那也是一个设计细节，只不过它存在于代码中，而不是 Figma 里。

So that's very cool. That's the way I went through it. I think this is just an aside. The reason why I'm going to underline this and why I find it really inspiring is I think a lot of people look at AI and they write it off as, well, I can't get the visuals right. AI is not good at designing. And part of me is like, I hear you. If you're trying to oneshot the visuals, then yeah, you'll probably get a bunch of purple gradients. But it just allows you to build pixel by pixel the idea that's in your head. And so you can literally design anything in Figma and then bring it to life. Exactly. Using Claude Code and that's why I think I really love this example because you've nailed the pixel level design details in Figma, but there are so many other little design details that you only figured out with Claude Code like that kind of 3D tilt on press. Like that's a design detail. It just so happens to be in code, not in Figma.

是的，100%。嗯，它帮了我很多，你知道，把我的想法放到 Figma 里，我觉得这一点不会改变，对吧？所以你只需要确保你知道东西在哪里，你想要它看起来怎么样，从用户体验的角度你想要它如何工作。这真的帮助我，你知道，不只是对一个屏幕有信心，对吧？如果只是一个屏幕，你可以直接尝试去构建，不需要 Figma 的模型，但多个屏幕之间如何连接，你把按钮放在哪里，导航如何工作，整个体验如何运作——对我来说，有 Figma 总是有帮助的，然后把它带到 Claude Code 就容易多了，因为它们有不同的扩展，你已经内置了这个功能，你甚至可以直接从 Figma 复制代码。你可以复制 SwiftUI。所以有时候，比如我遇到问题，你知道，复制一些确切的代码，或者让某些 UI 正确。我会尝试，你知道，选择一个组件，比如说这个。我会直接把 Swift 代码片段复制到 Claude Code 里，说“嘿，这是代码，你能……”然后再加上截图，说“你能完全像这样构建吗？”或者使用 Figma MCP，但对我来说，这并不总是成功，因为你知道，直接复制 Figma 的图层，它们并不总是结构化的，你需要使用很多自动布局之类的东西。但如果你只是有这个，然后你总是可以——对我来说，我就像跟人说话一样，我会尝试，你知道，添加一个截图和一些代码，然后说“嘿，你能用这个字体大小吗？能用这个颜色吗？”加上截图和代码，然后，你知道，需要一点来回沟通，但最终你真的可以做到像素完美。我想强调这一点，因为仅仅从 UI 方面来说，这是可行的，对吧？嗯，SwiftUI 一直很棘手，或者说以不够灵活著称，每当你想要构建一些自定义的东西时，对吧？所以很多应用看起来都一样，但即使现在用 Claude Code，这里的背景完全是自定义的，所以有自定义的模糊层。我们使用了默认模糊之一，再加上一些叠加层。

Yeah, 100%. Yeah, it helps me a lot, you know, put my thoughts down in Figma and I think that will not go away, right? So, you just want to make sure you know where things are and you know how you want it to look and from the UX perspective how you want it to work. And this really helps me, you know, be confident about not just one screen, right? You can just try to go and build this directly without the Figma mockup if it's one screen, but how it connects where you put some buttons and how the navigation works, how the whole experience works when you're trying to connect multiple screens. Like for me it always helps having a Figma and then it makes it a lot easier then to bring that to Claude Code because they're like different extensions you have this built in already so you can even copy code straight from Figma. So you can copy SwiftUI. So at some point for example I had issues with, you know, copying some exact code for the or like getting some UI right. So I would try to, you know, select a component let's say this one. I would copy the Swift snippet directly into Claude Code and say hey this is the code can you and then also screenshot and say can you build exactly like this or using a Figma MCP but in my case it's not always successful because it's, you know, copying the Figma layers right away and they're not always structured you need to use a lot of auto layouts and that kind of thing but if you just have this and then you can always for me I go like I would talk to a person I would try to, you know, add a screenshot at some code and then say hey can you use this font size can use this color add a screenshot and some code and then, you know, it takes a bit of back and forth but then eventually you can really get it pixel perfect. And I want to highlight this because just the fact that it's doable from the UI side right so, uh, SwiftUI has always been tricky or like known for not being very flexible whenever you want to build some custom stuff right? So like a lot of apps they look the same but like even now already with Claude Code so the background here like is fully custom so there's like custom layer of blur. So, we have one of the default blurs plus some overlays.

构建很酷的东西只是拼图的一部分，但我觉得另一件事——你显然在过去几年里越来越习惯的——就是把它们放到互联网上，谈论它们，与人建立联系。也许在我放你走之前，我很好奇，你有什么建议给那些正在观看的人，他们有点子，也许甚至已经开始捣鼓了，但他们基本上没有社交存在感，整件事对他们来说有点奇怪和可怕。你有什么见解或想对他们说的话吗？

Building really cool things is one piece of the puzzle, but I think something else that you've obviously gotten a little bit more comfortable with over the last few years is putting them out there on the internet and talking about it and connecting with people. And maybe before I let you go, I'm curious if you have any advice for somebody watching who they have ideas. Maybe they've even started to tinker, but they have basically no social presence and the whole thing feels a little bit weird and scary to them. Any insights or things that you want to say to that person?

对我来说，有效的方法是试着真正地——你可以为你正在做的事情感到自豪，一些让你兴奋的事情，对吧？所以，我认为第一步是把它分享到网上，并尝试与人联系。我觉得这总是有效的。这需要时间。所以如果你没有存在感，可能需要一点时间，你知道，去尝试联系对的人，但你必须让自己融入社区。所以我认为如果你在设计师 Twitter 的圈子里，那是一个很棒的空间，对吧？你和很多人处于同一水平，很容易，你知道，与很多设计师取得联系并向他们学习。只要把你的东西放出去，当没有事情发生时不要气馁，比如你没有得到回应，那只是算法在运作。所以你必须，你知道，继续放出去。如果你对它满意，其他人也会对它满意。即使是很小的东西，比如对我来说，最成功的东西实际上是我没有花太多时间的东西，对吧？我只是有了一个快速的想法，然后我想，好吧，让我把这个做出来看看会发生什么，然后我就把它放到网上。

For me, what works is trying to be really kind of you can be proud of like what you're working on, something you're excited about, right? So, I think like the first step is to share it online and try to connect with people. I think that always works. It takes time. So like if you have no presence it will take it might take a bit of time you know to try to connect with the right people but you have to get yourself in the community. So I think if you're in the design Twitter bubble that's a really awesome space to be in right you're like on the same level with so many people and it's very easy to, you know, get in touch with a lot of designers and learn from them just putting stuff out there and not getting too demotivated when nothing's happening when like you don't get a response that just the algorithm working. So just have to, you know, keep putting out there. If you're happy with it, some other people will be happy with it, too. Even when it's something small, like for me, the things that work out the most were the things that I actually did not spend so much time on, right? I just got a quick idea and I thought, yeah, let me just build this and see what happens and then let me just put it online.

总是这样。

It's always like that.

总是这样。我只是有了一个快速的想法，然后我想，好吧，让我把这个做出来看看会发生什么，然后我就把它放到网上。甚至回到你之前说的，当我们谈论 App Stacks 时，你提到直接给人们发私信，人们实际上出人意料地愿意参与和回应，这也是我的经验。出于某种原因，人们真的很害怕发私信，但你其实不必这样。如果你想获得动力，开始建立社区，并与志同道合的构建者联系，那就多发私信。我认为这可能是目前互联网上最被低估的部分——Twitter 私信。

It's always like that. I just got a quick idea and I thought, yeah, let me just build this and see what happens and then let me just put it online. Even tying back to something that you said earlier when we were talking about App Stacks too and you talked about just DMing people and people were actually like kind of surprisingly willing to participate and respond and that's been my experience too where for some reason people are just really scared about sending DMs and you don't really have to be like if you want to get momentum and start building community and connect with like-minded builders send a lot of DMs. I think that's probably the most underrated slice of the internet right now is Twitter DMs.

有太多可以给予，也有太多可以学习，对吧？就像 Twitter 现在成了新的 Dribbble，人们发布他们正在做的东西。这不是虚假的。如果你在 Twitter 上选对了圈子，它是非常真实的。你可以学到很多东西，也可以获得很多灵感。很多人在构建很多非常棒的东西。这就是 App Stacks 2 背后的想法。所以你可以看到别人在构建什么，然后说：“嘿，实际上这个应用做得非常好。我也可以做到。”我知道一个事实，很多设计师有很多想法，对吧？他们也想要构建很多东西。所以把东西放出去也能帮助你与他人建立联系，只是，嗯，让你更容易入门。是的。任何时候，如果有人想做一个项目，或者想进入某家公司，比如他们钦佩的任何公司，我认为最好的方式实际上不是通过常规途径申请，比如通过人力资源，你知道，尝试自下而上，而是尝试与在那里工作的一些人联系，看看你们是否合拍。

There's so much to give and so much to learn, right? Like Twitter now became the new Dribbble that like people putting out stuff they're working on. It's not something fake. Like it's a very authentic if you like pick the right bubble inside Twitter. Like you can learn a lot and you can get yourself very inspired. A lot of people building a lot of really awesome things. So that's was the idea behind App Stacks 2. So you can see what other people are building and say, "Hey, actually like this app is incredibly so well-crafted. I can do it too." I know for a fact a lot of designers like they have a lot of ideas, right? They also want to build a lot of things. So putting things out there also helps you connect with other people and just yeah makes it easier to get yourself get your foot in the door. Yeah. Whenever there can be like a project someone wants to build or like get into some company like any company they admire, I think the best way is to actually not try to apply through like a normal route and try to go through like HR and, you know, try to like go bottom up, but the best way is to try to connect with some of the people that work there and see if you see if you align.

嗯，Roman，你今天确实激励了我们。感谢你来做客并分享屏幕，带我们了解你的所思所想和创作。这真是一段很棒的旅程，我很高兴我们能把它做成一期节目。希望它能激励某位听众追随你的脚步，我知道我自己会的。

Well, Roman, you've definitely inspired us today. I appreciate you coming on and sharing your screen, just walking us through everything that you're thinking and making. It's really an awesome journey and I'm just glad that we got to turn it into an episode. I hope that it inspires somebody out there to follow in your footsteps and I know I will.

太棒了。非常感谢你，老兄。

Awesome. Thank you so much, man.

在你走之前，我想花一分钟介绍一下我最喜欢的产品，因为我经常被问到我的工具栈是什么。Framer 是我建网站的工具，Genway 是我做研究的方式，Granola 是我在评审时记笔记的软件，Jitter 是我给设计做动画的工具，Lovable 是我用代码实现想法的平台，Mobin 是我寻找设计灵感的地方，Paper 是我像创意人一样设计的工具，而 Raycast 是我每一步的快捷方式。我精心挑选了这些公司，这样我才能全职做这些节目。所以，支持节目的首要方式就是去了解它们。你可以在 dive.club/partners 找到完整列表。

Before I let you go, I want to take just one minute to run you through my favorite products because I'm constantly asked what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit. Jitter is how I animate my designs. Lovable is how I build my ideas in code. Mobin is how I find design inspiration. Paper is how I design like a creative. And Raycast is my shortcut every step of the way. Now, I've hand selected these companies so that I can do these episodes full-time. So, by far the number one way to support the show is to check them out. You can find the full list at dive.club/partners.