How to use Cursor for interactive prototypes, sound design, and data visualization

频道: How I AI
视频: https://www.youtube.com/watch?v=zQkFJNj-2lw
原文语言: en
统计: 共 47 轮 · Elizabeth Lin 29 · Claire Vo 18

[0:00] Elizabeth Lin

Working with Curser has really taught me that tools like Cursor can actually be extremely creative. How do you teach an LLM to have good taste? The biggest key is to broaden your sources of inspiration and help them understand what you're inspired by. I try to send like really random things like the K-pop music video or like different pieces of art that it might not normally be inspired by and kind of see what it takes from it. And that's been really helpful to generate things that are a little bit more different. Right now, there's nothing more fun than coming back to this page and seeing what it generated. I never know what's going to happen. I've tried similar prompts before and sometimes it does something completely different. And so, it's so fun to use the same prompt over and over

用 Cursor 工作真的让我意识到，像 Cursor 这样的工具其实可以非常有创意。怎么教一个 LLM 拥有好品味呢？最关键的一点，是去拓宽你的灵感来源，让它理解你到底被什么东西打动。我会故意发一些很随机的东西给它，比如一段 K-pop 的 MV，或者一些它平时不太会从中取材的艺术作品，然后看看它能从里面提炼出什么。这招特别管用，能生成一些更不一样的东西。眼下没有什么比回到这个页面、看看它生成了什么更有意思的了。我永远猜不到会发生什么。同样的 prompt 我之前也试过，有时候它做出来的东西却完全不同。所以反复用同一个 prompt

[0:39] Claire Vo

again to see what I get every time. Do you keep these commonly used prompts in a document? Do you just know them? How are you keeping track of all these things that work and don't work? If something visually works really well, I've thought about asking cursor to generate a note or rule that helps me describe it to it in the future. so I can reference that note in the future for a future project. [Music] Welcome back to How I AI. I'm Claire Vo, product leader and AI obsessive here on a mission to help you build better with these new tools. Today we're talking to a cursor power user, Elizabeth Lynn, but she doesn't use it as a software engineer. Nope, she's a designer. She shows us how you can prompt cursor to explore different aesthetics for your design, integrate interactivity and

去看每次得到的结果，真的特别好玩。那这些常用的 prompt 你会专门存在一个文档里吗？还是全靠脑子记？你是怎么追踪哪些 prompt 管用、哪些不管用的？——如果某个东西视觉上效果特别好，我其实想过让 Cursor 帮我生成一条笔记或者 rule，把它描述清楚，这样以后做新项目时我就能直接引用那条笔记。[音乐] 欢迎回到《How I AI》。我是 Claire Vo，一名产品负责人，也是个 AI 狂热爱好者，我的使命就是帮你用这些新工具做出更好的东西。今天我们要聊的是一位 Cursor 重度用户——Elizabeth Lin，但她可不是以软件工程师的身份在用它。不，她是一名设计师。她会向我们展示，怎么用 prompt 让 Cursor 去探索不同的设计美学，把交互和

[1:26] Claire Vo

sound into your prototypes, and take a really ugly dashboard and make it look great. Let's get to it. This episode is brought to you by Lovable. If you've ever had an idea for an app, but didn't know where to start, Lovable is for you. Lovable lets you build working apps and websites by simply chatting with AI. Then you can customize it, add automations, and deploy it to a live domain. It's perfect for marketers spinning up tools, product managers prototyping new ideas, or founders launching their next business. Unlike no code tools, Lovable isn't about static pages. It builds full apps with real functionality. And it's fast. What used to take weeks, months, or even years, you can now do over the weekend. So, if you've been sitting on an idea, now's the time to bring it to life. Get

声音融进你的 prototype 里，还能把一个超级丑的 dashboard 变得很好看。我们这就开始吧。本期节目由 Lovable 赞助。如果你曾有过一个 app 的点子，却不知道从哪儿下手，那 Lovable 就是为你准备的。Lovable 让你只靠跟 AI 聊天就能做出能跑的 app 和网站。然后你还能继续定制它、加上自动化、并部署到一个真实的线上域名。它特别适合想快速搭个工具的市场营销人、想给新点子做 prototype 的产品经理，或者准备启动下一份事业的创业者。和那些 no-code 工具不一样，Lovable 做的不是静态页面，它会构建带有真实功能的完整 app，而且很快。过去要花上几周、几个月甚至几年才能做出来的东西，你现在一个周末就能搞定。所以，如果你一直把一个点子压在手里，现在正是把它变成现实的时候。

[2:14] Claire Vo

started for free at lovable.dev. That's lovable.dev. Elizabeth, thanks for joining How I AI. Yeah, I'm excited to be here. One of the things I love about your work is you are teaching designers to use cursor not to code. Like fine, code's a byproduct, but really to design better. And I think that's such an awesome angle. So, I would love you to just walk us through how you use cursor and some of the tips and tricks that you're sharing with designers. You know, one of the things I love about teaching cursor to designers is that working with it really reminds me of when I used to make websites and Neopaths. I've been creating a lot of these really fun prototype sites that have kind of more like chaotic little like gifts. And you'll notice that here there's a little cursor that has a

去 lovable.dev 免费开始体验吧，网址是 lovable.dev。Elizabeth，谢谢你来上《How I AI》。嗯，我很高兴能来。我特别喜欢你工作的一点是——你在教设计师用 Cursor，不是用来写代码。当然代码算是个副产品，但你真正教的是怎么做出更好的设计。我觉得这个切入角度太棒了。所以我很想请你带我们走一遍，看看你是怎么用 Cursor 的，以及你分享给设计师的一些技巧和窍门。你知道吗，我特别喜欢教设计师用 Cursor 的一个原因是，用它工作真的让我想起以前在 Neopets 上做网站的日子。我最近做了好多这种特别好玩的 prototype 网站，上面有那种比较混乱、活蹦乱跳的小 GIF。你会注意到这里有一个小光标（cursor），上面还带着一个

[3:04] Elizabeth Lin

sparkle on it. Um, these little cards animate and kind of go in different angles. And working with cursor has really taught me that tools like cursor can actually be extremely creative. Um this is another one I did um as another demo where cursor was like oh let's create these three dimensional cards and what I fed it was a I don't know if you're familiar with Espa the K-pop group but I fed it an ESPA music video screenshot and I was like hey like be inspired by this. and I was like, "Okay, it looks like it's a little bit cyberpunk and it looks like there's a lot of like purples and blues." And so it kind of took that and then I went with it and iterated with it. Um, I've been able to explore like a lot of different visual styles specifically. And so I made this as like a prototype

闪光效果。呃，这些小卡片会做动画，往不同的角度散开。用 Cursor 工作真的让我意识到，像 Cursor 这样的工具其实可以非常有创意。呃，这是我做的另一个 demo，当时 Cursor 说「咱们来做这种三维立体的卡片吧」，而我喂给它的是——我不知道你熟不熟悉 aespa 这个 K-pop 团体——我喂给它一张 aespa MV 的截图，然后说「嘿，从这个里面找灵感吧」。我就说「好，看上去有点赛博朋克（cyberpunk）的感觉，而且用了很多紫色和蓝色」。它就顺着这个方向去做，然后我再跟它一起迭代。呃，我已经能探索出特别多种不同的视觉风格。所以我把这个做成了一个 prototype，

[3:50] Elizabeth Lin

