Full Tutorial: Create Beautiful Designs with AI in 40 Minutes (Not Generic Slop) | Meng To

频道: Peter Yang
视频: https://www.youtube.com/watch?v=NhHfI47WQDM
原文语言: en
统计: 共 104 轮 · Meng To 78 · Peter Yang 26

[0:00] Meng To

AI is going to create the baseline and more and more people are going to get these results which are going to feel very generic and that's exactly not what you want.

AI 会把这个基准线给你定下来，越来越多人做出来的东西都会是这种感觉，特别千篇一律——而这恰恰是你最不想要的。

[0:10] Peter Yang

Men is an expert at using AI to create stunning designs for webites and products that don't look like generic AI slop. I like to think of AI more like a a tool to augment you rather than doing everything for you because at the end of the day we are human and we have human creativity. You want to use AI for 90% of the way, but the last 10% you should totally learn how in about 6 months time we're going to be able to create beautiful website in the league of DIA or this beautiful comet landing page. How do you start, man? So, all right, welcome everyone. My guest today is Men, a designer and founder of Aura. Ben is an expert at using AI to create stunning designs for web websites and products that don't look like generic AI slop. So really excited to have him walk us through his complete design workflow and share his best practices and prompts to create great designs with AI. Welcome Ben.

Meng 是用 AI 做设计的高手，能给网站和产品做出惊艳的设计，而不是那种千篇一律的「AI 味」垃圾。我更愿意把 AI 看成一个增强你的工具，而不是替你把所有活全包了。因为说到底，我们是人，我们有人类的创造力。你可以用 AI 帮你走完 90% 的路，但最后那 10% 你真的应该自己学会怎么做。大概再过半年，我们就能做出 DIA 那个级别的精美网站，或者像 comet 那个漂亮的落地页一样。你是怎么开始的，Meng？好，那么，欢迎大家。我今天的嘉宾是 Meng，一位设计师，也是 Aura 的创始人。Meng 是用 AI 做设计的高手，能给网站和产品做出惊艳的设计，而不是那种千篇一律的「AI 味」垃圾。所以我特别期待让他带我们走一遍他完整的设计工作流，分享他用 AI 做出色设计的最佳实践和 prompt。欢迎你，Meng。

[1:10] Meng To

Thank you so much uh Peter for inviting me. I think this is really exciting time to create your own product uh to generate designs with AI.

非常感谢你邀请我，Peter。我觉得现在真是一个特别激动人心的时代，能用 AI 来做自己的产品、生成各种设计。

[1:19] Peter Yang

Awesome. So, so before we get into your kind of like expert advice, why don't we just like show how like a like a regular AI user might make a website, right? Like how how does it just like with like a single line prompt? Do do you have like an example of that?

太好了。那么，在进入你那些专家级的建议之前，我们要不先展示一下一个普通的 AI 用户大概会怎么做一个网站？就那种只用一句话 prompt 做出来的效果是什么样的。你有没有这样的例子？

[1:33] Meng To

Sure, that sounds great. Um, so I'm going to share my screen.

当然，听起来不错。那我来共享一下我的屏幕。

[1:38] Meng To

So, typically the goal is to create a website and um you know what is really popular right now is landing pages. I'm going to give you a really good example which is let's say DIA the browser and also perplexity comet. So we're going to look at these two examples because they represent of you know where you want to reach at level 10. Of course we all start at level one and but it's good to know what the goals are. What are the differences? What are you know what what should people look for in the end result. So in this case you need to know your prompt. You need to know what to say. You need to know the vocabulary and you need to know how it functions as a user, as a creator. So, DIA really popular comment as well from Perplexity. And these are products that I personally use. So, that is also really great because when you use something, you know exactly what you want and what to look for. So you can see you know we have a navigation we have the hero section uh you have the feature section where it's introducing the different uh features and and you know typical of a landing page. You're going to have a lot of sections like these that are showcasing uh you know the different features, the road map but also the testimonials, what people say. And again, what is that you're looking for here is something a little bit more unique and less generic. So, compared to something like, let's say, you know, your first prompt on Aura or your first prompt on, and by the way, I'm just doing the first prompt right here. So, create a beautiful landing page for a new AI browser. And I'm going to do the same for all of these using the first prompt. Again, level zero, level one, we're going to have something very generic. And each of them have their own flavor. From v 0ero, you have something like this. And again, I'm not cheating. You can see it's all the same prompt. And then on lovable, you're going to have something like this. You might notice a pattern here, right? You have

通常我们的目标是做一个网站，而现在特别火的就是落地页。我给你举两个很好的例子，比如 DIA 这个浏览器，还有 Perplexity 的 comet。我们来看这两个例子，因为它们代表了你想达到的「满分 10 分」的水平。当然我们都是从 1 分起步的，但知道目标长什么样是很有用的。它们之间有什么区别？最终成品里你该关注哪些点？在这种情况下，你得知道自己的 prompt 该怎么写，得知道该说什么，得掌握这套词汇，还得知道作为用户、作为创作者它是怎么运作的。所以 DIA 很火，Perplexity 的 comet 也很火，这些都是我自己平时在用的产品。这一点也特别好，因为当你真的在用一个东西时，你才清楚自己到底想要什么、该看什么。你可以看到，这里有导航栏、有 hero 区，有功能介绍区，在介绍各种不同的功能——这都是落地页的典型套路。你会有很多这样的区块，展示各种功能、路线图，还有用户证言、大家怎么评价。再说一遍，你在这里要找的，是更独特、不那么千篇一律的东西。所以，对比一下，比如说你在 Aura 上的第一个 prompt，或者你的第一个 prompt——顺便说一下，我现在就在这儿打第一个 prompt：给一个新的 AI 浏览器做一个漂亮的落地页。我会用同一句 prompt 在所有这些工具上都跑一遍。还是那句话，0 分、1 分的水平，做出来会非常千篇一律，但每个工具又各有各的味道。在 v0 上，你会得到这样的东西。我真没作弊，你能看到 prompt 全都一样。然后在 Lovable 上，你会得到这样的东西。你可能已经注意到一个规律了，对吧？你会有——

[3:52] Meng To

It's definitely a pattern. You have uh like super bold titles, you have interfont, you have purple all the way. Uh sometimes is a bit more generic, you know, like a white background with very generic text and uh you know styling. These are the things that you're going to start with. It's there's nothing wrong with it. But as we advance more and more as millions of people eventually billions of people create websites right uh AI is going to create the baseline and more and more people are going to get these results which are going to feel very generic and that's exactly not what you want. Again coming back to something like Comet, you can see they want to break that sort of like that problem, you know, that genericness of design. And so you're looking for uh fonts, you're looking for interactions, animations, you're looking for beautiful buttons and backgrounds and uh beautiful images generated by AI such as this background here or this video here. You want something for your website. And again, we're talking about level 10 here. But unless you have like a a team of designers and you have a lot of time, you might not get there, but at least you can get some of these components done by AI. And that's kind of what we're going to be looking for. And uh yeah, you know, like sound effects and animations and all that stuff. And eventually, again, this took me five minutes with Aura. Eventually, you want to get something a little bit more like this where you have like a a more custom font, right? Using customizations, you have like a beautiful background animation using Spline. This is a 3D animation. You have these beautiful images generated in midjourney. and uh you know and you want to do that really quickly because as a beginner you don't have a ton of time learning all of these things that usually take five or 10 years of experience as a designer or as a coder. So that's the beauty of the beauty of today is because we're kind of like compacting all of this knowledge within so little time and we're kind of trying to pick up all of these amazing techniques uh that you can totally use for yourself. And yeah, that's kind of like what I'm teaching right now and also hopefully what I can bring uh with tools like this. And I think like building a landing page is one of the best ways to learn by doing and like actually ship something because it's like it's like pretty straightforward and like you can kind of see the result of your impact and share with your friends, right? So it's like a great way to get started but but like how how do you get from that level zero to like even like a level one or two or like how do you start, man?

