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

1. 0:00 – 2:20

   Introduction to Elizabeth

   1. ELElizabeth Lin0:00

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

   2. CVClaire Vo0:05

      How do you teach an LLM to have good taste?

   3. ELElizabeth Lin0:09

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

   4. CVClaire Vo0:41

      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?

   5. ELElizabeth Lin0:48

      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 it can reference that note in the future for a future project. [upbeat music]

   6. CVClaire Vo1:04

      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 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. 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. 2:20 – 8:20

   Demo: Exploring different visual styles with Cursor

   1. CVClaire Vo2:21

      Elizabeth, thanks for joining How I AI.

   2. ELElizabeth Lin2:23

      Yeah, I'm excited to be here.

   3. CVClaire Vo2:25

      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 by-product, 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.

   4. ELElizabeth Lin2:45

      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 in Neopets. I've been creating a lot of these really fun prototype sites that have kind of more, like, chaotic little, like, GIFs, and you'll notice that here there's a little cursor that has a 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 Aespa, the K-pop group, but I fed it an Aespa music video screenshot, and I was like: "Hey, like, be inspired by this." And it 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 for a portfolio to show how easy it is to really explore very creatively. So I created this, like, chaotic interface [chuckles] where there's different modes of chaos that-

   5. CVClaire Vo4:04

      [chuckles]

   6. ELElizabeth Lin4:04

      ... 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 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 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 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, 'cause that's something that is very trendy on the internet.

   7. CVClaire Vo5:56

      ... so just to take-

   8. ELElizabeth Lin5:58

      Mm-hmm

   9. CVClaire Vo5:58

      ... a moment here.

   10. ELElizabeth Lin5:59

       Yeah.

   11. CVClaire Vo5:59

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

   12. ELElizabeth Lin6:40

       Yeah, I really encourage people to have conversations with, um, LLMs because you never know what you're gonna 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.

   13. CVClaire Vo6:57

       Okay, so what's next?

   14. ELElizabeth Lin6:59

       Um, do you have, like, two styles that you would like to see?

   15. CVClaire Vo7:02

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

   16. ELElizabeth Lin7:06

       Okay [chuckles]

   17. CVClaire Vo7:06

       ... that sounds real boring. So let's do a brutal- actually, let's do these two, brutalist and Y2K. I love, 'cause they'll be very different.

   18. ELElizabeth Lin7:14

       Okay, so I'm gonna say, "Can you redesign the homepage to be brutalist and Y2K style?" And I always tell my students that results might vary, [chuckles] so sometimes you'll get something really cool, and other times not so cool. But the good thing is that you can always undo.

   19. CVClaire Vo7:33

       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, this sort of, like, outline of the page, or how are you getting that done?

   20. ELElizabeth Lin7:48

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

   21. CVClaire Vo8:12

       So if somebody was maybe getting started, getting your basic black and white v0 prototype going-

   22. ELElizabeth Lin8:17

       Mm

   23. CVClaire Vo8:17

       ... and then pulling it into Cursor for the styling might be the way to

3. 8:20 – 12:35

   Comparing different design iterations from the same prompt

   1. CVClaire Vo8:20

      go.

   2. ELElizabeth Lin8:20

      Yeah, yeah, exactly.

   3. CVClaire Vo8:21

      Cool.

   4. ELElizabeth Lin8:21

      Okay, so it's done really fast. [chuckles]

   5. CVClaire Vo8:23

      [chuckles]

   6. ELElizabeth Lin8:25

      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 hilarious. [chuckles] 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 would 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 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.

   7. CVClaire Vo9:23

      I think this is so funny because two things: one, as someone who actually wrote code in literal Y2K, [chuckles] this is totally the kind of thing that I would've thought was super awesome-

   8. ELElizabeth Lin9:35

      Yeah

   9. CVClaire Vo9:35

      ... and I would have tried to learn special CSX- CSS or HTML tricks-

   10. ELElizabeth Lin9:40

       Mm-hmm

   11. CVClaire Vo9:40

       ... 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, webring-style web design-

   12. ELElizabeth Lin9:50

       Mm-hmm

   13. CVClaire Vo9:50

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

   14. ELElizabeth Lin9:58

       Yeah

   15. CVClaire Vo9:59

       ... it's really energizing to me.

   16. ELElizabeth Lin10:01

       Yeah, I totally agree. I think, um, right now there's nothing more fun than coming back to this page and seeing what it generated, 'cause I'm like, "I never know what's gonna 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.

   17. CVClaire Vo10:17

       And let's say, I mean, this is obviously perfect, hang it in the loop.

   18. ELElizabeth Lin10:21

       [chuckles]

   19. CVClaire Vo10:21

       But let's say you d- [chuckles] 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."

   20. ELElizabeth Lin10:29

       Mm-hmm.

   21. CVClaire Vo10:29

       How would you... Would you just re-prompt this again to try to get something different?

   22. ELElizabeth Lin10:33

       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.

   23. CVClaire Vo10:46

       Okay.

   24. ELElizabeth Lin10:46

       Do you wanna do that?

   25. CVClaire Vo10:47

       Yeah, let's do it.

   26. ELElizabeth Lin10:48

       Okay. So, um, this might help the aesthetic.

   27. CVClaire Vo10:51

       No, you, you, you pick, you pick the aesthetic.

   28. ELElizabeth Lin10:53

       I think-

   29. CVClaire Vo10:53

       I got to, I got to do it first, so you can do the next one. [chuckles]

   30. ELElizabeth Lin10:56

       I actually think it might be interesting to do the same one and see what it looks like this time.