for a portfolio to show how easy it is to really explore very creatively. So, I created this like chaotic interface where there's different modes of chaos that um come with the interface and I just had a lot of fun exploring it. Honestly, the first iteration of this was not very cute, but I was really inspired by a lot of the decisions the AI made and I was able to really push forward for something that I was really excited about. And of course, I had to do an example that was a little bit more safe that focused on more of what designers kind of value as good design today to show that I can also do that as well. So, those are a few examples of different visuals that I've explored specifically. So, one of the things I like to start with is teaching students how to prototype by helping them create

当作一个作品集（portfolio），用来展示创意性地探索其实有多容易。我做了这么一个很混乱的界面，里面带着好几种「混乱模式」，我探索它的时候玩得特别开心。说实话，第一版做出来并不怎么好看，但 AI 做的很多决定真的给了我很大启发，让我能在此基础上推进出一个我特别满意的东西。当然，我也得做一个更「保守」一点的例子，更聚焦于当今设计师普遍认可的「好设计」是什么样的，来证明我也能做出那种东西。这就是我专门探索过的几种不同视觉风格的例子。所以呢，我喜欢从这一步开始：教学生怎么做 prototype，方法是帮他们做出一个他们真正引以为傲的

[4:44] Elizabeth Lin

a homepage that they're really proud of. And so we start with this like really boring and bland website. And the goal is to make something that you are really excited about. So usually with like a blank page, it can be a little bit hard to get started. But what I'm going to do first is I'm going to go ahead and open up cursor. And you'll notice that there's actually nothing here right now. Basically, this is just this homepage here. There's no CSS. And I'm gonna go ahead and paste this prompt that I really like to use that says, "What design aesthetics and movements are you comfortable implementing? List the styles and describe them to me." I really love having conversations with agent and cursor because I find that it sometimes comes up with different ideas that I

主页（homepage）。我们一开始用的是这么一个特别无聊、特别平淡的网站。目标是把它变成一个你真心为之兴奋的东西。通常面对一张白纸的时候，会有点难下手。所以我要做的第一件事，是先打开 Cursor。你会注意到现在这里其实什么都没有。基本上就只有这么一个主页，没有任何 CSS。接下来我要粘贴一个我特别爱用的 prompt，它是这么说的：「你能熟练实现哪些设计美学和设计流派？把这些风格列出来并向我描述一下。」我特别喜欢跟 Cursor 里的 agent 对话，因为我发现它有时候会冒出一些我本来不太熟悉的

[5:31] Elizabeth Lin

wouldn't necessarily be familiar with. And so you'll notice here that it's describing a lot of these like visual design movements it's extremely comfortable with. And you'll notice that it's really comfortable with the ones that I think are really popular on the internet. So, it's probably less comfortable with something that's a little bit more like art focused like Dadaism, but it's really comfortable with something like vapor wave because that's something that is very trendy on the internet. So, just to take a moment here, what's interesting about this flow is you're not actually coming in with an idea of an aesthetic that you want to put into the design. you're actually prompting cursor to give you some ideas of of design styles that you might be able to use. And then for folks that

点子。你会注意到，它在这里描述了一大堆它特别擅长的视觉设计流派。而且你会发现，它最得心应手的，正是那些我觉得在网上特别流行的风格。所以它对那种更偏艺术的东西——比如达达主义（Dadaism）——大概就没那么擅长，但它对像蒸汽波（vapor wave）这样的风格就特别擅长，因为那在网上非常潮、非常流行。所以稍微停一下——这个流程有意思的地方在于：你其实并不是带着一个「我想往设计里放什么美学」的想法进来的，你反而是在用 prompt 让 Cursor 给你一些它能用的设计风格点子。然后呢，对于那些

[6:17] Claire Vo

aren't watching the screen, what's really neat is cursor has done this really nice job of taking the design style, say for example cyberpunk, and actually giving you some descriptive words. So, neon color schemes, dystopian elements, glitch effects, and those are phrases that I wouldn't think of as even as somebody with a design background, but giving you just this language is really interesting. Yeah, I really encourage people to have conversations with um LLMs because you never know what you're going to learn from it and then you kind of learn to speak its language a little bit better because sometimes you're not sure what it necessarily means by like cyber punk and being able to pull those like specific details out can really help. Okay, so what's next? Um do you have like two styles that you

没在盯着屏幕看的朋友，真正巧妙的地方是：Cursor 把一种设计风格——比如就拿赛博朋克（cyberpunk）来说——很漂亮地拆解成了一些描述性的词。比如霓虹配色、反乌托邦元素、故障（glitch）效果，这些都是我作为一个有设计背景的人都未必想得到的词，但它直接把这套语言喂给你，真的很有意思。是的，我特别鼓励大家多跟 LLM 对话，因为你永远不知道能从中学到什么，而且你会慢慢学会更好地用它的语言来沟通。因为有时候你也搞不清它说的「赛博朋克」到底是什么意思，而能把那些具体的细节扒出来，真的很有帮助。好，那接下来呢？呃，你有没有两种风格

[7:01] Claire Vo

would like to see? Yes, of course. Let me look. Oh, let's I mean let's do brutalist because that sounds real boring. So let's do a brutal. Actually, let's do these two. Brutalist and Y2K. I love because they'll be very different. Okay. So, I'm going to say, can you redesign the homepage to be Brutalist and Y2K style? And I always tell my students that results might vary. So, sometimes you'll get something really cool and other times not so cool. But the good thing is that you can always undo. And so just while this is generating, I'm curious if you switch to the web web page for a minute while it's generating, are you just making this with are you also making this with cursor the sort of like outline of the page or how are you getting that done? Yeah, so I actually

想看看的？当然有。我看看。哦，要不咱们……我是说，咱们试试 Brutalist（粗野主义）吧，因为这名字听着就特无聊。所以就来个 Brutalist。其实——咱们就试这两个吧：Brutalist 和 Y2K。我喜欢这俩，因为它们的反差会特别大。好。那我就这么说：你能不能把这个主页重新设计成 Brutalist 加 Y2K 的风格？我总是跟我的学生说，结果可能会因人而异。有时候你会得到特别酷的东西，有时候就没那么酷。但好处是你随时可以撤销（undo）。趁它正在生成，我有点好奇——要不你先切到那个网页看一下，在它生成的这会儿……这个，你也是用 Cursor 做的吗？我是说页面的那种大体框架（outline），还是你是怎么搞定那部分的？嗯，其实我是

[7:49] Elizabeth Lin

pre-made this outline um because I think making the outline is a little bit trickier and so when you um want to start from scratch, that's something that I found is harder with cursor. It's easier with other tools like BZero and Lovable, but I have a coding background and so I was able to kind of set up the foundations for this project beforehand to kind of make it easier to prototype. So if somebody was maybe getting started, getting your basic black and white Vzero prototype going and then pulling it into cursor for the styling might be the way to go. Yeah. Yeah. Exactly. Okay. Really fast. Yeah. So, it's done some like really wild and funny things that I honestly wouldn't have even considered if I was designing this from scratch. Um, this little like blinky cursor thing is

提前把这个框架做好的，因为我觉得做框架这部分会稍微棘手一点。当你想从零开始的时候，我发现那恰恰是 Cursor 比较不擅长的地方。用别的工具反而更容易，比如 v0 和 Lovable。但我有编程背景，所以我能事先把这个项目的底子搭好，让后面做 prototype 更轻松一些。所以如果是刚入门的人，也许可以先用 v0 把那种基础的黑白 prototype 跑起来，然后再把它拉进 Cursor 里做样式（styling），这条路可能更靠谱。对，对，没错。好，很快啊。对。所以它做了一些特别狂野、特别搞笑的东西，老实说，如果是我从零开始设计，我根本不会想到。呃，这个一闪一闪的小光标（cursor）真是

[8:36] Elizabeth Lin

