Elizabeth Lynn (3:51)

Thank you. I'm glad to be here.

Aaron Walter (3:53)

Yeah, we're excited about what you're doing. You've been doing a lot of stuff with AI vibe coding. You've got a background in computer science and you're bringing that together with design and education. Maybe you could give us the quick tour of how you got to this intersection that you're at today.

Elizabeth Lynn (4:13)

So I guess the short version of the story is a couple of years ago I left my full time job as a product designer and I decided to follow my dream of becoming a full time design educator by starting my own design school. It's currently called Design as a Party. I recently started teaching a course called Prototyping with Cursor because I found that Cursor and other AI tools were really exciting to use as a designer. They really helped me be more creative and helped me build really cool things. And with my background in computer science I was like, I think I know enough computer science or remember enough computer science to make it easier for non developers to pick up.

Eli Woolery (4:54)

We'll come back I think to your background and how you got into design because again you started in computer science but just because I think it's on a lot of folks minds. Certainly Aaron and I have been playing around and using these tools a lot to build build actual products. Talk to us about Cursor. How did you happen upon it? How do you use it in your workflow and then you can maybe speak to the course itself too.

Elizabeth Lynn (5:14)

Yeah, sure. So I started experimenting with cursor late last year. I was building some random side projects and I found it really helpful in making some of my very difficult to accomplish implementations become a reality. So one of the specific things I made was this design quiz that would tell designers what their design aesthetic was. And I had this dream of making like a constellation with stars that would connect depending on where you fit in on different axes. And I really didn't want to do math. And so I basically asked cursor. I was like, hey, can you do this? I sent screenshots and kind of explained how it should work. And after a few tries it worked. And I was like, whoa, this is so cool. And being able to accomplish something I normally wouldn't be able to and make my dreams become a reality really made me feel like I was building websites in neopets as a kid. It kind of had that same feeling to me. And so that was really my aha moment.

Aaron Walter (6:13)

And why cursor rather than other tools? There are things like replit and others out there. What does cursor bring to you that maybe other tools don't?

Elizabeth Lynn (6:24)

Cursor for me personally wasn't as scary because I've used a lot of code editors before and so I think I was used to that format and it felt like I had more freedom and flexibility and less stuff was hidden behind a black box. And out of all the tools I tried at the time, it seemed to have the best results for trying creative ideas. I could type really vague prompts and it wouldn't necessarily silo me into using a popular design system like Chad cn. It would actually do creative things. Like I told it to make a hover state for a button because I didn't really feel like thinking about it. And then it put like shooting stars across the button using the sparkle component I'd put somewhere else. And I was like, oh, that's pretty cool. And so I started iterating on it more based on what it had created and the creativity really stood out to me. I was using Claude for the model back then.

Eli Woolery (7:15)

So for somebody who's maybe got more of a design background and starting to just dabble more on the code side of things, what are some recommendations for you around just kind of dipping your toes in the water? I think there's tools like Claude where you can actually deploy a little app. We've used it before, like make this spinner for, you know, workshop or something like that that can just deploy directly as an artifact. But if you are trying to make something more complicated like an app, where should somebody get started to just understand how to start using these tools?

Elizabeth Lynn (7:43)

I think there are a lot of those zero to one tools that really go pretty far. So Claude does this. V0 does this lovable. There's so many out there. They're honestly all pretty similar. And they do a great job of putting together the overall architecture and structure of a project for you, so that if you do want to bring it into a code editor like Cursor, it is not as scary and you don't have to think about how is this getting made, what should I tell Cursor to do? Because all the structural aspects will be there. And so I think I'd recommend trying those out a little bit. People like different ones, so it really depends on what your style is.

Aaron Walter (8:19)

All the vibe coding stuff that I've done, I've done it through language. I'm describing what I want to essentially get functionality, and then I have enough skills coding that I'm sort of designing it in code. But you talked about uploading screenshots to give the thing and an idea. To what degree is that possible these days? Like, if we're designing a totally complete UI and then we're bringing that to Cursor and saying, please build this out, what are the possibilities?

Elizabeth Lynn (8:48)

Right now, I think the possibilities keep growing every day, but if you paste in like a screenshot of a pretty standard mockup that doesn't do anything too chaotic or out of bounds, it will usually get it pretty okay. For example, like if you wanted to generate a basic landing page based on a screenshot, it could probably do that pretty well. It does get pretty overrated, overwhelmed with too much context. And so sometimes you do have to start smaller. Now, with MCP servers, you're able to connect these agents to Figma so that they can talk to figma, and the accuracy is a lot higher. It still gets stressed out with a lot of context, which I think will improve soon. But it's very good at implementing like a button it sees or a HERO image, and then you can kind of build up from there and get pretty far.

Eli Woolery (9:34)

Talk to us more about the MCP server for folks that aren't familiar like me.

