Watch me Design a Mobile App From Scratch in 32 Minutes (Claude /design & Fable 5)

0:00In 2026, if your app doesn't have good design, then it might be dead in the water before you even launch. But, if you've tried to design using AI coding tools, you've probably got a lot of AI slop. So, how do you go from AI slop to professional design? What are the key things to get right when it comes to app design specifically? And where in the process should you even start thinking about design if you're building apps with AI? Well, that's what I want to break down in this video, as well as showing you the new Claude Code /design feature, which brings Claude design directly into Claude Code, so that you

0:31can work with it inside of your Claude Code projects. We're going to be covering the three keys to great AI design, how to design a mobile app from scratch using Claude Code, and how to actually start using the new /design feature inside of Claude Code, as well, so that you know exactly where to start. And I also want to help you understand exactly where in the process you should be doing design for your app. If you don't know me, my name is Chris, and for the last 15 years I've been designing apps and advising startups on product and design, and I've helped hundreds of people to build and launch real apps and

1:01to make real money and get real customers inside of my community. And so, if you're interested in that, you can click the link down below to find out more. And with that said, let's jump straight into the video and show you exactly how to design your apps with AI. So, when it comes to app design, there are some things that people get wrong, especially when you're doing app design with AI. And because AI makes it so much easier to build any app from scratch, even just from an idea, so many people are just following this process, and the whole narrative around building software with AI coding agents is a lot about how

1:30fast you can move. How quickly can you build something? How quickly can you get it out there, so that you can start getting it in front of people and start actually getting customers for it. But, this actually jumps the gun a lot. This is about This is moving too fast. And sure, you can absolutely build apps in 24 hours, and that's what I teach inside of my community, as well. How to build

1:49any application within within 24 hours. But, there are some key things that we need to do before we start this build process. So, if you've got an idea for an app, or even if you've got something already, you might want to go back to these steps in order to start to figure out exactly what you actually want to be building before you just start building something that's going to end up looking like AI slop and be exactly the same as all of the other apps out there that people are creating. So, we want to go from this idea straight to build in and take and instead of doing that, we want

2:19to jump into this process instead. So, this is a bit of a mindset shift where we actually think about how do we define what we're building before we start building it. And this is something that a lot of people are doing anyway. You think about how do you spec your app? How do you create a PRD or roadmap? But what I also mean from this is how do we think about our app more from a business point of view? So, who is the target customer? What is the pain that we're helping them overcome? What is the outcome what that we're helping them to achieve? What is the mechanism that

2:48we're using to get them that outcome? What is the pricing strategy that we're using so that they feel comfortable paying for our app? And what is the proof that we have that this mechanism actually works to get this customer this outcome? These are the things that you should absolutely be considering before you start building anything. And just going through these six things is going to have a massive impact on the quality of the app and the software that you end up building with AI coding tools. And so, just spend a little bit of time thinking about these. Now, I have a process called Product OS which I teach

3:20inside of my community and I also take people through on a one-to-one basis in my coaching program as well. So, we go into a lot of detail about how to define this thing here which is called a product offer. I'm not going to go into it too much in this video because this is about how do we design our app. The next step after after define is about how do you design your application before you start building it. And the reason that I like to do design before

3:42you start building is for two reasons. First, because design is more about visuals. Design is also about the user experience, the onboarding flow, the landing page. And there are some really critical points to get right if you want people to actually sign up and pay for your application. And these three points are the magic moment, the landing page or the App Store listing, and the onboarding flow for your application. And then the second reason why I like to do design up front before actually building anything is because it's really good to have a very solid professional level design system already documented from a set of references or an image or a visual

4:18direction that you like before you actually build anything so that AI has a strong reference and foundation for the design that it should be working towards when it actually builds. And this is so much easier to start off from this point of professional level design rather than building something and then trying to fix the design later. Now, you can do that. It's still possible to do that. I always like to start from design and

4:42define before I actually build anything. And so, what are the three keys to great design? And this is very much simplified. I'm actually going to do a full course video on software and app design. And if you're interested in that video, just leave me a comment down below so that I know that it's something