hilarious. Um, it looks like it's trying to be like the command line up here. You'll notice that there's this like typing animation. Um, which is really fun, too. I think if I was to implement that from scratch, um, even as someone who's fairly good at CSS, I wouldn't have taken a while to figure out how to do that. Something else I've noticed is, especially if you're working with these tools, they love adding like random hover effects and random like this glow is so extra, but honestly, I feel like if I like iterated on it a little bit, it could probably do something pretty interesting. And so that's kind of like um how I like to approach it is instead of starting with an idea, I typically actually like to do the opposite where I'm like, "Okay, let's start from a high

太逗了。呃，看上去它是想模仿这上面的命令行（command line）。你会注意到这里有这么一个打字机动画，呃，也特别好玩。我觉得，如果让我从零开始去实现这个效果，呃，哪怕我 CSS 还算挺溜的，我也得花上好一阵子才能搞明白怎么做。我还注意到一点：尤其是当你用这些工具的时候，它们特别喜欢加一些随机的 hover 效果，还有这种随机的发光（glow），这个发光真的有点用力过猛，但说实话，我觉得只要我在它基础上稍微迭代一下，没准能做出挺有意思的东西。所以这其实就是我喜欢的工作方式：与其一上来就带着一个想法，我通常更喜欢反过来，先想「好，咱们从一个比较宏观的

[9:17] Claire Vo

level and see what you create from scratch." and then I'll take that and then iterate on it if I think there's something really cool. I think this is so funny because two things. One, as someone who actually wrote code in literal Y2K, this is totally the kind of thing that I would have thought was super awesome and I would have tried to learn special CSX CSS or HTML tricks just to get this done. And then two, I'm just like you. Um, you know, you mentioned Neopets. I did this a lot with like Webering style web design where it's just this like personal design space is so fun and AI is making it really accessible again which I think is just it's really energizing to me. Yeah, I totally agree. I think um right now there's nothing more fun than coming back to this page and seeing what it

层面出发，看看你能从零创造出什么」，然后我再把它接过来，如果觉得哪儿特别酷，就在那上面继续迭代。我觉得这事儿特别好玩，有两点。第一，作为一个真的在 Y2K 那个年代写过代码的人，这种东西正是当年我会觉得超级炫酷、会专门去学一些特殊 CSS 或 HTML 技巧才能做出来的玩意儿。第二，我跟你一模一样。呃，你提到了 Neopets，我以前也用类似 Webring 那种风格的网页设计玩过很多——那种纯粹属于个人的设计空间真的特别好玩，而 AI 正在让它重新变得唾手可得，我觉得这真的特别让人振奋。是啊，我完全同意。我觉得，呃，眼下没什么比回到这个页面、看看它

[10:07] Elizabeth Lin

generated cuz I'm like I never know what's going to happen. I've tried similar prompts before and sometimes it does something completely different and so it's so fun to use the same prompt over and over again to see what I get every time. And let's say I mean this is obviously perfect. Hang it in the loop. But let's say you you didn't love this. You're like, you know what, I don't need the glossy hover effect. I don't need, you know, the glow. How would you would you just reprompt this again to try to get something different? I would maybe try reprompting or I would try to iterate on this and kind of use my designer mindset on it to try to figure out how to make it better. We could try reprompting it and see what we get the next time to see what the difference

……生成出来的，因为我永远不知道会出来什么。我之前试过类似的 prompt，有时候它给出的东西完全不一样，所以反复用同一个 prompt、看每次能得到什么，特别好玩。比如说，这个结果显然已经很完美了，可以直接挂出来展示。但假设你并不喜欢它呢？你心想，我其实不需要那种光滑的 hover 效果，也不需要那种发光感。这种情况下你会怎么办，是直接重新 prompt 一遍试试看别的效果吗？我可能会重新 prompt，或者在这个基础上继续迭代，用我设计师的思维去琢磨怎么把它做得更好。我们可以重新 prompt 一次，看看下一次出来的会有什么不一样。

[10:46] Elizabeth Lin

could be. Do you want to do that? Yeah, let's do it. Okay. So, um this might you you pick you pick the aesthetic. I got I got to do it first, so you can do the next one. I actually think it might be interesting to do the same one and see what it looks like this time. Great. Okay. So, I'm gonna go ahead and press enter. And did you go back to the original prompt and just resend it in cursor? Yeah, I always restore the checkpoint when I don't like something. Um, that's something I actually really encourage people need a cursor to do because the more you go down a rabbit hole you don't like, the harder it is to like crawl out of it. And so, I use restore checkpoint pretty liberally. Um, but I do encourage people to take screenshots so that you can kind of like revisit what it looked

……可能会是什么样。你想试试吗？好啊，来吧。好的，那这次……由你来定风格吧。不过得我先来，下一个交给你。我其实觉得用同一个 prompt 再跑一次、看这次出来什么样，可能会挺有意思。太好了。好，那我就直接按回车了。你是回到最初那个 prompt、然后在 Cursor 里重新发了一次吗？对，我只要不喜欢什么，就一定会还原到 checkpoint。这其实是我特别鼓励大家在 Cursor 里养成的习惯，因为你顺着一条自己不喜欢的路越走越深，之后就越难爬出来。所以我用「还原 checkpoint」用得相当随性。不过我也建议大家多截图，这样你之后还能回看……

[11:30] Elizabeth Lin

like before in case you want that glow back. So, let's see what it looks like. Oh, interesting. So, it went a completely different route this time. Yeah, I kind of want the glow back. I know. The glow felt a little bit more extreme, right? Yeah. Okay. So, this time it's a lot more minimal than what we had before. I'm going to pull up this screenshot so that we can see the difference. So, this is what it looked like before. And then this is what it looked like the second round. Some similar things but actually very different style. Yeah. Yeah, definitely. Okay. So, you've shown us how to take a very basic site. Say this is your average personal site or portfolio site. Use cursor. When you don't have an idea of what you want the style to be, say, tell me what styles I

……之前长什么样，万一你又想把那个发光效果找回来呢。来，看看这次的效果。哦，有意思，这次走了一条完全不同的路线。是啊，我其实有点想把发光效果要回来。我懂。之前那个发光感是稍微有点过头，对吧？对。好，这次比我们之前那版要简约得多。我把刚才那张截图调出来，方便我们对比。这是之前的样子，这是第二轮跑出来的样子。有些地方相似，但风格其实差别很大。是的，确实。好，你已经给我们演示了怎么把一个非常基础的网站——就当它是普通人那种个人主页或作品集网站——拿来用 Cursor 改造。当你还不确定想要什么风格时，可以让它「告诉我这个设计可以考虑哪些风格」……

[12:21] Claire Vo

could consider for this design. pick one and then actually reprompt it over and over even with the same style until you get something you like. It's a great process. It is really fun. Yeah. Okay. So, this is a a basic example of how you use cursor on the kind of like style side, but I know that designers are really excited about this moment because they can do much more complex things. So, do you want to show us an example of something more complicated that you've built that would have been harder to do as a designer before? Yeah, of course. Um, so one of the things that I built as like one of the earliest prototypes was this working piano and stuff like this was really really hard to do with existing prototyping tools. Um, with existing prototyping tools like Figma,

……挑一种，然后哪怕用同一种风格也反复重新 prompt，直到出来你满意的东西为止。这个流程很棒。真的很好玩，对。好。那这是用 Cursor 处理风格这一块的一个基础例子。不过我知道设计师之所以对当下这个时机特别兴奋，是因为他们能做的事情复杂得多。所以你愿不愿意给我们演示一个你做过的、更复杂一点的例子——那种放在以前作为设计师会更难实现的东西？当然可以。我最早做的 prototype 之一，就是这个能弹的钢琴，像这样的东西用现有的原型工具其实非常非常难做。拿现有的原型工具比如 Figma 来说……