Elizabeth Lynn (9:39)

Yeah, it's a very hot topic right now, and I feel like I'm still learning about it every day. But I think the short explanation is right now, tools like Cursor, they can't see what's happening in a Figma file. So if you send a link to it, it won't see the file like you do. And so MCP servers allow these tools to communicate with each other. And so Figma's MCP server will allow Cursor to get the code, the Figma file that's generated with dev mode. And it will also get the variables in the frame that you have selected, and it'll also get a screenshot of the frame that you have selected in figma. And so with all that context, it helps Cursor kind of understand what you want to build better and implement it to the best of its ability.

Eli Woolery (10:27)

So that stands for model context protocol.

Elizabeth Lynn (10:29)

Yeah, model context protocol, yes.

Eli Woolery (10:31)

So it's essentially just giving more context to the model than you might otherwise.

Elizabeth Lynn (10:35)

Exactly.

Aaron Walter (10:36)

This is kind of amazing stuff where we start to glue all these things together. Has this change in the way that designers, design and developers develop.

Elizabeth Lynn (10:46)

That's the question that everyone has been asking me right now. And I think we're currently in such an early phase that my answer has been, I don't know, we're figuring it out. I know a lot of design teams are currently trying to train their designers on using tools like Cursor, and they're building kind of like a playground environment environment within their teams so that designers can build prototypes in a playground code environment and create interactive click throughs using those components. So it's kind of like separate from the actual code base because it doesn't have all the other components that engineers might need. And so they're able to create prototypes with more of a playground environment. So I think designers are going to be able to create more interactive prototypes more quickly and maybe their designs won't always live in static mockups anymore because it's so easy to prototype a cool idea really, really fast.

Aaron Walter (11:41)

You described this as clickthroughs, which is the type of prototyping that we've been using for many years now. And those just seem so primitive compared to what is possible now. Like if you're connecting figma directly with something like Cursor, you're not just building click through prototypes. You've got functioning forms and interactive menus and state and all kinds of different possibilities with the ui.

Elizabeth Lynn (12:08)

Yeah, exactly.

Aaron Walter (12:09)

So think about two years from now, what do you think will be different about the way that people build products? So if we just put to the side the role of a designer, put to the side the role of an engineer, and we just say people who are making products two years from now, if things are moving as they are, or maybe they move exponentially faster, what does that look like from your perspective?

Elizabeth Lynn (12:37)

I hope that people build things faster and try new ideas faster. I think this was true even before AI tools started getting really popular. But I think with AI tools, teams can iterate faster, get feedback faster from users, and the cycles will all be faster. It's faster to generate ideas and see what's possible. And so I think product teams who are adopting this will learn faster and be able to learn more quickly with what they're doing.

Eli Woolery (13:07)

Where do some of your students or people that are just getting into this, where do you find that they get stuck and how do they get unstuck?

Elizabeth Lynn (13:14)

I ran a beta version of this course to test that exact question before I made it more public. And the biggest thing that people got stuck on was actually debugging. I think as someone who studied computer science, I didn't realize how useful that skill is just getting unstuck in general. So I spent a lot more time trying to figure out like, okay, here are some strategies for what to do when you don't know what's happening. And a lot of times students will still rely on me to give the answer, but I've been trying to train them to like, okay, here are some ways you can try to figure out what the actual problem is and then maybe talk to the agent to figure out how to solve the problem. And I think getting in that mindset is really hard because not understanding what's happening is really frustrating, and navigating that ambiguity is really frustrating. And so a lot of what I've been trying to help students understand is how to get out of that mindset and keep pushing forward until you solve the problem or come back to it later. I think the pushing through is one of the hardest parts.

Aaron Walter (14:15)

I found with a lot of AIs, that there's this recursive loop of regression sometimes where it figures something out and then it regresses back to a previous iteration or challenge. Granted, I've done a lot of vibe coding stuff with ChatGPT, so I'm sort of going between my development environment and an AI back and forth versus cursor, where it's like everything in one place and it can see everything and keep track of things better. Do you find that happens where it's like this regression all the time?

Elizabeth Lynn (14:47)

I think someone told me once it's like working with a junior engineer, where it's like if they have too much information, they'll get confused and overwhelmed. And so knowing how much much context to give agents at different times is a pretty difficult skill to learn, but you learn through trial and error. And so I always encourage students when something isn't working to start a new chat with zero context and then try asking again, because sometimes it will get Stuck on doing something it was doing before because that's what you asked it to do before.

Aaron Walter (15:14)

Sometimes I'll even say like, okay, you're getting confused. Let's start from scratch. Here's the current state that I have. Here's the one thing I want to do, and I try to keep it simplified to like a single problem problem. My instincts are often like, I want to do this and this, and while you're at it, do this. Because in my human brain, those things are connected. But I have to whittle it down to a simple thing to make progress.

