A designer's guide to Cursor: How to build interactive prototypes with sound, explore visual styles, and transform data visualizations | Elizabeth Lin

Elizabeth Lin is an independent design educator who has crafted learning experiences for Khan Academy, Primer, and Lambda School. She currently runs design is a party https://www.designisaparty.com/, an alternative online design school where she teaches courses like The Art of Visual Design https://www.artofvisualdesign.com/ and Prototyping with Cursor https://www.designisaparty.com/prototyping. In this episode, she shares how designers can leverage Cursor to create interactive prototypes with sound, explore different visual aesthetics, and transform basic designs into polished interfaces—all without deep coding knowledge. What you'll learn: How to use Cursor to explore different design aesthetics—from brutalist to Y2K to cyberpunkA simple workflow for creating interactive sound elements in prototypes that would be difficult with traditional design toolsA step-by-step process for transforming an ugly dashboard into a polished design using strategic promptingWhy broadening your inspiration sources helps Cursor generate more unique and creative designTechniques for teaching AI tools to understand your design preferences and tasteA practical approach to creating data-driven prototypes by connecting Cursor with Notion databasesHow to use Cursor Rules to streamline your prototyping workflow and avoid repetitive setup tasks— Brought to you by: Lovable https://lovable.dev/—Build apps by simply chatting with AI Retool https://retool.com/howiai—AI that's designed for developers, and built for the enterprise — Where to find Elizabeth Lin: Website: https://www.lalizlabeth.com/ LinkedIn: https://www.linkedin.com/in/elizabethylin/ X: https://x.com/lalizlabeth — Where to find Claire Vo: ChatPRD: https://www.chatprd.ai/ Website: https://clairevo.com/ LinkedIn: https://www.linkedin.com/in/clairevo/ X: https://x.com/clairevo — In this episode, we cover: (00:00) Introduction to Elizabeth (02:20) Demo: Exploring different visual styles with Cursor (08:20) Comparing different design iterations from the same prompt (12:35) Building a working piano prototype with one prompt (16:30) Understanding what’s happening behind the scenes (18:28) Practical design team scenarios using Cursor (21:00) Step-by-step walkthrough of transforming an ugly finance dashboard (27:29) Using targeted prompts to improve layout and visual design (29:22) Building data-driven prototypes powered by Notion databases (31:12) Lightning round and final thoughts — Tools referenced: • Cursor: https://cursor.sh/ • Notion: https://www.notion.so/ • v0: https://v0.dev/ • ChatGPT: https://chat.openai.com/ — Other references: • Edward Tufte: https://www.edwardtufte.com/ • Robinhood: https://robinhood.com/ • Cash App: https://cash.app/ • Stripe: https://stripe.com/ • Neopets: https://www.neopets.com/ • Goodreads: https://www.goodreads.com/ • Shad CN: https://ui.shadcn.com/ • Sketch: https://www.sketch.com/ • Figma: https://www.figma.com/ • Goodreads: https://www.goodreads.com/ — Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Speaker 00

  Working with Cursor has really taught me that tools like Cursor can actually be extremely creative.

• 0:05Claire Vo?

  How do you teach an LLM to have good taste?

• 0:09Speaker 00

  The biggest key is to broaden your sources of inspiration and help them understand what you're inspired by. I would try to send like really random things like the Kate Park 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 again to see what I get every time.

• 0:41Claire Vo?

  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?

• 0:48Speaker 00

  If something visually works really well, I've thought about asking Cursor to generate a note or a rule that helps me describe it to it in the future. So I can reference that note in the future for a future project.

• 1:04Claire Vo?

  Welcome back to How I AI. I'm Claire Voe, 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 Lin. 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 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.

• 1:48Claire Vo?

  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 started for free at lovable.dev. That's lovable.dev.

• 2:21Claire Vo?

  Elizabeth, thanks for joining How I AI.

• 2:23Speaker 00

  Yeah, I'm excited to be here.

• 2:25Claire Vo?

  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.

• 2:45Speaker 00

  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 GIFs. And you'll notice that here, there's a little cursor that has a sparkle on it. 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. This is another one I did 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,

• 3:28Speaker 00

  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. I've been able to explore like a lot of different visual styles specifically. And so I made this as like a prototype 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 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