[13:10] Elizabeth Lin

for example, you can't really hook up sound to like different actions. And with something like cursor or working with real code, hooking up to sound is super super easy. And so for this prompt specifically, I'm generally able to generate a working piano with like one prompt. There's like some luck involved. Sometimes it doesn't work, sometimes it does work. But this was really really cool to make because you can like immediately start interacting with it. I actually programmed this one to play for a release. So I'm going to go ahead and hit play. So um it's pretty cool cuz you can actually like hear it. You can also adjust the different types of sounds that it makes. Um you can change um the waveform as well. So like now if I like play, you know, it's a different sound.

……举个例子，你基本没法把声音和各种操作动作挂钩起来。但用 Cursor 这种、或者说直接写真实代码的方式，接入声音就超级超级简单。所以就这个 prompt 而言，我一般用一条 prompt 就能生成一架能弹的钢琴。这里面也有点运气成分，有时候不灵，有时候就成了。但做出这个真的特别酷，因为你可以立刻上手去和它互动。我其实还特意给这一架编了程，让它能弹一段发布用的曲子。我直接按播放。挺酷的，因为你真的能听到声音。你还能调它发出的各种不同音色，也能改 waveform（波形）。比如现在我再弹，你听，声音就不一样了。

[13:54] Elizabeth Lin

It's very grading on the ears, but it it creates like a square waveform instead. And so I think prototypes like this kind of show you how much you can do with code that you normally wouldn't be able to do with a traditional design tool like Figma or if you use a traditional design tool for prototyping, it would take a much longer time to create a prototype like this. So for this, are you opening up cursor from scratch and saying build me a piano? Like what's the prompt for something like this? Yeah, sure. So let's go ahead and I'll show you how I would do it. One thing to always know is to continuously start new chats. You never know what context it's going to use from before. So, for this one, I'm going to go ahead and say create a new prototype for a digital

这个声音很刺耳，但它生成的是方波（square waveform）。所以我觉得，像这样的 prototype 能让你看到，用代码能做的事情有多少是你平时用传统设计工具做不到的——比如 Figma；或者就算你用传统设计工具来做原型，要做出这样一个 prototype 也得花长得多的时间。那么做这个的时候，你是从零打开 Cursor、直接说「给我做一架钢琴」吗？像这种东西，prompt 是怎么写的？当然，那我们就来，我给你演示一下我会怎么做。有一点要永远记住：不停地开新对话。你永远不知道它会从之前的内容里调用什么 context。所以这一个，我直接说：给一个数字钢琴创建一个新的 prototype……

[14:39] Elizabeth Lin

piano in the style of old MacOSS. Um, I've noticed that it's pretty good at creating things in that style because I think it understands what it is. You'll notice here that I've created a cursor rule that reacts in a certain way when I ask it to create a new prototype. So I basically created a playground that makes it easy for me to build prototypes in cursor because I've created like rules that help me generate prototypes really quickly in the same repository and so I don't have to deal with the setup when I'm creating a new piano while this is generating. Can we look at that cursor rules? Yeah. Yeah, sure. Of course. This is the rule. It's so simple. Like I know a lot of people have really really long rules but mine is basically like if I ask you to create a

……风格仿照老版 macOS。我发现它做这种风格相当在行，我猜是因为它真的懂这是什么。你会注意到这里，我建了一条 Cursor rule，让它在我要求创建新 prototype 时按特定方式响应。我基本上是搭了一个 playground，让我在 Cursor 里做 prototype 变得很容易——因为我建好了一些 rule，能帮我在同一个 repository 里飞快地生成 prototype，这样我每次做新钢琴时就不用再折腾搭环境了。趁它还在生成，我们能看看那条 Cursor rule 吗？嗯，当然可以。就是这条 rule。它特别简单。我知道很多人的 rule 写得超级超级长，但我的基本上就是：如果我让你创建一个……

[15:21] Elizabeth Lin

new prototype, copy this folder and then add it to my homepage. So it's very simple. Oh, got it. So, it's just a simple prompt. So, you're in one kind of um folder for all your prototypes and you can just ask cursor in the chat, make me a new prototype, and you don't have to like create the directory and add the files in and all that stuff. It does it for you. Yeah, exactly. Um it makes it pretty convenient. So, this is what it generated. You'll notice that it put the Mac piano prototype on the homepage because of my cursor rule, which is really convenient. So, if I click on it, we'll see what we get. So, I'm kind of nervous, but we'll see. So, this is my Mac piano. So, it kind of looks like the general old Mac aesthetic. I'm going to try playing it and see what happens.

……新 prototype，就复制这个文件夹，然后把它加到我的主页上。就这么简单。哦，明白了。所以就是一句简单的 prompt。也就是说你把所有 prototype 都放在同一个文件夹里，然后只要在对话里让 Cursor 「给我做一个新 prototype」就行，你不用自己去创建目录、把文件加进去那一堆事，它全替你搞定了。对，正是这样，相当省事。好，这就是它生成的东西。你会注意到它把这个 Mac 钢琴 prototype 放到了主页上——这是因为我那条 Cursor rule，特别方便。那我点一下，看看效果。我还挺紧张的，不过来看看吧。这就是我的 Mac 钢琴。它大致是那种老 Mac 的整体观感。我来弹弹看会怎么样。

[16:05] Claire Vo

So, it works if I click. Doesn't work if I use my keys on my keyboard, which is pretty good already. It's already functional, and it's creating a pretty cute piano sound. This is This is amazing. Um, my kids love making themselves games. I don't know if I should tell them they can make games with noises. This is awesome. Yeah, you can also make like a xylophone. There are a lot of like different instruments you can make. Now, when you're building something like this, you know, you as somebody with an engineering background, do you go back and look and say, "How did it actually do this?" Or do or you're like, "I got the piano. I don't care." Yeah. I actually think it's important to kind of have a baseline understanding of what's going on. So, I often will be like, "Oh, um, what what

我点鼠标就能弹，但用键盘上的按键弹不出来——不过这已经相当不错了。它已经能用了，而且弹出来的钢琴声还挺可爱的。这太厉害了。我家孩子超爱自己做游戏。我都不知道该不该告诉他们：他们还能做出带声音的游戏。这太赞了。是啊，你还可以做木琴之类的，能做的乐器有很多种。那当你在做这种东西的时候，作为一个有工程背景的人，你会回头去看、去问「它到底是怎么实现的」吗？还是说你会觉得「钢琴我拿到手了，管它怎么实现的」？嗯，我其实觉得对底下发生的事有个基本认知挺重要的。所以我经常会问，「哦，你是用什么来产生这些声音的……」

[16:51] Elizabeth Lin

are you using to make the sounds and what options can I experiment with with the library you're using?" I think when you have conversations like that, it kind of shows you what's possible and then you understand like, oh, like I can actually make it sound like a violin if I wanted to or I can create a more vibrant sound. And so, I think having a baseline understanding is um, I think useful, but I don't try to understand all the little details because I personally like this part better. I like seeing things more than I like kind of understanding some of like the deeper of how thing work. This episode is brought to you by Retool. There's a huge gap between impressive AI demos and AI apps that deliver real value inside your business. While most AI solutions can only generate text, Retool lets you

