Full Tutorial: From Idea to App with Claude Design and Claude Code in 25 Minutes

Hey everyone, today I want to show you how to design a beautiful app with AI in six steps.

This is the app that we're going to design.

It's called Tastemaker and it's a website to curate everything you love from movies to TV shows to video games and more.

Here's the landing page.

And here is the profile that we're going to design together as well with my actual favorite movies, reviews, and lists.

So the way that we're going to design this app is instead of using Figma, we're going to follow my AI native design process in six steps.

Define the user problem, create a design.md,

design.md, explore prototypes in Cloud Design, create an HTML spec with product design and tech requirements, design all the core screens, and finally

build the app. I'm going to show you this process end to end.

Let's get into it.

Okay, so step one is to define the user problem. Like any good product manager,

problem. Like any good product manager, you have to start by defining what the problem is that you're trying to solve.

And I always like to build products that solve my own problems. Especially with AI, you can build so many great personal apps.

So personally, I've watched thousands of movies and TV shows and played hundreds of games. And I've been using IMDb to

of games. And I've been using IMDb to track everything, but this interface leaves a lot to be desired, right? It's

just like a straight up list.

So that's why I want to build my own taste page that showcases all the different types of media that I love.

Okay, so let's come to Cloud Goal here and my initial prompt to start this whole project is, I'm a huge fan of movies, TV shows, and games and I want one page that shows what I love across

all three. Can you help me define the

all three. Can you help me define the customer problem, who this is for, and any evidence online that the problem exists? Start with the customer problem,

exists? Start with the customer problem, write up to two short paragraphs on this topic.

Now notice that I used the spec skill here and I'll cover more what that is in step four, but right now let's just take a look at AI's output. So, basically, it found a bunch of research online and and it found that there's three different

websites for curating your taste for film, TV, and games. And that's why we're trying to build this product here.

We want to showcase our taste across all three mediums on a single page.

So, if I were building this app as a business, I would spend a lot more time just trying to research and understand the problem and trying to figure out if this thing can actually make money or get users or not. But, right now, I'm

just building it for myself. So, let's

move on to the next step.

Okay, step two is to get inspired and create a design.md.

Now, we all know that AI, by default, creates either generic-looking purple slop or designs that really have that recognizable Claude look. To make

something unique, we need to find inspiration.

And, you know, you can check out websites like Mobbin, which has UI screenshots of everything, and Dribbble, which has designer portfolios, to find inspiration. But,

recently, I came across this app called Monogram. Now, Monogram is a

Monogram. Now, Monogram is a visual-first way to work with AI, and the app is pretty fun, but what I really like is the design aesthetic here. It

looks extremely clean, and I love how they use color to focus people on the content instead of the UI.

All right, so let's go back to Claude now.

And what I did is I basically copy and pasted a few screenshots from Monogram into Claude Code, and I gave it this prompt: Here are a few screenshots from Monogram. Can you create a design.md for

Monogram. Can you create a design.md for

Tastemaker based on this visual direction? The product helps people

direction? The product helps people share their favorite movies, TV shows, and games on one page. Keep the

interface quiet and let the cover art carry the color.

And, basically, Claude went to work.

And let me kind of show you exactly what a design.md is, right? So, let's open

a design.md is, right? So, let's open this.

All right, so design.md

is basically a markdown file with simple design principles for the app that we're going to build. And also, just like very simple recommendations for color,

typography, and spacing, and more.

Because we gave Claude a few screenshots of this app that we like, it's able to hopefully produce color and style guidelines that actually reflect the design that we want.

Now, real quick, another great resource for design.md, if you don't want to

for design.md, if you don't want to generate one, is the z.sh, and I'll link this in the description.

So, basically what it has is design.mds

for popular websites like Nike, SpaceX, Apple, Vercel, Notion, and more, right?

If you click into one of these, it basically has all the colors and typography that these popular websites uses.

Now, I do want to caveat and say that there's a difference between inspiration and just straight-up copying another app. In this case, we're building an app

app. In this case, we're building an app in a completely different category from Monogram, so I feel okay borrowing a little bit from their design.

All right. Now that we have our design.md,