4. 12:35 – 16:30

   Building a working piano prototype with one prompt

   1. ELElizabeth Lin12:35

      fun, yeah.

   2. CVClaire Vo12:36

      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 'cause they can do much more complex things. So do you wanna show us an example of something more complicated that you've built that would've been harder to do as a designer before?

   3. ELElizabeth Lin12:54

      Yeah, of course. Um, so one of the things that I built as, like, one of the earliest prototypes was this working piano, and, uh, stuff like this was really, really hard to do with existing prototyping tools. Um, 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. [chuckles] I actually programmed this one to play Fur Elise, so I'm gonna go ahead and hit play. [piano notes] So, um, it's pretty cool, 'cause 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 [piano notes] and, you know, it's, it's a different sound. It's very grating 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.

   4. CVClaire Vo14:13

      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?

   5. ELElizabeth Lin14:21

      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 gonna use from before. [chuckles] So for this one, I'm gonna go ahead and say, "Create a new prototype for a digital piano in the style of old Mac OS." 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.

   6. CVClaire Vo15:10

      While this is generating-

   7. ELElizabeth Lin15:11

      Mm-hmm.

   8. CVClaire Vo15:11

      -can we look at that Cursor Rules?

   9. ELElizabeth Lin15:13

      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, [chuckles] 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.

   10. CVClaire Vo15:27

       Oh, got it. So it's just a simple prompt, so you're in one kind of, um, folder for all your prototypes.

   11. ELElizabeth Lin15:33

       Mm-hmm.

   12. CVClaire Vo15:33

       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.

   13. ELElizabeth Lin15:43

       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, [chuckles] but we'll see. So this is my Mac piano, so it kind of looks like the general old Mac aesthetic. I'm gonna try playing it and see what happens. [piano notes] So it works if I click. [piano notes] 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.

   14. CVClaire Vo16:16

       This is ama- [chuckles] 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.

   15. ELElizabeth Lin16:28

       Yeah, you can also make, like, a xylophone.

5. 16:30 – 18:28

   Understanding what’s happening behind the scenes

   1. ELElizabeth Lin16:30

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

   2. CVClaire Vo16:32

      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 d- or you're like, "I got the piano. I don't care?" [chuckles]

   3. ELElizabeth Lin16:43

      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, uh, 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, 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 things wor- work.

   4. CVClaire Vo17:22

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

6. 18:28 – 21:00

   Practical design team scenarios using Cursor

   1. CVClaire Vo18:29

      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?

   2. ELElizabeth Lin18:52

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

   3. CVClaire Vo19:51

      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, 'Do-do!'" And, like, and it 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 example, I think it could make anybody's product better.

   4. ELElizabeth Lin20:47

      Yeah, yeah, for sure. I think, um, there's been, like, I think, in- an increase in the number of people using, like, little boops and beeps-

   5. CVClaire Vo20:53

      Mm-hmm

   6. ELElizabeth Lin20:53

      ... in their websites, and I think with tools like Cursor, it's-

   7. CVClaire Vo20:56

      Mm

   8. ELElizabeth Lin20:56

      ... probably gonna become hopefully more and more common. Yeah.

   9. CVClaire Vo20:59

      Okay,