• 4:13Speaker 00

  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 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

• 4:53Speaker 00

  about. So usually with like a blank page, it can be a little bit hard to get started. But what I'm gonna do first is I'm gonna 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 wouldn't necessarily be familiar with. And so you'll notice here that it's describing a lot of these like visual

• 5:37Speaker 00

  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 dataism. But it's really comfortable with something like vaporwave because that's something that is very trendy on the internet.

• 5:56Claire Vo?

  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 aren't watching the screen, what's really neat is Cursor's done this really nice job of taking the design style, say, for example, cyberpunk, and actually giving you some descriptive words. So neon colors, themes, 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.

• 6:39Speaker 00

  Yeah, I really encourage people to have conversations with

• 6:44Claire Vo?

  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 cyberpunk. And being able to pull those like specific details out can really help.

• 6:57Speaker 00

  Okay, so what's next? Do you have like two styles that you would like to see?

• 7:02Claire Vo?

  Yes, of course. Let me look. Oh, let's, I mean, let's do brutalist because

• 7:06Speaker 00

  Okay.

• 7:06Claire Vo?

  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.

• 7:14Speaker 00

  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.

• 7:33Claire Vo?

  And so just while this is generating, I'm curious if you switch to the web webpage 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?

• 7:48Speaker 00

  Yeah, so I actually pre-made this outline because I think making the outline is a little bit trickier. And so when you want to start from scratch, that's something that I found is harder with Cursor. It's easier with other tools like B0 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.

• 8:11Claire Vo?

  So if somebody was maybe getting started, getting your basic black and white V0 prototype going, and then pulling it into Cursor for the styling might be the way to go.

• 8:20Speaker 00

  Yeah, yeah, exactly. Okay. I'm really fast.

• 8:25Speaker 00

  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. This little like blinky Cursor thing is hilarious. It looks like it's trying to be like the command line. Up here, you'll notice that there's this like typing animation, which is really fun, too. I think if I was to implement that from scratch, 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,

• 9:10Speaker 00

  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 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.

• 9:23Claire Vo?

  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 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 webbering 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.

• 10:01Speaker 00

  Yeah, I totally agree. I think right now there's nothing more fun than coming back to this page and seeing what it generated because 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.

• 10:17Claire Vo?

  And let's say, I mean, this is obviously perfect, hang it in the loop. But let's say 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 re-prompt this again to try to get something different?

• 10:33Speaker 00

  I would maybe try re-prompting 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 re-prompting it and see what we get the next time to see what the difference could be. Do you want to do that?

• 10:47Claire Vo?

  Yeah, let's do it.

• 10:48Speaker 00

  Okay, so this might

• 10:50Claire Vo?

  Now, you, you, you pick, you pick the aesthetic. I got to do it first so you can do the next one.

• 10:55Speaker 00

  I actually think it might be interesting to do the same one and see what it looks like this time.

• 11:01Claire Vo?

  Great.

• 11:02Speaker 00

  Okay, so I'm going to go ahead and press enter.

• 11:07Claire Vo?

  And did you go back to the original prompt and just resend it in Cursor?

• 11:10Speaker 00

  Yeah, I always restore the track point when I don't like something. That's something I actually really encourage people new to 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 Track Point pretty liberally. But I do encourage people to take screenshots so that you can kind of like revisit what it looked like before.

• 11:31Claire Vo?

  In case you want that glow back.

• 11:33Speaker 00

  So let's see what it looks like.

• 11:35Claire Vo?

  Oh.

• 11:36Speaker 00

  Interesting. So went a completely different route this time.

• 11:38Claire Vo?

  Yeah.

• 11:40Claire Vo?

  I kind of want the glow back.

• 11:43Speaker 00

  I know the glow felt a little bit more extreme, right?

• 11:45Claire Vo?

  Yeah.

• 11:46Speaker 00

  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.

• 11:59Claire Vo?

  Some similar things, but actually very different style.

• 12:04Speaker 00

  Yeah, yeah, definitely.

• 12:06Claire Vo?

  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 could consider for this design. Pick one and then actually re-prompt it over and over, even with the same style, until you get something you like.

• 12:32Speaker 00

  It's a great process. It is really fun, yeah.