「……用你正在用的这个 library，我能拿哪些选项来做实验？」我觉得当你进行这类对话时，它会让你看到有哪些可能性，然后你就明白，哦，原来只要我想，我真能让它听起来像小提琴，或者能做出更有层次、更鲜活的声音。所以我觉得有个基本认知是有用的，但我不会去钻研所有细枝末节，因为我个人更喜欢这一块。比起搞懂某些东西更深层的运作原理，我更喜欢看到它呈现出来的样子。本期节目由 Retool 赞助。在惊艳的 AI demo 和真正能在你业务内部带来实际价值的 AI 应用之间，存在着一道巨大的鸿沟。大多数 AI 方案只能生成文字，而 Retool 能让你……

[17:36] Claire Vo

build apps that take meaningful action by connecting directly to your business systems and data. With Retool, developers combine the power of code with the speed of visual building to create AI powered tools that solve real problems. No more writing endless integration code or building UIs from scratch. The results speak volumes. The University of Texas Medical branch increased diagnostic capacity 10fold. Amazon's Genai team uses Retool to make complex AI accessible to enterprise customers. and RAMP saved $8 million while boosting efficiency by 20%. That's why over 10,000 companies from startups to Fortune 500s trust Retool as their AI app layer. Retool because AI should do more than talk. It should work. So, I love this as an example because it shows how easy it is to build

……构建出能真正采取有意义行动的应用，方式是直接对接你的业务系统和数据。有了 Retool，开发者就能把代码的强大能力和可视化搭建的速度结合起来，打造出能解决实际问题的 AI 驱动工具。再也不用写没完没了的集成代码，也不用从零搭 UI 了。成果很能说明问题：德州大学医学部把诊断处理能力提升了 10 倍；亚马逊的 GenAI 团队用 Retool 让复杂的 AI 能被企业客户用起来；RAMP 省下了 800 万美元，同时把效率提升了 20%。这就是为什么有超过一万家公司——从初创到《财富》500 强——都把 Retool 当作他们的 AI 应用层。Retool，因为 AI 不该只会说，它该会干活。我特别喜欢拿这个当例子，因为它展示了构建有多简单……

[18:33] Claire Vo

a complex interactive prototype that actually works with some things that would be hard to figure out on your own, like sound. I'm curious as a designer, you know, how would I apply this to my work? Where do you think about taking this from like a prototype idea to something that could be really applicable when you're building an application or a website for work? When I'm teaching designers cursor, the first part I'm trying to get people excited about is the idea of using cursor. And so that's why we start off with projects like this to show like hey you can like create something really simple really fast and it's working. Um then like for the more like practical side of actually bring it in into the design team you typically need to think more about like things that I personally find a little

……一个真正能跑起来的、复杂的 interactive prototype，而且还带上了一些你自己很难琢磨明白的东西，比如声音。作为一名设计师，我很好奇，我该怎么把这套用到我自己的工作里？你觉得，怎么才能把它从一个 prototype 的点子，推进到那种在你为工作构建应用或网站时真正能派上用场的东西？我教设计师用 Cursor 时，第一步想让大家兴奋起来的，是「用 Cursor」这件事本身。所以我们才会从这类项目入手，去展示：嘿，你能很快地做出一个很简单、但真的能用的东西。然后，到了更偏实战、要真正把它带进设计团队那一面，你通常就得多考虑一些我个人觉得稍微……

[19:13] Elizabeth Lin

bit more boring but like how do I use like a design system or like how can I like replicate our existing like sidebar to use that within the prototype and that takes a little bit more work. I kind of think of that as when designers were like shifting over from like Sketch to Figma and having to move the design library over. I think it kind of feels like that a little bit right now where in order to be able to really use it well on a design team, doing the upfront work of moving your components or at least a subset of them into code in a way that's friendly for designers can really go a long way because then you can anyone on the team can really prototype with those components and be able to build prototypes within your team. Yeah. And then I have to call out as somebody who leads design teams, you

……有点枯燥的事，比如：我怎么用上 design system，或者怎么把我们现有的 sidebar 复刻出来、用到 prototype 里去，这就要多费点功夫了。我觉得这有点像当年设计师从 Sketch 转到 Figma、得把设计库迁过去那会儿。现在感觉跟那时候有点像：要想在设计团队里把它真正用好，前期把你的 component（或者至少其中一部分）以一种对设计师友好的方式搬进代码，是很值的——因为这样一来，团队里任何人都能用这些 component 来做原型，能在你们团队内部把 prototype 搭起来。是的。然后我得作为一个带设计团队的人特别提一句，你……

[19:55] Elizabeth Lin

know, folks are really worried that AI is going to take their job. And what I keep telling my design team is like the fun part is not getting the buttons and the forms on the page. The fun part is, you know, when you press the button and it goes and like gives gives your gives your user a moment of joy. And so I really like this example because I think people underuse sound design in applications to bring in joy, bring in branding. I think you can have like a branded sound and AI makes that so much more accessible. Motion is another piece where AI can really help you bring the polish and the edge to things. And then interactivity, I think, and this is just a great example of all three of those together, like motion, sound, interactivity. And while it's a piano

你知道，很多人特别担心 AI 会抢走他们的工作。我一直跟我的设计团队说：好玩的部分根本不是把按钮和表单摆到页面上。真正有意思的，是当用户按下按钮、它给用户带来一个惊喜瞬间的时候。所以我特别喜欢这个例子，因为我觉得大家在应用里对 sound design（声音设计）用得太少了——它能带来愉悦感，也能强化品牌。你完全可以做一个有品牌特色的声音，而 AI 让这件事变得容易太多了。Motion（动效）是另一块 AI 能帮你把东西打磨得更精致、更有质感的地方。再就是交互性，我觉得这个例子正好把动效、声音、交互这三样融在一起，是个绝佳的例子。虽然它是个钢琴的例子……

[20:43] Elizabeth Lin

example, I think it could make anybody's product better. Yeah. Yeah, for sure. I think um there's been like I think an increase in the number of people using like little boops and beeps in their websites. And I think with tools like cursor, it's probably going to become hopefully more and more common. Yeah. Okay. So, um one of the things I've noticed is it's pretty good at mimicking styles. So, you said look, it's good at mimicking sort of this like retro max style. Um, it was okay at mimicking this Y2K style. How do you teach an LLM, regardless of tool, maybe you use it in cursor, to have good taste? Yeah, that's a really hard one. I am only starting to understand how to get it to have better taste. Um, I think we can show like an example right now of how I might go about doing that if

……但我觉得它能让任何人的产品都变得更好。 对，没错。我感觉现在越来越多的人在网站里加这种小小的「叮」「哔」的音效了。有了 Cursor 这类工具，希望这种做法以后会越来越普遍。 嗯。好。那我注意到一件事，它其实挺擅长模仿各种风格的。你刚才说，它很擅长模仿那种 retro Mac（复古 Mac）的风格，模仿 Y2K（千禧年代）风格也还凑合。那不管用什么工具，可能你是在 Cursor 里用，你是怎么教一个 LLM 拥有好品味的呢？ 嗯，这个问题真的很难。我自己也才刚开始摸索怎么让它品味更好一点。我想现在可以现场给你演示一个例子，看看我大概会怎么做，如果……

[21:37] Elizabeth Lin

that's okay. Yeah, let's do it. Cool. Okay, so this is an example of like a personal finance dashboard that I asked cursor to create without any sort of like other information attached to it. And typically when you ask like any of these LLMs to create anything, it doesn't look that good. So some people are like really impressed by this, but as a designer, I'm like, well, it's pretty ugly. Um, there's a lot like drop shadows. The colors are really chaotic. The typography is not great. Um, it's like why is this above the circle thing? I don't know. And so, um, I'm going to show you how I might go about this and help cursor kind of understand like what I'm looking for in terms of a visual design. I can't wait for this cuz I think generally design managers sometimes are