4:58I should film sooner rather than later. But basically, good design for apps and software, it really just depends on three key things. If you haven't done any sort sort of design work at all, you can still have these three key things. It depends on having great references, so a great starting point and great inspiration. Even the best designers work from inspiration and they copy other people's design work. You need to have idea clarity, so you know exactly what you're building, exactly what the key screens are, exactly what that magic moment, that aha moment is going to be inside of your app, and exactly what you're going to be building so that you

5:33can actually take those key screens and do some rough designs on them first before you start building. And the last thing here is you need to have learned taste. And taste is not something that you have or you don't have. Taste is something that you can actually learn. And the easiest way to learn what is good and what is bad when it comes to design is just to surround yourself with high-quality design. And a great place to start if you're thinking about this is just to curate your social feeds or your algorithm so that a lot of high-quality design content actually starts to come up. And because you'll be

6:02seeing this every single day when you're on social media, it starts to retrain your brain to to understand what exactly good taste is when it comes to design so that you know what to look for, what good and bad looks like from a design point of view. So, what are we going to be designing today? Well, I want to

6:18basically design this mobile app here. It's called Ride It, Share Your Adventure. Now, this is going to be a consumer app and the reason that I'm going to be building this is because I'm going to be putting together another video um where I go to LA and I visit one of the theme parks I've basically had on my bucket list since I was about 12 years old. Now, I'm not massively into theme parks anymore, but I was when I was a kid and I wanted to design and build this app for me to be able to share my day at this park that I'm going to I've

6:49always wanted to visit since I was a kid basically and I'm going to call it Ride It, Share Your Adventure. So, this is an app to help theme park goers share their day with friends and family and I'm doing it in a Spotify Wrapped style. And the reason I'm doing this is because I've gone through this process basically. So, we go through this process of first you have an idea, then we want to research the market, understand what exists in the market already, what other tools exist, and how we can find something in that market that is going to be successful. Then we want to find these winning ideas. So,

7:22what is already working in the market, what are people actually paying for? Take inspiration from what people are paying for already, not original ideas. So, you want to start from something that there is already proof that people are paying for this. And then number three is to differentiate your version and make it resonate, make it something that's unique to you. So, what I found was that there is already existing apps to do things like tracking your theme park visits or like tracking your attraction visits, but nobody was taking this kind of Spotify wrapped style sharing angle with that kind of tracking element on top. So, I'm just taking what

7:59already works in the market and I'm differentiating my own version here. And there is bonus points here if the idea that you're taking is something that looks outdated or is basically looks like something where you can really easily update it and make it look like a modern application or incorporate any sort of AI elements where the original versions don't have AI in them. Fourth, we're going to identify the magic moment here, which is the Spotify wrapped style and day recap, basically. Then, we're going to design the key screens here and then we're going to spec and build it. So, we've gone through the define process and then

8:37we're going to go into the design process. Let's design our key screens, create our design system, and then after that, we'll do spec and build. I'm going to do that in a separate video where I take you through my journey of going and visiting this theme park and also my story of when I was a kid and why I decided that this would be a good idea to build and trying to build it basically over the course of a few days whilst I go on this trip. So, this is some inspiration because I talked about starting from good inspiration, starting from great references. This is the

9:08inspiration from Spotify wrapped basically designs from over the years and I'm actually going to find some other inspiration that we can drop into Claude code using the slash design feature here as well. So, there are some criteria for this shareable wrapped style recap. One is going to be this needs to be shareable because this is the growth engine for the entire app. If people don't want to share this, then

9:29the app is dead in the water, basically. It must include the personality archetype, which Claude actually pulled out in the research step as being really, really critically important to this wrapped style kind of mechanism. And this is the mechanism that we're using going back to the define section here. So, our mechanism is the Spotify wrapped sharing mechanic. That's how people are going to recap their day at a theme park or at an attraction. And the data from Spotify wrapped shows that the personality archetype is the most shared screen. So, we want to make sure that we include this personality archetype screen here that you can see where you