design.md, let's move to Claude design to prototype our product.

So, going back to our six steps, we're now at step three, which is explore prototypes in Claude design. Now, before

I talk about Claude design, there are actually a lot of really great AI-native design tools that I've tried. A few of them are Paper, which basically looks like Figma, but

has AI-native features, and pen.dev, which lets a bunch of agents work on your design at once. I have an interview with the founder that I'll link in the description as well.

And Figma itself, by the way, also has a lot of really great AI features now.

But, for this project, we're going to use Claude design because I already have a Claude subscription, and Claude design has a bunch of stuff that I really like that I'll show you guys.

All right, so this is my initial prompt for Claude design.

I'm building TasteMaker, a shareable profile for movies, TV shows, and games.

Use the attached design.md. Notice how I attached the file here. And by the way, you can just find the file by just telling it to export the file, or you can right-click this and say open in finder to find the file.

Going back to Claude design, I gave it some basic requirements, right? So, I want to use design.md as

right? So, I want to use design.md as

the visual system, and I want to create our two main screens. One is the public taste profile with favorites, recent reviews, and lists.

And the other one is just a logged-out landing page that hopefully showcases a real taste profile as an example.

And I want two variations of this because with AI, it can create multiple variations, and we can pick our favorite one.

All right, and then we asked it to lay on a single page so we can compare and refine them. And for this product, I

refine them. And for this product, I want to build it on the website first, so I'm going to say, let's build the web version first.

Just to make it clear that it's not making mobile designs.

And by the way, as much as I love Fable, I think for these tasks, Opus is totally capable of making great designs. So, if

you want to save on tokens, you can use Opus.

And let's go ahead and submit.

So, one thing that I really love about Claude design that I don't know why other AI design tools don't copy is that it always asks clarifying questions that really help me flesh out what the design

requirements actually are. So, let's go through this and answer the questions now.

So, whose taste profile should the example show? Why don't we do a balanced

example show? Why don't we do a balanced movie, TV, and games generalist?

What should the two variations of each screen explore?

I think layout is the most important, right? Row-heavy versus grid editorial.

right? Row-heavy versus grid editorial.

Let's keep going down. What sections go on the public profile? Yeah, we

definitely want favorites, recent reviews, and custom lists. I think this other stuff is maybe unnecessary.

And I don't really what a media detail sheet is, so let's say two screens for now. And let's say we want both light

now. And let's say we want both light and dark mock-ups.

And how real should the copy be? I mean,

we want real copy, right? So,

fully fresh out real copy.

All right. So, now that we answer these questions, we can hit continue.

And Claude design is going to go ahead and start working on the mock-ups that we want.

So, we'll skip ahead and see what it comes up with.

All right, we're back and Claude has created two variations. Let's take a look.

So, this is the real heavy version of the taste profile page.

Right? We got favorites up top. We got

recent reviews. We got lists.

And here is the grid dark version that's more information dense.

And the lists are shown as these kind of like three pills instead.

And down here we have the landing page, too. So, we have

too. So, we have uh profile as a demo landing page.

And then we have a more editorial poster wall landing page.

Okay?

So, now is where we need to apply our taste to actually make this design better, right? And there's different

better, right? And there's different ways to actually give Claude design feedback to make it better. So, the most direct way is to just edit the file directly. So, click edit here.

directly. So, click edit here.

And for example, I really don't like these pithy statements that Claude likes to make, like the ones that define the argument. So, let's go ahead and click

argument. So, let's go ahead and click this and delete this.

I also don't really like all these like little pills here.

So, let's go ahead delete that. Make it

simple.

I think the follow button, we haven't really built that feature yet, so I don't think we need that.

Delete.

And let's keep going down here.

Yeah, the reviews. I don't like how they're all in a grid. I prefer just a single row per review for more space.

So, this one we're going to give it some feedback later. And similarly for the

feedback later. And similarly for the lists, I prefer to see all six movie and TV show cards instead of it just condensed format.

And I think this stuff is also unnecessary, so let's leave this, too.

All right. So, this is all misaligned, so I I think I definitely prefer the first one.

And let's go down to the landing page.