• 12:36Claire Vo?

  Okay, so this is 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?

• 12:54Speaker 00

  Yeah, of course. 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. With existing prototyping tools like Figma, 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 release. So I'm going to go ahead and hit play.

• 13:41Speaker 00

  So it's pretty cool because you can actually like hear it. You can also adjust the different types of sounds that it makes. You can change the waveform as well. So like now if I like play, you know, it's a different sound. It's very grating on the ears, but 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.

• 14:13Claire Vo?

  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?

• 14:21Speaker 00

  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 piano in the style of old Mac OS." 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,

• 15:03Speaker 00

  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.

• 15:10Claire Vo?

  While this is generating, can we look at that Cursor rules?

• 15:13Speaker 00

  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 new prototype, copy this folder and then add it to my homepage. So it's very simple.

• 15:27Claire Vo?

  Oh, got it. So it's just a simple prompt. So you're in one kind of 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 and all that stuff. It does it for you.

• 15:42Speaker 00

  Yeah, exactly. 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. So it works if I click. It 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.

• 16:16Claire Vo?

  This is amazing. My kids love making themselves games. I don't know if I should tell them they could make games with noises. This is awesome.

• 16:28Speaker 00

  Yeah, you can also make like a xylophone. There are a lot of like different instruments you can make.

• 16:32Claire Vo?

  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 you're like, "I got the piano. I don't care."

• 16:43Speaker 00

  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, what 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, 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 I like kind of understanding some of like the deeper of how things work.

• 17:22Claire Vo?

  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 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 tenfold.

• 18:03Claire Vo?

  Amazon's Gen AI 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.

• 18:29Claire Vo?

  So I love this as an example because it shows how easy it is to build 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?

• 18:52Speaker 00

  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. Then like for the more like practical side of actually bringing it into the design team, you typically need to think more about like things that I personally find a little bit more boring, but like, how do I use like a design system or like, how can I like replicate our existing 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 while in a design team, doing the upfront

• 19:37Speaker 00

  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.

• 19:51Claire Vo?

  Yeah, and then I have to call out as somebody who leads design teams, you 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 doo doo and like it 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.

• 20:36Claire Vo?

  And this is just a great example of all three of those together, like motion, sound, interactivity. And while it's a piano example, I think it can make anybody's product better.

• 20:46Speaker 00

  Yeah, yeah, for sure. I think 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 those like cursor, it's probably going to become hopefully more and more common. Yeah.

• 20:59Claire Vo?

  Okay, so 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 Mac style. 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?

• 21:23Speaker 00

  Yeah, that's a really hard one. I am only starting to understand how to get it to have better taste.

• 21:33Speaker 00

  I think we can show like an example right now of how I might go about doing that, if that's okay.

• 21:37Claire Vo?

  Yeah, let's do it.

• 21:40Speaker 00

  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. There's a lot like drop shadows, the colors are really chaotic, the typography is not great. It's like, why is this above the circle thing? I don't know. And so 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 because I think generally, design managers sometimes are really great

• 22:25Speaker 00

  and sometimes it's 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 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, et cetera. I personally like to use really short prompts. I know there's like a whole movement out there for people who really like using long

• 23:09Speaker 00

  prompts, but I feel like I kind of like it to be a little bit more conversational, even though a lot of times Agent will say a lot of words that I don't read.

• 23:17Claire Vo?

  I have to ask, since you said you hate drop shadows, have you considered making a Cursor rules of like, never do design files?

• 23:26Speaker 00

  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 because it doesn't have to be in all uppercase. 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 that now it's already improved. It added like these lines in the background so that it's a little bit easier to understand 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. It added this like, kind of like gray background. It thankfully removed the drop shadows and put like a little border on everything. There's still kind of like this like weird typography going on here.

• 24:10Speaker 00

  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.

• 24:29Claire Vo?

  So you like smaller prompts and when you're doing 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 could do a step at a time.

• 24:47Speaker 00

  Yeah, I've noticed that if I give it like a laundry list of items, it'll like forget to do the last three.

• 24:52Claire Vo?

  Yeah.

• 24:52Speaker 00

  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, it didn't do this. And so I try to do one at a time.

• 24:59Claire Vo?

  Okay, so it got the background. It does look nicer. It's easier.

