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

howiaipodcast zQkFJNj-2lw Watch on YouTube Published June 15, 2025
Scored
Duration
35:07
Views
18,315
Likes
393

Scores

Composite
0.56
Freshness
0.00
Quality
0.86
Relevance
1.00
6,879 words Language: en Auto-generated

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

Summary

Designer Elizabeth Lynn demonstrates how to use Cursor AI to create interactive prototypes, explore creative aesthetics, and enhance design with sound and data visualization, emphasizing iterative prompting and broadening inspiration sources to achieve better design outcomes.

Key Points

  • Cursor AI enables designers to rapidly prototype interactive experiences, including sound and motion, without needing to code.
  • Designers can use conversational prompts to explore different visual styles like Brutalism, Y2K, and cyberpunk, letting AI generate unexpected creative outputs.
  • Iterative prompting and restoring checkpoints help refine designs when initial results don't meet expectations.
  • AI excels at mimicking styles but requires guidance on taste—designers can teach it by referencing well-designed products like Robin Hood or Stripe.
  • Using references like art styles (e.g., K-pop, Edward Tufte) helps AI understand nuanced design preferences.
  • Designers can build data-driven prototypes using tools like Notion databases, making complex data visualization easier.
  • AI can generate complex interactive elements like a digital piano or sound effects, which are hard to build in traditional design tools.
  • Starting with simple prompts to explore aesthetics before refining helps designers discover unique design directions.
  • Designers should focus on one or two improvements at a time to avoid overwhelming the AI.
  • The process of prompting AI can be documented in a shared prompt library for future reuse and consistency.

Key Takeaways

  • Use conversational prompts to explore a range of design styles and let AI generate creative, unexpected outputs.
  • Iterate by restoring checkpoints and reprompting to refine designs, especially when initial results don’t align with your vision.
  • Teach AI good taste by referencing well-designed products and specific design principles or artists.
  • Leverage AI for interactive elements like sound, motion, and data visualization that are difficult to prototype in tools like Figma.
  • Build a personal prompt library to save effective prompts and reuse them across future projects.

Primary Category

AI Tools & Frameworks

Secondary Categories

AI Engineering Machine Learning Design & Prototyping

Topics

Cursor AI design tools Interactive prototypes Sound design Data visualization Visual aesthetics Prompt engineering Design iteration AI prototyping Creative AI

Entities

people
Elizabeth Lin Claire Vo
organizations
Lovable Retool Lambda School Khan Academy Primer design is a party
products
technologies
domain_specific
technologies products design_styles

Sentiment

0.85 (Positive)

Content Type

interview

Difficulty

intermediate

Tone

educational entertaining inspirational technical enthusiast