🤿 the newest design tool

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 if you’re interested in becoming a designer who ships then this is the episode for you because Meng gives a highly practical breakdown of what it looks like to go from 0 to 50,000+ lines of code as a designer.

Also 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 👇

🤝 WITH GENWAY

I’ve been loving this new product called Genway—it uses AI-powered interviewers to help you gather rich, qualitative data at basically an infinite scale.

So I’ve been using it to interview Dive Club listeners all over the world!

I tell the AI what I’m hoping to learn and then it has a dynamic conversation with each person. Genway then automatically organizes all of the key insights for me.

I learned more in a 2 week study than I had in a year and half prior. Needless to say I am totally hooked 😆

So if you want to take your research to the next level, visit this secret landing page specifically for Dive Club listeners to get your first 2 months free 👇

🎓 KEY TAKEAWAYS

How to build your ideas with AI tools

If you’ve never built your ideas with AI before, then here’s a breakdown of how Meng recommends 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.

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.

3 — Be intentional about your first ~10 prompts

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.

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.

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.

btw if you want to save this link I broke it all down in article form 👇

🤝 WITH RAYCAST

I’ve been anticipating today for quite some time… Raycast Notes is finally here!

Their old floating notes product was my go to for quick captures but they’ve taken it to the next level. There’s markdown formatting, keyboard shortcuts, multiple notes, etc.

You can even create a Quicklink to a specific note and assign a hotkey to it! That way you can open it from anywhere with a single keystroke.

It’s just another way that Raycast helps me stay in flow while I work 💪

Meet the Dive partners 

I made a list of my favorite products and asked them to come on as sponsors of the newsletter/podcast. They said yes 🥹

The #1 way to support Dive Club is to check them out👇

Dessn → How I ship like a design engineer

Framer​ → How I build my websites

Genway → How I do research

Jitter​ → How I animate my designs

Play → How I design mobile apps

Raycast ​ → How I do most things on my computer

Visual Electric → How I generate imagery

Episodes you might’ve missed...

Ideas you might’ve missed…

Thanks for reading! I'm working hard to bring you the best design resources on the planet 🫶

If you want to go even deeper you can always:

☞ Read all ​ideas​

☞ Watch all ​episodes ​

☞ Learn ​advanced design tactics​

P.S. if you were forwarded this email you can ​subscribe here