10:06have like their listening personality is like the specialist, the adventurer, the fan clubber, basically. So, we want to make sure we include a screen that's like that and it needs to also be colorful, playful, and have exciting energy that people will want to share. That it's going to stop people when they're scrolling and be visually kind of very, very engaging. So, that's why I think it's also important to design a screen before I actually start building this. So, now I've gone through that, let's jump into Claude Code and I'll show you how to start using Claude/design inside of a project when you're starting from scratch. So, now I jumped into

10:39Claude Code here inside of the desktop app. I created a new session here and I've also just selected the folder that I'm going to be building this in locally. So, this is where I'm going to be building this mobile app, basically. I've pasted in a design reference that I really like here for the direction for this app, which is basically which is basically this image here cuz I really like these kind of flat vector kind of style illustrations, which are really colorful. I like the color palette that's being used here and the overall style of this app design. And I think with illustrated like rides at a theme

11:11park on like each of these screens with like solid background colors like this first screen here, this is actually going to work really, really well in a Spotify wrapped kind of style design that people would actually want to share. So, let's actually get started designing this and all you need to do to get started using Claude design inside of Claude Code is type /design here and then you just ask it what you want to design. And we've got this reference in here that we're going to be using, and then Claude Code is going to be able to open up the design on a canvas inside of

11:40the desktop app here, so that we can see our designs, iterate on them. And I'm actually just going to ask Claude Code to give me an outline of what these screens could be before it actually starts designing. So, let's get Claude Code to create this design here. I'd like to create three or four designs for a mobile app following the design style of the attached image reference, but with full color backgrounds on each screen. The app that I'm designing here is an app for creating shareable Spotify Wrapped style recaps of your visits to a theme park that would show you things like the number of times you've been

12:20upside down, the top speed that you've been up to that day, and also a personality archetype for your day at that theme park. Can you give me an outline of what we can actually include on these screens before you design them? And I also want to make them really visually interesting and engaging with these kind of flat, colorful vector illustrations of things like theme park rides, and visuals that are related to visiting a theme park. I've also got this set to Fable 5 on high, just so that we're using the best model here to do this with, but we don't have it set to a reasoning level any higher than

12:58this, because you don't really need anything more than high for most tasks with Fable 5 to get incredibly good output. So, let's send this off to Claude Code here. All right, so here's what Claude Code is going to do. It says the folder is empty, so there's no existing design system. I shall build

13:12through your reference image instead. Here's the outline before I draw anything. Now, I think {slash} design is designed to work from an existing design system. So, if you have a design.md or a design system inside of your project, or you're using a tool like eyedropper.design, which is my tool for storing design systems in the cloud and giving your any agent access to your design system via MCP, then Claude code is going to go from that design system reference. But, because we don't have a design system here inside of this project, it's just a new folder, it's going to create it just from this image reference. So, what the reference

13:42reference image gives us is flat chunky vector illustration, bold rounded geometric type, saturated candy palette, big radius cards, and playful asymmetry. So, illustrations bleeding off card edges, title objects, small confetti, etc. What the amount route can actually contain from the phone's sensors, accelerometer, gyro, GPS, barometer, times upside down, top speed reached today, highest point reached, biggest drop, total airtime, distance walked, and total time spent on rides versus in queues. From check-ins, ride login, rides ridden today, most ridden, first ride of the day, ride streak, longest queue, and derived or fun sharing mechanics here is a park personality archetype, ride DNA, so a percentage splits of ride

14:28types, percentile flexes, badges or milestones. So, I really like the badges or milestones here. Your crew, who you rode with if social, a shareable summary card, stacking four to five headline stats with the archetype. So, proposed screens here is your day at park, thrill stats, your ride day, and then your archetype plus share card. So, these have actually like a lot of numbers on them, ride count, most ridden, ride type split, queue versus ride time. But, I like the suggestions here. Three quick questions before I draw. So, static mock-ups or clickable prototype? Static is right for an exploration like this, so let's do static for number one. Real