For the landing page, I think I prefer to have the preview of the product actually like below the hero section, so that people can see the full taste profile as an example.

And yeah, I think the dark one here is pretty good, but I think just for consistency, I like the light one, too.

All right, so we finished editing here, so let's hit save.

And now, let's edit the other way, which is we're going to give AI some feedback.

All right, so let's open a side panel here, and this is the feedback that I'm going to give it, okay?

So, basically, I'm going to tell it that I prefer 1A and 2A, the light version, with a few changes.

So, favorites, I think should be six across with arrows like Netflix for navigation.

Recent reviews should be full width with a cover art, a five-star rating, and a review.

And lists should also be five across like the favorites.

Let's also add a left nav on this page for quick links to favorites, recent reviews, and lists.

Right? So, that's my feedback, and let's go ahead and submit this.

And now, let's see what Cloud Design comes back with.

All right, we're back, and if I'm honest, this took a few more iterations to get this state, but now we have a taste profile that I think looks pretty good. We have the user profile up top.

good. We have the user profile up top.

We can pick where we want to show movies, TV shows, or video games. The

favorites are six cards across, and then the recent reviews have more space.

We even added some additional details like spoiler tags and a review.

And scrolling down here, the lists also look like they have a lot of space. They

look like the favorites, and so on and so forth.

So, that was the taste profile page.

Now, let's take a look at the landing page. Overall, it looks a lot better,

page. Overall, it looks a lot better, too. We have enough space for the title

too. We have enough space for the title and the subtitle and a clear CTA. We

have a very clear card preview here.

And we have a bunch of sections here that showcase the value prop.

And once again, we can continue to iterate. So, for example, show who you

iterate. So, for example, show who you are through what you love. I think

that's interesting, but I don't think it's as good as just saying one taste profile for everything you love. I feel like it's more

love. I feel like it's more straightforward.

And let's say let's put the show who you are over here. So, show who you are through the movies, TV shows, and games

that you love.

All right. And let's hit save here to save our changes.

And yeah, like I think the difference between Slap and something that's actually good is just having attention to detail. Claude isn't going to

to detail. Claude isn't going to generate the perfect design in one shot.

So, you really have to apply your taste to make these two core screens, the landing page and the taste profile page.

Great.

All right. So, now we are pretty happy with these designs, and we just need to hit share here.

And there's a way to get it directly to Claude code, but what I like to do is I just like to put it into a .zip file or HTML file. So, just hit this option

HTML file. So, just hit this option here.

And we just say export.

And it should export a zip file with all the designs that we can import into Claude code or Code X or any other harness that we want to use. Now, let's

move on to the next step, which is creating a spec in HTML with the product design and tech requirements. So, we

made a design.md in step two. We made

our two key screens in step three for the taste profile and the landing page.

And now, we're ready to make the full spec.

So, this is a little bit different from a traditional development process, right? I like to generate the key

right? I like to generate the key screens before actually writing the spec because I find it much easier to understand what the product is from a few key visuals

before producing a document to iron out all the default states and edge cases.

And this is quite the opposite of the traditional product development process if you think about it where a PM like me would first write the spec, hand it off to designer to make the Figma,

and then we'll hand both off to the engineer to write a text spec.

And personally I don't like having separate files for everything so I prefer to have the product requirements design and text spec all in one file.

And that is what my spec skill does.

So let's go ahead and go back to Cloud Code.

And what I've done is I've uploaded the zip file with two key screens that we just mocked up in Cloud Design.

And now I'm going to say turn these requirements and designs into a concise spec with product design and tech tabs, okay?

And let's see what is the spec that it comes up with.

Okay, so this is the actual spec that I'm using for the TasteMaker app.

And I want to show you all three tabs.

So the first tab is PRD which covers the user problem that we came up with before, some high-level goals for the product, and a list of requirements.

And I asked AI to write the requirements in a very concise way that's easy scannable, and also split into different surfaces of the app.

Now let's move on to the design.

So in this case it's basically a HTML version of the design.md that we came up with before that's just easier to read.

So there's a few principles here and of course we have our style guide for color and typography here.

But most importantly my spec skill actually asks it to also make a component library that you see here.