这绝对是有规律的。你会看到超粗的大标题，用的是 Inter 字体，从头到尾全是紫色。有时候还更千篇一律，比如白底配上特别套路的文字和样式。这些就是你起步时会拿到的东西。它本身没什么错。但随着越来越多人——最终是几百万、上亿人——都在做网站，AI 会把这个基准线给你定下来，越来越多人做出来的结果都会是这种感觉，特别千篇一律，而这恰恰是你最不想要的。再回到 comet 这种例子，你能看出他们想打破这个问题，打破设计上的那种「套路感」。所以你要去找的是字体、是交互、是动效，是漂亮的按钮和背景，还有 AI 生成的精美图片，比如这里这个背景，或者这里这个视频。你想给自己的网站找点这样的东西。再强调一下，我们这儿说的是 10 分的水平。除非你有一整个设计师团队、还有大把时间，否则你不一定能做到那个程度，但至少有些组件你可以让 AI 帮你完成。这差不多就是我们要追求的。对了，还有音效啊、动画啊那些。最终——这个我用 Aura 只花了五分钟——你想做出更接近这样的效果：你有更定制化的字体，对吧，通过各种定制；你有用 Spline 做的漂亮背景动画，这是个 3D 动画；你有这些在 Midjourney 里生成的精美图片。而且你想又快又好地搞定这些，因为作为新手你没那么多时间去学这一堆通常要五年、十年设计或编程经验才能积累的东西。这就是当下最妙的地方：我们等于是把这么多知识压缩进了这么短的时间里，把所有这些厉害的技巧都尽量学到手——这些技巧你完全可以拿去为自己所用。差不多这就是我现在在教的东西，也希望是我能用 Aura 这样的工具带给大家的东西。我觉得做落地页是「在做中学」、真正把东西发布出去的最好方式之一，因为它挺直接的，你能看到自己努力的成果，还能分享给朋友看，对吧？所以这是一个很棒的入门方式。但是话说回来，你是怎么从那个 0 分做到哪怕 1 分、2 分的？你是怎么开始的，Meng？

[6:46] Meng To

Right. So a lot of people don't realize that um you know having a prom is just not enough. uh what you need more is resources is examples and templates and references. So for example you can mention perplexity you can mention dia you can mention apple linear all of these amazing designs that usually uh you know AI have trained on unfortunately that's just the way it is if you look at midjourney right um the the only reason why midjourney got so good today it is because of all of these amazing photographers amazing artists and graphic designers and that's going to be the same with uh today's you know lovable and vzero and uh and and web design they need examples they need beautiful um you know you know backgrounds and uh named dropping and uh you know we're going to be doing a lot of glass now with you know liquid glass from Apple so AI is going to be more and more trained with these things and as a result as you can see on my profile on aura these are all the designs that I have made and experimented I have like 642. So quite a lot. And you're going to notice that there's an evolution to the design that I'm using. And that evolution comes from all the tools that I'm adding to Aura. So for example, I just added the ability to get midjourney images and we're building our own library of mid images. So you're going to be able to quickly just change uh the images. So again, as a reference point and also all of these designs that I'm creating here, you can remix them and you can just adapt it to your product. Uh whether it's a you know a login screen or you know a full landing page or a hero section. So that is far more effective than what I just did which is you know having just a single prompt and then uh you know and then we we get to the customizations. Um but yeah, you know, that's how I would I would start. And also another thing is even if you know how to prompt and if you just want to prompt, you might want something to use something like a prompt builder. Now a prompt builder is something that gives you a vocabulary, a lexicon of all the things that you can create. So for example, do you want a hero section, a feature section? So remember the landing page that I just showed uh these are all the things that you can create and not just what you can create but also how it's laid out as a layout and then you know like sec you know blog or video and uh the layout configuration you can have for some of these concept like settings page you can also be more creative in terms of the layout configuration such as do you want like a sidebar do you want like a bento layout. Um, and then the presentation. Do you want a full screen or you want a card or you want a browser? So, for more for presentation and eventually you get into the styling. So, do you want a flat layout? You want a glass or eventually I'm going to add like liquid glass, you want light mode, dark mode, primary colors, background colors, etc. And finally, uh we we have the type face which is super super important. Usually uh AI likes to use the most basic one which is enter. And there's nothing wrong with enter at all. It's just that uh if you don't try to be more creative whether it's just customizations of the uh the font weight or the the letter spacing. So you're going to need to kind of like go a little bit a little bit further. You know, 10 years ago, everyone would be wowed by a website using Inter because everyone was using like Ariel and you know, Times New Roman like that. But nowadays, everyone kind of like have the end their standards way above that and they want something a little bit more unique. So, you might want like a serif font or, you know, like instrument serif or stuff stuff like that. And also you need to know a little bit about like okay do I I want to have bigger font sizes and I see a ton of website with giant you know font sizes. So you want to be creative with that and uh without of course spending you know days or months on on that specific design.

对。很多人没意识到，光有一个 prompt 是远远不够的。你更需要的是素材——是范例、模板和参考。比如说，你可以点名 Perplexity，可以点名 DIA、Apple、Linear，所有这些惊艳的设计——遗憾但事实就是，AI 通常都是拿这些训练出来的。你看 Midjourney 就知道，Midjourney 今天能这么强，靠的就是所有那些了不起的摄影师、艺术家和平面设计师。今天的 Lovable、v0、网页设计也是一样的道理——它们需要范例，需要漂亮的背景，需要你去「点名」那些参考。现在大家都在做大量的玻璃质感，比如 Apple 的 liquid glass，所以 AI 会越来越多地拿这些东西去训练。结果就是，你可以在我 Aura 上的个人主页里看到，这些全是我做过、试验过的设计，我有 642 个，挺多的吧。你会注意到我用的设计是有一条演进脉络的，而这条演进来自我不断给 Aura 加进去的各种工具。比如说我刚加了一个能拉取 Midjourney 图片的功能，我们正在建自己的 Midjourney 图库，所以你可以很快地直接换图——还是那句话，作为参考点。而且我在这儿做的所有这些设计，你都可以 remix（混编），直接改成适配你自己产品的样子，不管是一个登录页，还是一整张落地页，还是一个 hero 区。所以这比我刚才那种做法——就只丢一句 prompt——要有效得多。然后我们再进到定制环节。不过呢，还有一点：哪怕你会写 prompt、也只想靠写 prompt，你可能也会想用个 prompt builder（prompt 构建器）。所谓 prompt builder，就是给你一套词汇、一套关于「你能创造什么」的词典。比如说，你想要一个 hero 区，还是一个功能区？还记得我刚展示的那个落地页吗——这些都是你可以创造的东西。不光是你能造什么，还有它的布局怎么排，比如博客、视频，还有布局配置。像设置页这种概念，你的布局配置可以更有创意，比如你想要侧边栏，还是想要 bento（便当格）布局。然后是呈现方式：你想要全屏，还是卡片，还是浏览器框？呈现方式选好了，最后就进到样式。你想要扁平风，还是玻璃质感，或者我之后会加进来的 liquid glass，你想要浅色模式、深色模式、主色、背景色等等。最后，我们还有字体，这点超级超级重要。通常 AI 最爱用那个最基础的——Inter。Inter 本身一点错都没有，只是说如果你不试着更有创意一点，哪怕只是调一下字重或者字间距，你都得稍微再往前走一步。要知道十年前，谁的网站用了 Inter，大家都会「哇」一声，因为那会儿大家用的都是 Arial、Times New Roman 那种。可现在呢，大家的审美标准早就远远超过那个了，他们想要更独特一点的东西。所以你可能会想用一款衬线字体，比如 Instrument Serif 之类的。你还得稍微懂一点，比如「我是不是想用更大的字号」——我看到一大堆网站用的字号都巨大无比。所以你得在这上面玩出点创意，当然，前提是别在那一个具体设计上花掉好几天甚至好几个月。

[11:16] Meng To

So this is all just uh building a text prop right is what it's doing. It's building a text prop on the bottom right. So all of these things that I'm I'm clicking, you know, it's adding to the list of prompt. I can add them one by one, but I can also add all of them at at once.

所以这一切其实就是在搭一段文字 prompt，对吧，它做的就是这个。它在右下角搭出一段文字 prompt。我点的所有这些选项，都会被加进 prompt 列表里。我可以一个一个加，也可以一次性全加进去。

[11:32] Meng To

