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

Summary

Podcast Summary: How I AI – "A Designer's Guide to Cursor" with Elizabeth Lin

Release Date: June 16, 2025
Host: Claire Vo
Guest: Elizabeth Lin

---

Introduction

In this episode of How I AI, host Claire Vo welcomes Elizabeth Lin, a seasoned designer and power user of Cursor—an AI-driven tool designed to enhance design workflows. Elizabeth shares her innovative approaches to leveraging Cursor for creating interactive prototypes, exploring diverse visual styles, and transforming complex data visualizations into engaging user experiences.

---

Leveraging Cursor for Diverse Design Styles

Elizabeth begins by highlighting how Cursor has expanded her creative horizons. She emphasizes the importance of diversifying sources of inspiration to teach Cursor's language and enhance its creative output.

"[00:09] Elizabeth Lin: The biggest key is to broaden your sources of inspiration and help them understand what you're inspired by."

By feeding Cursor eclectic inputs—from K-pop music videos to unconventional art pieces—Elizabeth ensures that the AI generates unique and varied design elements. She enjoys the unpredictability of Cursor’s outputs, often revisiting the tool to see what new surprises it offers with the same prompts.

---

Iterative Prototyping with Cursor

Claire observes Elizabeth’s method of prompting Cursor to suggest design styles, allowing the tool to actively participate in the creative process.

"[05:56] Claire Vo: 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 design styles that you might be able to use."

Elizabeth explains her technique of starting with a blank canvas and using Cursor to propose styles such as Brutalist and Y2K, showcasing Cursor's ability to interpret and implement diverse aesthetic directions. She appreciates how Cursor can produce vastly different results with the same prompt, encouraging multiple iterations to refine the design.

"[10:17] Claire Vo: 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?"

Elizabeth advocates for a step-by-step approach, focusing on one or two adjustments at a time to guide Cursor towards the desired outcome without overwhelming the AI with multiple directives.

---

Building Interactive Prototypes with Cursor

One of the standout examples Elizabeth shares is a working digital piano prototype she created using Cursor. Unlike traditional design tools like Figma, Cursor allows the integration of sound and interactivity seamlessly.

"[12:54] Elizabeth Lynn: 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."

This prototype not only visually mimics an old Mac OS aesthetic but also incorporates functional audio elements, demonstrating Cursor's capability to handle complex, interactive features with minimal effort.

---

Enhancing Design with References and AI Taste

Elizabeth delves into the challenge of teaching AI models to possess "good taste" in design. She emphasizes the role of specific references and iterative prompting in refining Cursor’s outputs.

"[21:23] Claire Vo: So you like smaller prompts. And when you're doing an iteration, it seems like you're focusing on, like, one or two key things. Not like, you know, fix everything."

By providing targeted feedback and referencing renowned design examples such as Edward Tufte, Elizabeth guides Cursor to align its designs with high-quality visual principles.

"[26:43] Elizabeth Lynn: ... it does look 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 change the edges to be a little bit more square, too."

She also maintains a document of effective prompts and Cursor rules, ensuring consistency and ease of reuse for future projects.

---

Designing Data Visualizations with Cursor

Data visualization is another area where Elizabeth harnesses Cursor’s strengths. She showcases a personal finance dashboard prototype that evolves through iterative prompting, enhancing both aesthetics and functionality.

"[25:04] Elizabeth Lynn: Now we have the background, and so let's try a different prompt now. I kind of want it to simplify the colors a little bit on the page."

The ability to quickly generate and refine charts, integrate hover effects, and connect with real-time data sources like Notion databases positions Cursor as a powerful tool for creating dynamic and informative visualizations without the time-consuming processes typical of traditional design tools.

---

Practical Applications and Team Integration

Elizabeth discusses integrating Cursor into design teams by migrating existing design systems into code-compatible formats. This approach allows team members to collaboratively build and iterate on prototypes using shared components, streamlining the design workflow.

"[18:52] Elizabeth Lynn: ... 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?"

---

Lightning Round: Designer Insights and Tips

