- 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.
- Have you played around with cursor?
If not, it's definitely time.
Designers with no coding skills are passing cursor
their Figma files and getting working apps
out on the other side.
And if you have no design to work with,
you can just prompt this AI powered development environment
to get a solid prototype of your idea.
Elizabeth Lynn, founder of Design as a Party,
recognizes that cursor is going to expand
the capabilities of designers.
She's built a course that introduces designers to cursor
and challenges you to build while you design.
We talked with Elizabeth about how she is using AI tools
like cursor to help designers prototype faster
than ever before.
While she thinks now might be the perfect time
to try something new in your career,
what's missing from traditional design education?
Elizabeth also shares what she's learned about vibe coding,
why debugging is the hardest skill for new students to master
and how she's building a business around the idea
that learning should feel more like a party than work.
By the way, you may have heard that we just launched
the Design Better Toolkit, a collection of resources
that we love and use regularly.
Toolkit gets you major discounts and free access to tools
and courses that will help you unlock new skills,
make your workflow more efficient
and take your creativity further.
And one of Elizabeth's courses,
Prototyping with Cursor,
just happens to be part of this bundle.
You're gonna get $100 off her course,
as well as a $500 credit towards Airtable,
discounts on read.ai, perplexity and other tools,
and discounts on other courses from platforms
like Shift Nudge from our friend, MDS.
To get access, you'll need to be a Design Better Premium
member at the annual subscription level.
Visit dbtr.co/toolkit to learn more
and take your career further.
This is Design Better, where we explore creativity
at the intersection of design and technology.
I'm Eli Woolery.
And I'm Aaron Walter.
If you're hearing this,
you're not currently on our premium subscriber feed.
Design Better Premium subscribers enjoy weekly episodes.
You get four episodes per month, rather than just two.
All are ad-free, and you get invited to our monthly AMAs
with the smartest folks in design and tech.
You'll hear a preview of this episode,
but if you'd like to hear the full conversation,
please consider becoming a premium subscriber
at designbetterpodcast.com/subscribe.
That's designbetterpodcast.com/subscribe.
It's just seven bucks a month,
and it supports not only your personal growth,
it also supports your design community.
The podcast is available to everyone
through our scholarship program.
If you can't afford a subscription right now,
just shoot us an email at subscriptions
at thecuriositydepartment.com, and we'll help you out.
We'll return to the conversation after this quick break.
Design Better is brought to you by Wix Studio,
the platform built for all web creators to design,
develop, and manage exceptional web projects at scale.
Learn more at wix.com/studio.
And now, back to the show.
Elizabeth Lynn, welcome to Design Better.
Thank you, I'm glad to be here.
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.
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,
so remember enough computer science
to make it easier for non-developers to pick up.
Well, 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 Erin and I have been playing around
and using these tools a lot to 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.
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 a consolation 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.
- And why Cursor rather than other tools?
There are things like Replet and others out there.
What does Cursor bring to you
that maybe other tools don't?
- Cursor, for me personally, wasn't as scary
'cause 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 Shad Cn.
It would actually do creative things.
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 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.
- So for somebody who's,
if you've 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 a 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?
- I think there are a lot of those like 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 like,
how is this getting made?
What should I tell a 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.
- 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 an idea.
To what degree is that possible these days?
Like if we're designing like a totally complete UI
and then we're bringing that to cursor and saying,
please build this out.
What are the possibilities right now?
- I think the possibilities keep growing every day,
but if you paste in like a screenshot
of a pretty standard backup
that doesn't do anything to 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 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
that sees a hero image
and then you can kind of build up from there
and get pretty far.
- Talk to us more about the MCP server
for folks that aren't familiar, like me.
- 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 from 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.
- So that stands for model context protocol.
- Yeah, model context protocol, yes.
- So it's essentially just giving more context to the model
than you might otherwise, yeah.
- Exactly.
- This is kind of amazing stuff
where we start to glue all these things together.
How does this change in the way that designers design
and developers develop?
- That's the question that everyone
has been asking me right now.
And I think we're currently in like such an early phase
that my answer has been,
I don't know, we're like 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
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
'cause 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 mock-ups anymore
because it's so easy to prototype
a cool idea really, really fast.
- You described this as click-throughs
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.
Like you've got functioning forms
and interactive menus and state
and all kinds of different possibilities with the UI.
- Yeah, exactly.
- 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?
- I hope that people build things faster
and try new ideas faster.
I think this was true like 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-generated 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.
- Were just 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?
- 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.
I've 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 chat GPT.
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.
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 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
'cause that's what you asked it to do before.
- 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 wanna do
and I try to keep it simplified to like a single problem.
My instincts are often like,
I wanna 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.
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.
- 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 chat GVT
help me like, you know, I gave it sort of the rise over run
of the distance of the stairs
and help me like calculate and get materials lists.
I 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 over run?
It's like, no, it does not change.
It's just a pause.
I'm like, no, it's actually longer than a nap.
You know, I give it like drawings.
I tried everything.
It's like, no, no, there's no change.
Like, I think you're wrong.
So I'm just wondering like, you know,
you have a computer science background.
So you might be able to sort of 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?
- There are a few different strategies.
A lot of times I'll ask students to try switching
to a different model.
So sometimes if we try switching to a different model,
the other model will figure it out.
The models are constantly changing
but oftentimes I find that cloud is more creative.
Sometimes the open AI models are better at solving
like 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.
It's just really funny to me.
So I think that's definitely really hard
'cause 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.
- 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?
- Yeah, a lot of times starting off with
what do you think is wrong helps?
And then.
- If you'd like to continue listening to this conversation,
you'll need to subscribe at 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 at
[email protected]
and we'll help you out.
Your support makes design better possible.
Invest in yourself and the design community
by subscribing at designbetterpodcast.com.
PodcastTranscript AI