So let me just pick something a little bit uh uh cooler. So let's say I want like a feature section and it's a bento layout. I want to be like a card and it's going to be a glass style. And maybe uh we're going to do we're going to go with that. Maybe we're going to go with light mode and we're going to have these beautiful beautiful shadows large. So, let's hope for the best. Um, and then we we're going with a little bit uh of in instrument serif. And then, yeah, this is the full prompt uh from the prom builder. And uh I'm going to use cloud 4. So, 03 and cloud 4 are really good. Uh 03 is a little bit lazier, I would say, but it's a little bit more um uh fine-tuned to like I I think clot is trying to always use these inter and then uh purple and all that stuff. So, it's can be a bit problematic and uh but it definitely does more details and all that stuff. So you you need to learn the the nuances of both models and how it goes for your website and experimenting with a lot with different prompts. I think a lot of people give up on the first one and they they don't like what they see and and they they you know they they stop after that. But I think that's a mistake. But as you can see here, it's quite interesting. Um I'm using f first of all we're the only tool that has you know um live preview right

那我来挑点更酷的。比如说我想要一个功能区，用 bento 布局，我想要卡片形式，玻璃质感样式。然后嗯——就这么定吧。也许我们用浅色模式，再配上这些漂亮的大阴影。好，但愿效果好。然后我们再加一点 Instrument Serif。好，这就是 prompt builder 生成的完整 prompt 了。我会用 Claude 4。其实 o3 和 Claude 4 都挺好的。我觉得 o3 稍微「懒」一点，但它微调得更细一点——我感觉 Claude 总是动不动就想用 Inter，然后又是紫色那一套，所以会有点麻烦，不过它确实能做出更多细节之类的。所以你得去摸清这两个模型的微妙之处、它们对你网站的处理方式，多用不同的 prompt 去试。我觉得很多人第一个出来就放弃了，他们看了不喜欢，然后就停在那儿了。但我觉得这是个错误。不过你看这儿挺有意思的——首先，我们是唯一一个有实时预览（live preview）的工具，对吧。

[13:06] Meng To

um otherwise you tend to have to wait for like 5 minutes or 10 minutes to get the first result but you can see here I'm I'm specifically using this this font here which is called instrument song instrument serif and I asked for a bento layout that's exactly what's giving me which is quite nice I also asked for like this this this beautiful beautiful uh drop shadow which has three three drop shadows. It's not like the normal drop shadow. And uh you know this is just one experiment. I could I could have gone with a different one. I could have gone with light mode and dark mode. But what I try to do with aura is to make it super easy to just switch to different fonts. So if I want to go back to um you know guys or man rope and um you know I can also go back to uh uh instrument and uh oh that's cool

不然的话，你往往得等个五分钟、十分钟才能看到第一个结果。但你看这儿，我特意用的就是这款字体，叫 Instrument Serif，我要的是 bento 布局，它给我的正好就是这个，挺好的。我还要了这种漂亮的投影，它其实有三层投影，不是那种普通的单层投影。这就只是一次试验而已，我本来可以换一种，可以用浅色模式或者深色模式。但我想用 Aura 做到的，是让你超级轻松地随手切换不同字体。所以如果我想换回 Geist 或者 Manrope，或者再换回 Instrument——噢，这个挺酷。

[14:00] Meng To

you know experimenting with all of these things where usually you have to click one by one and then you have to ask AI. So I want to make it so that it's you know AI is not great at everything. First of all, there are some things that AI um does badly, which is like for example, you have to wait every every time that you prompt. Sometimes the more complex your your website is, the harder it's going to be to to make it more um um to make it more consistent with the design and to get to add detail. Sometimes you lose stuff that you have created before. So that's why, you know, I want to pair it with actual,

这样去试验所有这些东西，要是放在平时，你得一个一个去点，然后还得求着 AI 帮你弄。所以我想做成这样，因为 AI 并不是什么都擅长。首先，有些事 AI 做得挺糟的，比如说每次你一发 prompt 就得干等。有时候你的网站越复杂，就越难让设计保持一致、越难往里加细节。有时候你之前做好的东西还会丢掉。所以呢，我才想把它和真正实打实的——

[14:41] Meng To

you know, uh, options that you can use and you can experiment with, such as the, uh, the font weight and and also the spacing between the font and the font pairing and all that stuff, but also to be able to change the color. So, you want to uh light or dark mode, you want to try like different colors, you know, and again, it's just so much fun and and you can really like add a ton of flavors. Um, and and look at some of these images. You can see like

——也就是那些你能直接用、能拿来试验的选项配在一起，比如字重、字间距、字体搭配那些，还有改颜色。所以你想要浅色还是深色模式、想试不同的颜色，诶，这真的太好玩了，你能加进去一大堆各种各样的味道。再看看这些图片，你能看到——

[15:15] Meng To

it's not the greatest images, which is why you want to go to something like assets and then you want to change it and then you want to go to Unsplash. Maybe you want to use gradients and have beautiful noises. And also we're building like I mentioned before our own library uh using midjourney generations that we have created. And these are some of the best generations that I have done. And so you can see you know uh some of these images uh are going to really spice up and make your design so much more unique uh to look at. So,

——这些图片不算最好的，所以你会想去 assets（素材）那里，把它换掉，去 Unsplash 上找。也许你想用渐变，配上漂亮的噪点纹理。而且像我之前说的，我们也在用自己做的 Midjourney 生成图建一个图库，这些是我做过的一些最好的生成图。所以你能看到，其中一些图片真的能给你的设计提味，让它看起来独特得多。所以——

[15:45] Peter Yang

and and and when you're doing this, uh when you're changing the the fonts and stuff and the images, you're just using like you're not using some LM, right? You're just changing the CSS or something like you don't.

那你做这些的时候，比如换字体、换图片，你并没有在用什么大模型对吧？你就只是在改 CSS 之类的，你并没有——

[15:56] Meng To

Right.

对。

[15:57] Meng To

Exactly. So, keeping keeping in mind that all of Auro was built using AI. This is all of VIP coding.

没错。要记住，整个 Aura 都是用 AI 搭出来的，全是 vibe coding（凭感觉氛围式编程）。

[16:03] Meng To

But you're right. Um I'm not I'm trying to not depend on AI to do everything because usually if you do depend on AI to do everything. It can take like you know 30 seconds, one minute and all that stuff. So we still have a lot of these uh customizations like you know in Figma you can customize all of these things but also we have the prompting. So for example I click on this specific card and I can say dark mode. Again I do have to wait for like you know maybe 5 10 30 seconds. it needs to generate the code and it needs to place the code and um while this is great it can create like really amazing and creative things um it's also taking a lot of time

不过你说得对。我是在尽量做到不依赖 AI 去干所有事，因为通常你要是什么都靠 AI，它可能就得花个三十秒、一分钟那样。所以我们还是保留了一大堆这种定制功能——你知道在 Figma 里你能定制所有这些东西——但同时我们也有 prompt。比如说我点中这张具体的卡片，我可以说「深色模式」。同样，我确实得等个差不多五秒、十秒、三十秒，它得生成代码、再把代码放进去。这虽然很棒，能做出真的很惊艳、很有创意的东西，但它也挺费时间的。

[16:43] Meng To

which is why uh sometimes it's just better to just experiment with this as a base

正因如此，有时候直接拿这个当底子去试验反而更好——

[16:49] Meng To

and then kind of like

——然后再去那种——

[16:51] Meng To

you know I like to think of AI more like a a tool to augment you rather than doing everything for you because at the end of the day we are human And we have human creativity, we have experience and memories, we have taste and also we change constantly which AI tends to have a hard time adapting to all of these changes.

我更愿意把 AI 看成一个增强你的工具，而不是替你把所有事全干了。因为说到底我们是人，我们有人类的创造力，我们有经验、有记忆，我们有品味，而且我们一直在变——而 AI 往往很难跟上所有这些变化。

[17:14] Meng To

So yeah, this this is taking quite a while. Sometimes it's the internet and all that stuff, but uh you know eventually it's going to get there.

所以呢，这个确实跑得有点久。有时候是网络的问题之类的，不过最终它总会出来的。

[17:21] Peter Yang

Yeah, I like think of AI as like a tool to get from like zero to 50 or 80, but like it never gets it perfect. So you always want to do some manual tweaks afterwards. you know, but let's kind of recap what what you did, right? So like so starting from zero, you first first step is to kind of like find some inspiration, right? Like either using the templates you have in Aura or like using uh the comment website or something find some inspiration. Um, and the second step it sounds like uh

对，我把 AI 看成一个能帮你从 0 做到 50 分、80 分的工具，但它永远做不到完美。所以你之后总得自己手动调一调。那我们来回顾一下你刚才做了啥吧。从 0 开始，第一步是先去找点灵感，对吧——要么用你 Aura 里现成的模板，要么用 comet 的网站之类的，先找点灵感。然后第二步听起来像是——