……可以的话。 好啊，来吧。 好。那这是一个例子，是我让 Cursor 直接做的一个个人理财 dashboard，没给它附带任何别的信息。一般来说，你让这些 LLM 凭空做任何东西，出来的效果都不会太好。所以有些人看到这个会觉得「哇好厉害」，但作为设计师，我会觉得：嗯，其实挺丑的。你看，drop shadow（投影）一大堆，配色乱七八糟，字体排版也不行。还有，为什么这个东西在圆圈上面？我也搞不懂。所以接下来我演示一下，我大概会怎么做、怎么帮 Cursor 理解我在视觉设计上到底想要什么。 我太期待这段了，因为我觉得设计经理（design manager）有时候特别擅长、有时候又特别不擅长把自己想要的东西讲清楚。

[22:25] Claire Vo

really great and sometimes really terrible at explaining what they want. So whether or not you're using AI, I'm excited to learn your prompting techniques because I think they can work with people as well. So, um, I'm going to go ahead and start with this prompt. So, I'm going to say, let's work on the finance dashboard. I have to be specific here because this project has a few different projects in it because I hate drop shadows. I'm going to ask it explicitly to remove all the drop shadows. And then I'm going to say make the components look more modern. And then I'm also going to ask it to like reference some like general finance products that people considered as well-designed. So, I'm asking it to make it look like Robin Hood, Cash App, or Stripe, etc. I personally like to use

所以不管你用不用 AI，我都很想学学你的 prompt 技巧，因为我觉得这些技巧用在跟真人沟通上同样管用。 好，那我先从这条 prompt 开始。我会说：我们来弄这个理财 dashboard。这里我必须说具体一点，因为这个项目里有好几个不同的子项目。然后因为我特别讨厌 drop shadow，我会明确让它把所有 drop shadow 都去掉。接着我会说：把这些 component 做得更现代一点。然后我还会让它参考一些公认设计得好的理财产品。所以我会让它做得像 Robinhood、Cash App，或者 Stripe 之类的。我个人比较喜欢用……

[23:04] Elizabeth Lin

really short prompts. I know there's like a whole movement out there for people who really like using long prompts, but I feel like I kind of like it to be a little bit more conversational. Um, even though a lot of times agent will say a lot of words that I don't read. I have to ask since you said you hate drop shadows, have you considered making a cursor rules of like never do design files? I don't have that. But I do have one that's like don't use title case because title case makes me more upset. And so I'm always like please just please use sentence case. Like stop like making everything like a title cuz it's it doesn't have to be an all uppercase. Um so that's the one I do have. Maybe I should add one for drop shadows. Okay. Um let's go ahead and see what it did. So you notice

……特别短的 prompt。我知道现在有一整派人特别推崇写长 prompt，但我个人更喜欢偏对话式一点的方式。虽然很多时候 agent 会输出一大堆我根本不看的字。 我得问一下，既然你这么讨厌 drop shadow，你有没有考虑过给 Cursor 设一条 rule，比如「永远不要用投影」之类的？ 我没设那条。不过我确实有一条 rule 是：不要用 title case（每词首字母大写），因为 title case 更让我抓狂。所以我老是写「请、请用 sentence case（只有句首大写）」。别动不动就把所有东西都搞成标题、全大写，没必要的。这条我倒是有。也许我真该再加一条专门管 drop shadow 的。好，我们来看看它做成什么样了。你会注意到……

[23:47] Elizabeth Lin

that now it's already improved. It added like these lines in the background so that it's a little bit easier to understand um where these charts go. I actually don't know why the lines are on this background. Doesn't really make much sense, but it looks cool. Um, it added this like kind of like gray background. It thankfully removed the drop shadows and put like a little border around everything. Um, there's still kind of like this like weird typography going on here. And you'll notice like again the background doesn't extend the entire width. And so I think to get started I'll say like um right now the background is not filling the full area of the page just because that one bothers me the most. And then maybe after that we can ask it some more vague prompts and see how it manages that. So

……现在已经有改进了。它在背景里加了这些线条，这样更容易看清这些图表的位置。其实我也不太懂为什么这背景上要有线条，说不太通，但看着挺酷的。它还加了这种灰色的背景。谢天谢地，它把 drop shadow 去掉了，给每个东西都加了一圈小边框。不过这里的字体排版还是有点怪怪的。你还会发现，背景还是没有铺满整个宽度。所以我打算先说：现在背景没有铺满整个页面区域——因为这一点最让我膈应。然后等这个搞定了，我们可以再给它一些更模糊、更笼统的 prompt，看看它怎么处理。

[24:30] Claire Vo

you like smaller prompts and um when you're doing an iteration it seems like you're focusing on like one one or two key things not like you know fix everything. Here's my list of all the problems. Um rather focusing on one or two things it can do a step at a time. Yeah. I've noticed that if I give it like a laundry list of items it'll like forget to do the last three. Yeah. And so sometimes I'm like, "Okay, maybe I can just list them all out." And then it's like I'm like, "Wait a second. I didn't do this." And so I try to do one at a time. Okay, so it got the background. It does look nicer. It's easier on. So now we have the background. Um, and so let's try a different prompt. Now, I kind of want it to simplify the colors a little bit on the page. I'm noticing

所以你喜欢短一点的 prompt，而且你在迭代的时候，好像每次只盯着一两个关键点改，而不是那种「把所有问题都修了，这是我列的全部问题清单」。你是聚焦在一两件事上，让它一步一步来。 对。我发现，如果我一口气给它列一长串待办，它会忘掉最后那三条。 哈哈，对。 所以有时候我想「行吧，那我干脆全列出来」，结果又发现「等等，这条它没做啊」。所以我尽量一次只让它做一件事。好，背景它搞定了，确实好看多了，看着舒服多了。背景这块成了。那我们来试条不一样的 prompt。现在我想让它把页面上的配色稍微简化一下，我注意到……

[25:11] Elizabeth Lin

there's like a few different shades of like there's like grays and blues and stuff like that. And then I also want it to maybe be inspired by Edward Tuy's work. I'm going to see if it can reference that. And so, oh, you're a true designer. Let's go and see what it does with that information. Um, I've noticed that like giving it references can really help. It tends to like be aware of like most of these references and so it helps me in shortcutting like the explanation. If I didn't say Edward Tuy and I would have to explain his principles and that just takes a little bit longer. And do you keep these commonly used prompts in a document? Do you just you know them? How are you keeping track of all these things that work and don't work? Yeah, I do have a doc with all these prompts and

……这里有好几种不同的色调，有灰色、有蓝色之类的。然后我还想让它参考一下 Edward Tufte（爱德华·图夫特）的作品，看看它认不认得。所以…… 哦，你真是个地道的设计师。 哈哈，我们来看看它拿到这个信息后会做成什么样。我发现给它喂参考真的很有用。它对大部分这类参考都有概念，所以能帮我省去很多解释的功夫。如果我不说 Edward Tufte，我就得自己去解释他那套原则，那会多花不少时间。 那你会把这些常用的 prompt 存在一个文档里吗？还是你就记在脑子里？你是怎么记录这些「哪些管用、哪些不管用」的？ 会，我确实有一个文档专门存这些 prompt……

[25:53] Elizabeth Lin

that's where I'm pulling them from because I'm like this worked well last time so let's try it again. And so I honestly encourage everyone to have a document like that. Um, another thing I've been thinking about is if something visually works really well. I've thought about asking cursor to like generate a note or a rule that helps me describe it to it in the future. So if I'm like, "Oh, this is a really great example by 2K like how would you describe this to yourself in the future?" and then I can reference that note in the future for a future project. Oh, that's super interesting. So that that closes the full circle of first you asked cursor what like what styles you have and then you did Y2K and then if you got something great say we really just love that glow. Um you would say this is