In the final segment, Claire poses rapid-fire questions to Elizabeth, eliciting valuable insights:

• Favorite Manual Design Tasks: Elizabeth enjoys hands-on graphic design tasks, such as creating personalized posters and photoshopping for friends, appreciating the tactile and creative satisfaction they provide.

• Infusing Creativity with AI: She advises designers to broaden their inspirational sources and engage in meaningful conversations with AI tools to cultivate unique and innovative styles.

• Handling AI Frustrations: When Cursor's outputs don't meet expectations, Elizabeth recommends iterative prompting focused on specific adjustments and, if necessary, restarting the session to reset the AI’s creative direction.

"[33:33] Claire Vo: ... how do you get it to do what you want it to do when it's really not listening?"

Elizabeth emphasizes patience and strategic prompting, ensuring that designers can effectively guide AI tools to achieve their creative visions.

---

Conclusion

Elizabeth Lin’s expertise illuminates the transformative potential of Cursor in modern design workflows. Her strategies for interactive prototyping, style exploration, and data visualization offer designers actionable insights into harnessing AI tools to enhance creativity and efficiency. By fostering a symbiotic relationship between human intuition and AI capabilities, Elizabeth exemplifies how designers can thrive in the evolving landscape of AI-assisted creation.

For more insights and resources, Elizabeth can be found online as lilislabeth, and she offers a course titled Prototyping with Cursor at designisaparty.com.

---

Thank you for reading this summary of the "How I AI" podcast episode featuring Elizabeth Lin. For the full conversation, visit howiaiPod.com or find the podcast on Apple Podcasts, Spotify, and other major platforms.

Transcript

[Elizabeth Lynn]

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

[Claire Vo]

How do you teach an LLM to have good taste?

[Elizabeth Lynn]

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.

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

[Elizabeth Lynn]

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

[Claire Vo]

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.

[Elizabeth Lynn]

Yeah, I'm excited to be here.

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

[Elizabeth Lynn]

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, 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 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 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 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 going to 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 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 Vaporwave, because that's something that is very trendy on the Internet.