[17:51] Peter Yang

like second step is to like you build this visual prompt builder to to figure out what the fonts and stuff to use instead of me have to me memorize everything through text.

——第二步就像是，你搭了这么一个可视化的 prompt builder，来帮你弄清楚该用哪些字体之类的，省得我得靠纯文字把所有东西都记住。

[18:01] Meng To

Yeah.

对。

[18:02] Meng To

Yeah. And you can also uh adapt it from like the templates that we have. We have more than 1,500 at this point. So we're creating a lot. We're creating more every every single day. But you can see um the preview of it. And I think this is definitely my most recommended way is to remix from existing templates or to provide the code. You can also do like adapt from HTML and then you know there's a bunch of websites like uh like code pen for example

对。你也可以从我们现成的模板里改。我们现在有超过 1500 个模板了，我们在大量地做，每天都在做更多。你能看到它的预览。我觉得这绝对是我最推荐的方式——从现有模板 remix，或者直接提供代码。你也可以从 HTML 来改，而且你知道有一堆网站，比如 CodePen——

[18:30] Meng To

that allows you to you know explore different experimentations that people do uh such as this one. Of course this just a random one but um you know it has uh the HTML. You copy this and you bring all of this code to uh a platform like Aura or or Lovable. You paste this and yeah, you know, like you adapt this and you add it to to your prom. Uh but yeah, keep in mind that some of these features and uh the more you use, of course, you're going to need to to have a subscription. Uh I think ours are a little bit more generous in term of like we we give so much more uh prom credits versus uh Lovable and Vero. But you know the difference between lovable and visero and and aura is that aura we're more more focused on design at this point. We're just one person. I'm the only person working on this product. I v code it from scratch. And yes, you know, we I want to focus on the things that I think visero and aura uh and and um and lovable are not as good as

——它能让你去看别人做的各种试验，比如这一个。当然这只是随便挑的一个，但它有 HTML。你把这段复制下来，把这些代码搬到 Aura 或者 Lovable 这样的平台，粘进去，然后改一改、加进你的 prompt 里。不过要记住，这些功能里有一些——当然用得越多——你就会需要订阅。我觉得我们家在 prompt 额度上要慷慨不少，比 Lovable 和 v0 给得多多了。但你知道 Lovable、v0 和 Aura 之间的区别在于，Aura 现阶段更专注于设计。我们就一个人，整个产品就我一个人在做，我是从零开始一行行 vibe code 出来的。我想专注于那些我觉得 v0、Aura——呃，还有 Lovable——做得没那么好的地方，

[19:32] Meng To

in term of for example customizations and font pairing and changing the colors using unsplash images or aura m and all that stuff. So you know these are the the nuances of the of the products. before I knew that you built Aura like uh I was playing with it and I I could just tell that it was built by like a designer. So that's the difference you know. Um but but like can we like go back to some like for example let's go back to the comet website and and and let's say like I just want to like find out like what what is the font that they're using or something like is there a way to to find it out like inspect or something? Yeah. I mean I hope I haven't tried it to be honest. I think that's a really good point, but you can totally just take the screenshot and go to chat GPT and ask for it. But you know with most designers this is something that looks like a variant or a different one uh comparable to instrument serif which is the one that we use um I believe here here right so you know when when we we asked for the first version so we have you know in or you have different versions as you create uh your design so you can see we started with this one and this is instrument serif And uh it's you know this is a font that is starting to be really really popular. Um I think Apple probably started that if I remember in their in their old designs

比如说定制、字体搭配、用 Unsplash 图片或者 Aura 的 Midjourney 图来改颜色那些。所以这些就是产品之间的微妙差别。我还没告诉你之前——我之前在玩 Aura 的时候，一上手就能看出来它是一个设计师做出来的。这就是区别所在。不过我们能不能回到比如说——咱们回到 comet 那个网站，假设我就想搞清楚他们用的是什么字体之类的，有没有办法找出来，比如用「检查」（inspect）之类的？嗯，老实说我希望——这个我还真没试过。我觉得这是个很好的点，但你完全可以直接截个图丢给 ChatGPT 问它。不过你知道，对大多数设计师来说，这个看起来像是 Instrument Serif 的某个变体或者另一款很接近的字体——Instrument Serif 就是我们用的那款，我相信就在这儿，对吧。所以你看，当我们要第一版的时候，你会有不同的版本——你在做设计的时候会生成不同版本——你能看到我们是从这一版开始的，这就是 Instrument Serif。这款字体现在开始变得特别特别火。我记得应该是 Apple 最早带起来的，如果我没记错的话，是在他们以前的设计里——

[21:01] Meng To

uh from from the old days but you know it's it's kind of cool. It's getting really really uh popular now. And from that screenshot you want to go to chat GBT. I don't know if I have like um uh uh you know private data in my chatb.

——很早以前的那些设计里。不过它挺酷的，现在真的越来越火了。那么从那张截图，你想把它丢给 ChatGPT。我不太确定我聊天记录里有没有一些私人数据。

[21:20] Peter Yang

Okay. Yeah, we we can do it next time. Yeah. Yeah.

好。嗯，那我们下次再弄吧。对。嗯。

[21:22] Meng To

But yeah, you know like you can totally bring

不过你完全可以直接把它拿过来，问一下就行。对。

[21:25] Peter Yang

just ask. Yeah.

对，直接问就好。嗯。

[21:27] Meng To

Yeah. Ask like what what is this fun? And AI is pretty good at that.

对，就问它「这个用的是什么字体」之类的，AI 在这方面挺在行的。

[21:32] Meng To

But yeah, you can also inspect.

不过呢，你也可以用 inspect（检查元素）。

[21:34] Meng To

Yeah, you can inspect. But I I I don't think a lot of people would want to inspect. Just the reason why is because uh it's it's more technical. I think sometimes you need to enable uh developer mode on your browser. In this case uh yes inspect and then also you have to read the code. So not everyone is comfortable with reading the code but eventually amidst all of these you know hundreds of stuff that you can scroll through you're going to find eventually the uh the file name. Yeah. There are also a bunch of uh you know CSS scan for example there are chrome pro plugins that allows you to do that which is kind of cool. It's not free though.

对，可以用 inspect。但我觉得大多数人不会想去 inspect，原因是它更偏技术一点。有时候你还得在浏览器里打开开发者模式，然后 inspect，接着你还得读代码。不是每个人都习惯读代码，但只要你在那几百行东西里一直往下翻，最终总能找到那个文件名。对。另外还有不少工具，比如 CSS Scan，有些 Chrome 付费插件能帮你做这件事，挺酷的，不过不是免费的。

[22:19] Meng To

Uh but you can certainly find the uh the font that is being used.

嗯，但你肯定能查出它用的是什么字体。

[22:26] Peter Yang

Okay. And and let's go back to the the website that you were showing. Um, like let's say I want to add like a testimonial section or something like like the thing that that is on the the website like there's like a scrolling there's like a scrolling testimonial thing.

好。那我们回到你刚才展示的那个网站。比如说我想加一个客户证言（testimonial）板块之类的，就像那个网站上的那种，有一个滚动的客户证言效果。

[22:40] Meng To

Yeah.

对。

[22:40] Peter Yang

Yeah. That thing like like how how do I should I just tell uh Aura to add it or how how do I how do I add this?

对，就那个东西。那我该怎么弄？是直接让 Aura 加上去，还是怎么加这个？

[22:48] Meng To

Sure. So

好的，那么……

[22:48] Peter Yang

or something like that again.

或者类似那样的东西，再来一次。

[22:50] Meng To

Yeah.

对。

[22:51] Meng To

I think people tend to want to to do these things uh from scratch. Uh but

我觉得大家往往倾向于这些东西都从零开始做。不过呢……

[22:59] Meng To

the way I see it is that you should totally browse templates. So for example uh you know testimonial and uh

在我看来，你完全应该去翻翻模板。比如说，搜「testimonial」，然后……

[23:09] Meng To

you know my internet is not super fast right now but yeah so you you have like templates for testimonials and then you you can sort of like um open each of them and see what you like and then from there you can remix it. Right? So maybe you like something like this. Maybe you don't want a background. So you can remix and can say something like uh without background and then in light mode and stuff like that. And you know,

我现在网速不太快，不过你看，这里有一堆客户证言的模板，你可以挨个打开看看自己喜欢哪个，然后在那个基础上做 remix（二次改造）。对吧？比如你喜欢这样的，但你不想要背景，那就可以 remix 一下，跟它说「去掉背景，改成浅色模式」之类的。然后……