15:07park names? Real park names or fictional? I defaulted to an invented park and invented ride names to avoid trademark issues. Let's just go with invented for now. And any cuts or additions to the list above? In particular, do you want the archetype as its own screen or merge with

15:49the share card. this a little bit better. We've got our four designs here, which is pretty close to the original reference image that we provided with a full color backgrounds and with the four screens as referenced as outlined by Claude here. Now, what you can do now is to click on these and make any changes to them from the properties panel here, which is again something that's similar to what

16:14you would have in Claude Design. You can expand this view by toggling this up here. We can also change the individual styles on this as well by switching this here. So, we could change it to Lexend, which I actually think is a little bit nicer as a font for this. And we can do some broader changes if we want to as well just by clicking on edit

16:35here. You're able to change the actual text here. So, we can change this from bold to regular, which again I think regular just looks a little bit better here rather than bold. So, we can change that across everything. Turn off bold for this. And this means that we now have this design view that we can take into our project and use as a reference. Now, I think there are definitely some changes that we can make like this these illustrations here are looking kind of funky. AI vector illustrations always tend to do this sort of thing. Some of them look all right like this little this little ride down here. This little

17:12roller coaster here is pretty interesting. We've You got like your ride DNA, which I think it's pretty good. 2 hours 10 minutes in queues, longest was 55 minutes, 38 minutes actually on rides, worth it. And then we have here your park personality. You were a thrill chaser. You skipped the teacups, rode the big three before lunch, and came back Silver back at dusk. And then a button to share

17:38the recap here as well. I think this is a pretty great starting place. Now, what we can do here is I'm actually going to try and create some more interesting illustrations for these, but I'm also going to get Claude design here to explore some other visual directions for us as well. And what you can even do from this after you've got your chosen design style is turn this into a design system, and you can use one of the skills from my system, which is called Product OS, which you can get inside of my community. Just use the design system skill to create a design system from any designs that you're

18:13doing using AI tools here. That will document it so that your AI can use that design style throughout the rest of your project. I'm actually going to go back to Dribbble and find some other visual directions that we could use here that are slightly indifferent. So, I'm actually going to try and go with something like this where we have this kind of isometric 3D line illustration kind of style with these flat colors as well. Very slightly different to what we already have in the designs. I'm just going to take a screenshot of this and then go back to Claude. And I'm also going to do {forward slash} design again

18:48and then say, "Can you add an alternate set of designs which use a more isometric line art style illustration and apply this style to the cards and the buttons as well, similar to the attached image reference so that I can compare between the two design directions." And I'm going to drop this image in here as well and then send that to Claude Code. And Claude Code is going to add those variants to the canvas here so that we can compare between these two directions. So, now we have our second visual direction here, which is starting to look pretty good. I actually like this kind of outlined illustration and

19:27outlined button style a little bit better here as well. And I prefer this font here is also looking better for this design. I'm not actually sure there are some things I might want to keep between both of these. So, maybe we use the same font for this. The main thing that we need to do now is to make sure that these illustrations and and animations that we want to create are actually going to look good on these individual screens. Because these classic kind of AI style vector illustrations here just aren't working that great right now. And so, what I'm going to do is I'm going to get Claude

20:04Code here to give me a prompt with the color palette and the visual style to create an image of each of these to create a prompt that I can use to generate illustrations for each of these images using an image generation tool. Can you give me a prompt that includes the illustration style and the subject matter for each of the main illustrations on each of the four screens that I can drop into a tool like ChatGPT image two to create a vector style illustration image for each of the illustrations that we have inside of this app. And the great thing about having the design canvas alongside your

20:42session in Claude Code here is that we can easily switch between the app that you're working on and the design canvas, and we can easily switch context with Claude Code in our session between asking for things or asking for it to write code, and then getting it to do designs on the canvas as well. So, the design work is really happening in the same place in the exact same place