Elizabeth Lynn (15:39)

That happens to me all the time. Sometimes I'll feel like, okay, let's try like these five bullet points and do them step by step. And then I'll do the first bullet point and forget about the rest. So doing one at a time definitely helps a lot.

Eli Woolery (15:52)

I wonder if there's instances, and I'll give a real world example here, but where the model might be hallucinating or providing an answer that's just way off base. So I'm in the process of building some landscape stairs outside, and I had chatgpt help me. Like, you know, I gave it sort of the rise over run of the distance of the stairs and helped me like calculate and get materials list and did a pretty good job of that. But then I made a slight design change where I put a landing into the stair pattern and it could not understand that no matter what I did. I was like, how does this change the rise of a run? It's like, no, it does not change. It's just a pause. I'm like, it's actually longer than a natural. I give it drawings. I tried everything. It's like, no, no, there's no change. I think you're wrong. So I'm just wondering, you have a computer science background, so you might be able to identify something where. Okay, actually this is not taking the right approach here. But for somebody who doesn't have that background, would you recommend like, hey, try this in a different tool? Cross check it. What's your advice around that?

Elizabeth Lynn (16:48)

There are a few different strategies. A lot of times I'll ask students to try switching to a different model. So sometimes if you try switching to a different model, the other model will figure it out. The models are constantly changing, but oftentimes I find that Claude is more creative. Sometimes the OpenAI models are better at solving a really complex problem. It just really depends. And so switching the model is a great strategy. I've personally found that cursor, for some reason, always agrees with me when I'm like, you're wrong. And sometimes I'm like actually I was wrong, it's randomly really positive and I'm like no, actually I was wrong. They're like you're right every time. Really funny to me. So I think that's definitely really hard because it's hard to know when the agent is wrong versus when you're wrong. And trying to figure that out is definitely something to learn.

Aaron Walter (17:32)

I find that too. It's often just so agreeable and I'm not even certain, like am I asking the right question here? I find that sometimes my approach is to ask for the answer to a specific question versus saying like how should I approach this problem? And broadening or widening that aperture of the question. Do you have a strategy for how to prompt it and get the types of help you want?

Elizabeth Lynn (18:00)

Yeah. A lot of times starting off with what do you think is wrong? Helps. And then.

Aaron Walter (18:07)

If you'd like to continue listening to this conversation, you'll need to subscribe@designbetterpodcast.com subscribe Once you do, you'll get access to every full length episode, all ad free monthly AMAs with inspiring people in design and tech and recordings of all our past AMAs. The podcast is available to everyone through our scholarship program. If you can't afford a subscription, just email us@subscriptionsuriositydepartment.com and we'll help you out. Your support makes design better possible. Invest in yourself and the design community by subscribing@designbetterpodcast.com DesignBetter is supported by Masterclass. I'm a lifelong learner. Though it's been decades since I've been in school, I remain in life's classroom curious about design and tech, science, history, filmmaking, architecture, cooking, AI, and lots of other things too. Masterclass is an essential part of my learning. I've gone deeper into each of these subjects by taking masterclasses with people like Herbie Hancock, Frank Gehry, David Lynch, Anna Wintour, Shonda Rhimes, Martin Scorsese, and Jane Goodall, to name just a few. The brightest minds are making my mind brighter and I love it. Whether you want to learn to write better, improve your public speaking, develop a mindfulness practice, enhance your creativity, or become a better cook, masterclass has in depth expertise you can tap into anytime and any place you can access Masterclass on your phone, computer, smart TV, or even in audio mode. Right now, DesignBetter listeners get an additional 15% off any annual membership@masterclass.com DesignBetter save 15% off@masterclass.com DesignBetter that's masterclass.com DesignBetter DesignBetter is supported by Aquatru. Pollutants, pathogens and impurities can find their way into our drinking water when we don't even know it. That's why it's essential to have quality water filtration in your home. We love Aquatru's filtration options. Eli and his family have been using an AquaTrue countertop water filter for a while now and they love it. It keeps Eli's family safe from pollutants and they can really taste the difference when compared to their tap water. Aquatru removes over 84 of the most harmful contaminants including microplastics, chlorine, fluoride, arsenic, nitrites and something called pafas known as the forever chemicals. Definitely not something you want in your body. Aquatru also offers high capacity under sink options and they even have a wi fi connected purifier with mineral boost. You'll get essential minerals every day just by drinking water. Aqua Tru comes with a 30 day money back guarantee and makes a great gift for anyone that you care about. You can get 20% off any Aqua Tru purifier at aquatru.com that's a Q U a T r u dot com and enter code design better all one word at checkout. To save 20% off any Aqua Tru water purifier just go to aquatru.com a Q U a T r u.com enter the promo code designbetter.