[23:39] Meng To

okay,

好。

[23:40] Meng To

it's going to remix. It's going to use that. Um yes, of course, you can create from scratch. You can use the prompt builder. You can also type all of that stuff. You can talk about the uh you know the the scrolling animation and all that stuff. It should it should also work. again um it's a lot through experimentation. So you can see you know we're building the testimonials and um yeah it's live previewing all of this stuff and it should get to a very similar result and and if I want to add the section because like you know uh if I use like a frame or like some some regular website building tool like it's like section based right like I can add a section here and like there. So if I want to add this AI generated section to my other website like the other one that you built, you just copy the coding or how do I

它就会去 remix，会用上那个模板。当然了，你也可以从零开始做，可以用 prompt builder（提示词构建器），也可以把所有要求都打出来，比如那个滚动动画之类的，应该都能跑通。还是那句话，这里面很多要靠不断试验。你看我们正在生成客户证言，而且它在实时预览这一切，最后会得到一个很接近的效果。那如果我想把这个板块加进去——因为你知道，如果我用 Framer 或者某个常规的建站工具，它们是基于「板块（section）」的，对吧，我可以在这儿加一个板块、那儿加一个板块。所以如果我想把这个 AI 生成的板块加到我另一个网站上，就是你之前做的那个，是直接复制代码，还是怎么……

[24:27] Peter Yang

how do I add it? Yeah.

我该怎么加进去？对。

[24:29] Meng To

So right now in it's in in its current form at the moment. So it's keeping in mind that we've only uh released like two months ago. Um

那么就目前它现在这个形态来说——要知道我们才刚发布两个月——

[24:38] Meng To

we're not very focused on creating like a full website like frameware yet. Uh that will come soon. But uh the way that I I want people to use this is more creating like a section a component uh more like 21st dev where you we're creating components where vibing the design think of it more like Figma. Typically, yes, you can create like a full uh website using Figma, but most of the time you're spending like really honing and crafting one single component first and then you ship that and then and the way that people should work with Aura is specifically, you know, you create these sections and and then

我们现在还没太把重心放在做一个像 Framer 那样的完整网站上，那个很快会有。但我希望大家用它的方式，更多是去创建一个板块、一个组件，更像 21st.dev 那种——我们在「凭感觉做设计（vibing the design）」地造组件。你可以把它更多地想成 Figma：当然，你确实能用 Figma 做一整个网站，但大多数时候你是在花时间先精雕细琢、打磨好某一个单独的组件，然后把它发布出去。大家用 Aura 的方式应该具体就是这样：你先做这些板块，然后……

[25:24] Meng To

you customize it really really quickly. um you know maybe you want something again uh playfair and maybe you want colors dark and then finally you export the code. So you copy the HTML or you can also copy the Figma

你飞快地把它定制好。比如你又想要 Playfair 这个字体，又想要深色的配色，最后你把代码导出来。你可以复制 HTML，也可以复制成 Figma。

[25:41] Meng To

and then once you have that then you can use something like lovable and then you can say something like um you know you know uh replace the testimonials in the sty uh in the style of this and then you paste the code from aura. So lovable viroll are just and cursor of course I use cursor all the time

一旦你拿到了代码，就可以用 Lovable 这类工具，跟它说「把客户证言换成这个风格」，然后把从 Aura 复制来的代码粘进去。所以 Lovable、v0，当然还有 Cursor——我一直在用 Cursor——

[26:05] Meng To

uh are way better than aura for completing that website.

在「把整个网站做完」这件事上，它们都比 Aura 强得多。

[26:09] Meng To

The problem with level and vzero is just the styling and the design aspect which is something that I really spend a lot of time on. So right now it's going to you know uh replace the testimonial section using the styling that I just created in Aura. So, for example, I really like this this styling here. Um, and you know, obviously I could also add a beautiful animation like this one. I mean, look at that. Right. So,

Lovable 和 v0 的问题就在于样式和设计层面，而这恰恰是我花了大量时间钻研的东西。所以现在它就会用我刚在 Aura 里做好的样式，去替换掉那个客户证言板块。比如说，我很喜欢这里这个样式。当然，我显然还可以加一个像这样漂亮的动画。你看看这个，对吧。所以……

[26:39] Peter Yang

Oh, that's awesome. Yeah.

哦，这太棒了。对。

[26:40] Meng To

Yeah. Exactly. You can really, you know, use a template one or the prompt builder. create something that you really like that that you saw on one of these website like 21st Dev or Vzero uh or or or sorry there's so many names I'm getting mixed up. Um and then you change the colors, the fonts and and and and the beautiful background and the mid journey images and the the avatar because these things are super hard to do in lovable. wouldn't believe me. But you know, even if you go to like let's say edit and then you want ah yeah I want to I want I want to change this icon like I have to ask AI for it and it's just a ton of trouble. I want to change this background. I want to add this image. I can't. It's just very difficult. And so oftent times what you want to do is you know you design that in Figma. But in this case because you don't have a ton of experience with design you want to use something like aura and you use a templates already made and you know boom boom boom and then you bring it back to lovable.

对，正是如此。你完全可以用某个模板，或者用 prompt builder，做出一个你真正喜欢的、在 21st.dev 或 v0 这些网站上看到过的东西——不好意思，名字太多我都搞混了。然后你改一改颜色、字体、漂亮的背景、Midjourney 生成的图片，还有头像，因为这些东西在 Lovable 里超级难做。你可能不信，但就算你进到比如编辑界面，你想——啊对，我想换掉这个图标——我还得去求 AI 帮我弄，麻烦得要死。我想换这个背景、想加这张图，做不到，就是非常难。所以很多时候你想做的是：在 Figma 里把它设计好。但在这种情况下，因为你设计经验不多，你就会想用 Aura 这类工具，用现成的模板，啪啪啪几下搞定，然后再把它拿回 Lovable 里。

[27:42] Peter Yang

Yeah that that's brilliant. Yeah. Um I mean but but then you can you can I mean it's kind of annoying to bring it back levels. Maybe the next step for your product is to just like let people cutting off here. like the maybe the next step for your like it's kind of annoying to bring it to lovable each time like the code even though I understand but like so maybe the next step for aura is just to let people just build and shipping aura directly right

对，这太妙了。对。不过……我是说，每次都得拿回 Lovable 其实有点烦。也许你这个产品的下一步，就是干脆让大家——你这边断了——也许下一步就是，因为每次都得把代码拿回 Lovable 确实有点烦，虽然我理解为什么。所以也许 Aura 的下一步，就是干脆让大家直接在 Aura 里又造又发布，对吧？

[28:06] Meng To

absolutely I think that's that's my goal like I said before I'm I'm voding all of this stuff I also have a strong focus on design and uh you know I I want to make sure that I'm not spreading myself thin because a lot of these things are super technical that I have I have yet to learn which is why I don't want overextend myself but yeah totally that is the end goal absolutely if I can make it so that I can you know release a framer style site using just aura because at the end of the day if you look at framer yes most people they cannot create like a full uh comet product of course but they can totally create a landing page

完全正确，我觉得那就是我的目标。就像我之前说的，我现在这些东西全是「凭感觉硬撸（voding）」出来的，同时我又特别看重设计，所以我得确保自己不会摊得太薄——因为这里很多东西超级技术，是我还没学会的，正因为这样我才不想把自己摊得太开。但没错，完全是这样，那就是最终目标，绝对是。如果我能做到只用 Aura 就发布一个 Framer 风格的网站——因为说到底，你看 Framer，没错，大多数人确实没法做出一个像 Comet 那样的完整产品，但他们完全能做出一个落地页。

[28:44] Meng To

and if we can get that with aura then that's you know that's my ultimate goal and uh you know we already have a ton of these these options that you can see you we can change, we can edit the the spacing, the padding, typography, you know, we can embed video and all that stuff. Um, and then it's just going to get better over time and eventually we're going to get to a a full landing page uh functional, at least up to the point of a of framer, for example. you know, framer, you're going to have a hard time building like a membership and, you know, a payment system and all that stuff, but totally you can build uh, you know, a bunch of simple pages, a landing page, a blog and, uh, components,

