Nov 6, 2024

How to build your ideas with Claude + Cursor

Creator of Dive

Founder of Design+Code

One of the most impressive things I’ve seen a designer make all year is Meng To’s DreamCut.

It’s the perfect example of what it looks like to transition from traditional designer to builder.

So here's a breakdown of his process to help you get started 👇

1 — Pick an idea that you care deeply about

AI rewards designers who show perseverance. Because it’s rarely going to work on the first try. If you don’t genuinely care about what you are building then it’s too easy to give up.

"It has to shake your core to a point where you're not gonna give up”
Meng To

Remember how Mariana said she failed the first two times she tried learning how to code? She only succeeded when she made building the primary objective instead of focusing on the next learning rung.

Maybe you solve your own problem in Figma with a plugin (ex: Meng spent 3 weeks building a simple .svg pattern plugin as a way to practice). Or perhaps you capitalize on the limitations of Figma to create a prototype that is truly function (ex: a form that users can actually submit and store data).

2 — Start with Claude Artifacts

Claude Artifacts was the tipping point where Meng realized that he was now capable of building his own ideas.

If you’re not familiar, it’s a simple side-by-side view where you can prompt the AI on the left and immediately generate a product on the right.

"Design is about function and problem solving. And if you think about design that way, Claude is really, really good at that."
Meng To

3 — Be intentional about your first ~10 prompts

“It's not code that scares people… it’s that they don't know how to deconstruct the app in a way that makes sense to the AI”
— Meng To

That word “deconstruct” is key 👀

Meng couldn’t start by asking Claude to “build a video editor”. You have to think about your product from first principles and break it down into its fundamental components.

Then you can tackle each element one step at a time using simple prompts (Meng recommends staying under 3 sentences per prompt).

For DreamCut, Meng focused just on the timeline… and then just on the video player. And every step of the way you have to get ultra specific. For example you can’t just say you want a video player… you have to specify where the video is coming from. Are you uploading it? Are you rendering YouTube links?

This is what it means to think like an engineer.

4 — Invest in aesthetics

Meng says he doesn’t worry about tweaking the styling until he’s “ready to post on Twitter” 😆

Most AI products revolve around TailwindCSS. If you haven’t explored their docs before it’s actually quite straightforward and I’m willing to bet you could pick it up in <30 min even if you’ve never written code before.

“Learning Tailwind can give you a huge leg up in understanding aesthetics”
— Meng To

Meng also is a big fan of using UI Kits like ShadCN as a baseline.

5 — Move over to Cursor

When you get to ~400 lines of code it’s probably time to move things into Cursor. This can be a scary jump but “you learn it once and then you’re good.”

Cursor Composer gives you a chat UI where you can write code using natural language and have the AI explain what is happening in a way that even designers can understand.

The hardest part is setting up your local environment, installing packages like Node, etc. This is where you're probably going to want to follow a YouTube tutorial step by step. It’s annoying but you’ll get through it I promise.

6 — Manage your code base with Cursor

For a while, all of your code will live in a single file. This is totally fine to get momentum! But at some point you’re going to want to split your code into separate pages and start turning things into reusable components.

The good news is that Cursor Composer is great at this 💪

AI will write the code and create the files for you. It’s so good that Meng’s 8 year old son was able to create a pretty sick Three.js site without knowing how to code.

Also remember that Cursor is building up context for your project as you add to it. So each feature requires less and less explanation. For instance, Meng thought adding a camera recording feature would be especially difficult so he saved it until the end. But it ended up being a single prompt and it worked right away!

7 — Build in public

Meng made a big deal about the importance of building in public.

It’s the best way to hold yourself accountable and ensure that you ultimately ship something you’re proud of.

100% of my projects would fail if I wasn’t building in public”

There will be many failures along the way… heck you might not even end up in the place that you thought you would. That’s ok! Because it’s the process that matters. And I guarantee sharing your journey (failures included) will inspire others and push you to keep going.

And when you feel lost or intimidated just remember this…

"The only difference between a designer and an engineer is the tool"

Behind the scenes of how Meng To built DreamCut

If you’re interested in becoming a designer who ships then this is the episode for you.

Meng gives a highly practical breakdown of what it looks like to go from 0 to 50,000+ lines of code as a designer. And Meng is the perfect person to onboard you into tools like Claude and Cursor because he’s spent 10+ years teaching designers how to code through Design+Code. So in this episode we go deep into:

  • Meng’s tech stack and go-to AI tools

  • How to fine-tune visual details in code

  • The secret to an effective first 10 prompts

  • How to find the perfect first project to build

  • How much code you need to know to build with AI

  • What parts were easier/harder than Meng expected

  • Why Meng considers Claude the newest design tool

  • a lot more…

Listen on YouTube, Spotify, Apple, or wherever you get your podcasts 👇

One of the most impressive things I’ve seen a designer make all year is Meng To’s DreamCut.

It’s the perfect example of what it looks like to transition from traditional designer to builder.