I built apps before without using this component library and what usually happens is AI starts making all kinds of crazy components and the app starts looking like a mess. So, it's very

important to get it to generate a component library and also keep this component library updated as we create more screens.

All right, and let's go to the tech tab and here we have the tech stack that we're going to use.

And I also asked AI to generate a data schema because databases are very difficult to change once in production.

So, exactly how it's organized and the trade-offs that it makes and most hilariously it thinks that it's going to take 3 weeks to build this whole app when in reality it's probably going to take maybe 30 minutes.

So, again, I designed this whole /spec scale to make all this really easy for a human to actually read because it's very important to actually read through this

and give it feedback and make it good.

All right, so a quick plug. If you want my /spec scale, check out behindthecraft.com where I have it right here along with a bunch of other skills that I've curated and made for myself that are extremely

useful.

Full disclosure, these skills are available to members of my paid Substack and you also get free AI tool coupons, courses, and more.

So, personally I think it's a really great deal. Check out

great deal. Check out behindthecraft.com.

behindthecraft.com.

Of course, you can also just get AI to create a spec scale for you for free and just give it direction to generate these three tabs the way I just walk you through. Okay, so now we have a

through. Okay, so now we have a spec.html that is the source of truth for what we're trying to build here and it has a bunch of requirements down here for screens that we haven't actually designed.

So now, let's actually save the spec.

It's an HTML. Let's upload it to Cloud Design and let's get Cloud Design to make all the core screens.

All right, we're back in Cloud Design and the prompt that I gave it is create all the core screens in the requirements, and here is the spec that HTML that we have here, and just submit that prompt.

Now, I want to emphasize again that it's really important to actually read through the spec that AI generates, give it feedback to improve it, and make sure all these requirements actually make sense, like all these services,

before getting it to generate designs, right? Otherwise, you're just burning

right? Otherwise, you're just burning through a lot of tokens.

But anyway, let's go ahead and submit this and see what Cloud Design comes up with.

Okay, Cloud Design is done, and we have our landing page that we saw before, and let's keep scrolling down.

We have our taste profile page, and hopefully there's going to be some more screens now. And here we go. So, we have

screens now. And here we go. So, we have a creator version, your own taste profile page, and it has this edit functionality here. It has add buttons

functionality here. It has add buttons and the ability to edit my reviews.

Let's keep scrolling down.

It's also important to actually get Cloud to design the default states, the empty states, and also any edge cases, right? So, for example, when I make a

right? So, for example, when I make a fresh taste profile page, everything's empty. There needs to be a clear call to

empty. There needs to be a clear call to action to actually add something that Cloud Design has added here.

There's also pages to see the full list of games that may be cry here, right?

And let's keep going down. There's a

item sheet that appears. We can save it.

We can rate to try.

The onboarding flow is also really important. You know, if you're building

important. You know, if you're building a product trying to get users, you have to give them a really great onboarding experience. So, here we have claim our

experience. So, here we have claim our handle, pick six things that you love, and also it designed a share your page thing too.

So, basically, you have to carefully review all these screens and go back and forth with Cloud Design to fix stuff.

You can add comments here for it to fix stuff, change this, or you can give feedback directly in the chat, or you can also edit directly like we showed before.

But for now, let's assume that the thing is perfect the way we exactly want it to be.

And let's again hit share and export and download it as a zip file.

And then we're going to upload it into Cloud Code to get it to build the app.

Okay, so now we have two artifacts that are hopefully in sync. We have the spec.

HTML with the product design and tech requirements. And we also have a

requirements. And we also have a design.html that we exported from Cloud Design with the actual mockups for all the core screens here.

And we haven't even started building the app yet, right?

So this is a point that I really want to reinforce.

When you're building with AI, you have to spend at least 50% of your time on planning up front. The build part has become easy, but you need to have a robust plan for AI to get to what you

want to build in the right way.

And I think this is so important. You

have to spend up front time planning. So

in some ways it actually kind of is like waterfall development, but just sped up with AI.

You know, if I just tell AI, "Hey, go ahead and build me an app to curate my movies, TV shows, and games."

It's not going to do it in the way that I want, right? And once it actually builds things like databases and other parts of the stack, it's going to become much more complicated and costly to