如果我们能用 Aura 做到这一点，那就是我的终极目标了。而且你看，我们已经有了一大堆这样的选项：可以改间距、内边距、字体排版，可以嵌入视频等等。然后它会随着时间越来越好，最终我们会做到一个完整的落地页，至少达到比如 Framer 那种程度的功能水平。要知道，用 Framer 你会很难做出会员系统、支付系统那些东西，但你完全可以做一堆简单的页面、一个落地页、一个博客，还有组件。

[29:25] Meng To

get leads.

去获取销售线索。

[29:28] Meng To

Yeah,

对，

[29:28] Meng To

absolutely.

完全没问题。

[29:30] Peter Yang

Um, can you um, quickly explain like, uh, this animation that you added in the background, right? like like like what is like what kind of technology is that using? Is it using spline or like how do you do it normally?

那个，你能不能快速讲一下，你加在背景里的这个动画？就是它用的是什么技术？是用 Spline 吗，还是说你平时是怎么做的？

[29:44] Meng To

All right, this is a really cool thing. Uh on spline uh so there's a lot of these new tools such as spline you can go to community. Uh there's also something called Rive and um uh and Lahi uh Lahi files, Lahi Animations, Lahi uh there's a bunch of Lahi lab, you know, there's a bunch of them and uh and Spline has two ways. One one is the

好，这个东西特别酷。在 Spline 上——现在有很多这类新工具，比如 Spline，你可以去它的社区里看；还有一个叫 Rive 的，以及 Lottie 文件、Lottie 动画，Lottie 还有一堆，像 LottieLab 之类的，反正这类工具一大把。Spline 有两种用法，第一种是……

[30:11] Meng To

uh the 3D. So you have a lot of these beautiful animations and 3D uh a lot of them are shared by the community that you can totally just remix. Again, the same principle

就是 3D。你能找到大量很漂亮的动画和 3D 素材，其中很多都是社区分享出来的，你完全可以直接拿来二次创作（remix）。还是同样的原则——

[30:23] Meng To

uh the author has shared. So that means you know they you're you're free to remix it. And uh so for example, if you like really like this chain animation here, you can totally bring that to your to the background of one of the components or the full website if you want to. And what I try to do is to make it super easy in Aura to just, you know, first of all, we we have these presets um here. So I brought a bunch of them. And of course we're you know we're linking to the author and uh the author has created a lot more of these and uh you know you can you can see different animation that you can use for your background and so you can bring that so you can you know like uh you can create a new one um here you can just add a swine background and you can just add the custom URL. So, let's say I I really like this.

作者已经分享出来了，所以你可以自由地去 remix。比如说，如果你很喜欢这里这个链条动画，你完全可以把它放到某个组件的背景里，或者你想的话放到整个网站的背景里。我在 Aura 里想做到的，就是让这件事变得超级简单——首先，我们这里准备了一些预设，我放进来了一批。当然，我们也都会标注链接到原作者，作者还做了很多这类素材，你能看到各种可以用作背景的动画，直接拿来用就行。所以你可以新建一个，在这里加一个 Spline 背景，然后填一个自定义 URL。比如说，我很喜欢这个。

[31:19] Peter Yang

Yeah.

嗯。

[31:19] Meng To

Right. And I'm going to remix it first.

好，我先把它 remix 一下。

[31:22] Peter Yang

Yeah.

嗯。

[31:23] Meng To

Um, if you don't have a a premium account. So, here you can see if I play this. This is all in 3D, by the way. So, you can see it's a 3D program. And then finally, you're going to export this, it's going to generate uh the link that you can use. So, you're going to copy this link. Uh, you don't want a logo, but again, you're going to need a premium account if you don't want to show the logo. The same principle with Framer. And then you're going to copy the link. You're going to update the URL.

如果你没有付费账号的话——你看，我把这个播放一下。顺便说，这整个都是 3D 的，你能看出来这是个 3D 程序。然后最后你要把它导出，它会生成一个链接给你用，你就把这个链接复制下来。你不想要它的 logo，但还是那句话，如果不想显示 logo 就得开付费账号，这跟 Framer 是一个道理。然后你把链接复制好，去更新 URL。

[31:49] Meng To

And uh and finally, I'm going to go back here and I'm going to uh paste the URL from Spline.

然后，最后我回到这里，把从 Spline 复制的 URL 粘贴进去。

[31:55] Meng To

Um and then yeah, there you go. You know, have the beautiful Yeah, that's as simple as that. And again, uh I try to make these things super easy because as a designer, I really care about this. But try to do that with, you know, with lovable and visero. It's not going to be simple. uh because at the end of the day like I said you know these are okay so I'm going to just check if if it managed to yeah okay so it did add you know the as we spoke it did add the testim test testimonial that we created and typically the way the way AI works is that it does adapt it okay it does adapt uh the design to make it make it consistent to the existing design that you have in lovable so that is by design and it's also good news because if you have an existing design in lovable for example

然后，你看，搞定了。漂亮的效果就有了，就这么简单。再说一次，我尽量把这些事做得超级简单，因为作为设计师我真的很在意这一点。但你要是拿 Lovable、Visero 去做同样的事，就没那么简单了，因为说到底，就像我说的……好，我来确认一下它有没有成功——嗯，好，确实加上了，就像我们刚才说的，它确实把我们之前做的那个用户评价（testimonial）加进去了。通常 AI 的工作方式是，它会去做适配——对，它确实会适配，把设计调成跟你在 Lovable 里已有的设计保持一致，这是它有意为之的设计逻辑。这也是个好消息，因为假如你在 Lovable 里已经有一套现成的设计——

[32:44] Meng To

then you can just create something like a layout and of course you can specify all of these things to AI you can say oh you know keep this design or keep this font you know but in general if you don't say anything it's going to adapt so you can see it has exactly the same avatar the same layout the same text but in my website in level But it didn't keep the font though. It it went back to like the inter font. It seems like like in level.

那你就可以直接做出一个布局之类的东西，当然你也可以把这些细节都明确告诉 AI，比如你可以说「保留这个设计」或者「保留这个字体」。但一般情况下，如果你什么都不说，它就会自动适配。所以你看，它用的头像一模一样、布局一样、文字也一样，只不过套到了我 Lovable 里的网站上。不过它没保留字体，它退回到了类似 Inter 那种字体，看起来 Lovable 里就是这样。

[33:16] Meng To

Absolutely. And again, yeah, you have to you have to mention these things. Um, so I could have totally just say, okay, I want you to update the entire landing page to the font in my HTML uh that I that I shared here.

没错。还是那句话，这些事你得专门讲出来。比如我完全可以直接说：好，我要你把整个落地页的字体，改成我在这里分享的 HTML 里的那个字体。

[33:32] Peter Yang

Got it. As a final step, why don't why don't we take a look at that uh that AI website that you made. All right. So, going back to this design here, you can see that it only took me a single prompt and the rest. So, again, we start with something that is extremely generic.

明白了。作为最后一步，咱们要不来看看你做的那个 AI 网站？好，回到这个设计这里，你能看到，我只用了一句 prompt，其余的就……还是那句话，我们一开始拿到的是一个极其千篇一律（generic）的东西。

[33:53] Peter Yang

Mhm.

嗯哼。

[33:55] Meng To

Although, of course, I try to make it um so that it does a little bit of animation. It does a little bit of uh like the font is not as bold like the the tightness and the styling but even that there's no silver bullet in term of you know you know starting from a single prompt. AI will always create something a bit more generic. But from there with the customizations, I simply did that and then we have a second version and now I change the font you know and I I use a spline background and I also

当然，我尽量让它带点动画，让字体别那么粗，调一下字距和样式。但即便这样，从一句 prompt 出发是没有银弹的，AI 总会做出偏 generic 的东西。但从这个基础上，再做些定制——我就这么改了改，于是有了第二版：现在我换了字体，用了 Spline 背景，我还……

[34:30] Meng To

use the midjourney images. So here uh you can see you know we can have like a abstract or something which is very popular when you do a design and uh you can have these beautiful 3D or you know you can have these beautiful uh flowers or you know these are the way I see it is that AI has become so good with creating images graphic designs that

用了 Midjourney 生成的图。你看，我们可以放个抽象风格之类的东西，这种在做设计时特别受欢迎；你可以放这些漂亮的 3D，或者这些漂亮的花。我的看法是，AI 在生成图片和平面设计上已经强到——

[35:00] Meng To