So here's a breakdown of his process to help you get started 👇

1 — Pick an idea that you care deeply about

AI rewards designers who show perseverance. Because it’s rarely going to work on the first try. If you don’t genuinely care about what you are building then it’s too easy to give up.

"It has to shake your core to a point where you're not gonna give up”
Meng To

Remember how Mariana said she failed the first two times she tried learning how to code? She only succeeded when she made building the primary objective instead of focusing on the next learning rung.

Maybe you solve your own problem in Figma with a plugin (ex: Meng spent 3 weeks building a simple .svg pattern plugin as a way to practice). Or perhaps you capitalize on the limitations of Figma to create a prototype that is truly function (ex: a form that users can actually submit and store data).

2 — Start with Claude Artifacts

Claude Artifacts was the tipping point where Meng realized that he was now capable of building his own ideas.

If you’re not familiar, it’s a simple side-by-side view where you can prompt the AI on the left and immediately generate a product on the right.

"Design is about function and problem solving. And if you think about design that way, Claude is really, really good at that."
Meng To

3 — Be intentional about your first ~10 prompts

“It's not code that scares people… it’s that they don't know how to deconstruct the app in a way that makes sense to the AI”
— Meng To

That word “deconstruct” is key 👀

Meng couldn’t start by asking Claude to “build a video editor”. You have to think about your product from first principles and break it down into its fundamental components.

Then you can tackle each element one step at a time using simple prompts (Meng recommends staying under 3 sentences per prompt).

For DreamCut, Meng focused just on the timeline… and then just on the video player. And every step of the way you have to get ultra specific. For example you can’t just say you want a video player… you have to specify where the video is coming from. Are you uploading it? Are you rendering YouTube links?

This is what it means to think like an engineer.

4 — Invest in aesthetics

Meng says he doesn’t worry about tweaking the styling until he’s “ready to post on Twitter” 😆

Most AI products revolve around TailwindCSS. If you haven’t explored their docs before it’s actually quite straightforward and I’m willing to bet you could pick it up in <30 min even if you’ve never written code before.

“Learning Tailwind can give you a huge leg up in understanding aesthetics”
— Meng To

Meng also is a big fan of using UI Kits like ShadCN as a baseline.

5 — Move over to Cursor

When you get to ~400 lines of code it’s probably time to move things into Cursor. This can be a scary jump but “you learn it once and then you’re good.”

Cursor Composer gives you a chat UI where you can write code using natural language and have the AI explain what is happening in a way that even designers can understand.

The hardest part is setting up your local environment, installing packages like Node, etc. This is where you're probably going to want to follow a YouTube tutorial step by step. It’s annoying but you’ll get through it I promise.

6 — Manage your code base with Cursor

For a while, all of your code will live in a single file. This is totally fine to get momentum! But at some point you’re going to want to split your code into separate pages and start turning things into reusable components.

The good news is that Cursor Composer is great at this 💪

AI will write the code and create the files for you. It’s so good that Meng’s 8 year old son was able to create a pretty sick Three.js site without knowing how to code.

Also remember that Cursor is building up context for your project as you add to it. So each feature requires less and less explanation. For instance, Meng thought adding a camera recording feature would be especially difficult so he saved it until the end. But it ended up being a single prompt and it worked right away!

7 — Build in public

Meng made a big deal about the importance of building in public.

It’s the best way to hold yourself accountable and ensure that you ultimately ship something you’re proud of.

100% of my projects would fail if I wasn’t building in public”

There will be many failures along the way… heck you might not even end up in the place that you thought you would. That’s ok! Because it’s the process that matters. And I guarantee sharing your journey (failures included) will inspire others and push you to keep going.

And when you feel lost or intimidated just remember this…

"The only difference between a designer and an engineer is the tool"

Behind the scenes of how Meng To built DreamCut

If you’re interested in becoming a designer who ships then this is the episode for you.

Meng gives a highly practical breakdown of what it looks like to go from 0 to 50,000+ lines of code as a designer. And Meng is the perfect person to onboard you into tools like Claude and Cursor because he’s spent 10+ years teaching designers how to code through Design+Code. So in this episode we go deep into:

  • Meng’s tech stack and go-to AI tools

  • How to fine-tune visual details in code

  • The secret to an effective first 10 prompts

  • How to find the perfect first project to build

  • How much code you need to know to build with AI

  • What parts were easier/harder than Meng expected

  • Why Meng considers Claude the newest design tool

  • a lot more…

Listen on YouTube, Spotify, Apple, or wherever you get your podcasts 👇

One of the most impressive things I’ve seen a designer make all year is Meng To’s DreamCut.

It’s the perfect example of what it looks like to transition from traditional designer to builder.

So here's a breakdown of his process to help you get started 👇

1 — Pick an idea that you care deeply about

AI rewards designers who show perseverance. Because it’s rarely going to work on the first try. If you don’t genuinely care about what you are building then it’s too easy to give up.