• 25:02Speaker 00

  Yeah. 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 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 Tufti's work. I'm going to see if I can reference that.

• 25:21Claire Vo?

  And so. Oh, you're a true designer.

• 25:23Speaker 00

  Let's go and see what it does with that information. 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 short cutting like the explanation. If I didn't say Edward Tufti, and I would have to explain his principles and that just takes a little bit longer.

• 25:41Claire Vo?

  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?

• 25:50Speaker 00

  Yeah, I do have a doc with all these prompts and 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. 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 of Y2K. 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.

• 26:22Claire Vo?

  Oh, that's super interesting. So that that closes the full circle of first you asked Cursor, what like what styles you can have?

• 26:28Speaker 00

  Yeah.

• 26:28Claire Vo?

  And then you did Y2K. And then if you got something great, say, we really just love that glow. You would say, this is 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.

• 26:43Speaker 00

  Yeah, exactly, exactly.

• 26:44Claire Vo?

  That's really smart. Okay, well, it made it very muted.

• 26:49Speaker 00

  It looks very like, it does look pretty Edward Tufte 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 and I'd probably continue exploring a little bit. I think the last prompt I'm going to try right now is, 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 prompt we're going to try is, can you improve the layout to make it look like something a top designer Apple would approve of? This one actually worked pretty well for me last time, but again, results may vary. So we'll see what it does this time.

• 27:29Claire Vo?

  So I've seen you use other companies as an example in sort of three ways. I saw you use Old Mack 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 a real psychological hack. It's make it something that someone I respect or think has good taste would approve of, which is really interesting.

• 28:01Speaker 00

  Yeah, I actually was surprised by this one last time too. See, now it's like actually using a grid and it's like filling out the arrows, 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 data 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.

• 28:41Claire Vo?

  Yeah. And one of the things that I know as a designer is designing data visualizations in something like Figma is so time intensive. 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 in like three, three prompts. And two, just data visualizations in general are such a great surface area for cursor based design. Are there other places that you think are just

• 29:25Claire Vo?

  really hard to design for that you reach for cursor on? I think, you know, charts and data vis is one. Are any others come to mind?

• 29:32Speaker 00

  Anything that's requires prototyping with real 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 being able to work with cursor and 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 Goodreads, which is like my dream is just to have my own Goodreads. And so this was something I was able to create really easily with cursor because it's all powered by a Notion database.

• 30:10Claire Vo?

  Oh, wow. So you just you use Notion as the source of truth for the information, but you can build this like beautiful UI on top of it for yourself?

• 30:19Speaker 00

  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 as really high? What are my most popular authors and stuff like that? And this is a personal project that I definitely want to continue kind of iterating on, but building this was super, super easy because of tools like cursor.

• 30:42Claire Vo?

  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 really accessible now. And then you went from yuck to yum on a nice design. And also showed us a quick snapshot of you building yourself sort of a database-backed 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?

• 31:27Speaker 00

  A lot of these come back to like, I would say like more like graphic design things, honestly, 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 tools because 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.

• 31:54Claire Vo?

  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? When everything is generated from this same data, what do you think?

• 32:15Speaker 00

  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. I've tried to send like really random things like the Kate Park 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 CN 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.

• 32:59Speaker 00

  And so I think broadening your sources of inspiration really helps.

• 33:04Claire Vo?

  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 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?

• 33:33Speaker 00

  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 find myself repeating the same 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 that energy can help. But 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 get here in the first place. And so it doesn't hurt to restart and kind of see if you can get somewhere better the next time.

• 34:06Claire Vo?

  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.

• 34:14Speaker 00

  Oh, that's a good, yeah, that's a good one.

• 34:16Claire Vo?

  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?

• 34:22Speaker 00

  Yeah, sure. So I'm usually everywhere on the internet as Elizabeth. And I'm currently teaching a course called Prototyping with Cursor. And you can check that out at designisaparty.com.

• 34:33Claire Vo?

  Amazing. Well, thank you so much. I'm so excited to share this with our listeners.

• 34:37Speaker 00

  Thank you.

• 34:39Claire Vo?

  Thanks so much for watching. If you enjoyed the show, please like and subscribe here on 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 howiaipod.com. See you next time.