21:01that our building is happening as well. And this is already the workflow that I was recommending using other tools like magic path and paper.design, but now you can do it directly inside of the Claude desktop app just by using Claude design. I'm going to get Claude code to save these prompts into a markdown file that I can use to copy and paste into ChatGPT image. So, now that we've got our illustration prompts here in Claude in the desktop app, what I'm going to do now actually is set up the Uh and this means that we'll be able to use Higgsfield to generate images and videos inside of the Claude desktop app

21:36here without needing to go to a separate tool. So, all you need to do to be able to do this is to go to Higgsfield and go to /mcp and then I'm going to click on Claude Claude code here. I'm going to copy this command here and I'm going to go back to Claude code and paste it into Claude code here. And just do this in the same session here as well so that I can

21:55continue working from where we're at. And then what I'm going to do after this is just a prompt Claude code to generate images for each of these based on the illustration prompts that it has created for us. And looking back at this now, I actually prefer the first color direction but with the illustration style of the second. Now, we're going to be asked to connect Higgsfield to Claude code here and now Higgsfield is set up inside of Claude code so we can ask it to generate images and videos using

22:25Higgsfield inside of Claude code. So, let's ask it to generate the direction A cover illustration with Higgsfield and see what it comes back with. I'm also going to follow up here as well and just to say use ChatGPT image 2 to do this. as the model. And I'm going to click interrupt here as well so that this interrupts the current stream that Claude code is doing. All right, so we've got the first image back here from Higgsfield which has been generated inside of the Claude code chat which is perfect. We're going to drop these images into our app design here as well so that we can update these as we

23:03go with much higher quality professional-looking designed images rather than these AI-generated kind of AI slop factor designs here. So, let's just ask and Claude code has actually given me some options here to like rerun this with minimal, so like only the coaster loop, the Ferris wheel, and the drop tower. I actually like the fact that it's got a lot more stuff. So, let's just ask Claude code to re to run the prompts for all of the other images for direction A. Generate all the other images for direction A. And that is going to use Higgs Field again to generate images for all of the other screens that we've got here. And once

23:40we've done that, we're going to drop those onto the screens, make a couple of tweaks here, and then that is the visual direction for our app that we're going to go with here. And it's worth spending the time doing this to actually make your app professional, give it a professional-looking design, because this is going to be the design style that the rest of your app is built on top of. And I know for a lot of people who want to jump straight into building something and seeing it work, this can feel like putting the brakes on a little bit and spending time doing almost something that feels kind of a little

24:10bit tedious and time-consuming, but it is genuinely worth it to do this first before you go into build your final app. All right, so the other images are back in here from Higgs Field. So, let's have a look at these. So, this is looking pretty good. The track kind of gets a little bit weird, but um that's okay. I'm not too fussed about that. And then this last one is actually so much better as well. Now, these are way, way better than the images that we've got in the designs to start off with. So, let's say drop them into the direction A artboards, which is already come up here

24:47as a suggested response from Claude code. So, it's getting the direction that we're going, it's understanding what we want to do with the what we want to do with these. And then after that, we can generate direction B in the same way as well if we want to go down that path. So now we've got the images dropped in here on the canvas for these screens. We can make some more design tweaks for this. You can see here this first screen is looking especially good at the moment. Like this is actually looking really good. I'm going to remove this text here at the end. Now we can't

25:19actually use the word wrapped. I know that's copyright or trademarked by Spotify. Um they will have a go at you if you used wrapped basically. But I do want to change this button here um into a full button. And this last screen is looking pretty good here as well. So I'm just going to make a few changes here to these screens and then I think I want to use this first screen and this last screen as basically a reference for the design system that we're going to create for this app here. So one thing that I want to do in this first design is just to make that button full width as I

25:49mentioned. Let's make the button on the bottom of the first screen full width for tap to start. And can you also make the image on the last screen uh bigger as well? Now one thing that I would love Claude to do here is to allow me to um edit basically on the canvas here using the Claude session. It doesn't seem like there's a way to kind of like select something and then add it to the chat here with Claude code so that I can edit it. And so I'm not sure exactly how this design canvas is working. It's slightly different to Claude design. But overall the experience from using /design here