change things than right now when we can just update these two HTML files that we prototyped.

All right, so now that we have our spec and design, we can start building with a prompt like this. We attach both the spec and design.html. Then we say, "Review

and design.html. Then we say, "Review the spec and design and let me know if any questions before you start building or any ambiguities that I should clarify." Always assume that there's

clarify." Always assume that there's going to be ambiguities that you haven't quite figured out yet. And get AI to ask you questions to try to resolve as much of this as possible before it starts

writing code. And here's the actual

writing code. And here's the actual thread that I'm using to build with AI.

So, I asked it to build everything it claims it did. I told it to run localhost so I can take a look at the app. It has localhost running. And you

app. It has localhost running. And you

can see here that I gave it a ton more feedback. I pasted some screenshots in

feedback. I pasted some screenshots in of the stuff that I don't like.

And I basically just listed all the feedback here.

Favorites and hearts should only show up when I hover over the card.

On profile page, you're not quite matching design. Where's the review

matching design. Where's the review section?

And so on and so forth. Right? So, it's

not like just magically you upload the design to HTML and the spec to HTML and it's going to one shot everything that you want. You still have to give it a

you want. You still have to give it a ton of feedback. There's more back and forth here.

And then I told it to add the Netflix-style left and right arrows that I forgot.

And more feedback and even more feedback.

And so on and so forth.

And and also, uh this is important, when it starts making a product updates directly in code, it's very important to ask it to keep the the plan and design file updated so that everything is in sync.

Okay? So, yeah, there's still a long thread to actually build this thing.

It's not like you can just one shot build it. But now let's take a look at

build it. But now let's take a look at the finished product. So, here it is.

It's actually live and I'll include a link to the finished product in the description as well.

And here we have our landing page. We

can see an example of a taste profile.

And we can also log in, as you see here, and start setting up our own taste profile.

I got some reviews here. I can add some movies. I can sort.

movies. I can sort.

And so on and so forth.

So, it probably took uh a few hours to get to this state. And I'm sure there's still bugs. But basically, it involved

still bugs. But basically, it involved setting up a Superbase database. It

involved asking AI to add authentication. But

authentication. But it would have taken more back and forth if I didn't cover some of the key requirements in the spec and the design.

All right, let's recap the AI native design process that I follow.

So, first it's very important to just define the user problem. Get clear on who the product is for and what problem you want to solve. And if you're trying to build a product that you actually want to get real users and maybe make

money from, you also have to get clear on is there's a revenue opportunity here, right? Because I think it's

here, right? Because I think it's actually harder than ever to make money from software now with everyone being able to write code their own thing.

Step two is to get inspired, check out Mobbin, check out other apps, and ask it to create a design.md with the visual direction that you want.

Step three is to prototype some key screens for your product using Claude design or another AI native product. It

can be Figma, paper, or pen, or products right?

And also, you can ask for variations to get AI to explore and iterate on the strongest one that you like. Like, I'm

not a designer, but I think great designers like to diverge and explore before converging on one direction.

All right, so once you have the key screens, then you have enough to create an interactive HTML spec. And

personally, I use my Spec Scale to create a spec with product design and tech requirements all in one place so that I can easily review them.

Once you have the spec go back to Claude design, tell her to actually design all the core screens.

It's just much easier to change stuff at this stage than later on where you have a database and everything else.

And finally, after you have everything, then you can tell Claude or whatever harness you're using to build the app.

And even then, this is not a one-shot build, right? There's a lot of back and

build, right? There's a lot of back and forth to make sure that Claude actually follows your directions.

Again, I think the big takeaway from all this is to do the planning up front. You

may be eager to be like, "Hey, let's get AI to start building something and let's play with it." But I think the more planning that you do, the more high taste and the more high craft, and the more likely you're able to build something that's actually useful that

you actually like.

All right, so that's it. If you enjoyed this practical tutorial, please like and subscribe for more videos about building useful products with AI.

And let me know in the comments, by the way, if you want me to make more videos that show my real process of building with AI instead of just a bunch of hype videos about the latest model.

Anyway, thank you so much, and I'll see you next time.