……我就是从那里面捞出来用的，因为我会想「这条上次效果不错，那这次再试一遍」。所以我真心建议每个人都搞一个这样的文档。我最近还在琢磨另一件事：如果某个东西视觉效果特别好，我想过让 Cursor 帮我生成一条 note 或者 rule，方便我以后再向它描述这种效果。比如我可以说「哦，这是个 Y2K 风格的绝佳例子，你以后会怎么向自己描述它？」，然后以后做别的项目时我就能引用这条 note。 哦，这太有意思了。这正好把整个闭环给闭上了：你先问 Cursor 它都会哪些风格，然后你试了 Y2K，等做出了特别棒的东西，比如你特别喜欢那个 glow（光晕），你就会说「这个……」

[26:36] Claire Vo

great. If I wanted to generate this again, how would I how would I do that? Because as we saw just putting in the same words gets you a totally different response. Yeah. Exactly. Exactly. That's really smart. Okay. Well, it made it very muted. It looks very like um it does look pretty Edward Tuy with the colors right now. It's not necessarily my style, but you'll notice that I kind of like changed the edges to be a little bit more square, too. So, it's a very different style. It's interesting. Um I'd probably continue exploring a little bit. I think the last prompt I'm going to try right now is um right now I'm like not a huge fan of this layout. It's like basically this is on its own row, which is not great and it feels a little bit awkward. And so the last drop we're

……特别棒。如果我想再生成一遍，我该怎么做？因为我们刚才看到，光是把同样的词再输一遍，得到的结果会完全不一样。 对，没错，就是这样。 这招真的很聪明。 好，它把整体做得非常素净（muted）。现在这配色看着确实挺 Edward Tufte 的。倒不一定是我的风格，不过你会注意到，我顺手把边角也改得更方正了一些。所以这是个很不一样的风格，挺有意思。我大概还会再多探索几轮。我现在准备试的最后一条 prompt 是：我现在不太喜欢这个布局，基本上这块东西单独占了一整行，不太好，感觉有点别扭。所以最后一条我们要试的是……

[27:17] Elizabeth Lin

going to try is um can you improve the layout to make it look like something a top designer Apple would approve of. Um this one actually worked pretty well for me last time, but again results may vary. So we'll see what it does this time. So I've seen you use other companies as an example in sort of three ways. I saw you use old Mac aesthetic, a really common design system and style that you know the internet generally knows about. Then I saw make this look like other great products in the same space. And now I like this one because it's it's a real psychological hack. It's um make it something that someone I respect or think has good taste would approve of, which is really interesting. Yeah, I I actually was surprised by this one last time, too. See, now it's like

……「你能不能改进一下布局，让它看起来像 Apple 的顶级设计师会点头认可的样子」。这条上次对我效果还挺好，不过老话说，结果可能因人而异。我们看看这次它怎么做。 所以我看你用别的公司当例子，大致有三种用法。我看你用过 old Mac（老款 Mac）那种美学——一套大家、整个互联网普遍都熟悉的常见 design system 和风格。然后我看你用过「把这个做得像同领域里那些优秀产品一样」。现在这种我特别喜欢，因为它其实是个很妙的心理学小把戏——「把它做成某个我尊敬、我觉得品味很好的人会认可的样子」，这真的很有意思。 对，我上次用这条的时候自己也挺意外的。你看，现在它已经……

[28:04] Elizabeth Lin

actually using a grid and it's like filling out the areas, which I think is cool. And it's starting to get even more like a real product than it was at the beginning. Obviously, if I was working on this, I would definitely spend a lot more time iterating on it, but you can see like with a few prompts, I was already able to get it from like the more like dated drop shadow version into something that has like a little bit more of a brand and personality that follows visual design principles with a few prompts. And so, I think the referencing really helps because it's language that it understands. And I'm still experimenting with how to teach it what good taste is, but I think like having good references like really, really helps. Yeah. And one of the things that I know as a designer is

……真的开始用栅格（grid）了，而且在往各个区域里填内容，我觉得这点很酷。它比一开始更像一个真正的产品了。当然，如果我真要做这个项目，我肯定还会花多得多的时间去迭代。但你能看到，就这么几条 prompt，我就已经把它从那个偏过时、满是 drop shadow 的版本，变成了一个更有品牌感和个性、并且遵循视觉设计原则的东西，就靠几条 prompt。所以我觉得「给参考」这招真的很有用，因为那是它能听懂的语言。我现在还在摸索怎么教它什么叫好品味，但我觉得手里有好的参考真的、真的很有帮助。 嗯。我作为设计师很清楚的一件事是……

[28:45] Claire Vo

designing data visualizations in something like Figma is so timeintensive. So even to just get the charts laid out and the fake data in and what should the percentages be, all that takes time. And then if you hover over the bar charts here, you've got a little bit of interactivity that's really hard to build. And so I like this example for two reasons. one, you show how you can go from something that's not great to really great and like three three prompts. And two, just data visualizations in general are such a great surface area for cursorbased design. Um, are there other places that you think are just really hard to design for that you reach for cursor on? I think you know charts and data viz is one. Any others come to mind? Anything that's requires prototyping with real

……在 Figma 这类工具里做 data visualization（数据可视化）特别费时间。光是把图表排好、把假数据填进去、想清楚那些百分比该是多少，这些就够花时间了。然后你看，鼠标悬停到这些柱状图上，还有这么点交互效果，这种东西本来是很难做的。所以我喜欢这个例子有两个原因。第一，你展示了怎么用三条左右的 prompt，把一个一般般的东西做到非常出色。第二，data visualization 本身就是特别适合用 Cursor 来做设计的一块阵地。那除此之外，还有没有别的你觉得特别难设计、会想伸手去用 Cursor 的场景？我觉得图表和数据可视化算一个。还有别的能想到的吗？ 任何需要用真实……做原型（prototyping）的东西。

[29:34] Elizabeth Lin

data. So, I've recently been doing a lot of prototyping or creating like little apps in general that are powered by notion databases. And um being able to work with cursor on integrating with a notion database has been really cool and really powerful. I was able to create like a little bookshelf that's powered by notion database that kind of displays like books I've read recently. But I was able to create this, which is not all the books I've read, but it's like a prototype where the idea is that in theory I could create my own good readads, which is like my dream is just to have my own good readads. And so this was something I was able to create really easily with cursor because it's all powered by a notion database. Oh wow. So you just you use notion as the

数据。我最近做了很多原型，或者说做一些由 Notion 数据库驱动的小应用。用 Cursor 去对接 Notion 数据库真的特别酷、特别强大。我做了一个小书架，背后是 Notion 数据库在撑着，会展示我最近读过的书。我做出来的这个并不是我读过的全部书，更像是一个 prototype，思路是：理论上我可以打造自己的 Goodreads——我的梦想就是有一个属于自己的 Goodreads。所以这个东西我用 Cursor 很轻松就做出来了，因为它整个都是由 Notion 数据库驱动的。哇。所以你是把 Notion 当作

[30:14] Claire Vo

source of truth for the information, but you can build this like beautiful UI on top of it for yourself. Yeah, exactly. And like this is really bare bones right now, but the idea is that like once I get all my books in here, I can maybe see like what types of books I read the most. Like how often do I rate books is really high, what are my most popular authors and stuff like that. And um this is a personal project that I definitely want to continue kind of iterating on, but um building this was super super easy um because of tools like cursor. This is awesome. Well, Elizabeth, you've shown us so many good use cases. We made a slightly chaotic personal website soliciting design styles from cursor. You showed us that interactivity, including sound, is something that's