26:27inside of Claude code really just makes it so much more easy to do design alongside your coding sessions on top of existing projects that you might be working on. Or if you're just starting from scratch and you're going through this process of define and design first before you actually start building your app. All right, so we've made these tweaks to these screens, the cover um here that we're going with, and then the last screen here. I'm actually going to move these over here on the canvas just

26:54so that we have them in one place. Because these are the ones that we're going to be basically using as our reference for our design. And what I'm going to do now is I'm going to use the design system skill inside of Product OS, which is my system for basically building, launching any application, and [snorts] getting customers. And there's a full video breaking down how to use the Product OS system and in the description below if you want to check that out as well. We're going to use the design system skill to turn these um these designs into a design system that

27:27we can reuse throughout our entire app. Basically following these styles and colors and button styles and all of the all of the styles and visual direction that we have here from these designs that we've created so that when we build our app now, we not only have some great visual references of our key screens that kind of we're going to be working on, but we also have a documented design system that is going to work for our product. It's going to be applied consistently across every single screen inside of our app because we have this design system guide. There's also a bunch of skills inside of Product OS as

27:59well that basically help your help your agent to follow your design system once you've got it documented as well. So, let's use this skill here. Use this skill to create a design system from the screens A1 and A4 so that we have a documented design system that we can use when we start building this app. Let's send that to Claude Code. And Claude Code is going to look at these designs, it's going to extract all of those visual styles, and it's going to turn that into a documented design.md file, which is our markdown file for the agent to reference for our design styles, and a design.html file, which is basically a

28:33visual guide for us of all of the components in the design system so that we can see exactly how our design system works and all of the components and what it does. And so now what we have from Claude Code here is I design file here, which basically is all of the tokens and styles mapped out in a design.md file that our agents can read

28:54in order to follow this style direction. And we have a design.html file here, which is basically let's close these so these are out of the way. And this is our design system with all of our colors mapped out here, all of the typographic styles, all of the spacing, the radius, elevation, components here. We've got all of our components listed out, do's and don'ts, basically everything visualized on this HTML page here so that our agent knows exactly how to design our app when it comes to designing our app across all other pages as well. And what is great about the product OS system that I use for every single project I build, that I

29:33build myself, that's helped others go on to build apps that have launched and made thousands in revenue is that it that it adds the rules in here for your agent to your agent.md and your code.md files so that your agent is always going to follow your design styles consistently using these design.md and design.html assets here. And that is how to do design using this new Claude/design feature. But not only that, it's how to do design in a way that basically elevates your app to a professional level of design rather than AI slop. It all is based on using these three things: great references, having idea clarity about what you're building,

30:15and also learning the tastes to know what is good and what is bad, and then turning that in to a design system that you can use before you actually build your app here so that you can build an app that actually looks like a professional product before you've even launched anything or before you've even written any code with your AI coding agent. And that is the way that I would go about using Claude/design to design

30:41your app before you start building it. So, hopefully there you can get a sense of my process for designing apps before I actually go into the build process. And doing this alongside with defining your actual product in more detail up front from a product point of view, thinking about customer, pain, outcome, mechanism, pricing, and proof is going to give you so much more clarity not only on what you're building, but also what you should be designing and what the magic moment of your app actually is and how it can work that are actually paying users when you actually go to launch your app. Now, Claude / design is

31:16actually a great evolution of Claude design inside of Claude code in their desktop app. But, what I think is more important is learning this process to actually designing much, much higher quality designs for your software that you're building regardless of whether you're building from scratch or you're using AI coding agents inside of an existing product. And taking this approach of making sure that you define your app idea first and then you design some key screens and document a design system before you start building anything. And if you want the full system to build your apps and actually launch them and get paying customers, that is called Product OS and you can

31:50get access to that inside of my community over at school.com/aiapps. The link is in the description down below. If you enjoyed the video, don't forget to like and subscribe. Thank you for watching and I'll see you next time.