"It has to shake your core to a point where you're not gonna give up”
Meng To

Remember how Mariana said she failed the first two times she tried learning how to code? She only succeeded when she made building the primary objective instead of focusing on the next learning rung.

Maybe you solve your own problem in Figma with a plugin (ex: Meng spent 3 weeks building a simple .svg pattern plugin as a way to practice). Or perhaps you capitalize on the limitations of Figma to create a prototype that is truly function (ex: a form that users can actually submit and store data).

2 — Start with Claude Artifacts

Claude Artifacts was the tipping point where Meng realized that he was now capable of building his own ideas.

If you’re not familiar, it’s a simple side-by-side view where you can prompt the AI on the left and immediately generate a product on the right.

"Design is about function and problem solving. And if you think about design that way, Claude is really, really good at that."
Meng To

3 — Be intentional about your first ~10 prompts

“It's not code that scares people… it’s that they don't know how to deconstruct the app in a way that makes sense to the AI”
— Meng To

That word “deconstruct” is key 👀

Meng couldn’t start by asking Claude to “build a video editor”. You have to think about your product from first principles and break it down into its fundamental components.

Then you can tackle each element one step at a time using simple prompts (Meng recommends staying under 3 sentences per prompt).

For DreamCut, Meng focused just on the timeline… and then just on the video player. And every step of the way you have to get ultra specific. For example you can’t just say you want a video player… you have to specify where the video is coming from. Are you uploading it? Are you rendering YouTube links?

This is what it means to think like an engineer.

4 — Invest in aesthetics

Meng says he doesn’t worry about tweaking the styling until he’s “ready to post on Twitter” 😆

Most AI products revolve around TailwindCSS. If you haven’t explored their docs before it’s actually quite straightforward and I’m willing to bet you could pick it up in <30 min even if you’ve never written code before.

“Learning Tailwind can give you a huge leg up in understanding aesthetics”
— Meng To

Meng also is a big fan of using UI Kits like ShadCN as a baseline.

5 — Move over to Cursor

When you get to ~400 lines of code it’s probably time to move things into Cursor. This can be a scary jump but “you learn it once and then you’re good.”

Cursor Composer gives you a chat UI where you can write code using natural language and have the AI explain what is happening in a way that even designers can understand.

The hardest part is setting up your local environment, installing packages like Node, etc. This is where you're probably going to want to follow a YouTube tutorial step by step. It’s annoying but you’ll get through it I promise.

6 — Manage your code base with Cursor

For a while, all of your code will live in a single file. This is totally fine to get momentum! But at some point you’re going to want to split your code into separate pages and start turning things into reusable components.

The good news is that Cursor Composer is great at this 💪

AI will write the code and create the files for you. It’s so good that Meng’s 8 year old son was able to create a pretty sick Three.js site without knowing how to code.

Also remember that Cursor is building up context for your project as you add to it. So each feature requires less and less explanation. For instance, Meng thought adding a camera recording feature would be especially difficult so he saved it until the end. But it ended up being a single prompt and it worked right away!

7 — Build in public

Meng made a big deal about the importance of building in public.

It’s the best way to hold yourself accountable and ensure that you ultimately ship something you’re proud of.

100% of my projects would fail if I wasn’t building in public”

There will be many failures along the way… heck you might not even end up in the place that you thought you would. That’s ok! Because it’s the process that matters. And I guarantee sharing your journey (failures included) will inspire others and push you to keep going.

And when you feel lost or intimidated just remember this…

"The only difference between a designer and an engineer is the tool"

Behind the scenes of how Meng To built DreamCut

If you’re interested in becoming a designer who ships then this is the episode for you.

Meng gives a highly practical breakdown of what it looks like to go from 0 to 50,000+ lines of code as a designer. And Meng is the perfect person to onboard you into tools like Claude and Cursor because he’s spent 10+ years teaching designers how to code through Design+Code. So in this episode we go deep into:

  • Meng’s tech stack and go-to AI tools

  • How to fine-tune visual details in code

  • The secret to an effective first 10 prompts

  • How to find the perfect first project to build

  • How much code you need to know to build with AI

  • What parts were easier/harder than Meng expected

  • Why Meng considers Claude the newest design tool

  • a lot more…

Listen on YouTube, Spotify, Apple, or wherever you get your podcasts 👇

Join 10,000+ designers

Get our weekly breakdowns

"There's no doubt that Dive has made me a better designer"

@ned_ray

Join 10,000+ designers

Get our weekly breakdowns

"There's no doubt that Dive has made me a better designer"

@ned_ray

Join 10,000+ designers

Get our weekly breakdowns

"There's no doubt that Dive has made me a better designer"

@ned_ray

"

I've been binging Dive Club lately and the quality is nuts

Literally the only show about design I watch”

Eugene Fedorenko

"

I've been binging Dive Club lately and the quality is nuts

Literally the only show about design I watch”

Eugene Fedorenko

hello@dive.club

Ⓒ Dive 2024