often times especially when it comes to using faces. So, for example, portrait, um, they're even better than, you know, uh, if you took it from Unsplash, which tends to be more generic. So, for example, if I switch to Unsplash, you're going to see, you know, it's not that they're bad, but, you know, after a thousand people use this on their website in testimonials, you don't, you know, at some point you're kind of get getting tired of it. So you know you want something a little bit more unique. So like this one for example generated by AI or you know maybe something high fashion

很多时候，尤其是涉及人脸的时候，比如肖像，它生成的甚至比你从 Unsplash 找的还要好——Unsplash 往往更 generic。比如我切到 Unsplash，你会看到，倒不是说这些图不好，而是当一千个人都把它用在自己网站的用户评价里之后，你慢慢就看腻了。所以你会想要更独特一点的东西。比如这张就是 AI 生成的，或者来点高级时装风（high fashion）的——

[35:39] Meng To

absolutely gorgeous but generated like in in 5 seconds using mid journey. So this is the age in which we live in. We have access to all of these amazing tools and we just need to make use of it. So basically like uh the steps you took to generous website like first step is just getting AI to generate something generic but the the real magic is actually using all the features you building in Aura to customize the font and the images and everything else and that that's like almost like not using AI right other than the majour stuff like

美得不行，但用 Midjourney 五秒钟就生成出来了。这就是我们所处的时代，我们能用上所有这些了不起的工具，要做的只是把它们用起来。所以基本上，你做这个网站的步骤是：第一步只是让 AI 生成一个 generic 的东西，但真正的魔法其实在于，用上你在 Aura 里做的所有功能去定制字体、图片以及其他一切，而这部分几乎可以说不算在用 AI 了，对吧？除了 Midjourney 那些之外，就像……

[36:10] Meng To

exactly

正是如此。

[36:10] Peter Yang

right that's just like yeah got it

对，就是这样，明白了。

[36:12] Meng To

well it is using AI so for example if you look at this button here you know I could have customized it manually um which maybe I will do this in inuture you're having a template of buttons, but you can also ask AI. So, you know, for example, uh you know, I'm going to change this button right here, the watch demo. I'm going to go to prompt and I'm going to go to a tool called UI verse. So, here you have a bunch of button styles. And uh it's not going to be working for every single uh button because some of them are more complex than than other ones. Um, but you know, let's say I want this one and this one. You're kind of looking for a simple button like this one because essentially you're just getting the style. So, you just want the CSS. The CSS is going to be used as a code as a template. So, now I'm going to go back to to to my design here. And I'm going to just paste the style and apply. And if my internet is not uh bad, it's going to do that in about 30 seconds. So uh yeah there you go. So this is AI right and um what what I want to point out is that there are millions of ways to design something. Yes you can use AI for everything but the problem with relying only on AI is that if you make a mistake you will give up and you don't know what else to do. you don't know how to get through and and how to to overcome that struggle. So, at some point, you're going to need to learn to to do the 10% yourself. So, I like to think that you want to use AI for 90% of the way, but the last 10% you should totally learn how to change the font, change the images, you know, like uh start with a new button because if you don't do that, then your design is going to remain generic all the way. So, for example, maybe I want to have these the these uh this specific card in glass style, you know, I I can use AI and um but I can also, you know, uh have my own collection of icons. And here I try to make it super easy to just, you know, change the the icons and, you know, you can see it. It even remembers the colors and all that stuff. I can change the color. But yeah, got it.

其实它确实是在用 AI。比如你看这里这个按钮，我本可以手动去定制它——也许我以后会做成一个按钮模板——但你也可以直接让 AI 来做。比如说，我要改这里这个「Watch Demo」按钮，我去到 prompt，然后去到一个叫 UIverse 的工具。这里有一大堆按钮样式。它不一定对每个按钮都管用，因为有些按钮比别的复杂。但比如说我想要这个、还有这个。你最好挑像这种简单的按钮，因为本质上你拿的只是它的样式，你要的就是那段 CSS，这段 CSS 会被当作代码、当作模板来用。好，现在我回到我的设计这里，把样式粘贴进去并应用。如果我的网速不太糟的话，大概 30 秒就能搞定。嗯，你看，搞定了。这就是 AI，对吧。我想强调的一点是，设计一个东西有无数种方法。是的，你可以什么都用 AI，但只依赖 AI 的问题在于：一旦出了错，你会束手无策、直接放弃，不知道还能怎么办，不知道该怎么闯过去、怎么熬过那个卡壳的坎。所以到了某个时候，你得学会自己去做那 10%。我喜欢这么想：90% 的路你尽管用 AI，但最后那 10%，你真的应该学会怎么换字体、换图片，比如怎么从头做一个按钮——因为如果你不这么做，你的设计就会从头到尾都很 generic。比如说，也许我想把这张特定的卡片做成玻璃拟态（glass）风格，我可以用 AI，但我也可以有我自己的一套图标库。这里我尽量让换图标变得超级简单，你看，它甚至记住了颜色那些东西。我还能改颜色。嗯，明白了。

[38:31] Peter Yang

It's

这……

[38:32] Meng To

it's just different focus, different tools. Um, and you should be aware of all the these all of these tools and all of these uh things that can really help you out.

这只是侧重点不同、工具不同罢了。你应该了解所有这些工具、所有这些能真正帮到你的东西。

[38:43] Peter Yang

Yeah, I'm learning a lot here. like it's it's like knowing where to find the right resources for buttons or colors and stuff and then knowing to copy and paste and coding and then and obviously you build a great uh platform to make all this like cuz because without all all this stuff that you have built Aura it would take like a long time to apply the button style and do all this stuff right it's just a pain in the ass so so it's good that you're making it a lot easier

对，我在这儿学到了好多。就像，关键在于知道去哪儿找到合适的资源——按钮、配色这些，然后知道怎么复制粘贴、怎么写代码。当然，你还做出了一个很棒的平台来搞定这一切，因为如果没有你在 Aura 里做的这些东西，光是套用一个按钮样式、做完这一摊事就得花很久，对吧，那真是个苦差事。所以你把这些做得轻松多了，这太好了。

[39:06] Meng To

yeah and one thing to keep in mind that is that we are still in the early stage of AI so only a few months ago I would say maybe five six months that you know AI started getting really good at generating um you know code or even designs using code uh if you remember like cloud 3.5 was not very good at generating designs uh HTML and and beautiful designs so you can imagine that in about six months time we're going to be able to create beautiful website in the league of DIA or or this beautiful comet landing page. Um, I'm not saying we're gonna get there to level 10, but at least right now, if you think of right now is level one

对，还有一点要记住：我们现在还处在 AI 的非常早期阶段。也就几个月前——我估计也就五六个月吧——AI 才开始真正擅长用代码生成代码、甚至生成设计。你要是还记得，Claude 3.5 当时在生成设计、生成 HTML 和漂亮的设计上还很不行。所以你可以想象，再过大约六个月，我们就能做出像 DIA 那种水准、或者像那个漂亮的 Comet 落地页那样的精美网站了。我不是说我们能一下子做到第 10 级，但至少现在——如果你把现在算作第 1 级，

[39:52] Meng To

and 3.5 is a level zero, then this, you know, we can certainly get to level five uh in about six months time. So that's the exciting part and you know our tools need to evolve, our knowledge need to evolve over time. Just to wrap up, do you have any like uh closing words of advice for the product designers out there or even like the PMs? Like you know, design has really evolved over the past few years like and now everyone has these like AI assistants to help help them like any any kind of good words of advice for people to get started doing this stuff. Yeah,

而把 3.5 算作第 0 级，那么再过大约六个月，我们肯定能到第 5 级。这就是让人兴奋的地方。我们的工具需要进化，我们的知识也需要随时间进化。

[40:25] Meng To

sure. Um my word of advice uh is to to use all the tools that are available to you and to you to only use the best of the best ones. um because we're we're going to be,

（接上）最后做个收尾，你有没有什么给广大产品设计师、甚至产品经理（PM）的临别建议？要知道，过去这几年设计真的发生了巨变，现在每个人都有这些 AI 助手来帮忙了，对那些想开始上手做这些事的人，有没有什么金玉良言？「好的，

[40:37] Meng To

you know, flooded literally flooded with so many AI tools

当然。我的建议是：把所有你能用上的工具都用起来，而且只用其中最顶尖的那些。因为我们将会被——真的会被——海量的 AI 工具淹没。」

[40:42] Meng To