信息的唯一可信源（source of truth），然后在它之上给自己搭一套漂亮的 UI。对，没错。现在它还很简陋，但我的想法是：等我把所有的书都录进去之后，也许就能看出我读得最多的是哪类书、我给书打高分的频率有多高、我最常读哪些作者，诸如此类。这是个我很想继续迭代下去的个人项目。但搭它真的超级超级简单，就是因为有 Cursor 这样的工具。这太棒了。Elizabeth，你给我们展示了好多很棒的用例。我们用 Cursor 征集设计风格，做了一个稍微有点混乱的个人网站；你让我们看到，包括声音在内的交互

[30:57] Claire Vo

really accessible now. And then you went from yuck to yum on a on a nice design and also showed us a a quick snapshot of you building yourself sort of a data databasebacked product using really accessible tools in notion and cursor. Okay, I am going to ask you a couple lightning round questions and then we're going to get you back to all this awesome creating. So my first question is are there any design bits or things you still really love doing by hand? A lot of these come back to like I would say like more like graphic design things honestly. Um but I love making like a random like poster for like a friend. There's still something really fun about photoshopping your friend's face into different situations that you can't really replicate with one of these AI

现在真的变得很容易实现了。然后你又把一个设计从“难看”做到了“惊艳”，还快速给我们演示了一下，怎么用 Notion 和 Cursor 这些很易上手的工具，给自己搭一个有数据库支撑的产品。好，我要问你几个闪电轮（lightning round）的问题，然后就让你回去继续做这些很棒的东西。第一个问题：有没有哪些设计的小活儿，是你到现在还特别喜欢亲手做的？说实话，这些大多都跟更偏平面设计的东西有关。我很喜欢给朋友随手做张海报之类的。把朋友的脸 P 进各种各样的情境里，这种事还是特别有意思，是这些 AI 工具

[31:43] Elizabeth Lin

tools cuz I think the process of doing it is just so much fun that I never want that to get taken away from me. And so I think a lot of those like really fun use cases I really do prefer doing by hand. I love that you like exploring unique visual styles, but a lot of what we've seen is can you copy that or take this existing aesthetic, you know, how do you think designers can still infuse creativity? How do you think we're going to get new styles um when everything is generated from this the same data? What do you think? I think designers were always taking inspiration from very similar sources. And so I think the biggest key is to broaden your sources of inspiration and kind of be able to talk to these models and help them understand like what you're inspired by.

替代不了的，因为我觉得做这件事的过程本身就太好玩了，我永远不想这份乐趣被夺走。所以那些特别好玩的用例，我确实更愿意亲手来做。我很喜欢你去探索独特的视觉风格这一点，但我们刚才看到的很多操作都是“你能不能复刻那个”“把这个现成的美学拿过来用”。你觉得设计师要怎样才能继续注入创造力？当一切都从同样的数据里生成出来时，你觉得我们要怎样才能得到新的风格？你怎么看？我觉得设计师一直以来其实都是从非常相近的来源里找灵感。所以我觉得最关键的，是去拓宽你的灵感来源，并且能够跟这些模型对话、帮它们理解你到底是被什么打动的。

[32:32] Elizabeth Lin

I try to send like really random things like the K-pop music video or like different pieces of art that it might not normally be inspired by and kind of see what it takes from it. And that's been really helpful to generate things that are a little bit more different. I think right now a lot of people are getting caught up with like oh like we must use like shad cienne as a starting point which is like good for creating something that's like maybe like good from a design standards perspective but it's not super creative and so I think broadening your sources of inspiration um really helps. Yeah, I really think there's a hole in the market for a chaotic prototype tool. like everything is so classy and I'm like let's bring a little fun. So maybe that can be the next prototype you build. Okay, the

我会试着丢一些特别随机的东西给它，比如某个 K-pop 的 MV，或者一些它平时不太会去借鉴的艺术作品，然后看看它能从里面提取出什么。这对生成一些更不一样的东西非常有帮助。我觉得现在很多人会卡在一个点上——“我们必须拿 shadcn 当起点”。shadcn 拿来做一个符合设计规范、过得去的东西是不错，但它不太有创造力。所以我觉得，拓宽你的灵感来源真的很有用。是啊，我真心觉得市场上缺一个“混乱风”的原型工具。现在所有东西都太“端庄”了，我就想：来点好玩的嘛。所以也许这可以成为你做的下一个 prototype。好，

[33:17] Claire Vo

final question I always ask and you seem very polite to your AI. So I have to ask this. When your AI designer is really failing you and making ugly stuff, how do you get it to do what you want it to do when it's really not listening? I've noticed it's really frustrating, especially with like animations. it just wants to make it like really really dramatic and I'm I I find myself repeating the same um prompt multiple times. I'm like make it more subtle and then I'm like no more subtle and then I'm like please even more subtle. And I think sometimes um that energy can help, but um when that doesn't help, I always recommend like starting over. Like it's like okay at this point might as well restart and see what we get at the beginning. It didn't take that long to

我每次都会问的最后一个问题——而且你对你的 AI 看起来特别客气，所以我必须问这个：当你的 AI 设计师真的把你坑惨了、净做些丑东西的时候，它就是不听话，你是怎么逼它做出你想要的效果的？我发现这真的很让人抓狂，尤其是做动画的时候。它老想把动效做得特别特别夸张，我就发现自己在一遍遍重复同一个 prompt。我会说“再含蓄一点”，然后“不行，再含蓄点”，然后“拜托，再再含蓄一点”。我觉得有时候那种较劲的劲儿是有用的，但要是没用，我一向建议直接重来。就是那种“行吧，到这份上了，干脆重启，看看从头开始能得到什么”。反正一开始走到这一步也没花多久，

[34:01] Elizabeth Lin

get here in the first place and so doesn't hurt to restart and kind of see if you can get somewhere better the next time. Well, I have a how I AI tip for you because one of our recent guests said she says like make it a thousand times more subtle or like Oh, that's a good one. So, you can try that. You can try that for next time. Elizabeth, this was so fun. Where can we find you and how can we help you? Yeah, sure. So, um, I'm usually everywhere on the internet as Lil Elizabeth and I'm currently teaching a course called Prototyping with Cursor and you can check that out at designisapart.com. Amazing. Well, thank you so much. I'm so excited to share this with our listeners. Thank you. Thanks so much for watching. If you enjoyed this show, please like and subscribe here on

所以重来也无妨，看看下一次能不能弄出更好的结果。我这儿正好有个 How I AI 的小贴士送你：我们最近的一位嘉宾说，她会让它“含蓄一千倍”。哦，这招不错。你可以试试，下次可以试试这个。Elizabeth，这次太有意思了。我们在哪儿能找到你？我们能怎么帮到你？嗯，好的。我在网上一般到处都叫 Lil Elizabeth，我现在在教一门课，叫《Prototyping with Cursor》（用 Cursor 做原型），你可以到 designisapart.com 上去看看。太棒了。非常感谢你。我特别期待把这期分享给我们的听众。谢谢。也非常感谢大家的观看。如果你喜欢这期节目，请在

[34:43] Claire Vo

YouTube or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review which will help others find the show. You can see all our episodes and learn more about the show at howiiaipod.com. See you next time.

YouTube 上点赞、订阅，或者更好的是，给我们留个言、说说你的想法。你也可以在 Apple Podcasts、Spotify 或你常用的播客 App 上找到这档播客。也欢迎给我们打个分、写个评价，这能帮更多人发现这档节目。你可以在 howiaipod.com 上看到我们所有的往期内容、了解更多。下期见。