[Claire 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 esthetic that you want to put into the design. You're actually prompting Cursor to give you some ideas 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.

[Elizabeth Lynn]

Yeah, I really encourage people to have conversations with 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 specific details out can really help.

[Claire Vo]

Okay, so what's next?

[Elizabeth Lynn]

Do you have two styles that you would like to see?

[Claire Vo]

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.

[Elizabeth Lynn]

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. But the good thing is that you can always undo.

[Claire Vo]

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?

[Elizabeth Lynn]

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.

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

[Elizabeth Lynn]

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

[Claire Vo]

Yeah.

[Elizabeth Lynn]

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 a little bit, it could probably do something pretty interesting. And so that's kind of like 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.

[Claire 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 csx, CSS or HTML tricks just to get this done. And then two, I'm just like you, 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.

[Elizabeth Lynn]

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.

[Claire Vo]

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?

[Elizabeth Lynn]

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

[Claire Vo]

Yeah, let's do it.

[Elizabeth Lynn]

Okay, so this might.

[Claire Vo]

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

[Elizabeth Lynn]

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

[Claire Vo]

Great.

[Elizabeth Lynn]

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

[Claire Vo]

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

[Elizabeth Lynn]

Yeah, I always restore the checkpoint 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 checkpoint pretty liberally. But I do encourage people to take screenshots so that you can kind of like revisit what it looked like before.

[Claire Vo]

In case you Want that glow back.

[Elizabeth Lynn]

So let's see what it looks like.

[Claire Vo]

Oh, interesting.

[Elizabeth Lynn]

So went a completely different route this time.

[Claire Vo]

Yeah, I kind of want the glow back.

[Elizabeth Lynn]

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.

[Claire Vo]

Some similar things, but actually very different style.

[Elizabeth Lynn]

Yeah. Yeah, definitely.

[Claire 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 reprompt it over and over, even with the same style, until you get something you like. It's a great process.

[Elizabeth Lynn]

It is really fun. Yeah.

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

[Elizabeth Lynn]

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 Elise, so I'm going to go ahead and hit play. 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 grading 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.

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

[Elizabeth Lynn]

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

[Claire Vo]

While this is generating. Can we look at that? Cursor rules?

[Elizabeth Lynn]

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.

[Claire 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 in and all that stuff. It does it for you.

[Elizabeth Lynn]

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.

[Claire Vo]

This is amazing. 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.

[Elizabeth Lynn]

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

[Claire 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? Are you like, I got the piano, I don't care.

[Elizabeth Lynn]

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

[Claire 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. Amazon's Genai team uses Retool to make contact 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 5 hundreds 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, easy, 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.

[Elizabeth Lynn]

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 what 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 bring 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 while 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.

[Claire 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 and, like, 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.

[Elizabeth Lynn]

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 tools like Charissa, it's probably going to become, hopefully more and more common.

[Claire Vo]

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

[Elizabeth Lynn]

Yeah, that's a really hard one. I am only starting to understand how to get it to have better taste. I think we can show an example right now of how I might go about doing that, if that's okay.

[Claire Vo]

Yeah, let's do it.

[Elizabeth Lynn]

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

[Claire Vo]

I can't wait for this because 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 am excited to learn your prompting techniques. I think they can work with people as well.

[Elizabeth Lynn]

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

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

[Elizabeth Lynn]

I don't have that, but I do have one that's like, 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, 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. 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, 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.

[Claire Vo]

So you like smaller prompts. And 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. Rather focusing on one or two things. It can do a step at a time.

[Elizabeth Lynn]

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

[Claire Vo]

Yeah.

[Elizabeth Lynn]

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.

[Claire Vo]

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

[Elizabeth Lynn]

So now we have the background, 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 going to see if it can reference that. And so.

[Claire Vo]

Oh, you're a true design.

[Elizabeth Lynn]

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 shortcutting, like, the explanation. If I didn't say, Edward Tufte and I would have to explain his principles, and that just takes a little bit longer.

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

[Elizabeth Lynn]

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 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, how would you describe this to yourself in the future? And then I can reference that note in the future for a future project.

[Claire Vo]

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

[Elizabeth Lynn]

Yeah, yeah, exactly.

[Claire Vo]

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

[Elizabeth Lynn]

It looks very like. It does look pretty Edward Tufty with the colors right now, it's not necessarily my style, but you'll notice that I kind of like change the edges to be a little bit more square, too. So it's a very different style. It's interesting. 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.

[Claire Vo]

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 make it something that someone I respect or think has good taste would approve of, which is really interesting.

[Elizabeth Lynn]

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

[Claire 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 and 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 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?

[Elizabeth Lynn]

Anything that requires prototyping with real data. So I've recently been doing a lot of prototyping or creating little apps in general that are powered by notion databases. And being able to work with cursor on integrating with the notion database has been really cool and really powerful. I was able to create a little bookshelf that's powered by notion database that displays books I've read recently. But I was able to create this, which is not all the books I've read, but it's 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. Oh, wow.

[Claire Vo]

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.

[Elizabeth Lynn]

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

[Claire 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, on a nice design. And also showed us a quick snapshot of you building yourself sort of a data 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?

[Elizabeth Lynn]

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.

[Claire 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 esthetic? 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, the same data? What do you think?

[Elizabeth Lynn]

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 Being 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 CN as a starting point, which is, like, good for creating something that's, like, maybe, like, good from a design standard's perspective, but it's not super creative. And so I think broadening your sources of inspiration really helps.

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

[Elizabeth Lynn]

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.

[Claire 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 or.

[Elizabeth Lynn]

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

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

[Elizabeth Lynn]

Yeah, sure. So I'm usually everywhere on the Internet as lilislabeth, and I'm currently teaching a course called Prototyping with Cursor, and you can check that [e-mail] amazing.

[Claire Vo]

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

[Elizabeth Lynn]

Thank you.

[Claire Vo]

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 howiai Pod Pod. Com. See you next time.