and there's a lot of people talking about AI tools on on Twitter and um and LinkedIn. Uh and and it's very very hard to see what each of of each each is good at or not. Um but what I would say is that you know build a a sense of taste and a sense of like knowing what is good and what is bad because taste is the fact the differentiator in in the new age right knowing what to use like okay should you use comet or dia like which one is better and for what reason are they better should you use aura or should you use loveable which one is better and what about them is better for what part of of the design process the same with figma the same the same with uh you know Figma versus framer. So like knowing all of these stuff and also you know midjourney for example should you use midjourney or you know should you use VO or um all the you know stable diffusion uh like knowing the nuances but also try them yourself create beautiful results be happy with it and you know like knowing just the fact that you know that aura has these beautiful templates or that spline has these amazing

现在在 Twitter、LinkedIn 上一堆人在聊各种 AI 工具，你很难看清楚每个工具到底擅长什么、不擅长什么。但我想说的是，你得培养自己的品味、培养那种'分得清好坏'的判断力，因为在这个新时代，品味才是真正的差异化所在——你得知道该用什么。比如说，你该用 comet 还是 dia？哪个更好、为什么更好？该用 Aura 还是 Lovable？它们各自更擅长设计流程里的哪一环？Figma 也一样，Figma 和 Framer 怎么选也一样。所有这些都要心里有数。Midjourney 也是，你该用 Midjourney、还是 VO、还是 stable diffusion？这些细微差别你都得清楚，而且要亲自上手去试，做出漂亮的成果、享受这个过程。哪怕只是知道'Aura 有这些漂亮的模板'、'Spline 有这些很棒的'

[41:54] Meng To

uh you know community templates that you can remix. I think that's amazing knowledge that you can sort of sort of add to your arsenal of tools. So yeah, you know, like some of my favorite tools um you know, for buttons for example and UI and cards, UI verse for components and um and uh designs and uh animations and stuff like that, you know. I think uh 21st dev and aura is really good and react bits also is a super nice library of beautiful background animations and you know and and textures and animations interactions and also another thing that you can certainly do a lot is to take screenshot and create a website uh or a design instead of just doing a single prompt you're going to you're going to want to take inspiration from your favorite websites such as dribble and uh you know and feed that to AI whether it's lovable or vzero. And keep in mind that everything that you see in Aura is free. So all of these templates that you see right here, I share the code for free. You don't need to be a paying member for that. So you know like for example, you you really like this this landing page that I created and these beautiful images. You can just go here and export, copy the code. Uh save the HTML file and as as I show you I I I did show you earlier is bring this code to lovable visual cursor and then just create your website based on that. say something like in the style of this landing page or this code

那些可以二次创作的社区模板，我觉得这些都是很棒的知识，能不断充实你的工具库。所以呢，说几个我自己很喜欢的工具：比如要做按钮、UI、卡片，UI verse 这种组件库很不错；要做设计、动效之类的，我觉得 21st dev 和 Aura 都很好用；React Bits 也是个超棒的库，里面有很多漂亮的背景动画、纹理、动效和交互。还有一招你完全可以多用，就是截图建站——与其只丢一句 prompt，不如从你喜欢的网站（比如 Dribbble）找灵感，把它喂给 AI，不管是 Lovable 还是 v0。另外记住，你在 Aura 里看到的一切都是免费的。你看到的这些模板，代码我都免费分享，不用付费会员也能拿。比如你很喜欢我做的这个落地页、喜欢这些漂亮的图，你就直接点这儿导出、复制代码，把 HTML 文件存下来。然后就像我前面演示过的，把这段代码丢进 Lovable 或者 Cursor，让它照着这个来给你建站，说一句类似'按照这个落地页的风格'或者'参照这段代码'就行。

[43:33] Meng To

um and AI is going to iterate

然后 AI 就会帮你不断迭代，

[43:36] Meng To

and then yeah find what works for you and what doesn't work for you and eventually you're going to get to a point where wow I can't I can't imagine like a future where I don't use AI.

接着你就慢慢摸索出哪些适合你、哪些不适合你，最后你会到一个境界——'哇，我已经无法想象一个不用 AI 的未来了'。

[43:47] Peter Yang

Yeah, that's amazing. It's it's like so my takeaway is like uh there's a lot of great designers who have a lot of great components out there, a lot of free resources you should use, copy the code from and and like don't be satisfied with like the inter chassen AI stuff that's like default just like try try something better. Yeah,

太棒了。我的收获是这样的：外面有很多很厉害的设计师，做了很多很棒的组件，还有大量免费资源你都应该拿来用、把代码复制过来；别满足于那种千篇一律、默认那一套的'AI 味'东西，去试试更好的。

[44:04] Meng To

exactly.

没错，正是这样。

[44:06] Peter Yang

So where can people find Aura and and where can people follow you?

那大家在哪儿能找到 Aura？又在哪儿能关注你呢？

[44:10] Meng To

Sure. Um you know you can find Aura is is aura.build build and uh here again you have you know free prompts. You also have these free templates that you can use. You can try the prompt builder. Yes, it is a paid feature but you can still play with it. You know this is free. You can play with it. You can get the v vocabulary and learn uh how how to prom uh which is really important. And then uh you can also find me on Twitter. So Twitter well x now. So, mangto

好的。Aura 的网址是 aura.build，在这儿同样有免费的 prompt，也有这些可以直接用的免费模板。你还可以试试 prompt builder——对，这是个付费功能，但你照样能玩一玩，这块是免费的，随便试。你能拿到那套词汇、学会怎么写 prompt，这一点真的很重要。另外你也能在 Twitter 上找到我——现在叫 X 了——账号是 mengto。

[44:40] Meng To

and here I share um so many hours. I think I have like four hours of training on on prompting. So, these are videos that are free. Uh I also have a YouTube channel uh design code team where you can find the same videos and uh yeah, you know, like uh if you have any questions, just send them my way and I'm happy to help you out through this experience.

我在那儿分享了特别多内容，光是讲 prompting 的教程我估计就有差不多四个小时，这些视频都是免费的。我还有个 YouTube 频道叫 Design+Code，上面能看到同样这些视频。总之，你要是有任何问题，尽管来找我，我很乐意在这个过程中帮你。

[45:02] Peter Yang

Awesome, man. Thanks so much, man. You know, man, I'm not sure if you noticed. I I I was doing some research for an interview and searching my emails. I I I realized I purchased like one of your design code courses or materials like four four or five years ago. So, you you've been you've been teaching this stuff for a long time. So, you know, really appreciate you helping everyone level up their design and like the work that they produce.

太赞了，老哥，真的太感谢你了。对了，不知道你注意到没有，我为这次访谈做功课、翻自己邮箱的时候，发现我大概四五年前就买过你 Design+Code 的一门课还是一份资料。所以你做这块的教学已经很久了。真心感谢你帮这么多人把设计、把他们做出来的东西提升了一个档次。

[45:22] Meng To

Yeah. And uh thank you so so much, Peter. And obviously, as someone who, you know, now lives in Singapore uh doing everything, you know, alone and I think a lot of people are starting to do that, right? you don't want to go to these jobs and you know at at the risk of being fired just because AI like a new AI tools comes out you start your own thing you build your own website your own product you do your own design and uh you know we're we're the small guys you know we're the small uh creators and we we need to collaborate we need to come together and and sort of learn together and build uh the next you know the next Figma the next lovable the ne like the next Photoshop um and uh I I think it's really exciting and we can just live anywhere you want. Uh, you know, have the life that you want, the freedom that you want and I think it's a beautiful uh future.

嗯，也太谢谢你了，Peter。说实话，作为一个现在住在新加坡、什么都自己一个人搞的人——而且我觉得现在越来越多人开始这样了——你不想再去上那种班，整天担心被裁，就因为 AI、因为某个新 AI 工具一出来你就可能丢饭碗。你开始干自己的事，自己建网站、做自己的产品、做自己的设计。我们这些小人物、小创作者，需要协作、需要聚到一起、一起学习、一起去打造下一个 Figma、下一个 Lovable、下一个 Photoshop。我觉得这特别让人兴奋，而且我们想住哪儿就住哪儿，过自己想要的生活、拥有自己想要的自由，我觉得这是个很美好的未来。

[46:12] Peter Yang

I totally agree.

我完全同意。

[46:14] Meng To

Yeah. Thank you so much for having me.

嗯，非常感谢你请我来。

[46:16] Peter Yang

All right, man. Thanks so much.

好的老哥，太感谢你了。