7. 21:00 – 27:29

   Step-by-step walkthrough of transforming an ugly finance dashboard

   1. CVClaire Vo21:00

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

   2. ELElizabeth Lin21:23

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

   3. CVClaire Vo21:31

      Mm-hmm.

   4. ELElizabeth Lin21:32

      Um, I think we can show, like, an example right now-

   5. CVClaire Vo21:35

      Great

   6. ELElizabeth Lin21:35

      ... of how I might go about doing that, if that's okay.

   7. CVClaire Vo21:38

      Yeah, let's do it!

   8. ELElizabeth Lin21:39

      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, [chuckles] there's a lot of, 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 gonna 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.

   9. CVClaire Vo22:20

      I can't wait for this, 'cause I think generally, design managers sometimes are really great and sometimes really terrible-

   10. ELElizabeth Lin22:28

       [chuckles]

   11. CVClaire Vo22:28

       ... at explaining what they want. So whether or not you're using AI, I'm excited to learn your prompting techniques-

   12. ELElizabeth Lin22:33

       [chuckles]

   13. CVClaire Vo22:33

       ... 'cause I think they can work with people as well.

   14. ELElizabeth Lin22:36

       So, um, I'm gonna go ahead and start with this prompt. So I'm gonna 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 gonna ask it explicitly to remove all the drop shadows, and then I'm gonna say, "Make the components look more modern," and then I'm also gonna 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 Robinhood, 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 giving-- 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.

   15. CVClaire Vo23:18

       I have to ask, since you said you hate drop shadows-

   16. ELElizabeth Lin23:21

       [chuckles]

   17. CVClaire Vo23:21

       ... have you considered making a Cursor Rules of, like, never do design styles?

   18. ELElizabeth Lin23:26

       [chuckles] 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.

   19. CVClaire Vo23:32

       [chuckles]

   20. ELElizabeth Lin23:32

       And so I'm always like: Please, just please use sentence case. Like, stop, like, making everything like a title, 'cause it's, it doesn't have to be in all uppercase. Um, so that's the one I do have. Maybe I should add one for drop shadows. [chuckles] ... 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, 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.

   21. CVClaire Vo24:30

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

   22. ELElizabeth Lin24:47

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

   23. CVClaire Vo24:52

       Yeah.

   24. ELElizabeth Lin24:52

       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.

   25. CVClaire Vo24:59

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

   26. ELElizabeth Lin25:02

       Yeah [chuckles]

   27. CVClaire Vo25:02

       ... on the eye now.

   28. ELElizabeth Lin25:04

       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 Tufte's work. I'm gonna see if it can reference that, and so-

   29. CVClaire Vo25:21

       Oh, you're a true designer.

   30. ELElizabeth Lin25:23

       [chuckles] 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 short-cutting, like, the explanation. If I didn't say Edward Tufte, and I, I would have to explain his principles, and that just takes-
8. 27:29 – 29:22

   Using targeted prompts to improve layout and visual design

   1. CVClaire Vo27:29

      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 [chuckles] I like this one, 'cause 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.

   2. ELElizabeth Lin28:01

      Yeah. I, 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 areas-

   3. CVClaire Vo28:07

      Yeah

   4. ELElizabeth Lin28:07

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

   5. CVClaire Vo28:41

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

9. 29:22 – 31:12

   Building data-driven prototypes powered by Notion databases

   1. CVClaire Vo29:23

      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 vis is one. Are, any others come to mind?

   2. ELElizabeth Lin29:32

      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, um, being able to work with Cursor on integrating with the 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.

   3. CVClaire Vo30:10

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

   4. ELElizabeth Lin30:20

      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, um, this is a personal project that I definitely wanna continue kind of iterating on, but, um, building this was super, super easy, um, because of tools like Cursor.

   5. CVClaire Vo30:42

      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, on a nice design [chuckles] and also showed us a, a quick snapshot of you building yourself sort of a data- database-backed product using really accessible tools in

10. 31:12 – 35:07

    Lightning round and final thoughts

    1. CVClaire Vo31:12

       Notion and Cursor. Okay, I am gonna ask you a couple lightning round questions, and then we're gonna 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?

    2. ELElizabeth Lin31:27

       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 tools, 'cause 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.

    3. CVClaire Vo31:55

       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 gonna get new styles, um, when everything is generated from this, this same data? What do you think?

    4. ELElizabeth Lin32:15

       I think designers were al- 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 try to send, like, really random things, like a 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, shadcn 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.

    5. CVClaire Vo33:04

       Yeah, I really think there's a hole in the market for a chaotic prototype tool.

    6. ELElizabeth Lin33:09

       Mm-hmm.

    7. CVClaire Vo33:09

       Like, everything is so classy-

    8. ELElizabeth Lin33:11

       Yeah. [laughs]

    9. CVClaire Vo33:11

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

    10. ELElizabeth Lin33:33

        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 f- 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," [chuckles] 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 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.

    11. CVClaire Vo34:06

        Well, I have a How I AI tip for you, because one of our recent guests said... She says, like, "Make it 1,000 times more subtle" or like-

    12. ELElizabeth Lin34:14

        Oh, that's a good one.

    13. CVClaire Vo34:15

        Yeah, that's a good one.

    14. ELElizabeth Lin34:16

        That's a nice subtle.

    15. CVClaire Vo34:16

        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?

    16. ELElizabeth Lin34:23

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

    17. CVClaire Vo34:33

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

    18. ELElizabeth Lin34:38

        Thank you. [upbeat music]

    19. CVClaire Vo34:39

        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! [upbeat music]

Episode duration: 35:07