Transcription
Right now, everyone is building mobile apps with AI. But there's a problem. All of these apps have the same boring AI generated look. It is still very hard to create apps that actually stand out.
So, I decided to change that and I invited Matia, a designer turned SAS builder to walk through his entire process for designing mobile apps that actually look and feel beautiful. In less than one hour, you will watch us design and actually build a mobile app from start to finish with no shortcuts.
In this video, you're going to watch us pick an idea, get inspiration from $50,000 per month apps, mock up a design in less than 10 minutes, create characters and illustrations, export everything to AI tools, and then come out the other side with a beautiful working prototype, all in less than an hour. This video right here is the future, and you cannot miss it. especially if you're building right now. All right, let's dive in. This is Starter Story Build.
Okay, real quick before we get into the episode, I do need to mention this. If you want to follow along with this step by step and build alongside us, we've put all the prompts and an extended version of this tutorial inside Starter Story Build, you can watch this video and you can do it alongside us. But if you want to have everything integrated, all the prompts, all the links, everything in a perfect spot where you can follow along and do this with us, then click the first link right there in the description and you can follow along there for an even better experience and it's 100% free. Otherwise, if you're not planning on following along and building your own thing, you can just watch and enjoy. So, let's get into the episode.
Matia, thanks for coming on. Before we get into the actual build, which you're going to build it all out, I'm super pumped about it. Give me a little bit of background on what you've been working on and your design background.
Yeah, my name is Matia. I've been working on design tools for the past two years almost. And the most recent one is called Sleek. It's helping like hundreds of people design mobile applications with AI. So, I'm very passionate about design and especially about how AI is empowering builders to create apps that actually have a good design. And good design doesn't mean only being beautiful, but we can get into this as we go on with the video.
>> All right. Well, let's get into it. by the end of watching this video for whoever is watching right now, what are we going to get out of this? What are we going to do?
>> Yeah, good question. So, I assume most of you watching probably have an app idea, but maybe don't have the time or the money to hire someone to design it or build it because you want to ship it fast to the store, validate it, get users, which is exactly what you should be doing. So, this is what we're doing in this video. We're going from the whole flow of getting inspiration, designing an app, and building the first version of an actual working app so you can push it to the store and have confidence in making your first dollars essentially.
>> Cool. Okay. Well, what app are we going to be building today?
>> So, I have this problem that I always forget to drink water. My friends tell me all the time like, "Oh, wow. It's the old morning and you haven't add any water." So, I just started building this up that kind of reminds me to drink water and maybe I can track how much water I've been drinking today so I can see my progress and be more motivated.
So, the first rule that we should follow is to don't reinvent the wheel. So, we don't want to try to come up with new crazy design concepts. A lot of people already did the hard work for us. So, we want to study what works and put our twist on top of it. The first thing that I like to do is go to sensor tower. This is a terminal for researching about apps that are on the store. And we can just look for the app that we're trying to build, in this case, Weather Tracker. And the cool thing is that we can actually see how much money these apps make. For example, I see this app called Water Llama. So, we can open it in a new tab that is making 50K a month. And here we have uh some screenshots. We get an idea of how the app works.
I also recommend open Mob Bin. This is where we have a design library of most popular apps and we can see for example the app is here and I like to go on the flows sections and basically we can see how every feature flow works and here's like the main flow from here I like to basically build a mood board. So we have this app water llama. Let's copy some screenshots and for each app we're going to understand what we like about this. For example I like that very simple design. It's very clean. It's playful. And apparently it's like gamified. So you basically feel this llama mascot by drinking water. And I like the colors. We have this main screen with like a mascot. And then we have this screen to kind of adjust the volume that we want to add to the daily water intake water screen.
And then we have this app called Plant Nanny. I think the cool thing about this app is mainly the concept of the plant. So uh apparently you can grow a plant by feeding water touches into gamification and you know it's cool that maybe you see you drink water and your plant grows. You don't drink your plant dies. So I think it's cool because it kind of incentivizes you to to not let this plant die.
Finally, we can also go on mobin and search for water tracker here and see if we find something else. Uh, let's see this one. This is a pretty different vibe. It's uh kind of a lot more bold. I like some UI elements of this app. For example, like the navigation is cool. The slider is cool. I like the big numbers. So, I think it's worth putting still in that mood board. And the process that I'm trying to do here is essentially looking at two three options, understand what we like about these options and then try to combine them in a way that makes sense to have our own twist on the app because of course we don't want to do a copy. And here I mainly like the UI elements. I like the navbar. I like slider big numbers. I don't like the colors. I don't like the overall like aggressive vibe.
Once we have this, we have some references. We know what we like about each one. The next thing is creating our requirements uh document. And of course, we're going to do this with AI. So, I like to use Gemini here. So, let's give a first word llama that we want to use for the overall vibe. And then we want to use this blue up for the UI elements. So, kind of try to do a mix between these two.
I honestly love the step-by-step process that Matia is walking us through right now. It just blows my mind how fast you can build an MVP in 2026 like he's doing right now. If you're ready to build, but you still want a few ideas, well, The Hustle just released a free guide on the top 20 AI apps that you can vibe code this weekend. Inside, they will give you the exact prompts and the specific tools you can use so you can build and ship fast. Just pick one of the 20 ideas, paste the prompt, and build it. As we all know, the hard part isn't the tech or the tools anymore. It's having a good idea and just getting started. So, if you're curious, just hit the link in the description, grab the guide, and start building this weekend. It's 100% free, and you can download it right now.
All right, let's get back to the episode. Okay, so once we have our inspiration mood board, let's jump into the actual design. How do we start actually designing our app? To recap, we want to use weather llama for the vibes. So, I give two screenshots here to Gemini that we're going to use for the requirements. We want to use the plant concept because I think the plant idea is pretty cool. And we want to gather some inspiration from these two screenshots as well for UI elements. So, I gave all the image references to Gemini. And then I'm going to use this prompt that I made before to save some time.
So now that we have this requirements document, we're going to go over to Slick the Design, which is the AI tool that we're going to use for design, and we're going to paste this entire document. And this is going to get us a much better result because we have a lot more details. And what I like to do is kind of to run same prompt two three times in parallel because obviously AI has some randomness into it. So we're going to get slightly different results, which means we have kind of more options to choose from. And then we can choose the one we like more and just uh take it on from there.
>> You created this tool, right? This is your tool, Sleek Design.
>> Yeah, exactly. Yeah. Yeah. We've been I've been working on it with the two co-ounders for the last two months sort of. And now what I will do is I look at these three options, kind of understand which one I like the most and take it on from there.
So illustrations are a big part of design and I think especially in gamified apps is worth spending time to making good illustrations. So the process is actually very similar to what we did before. We're going to go back on mobin where llama for example has all these mascots and we like the style because it fits the it fits the vibe. So we're just going to give some inspiration to Gemini gather references and try to replicate the same style. So yeah, for example, let's we can go like grab like two or three and then we're going to use this prompt.
Okay, let's talk about illustrations. You're showing us right now, which is really cool. How to create a custom illustration, which is how to really brand your app to be unique and cool. We interviewed someone who had a mascot for their app that made over a million dollars. What is the power of having custom illustrations and mascots and things like that? Like why are we even doing this?
>> Yeah. Imagine you're just looking at a bottle of water and you just see the bottle of water go up. That's that's kind of boring. But having a mascot, having some sort of gamified element, something a little bit more friendly, it kind of helps the users to get more attached to the app. So you want to open it every day and use it every day.
So here in Gemini, basically we ask them to analyze these references and describe everything that make them look like they do. Then we're just going to copy this prompt. We're going to go to CHGPT because Chedg the only one that can make images with transparent background. And we're just going to use this prompt this time. I want to create this mascot. Please follow the guidelines below. PNG and transparent background.
If you're watching this right now and you want access to these prompts. We're going to be putting this entire walkthrough of how to build nice design inside Starter Story Build where you'll be able to follow this step by step with additional prompts, additional resources, and even a little bit of additional contents that we probably cut out of this YouTube video right now. So, enjoy. That link will be in the description.
Okay, so we got an image in the same uh style that we wanted. So, I'm just going to download it. And one little trick that I like to use, just go really quickly on Figma. I mean, you can do this with other tools probably. And I just like to cut it down to only be right around the image cuz this just creates a lot less problems in code. So, let's just export it.
Okay, we can go back to Sleek and here we select the placeholder image. We can click here to upload our own image and select this. Okay, I want to now work a little bit on these two screens and try to understand how we can make them easier to use. We can click on this and just quickly remove this that we don't need. This character can be even bigger. So, we can select it and say make this uh bigger. And let's try to improve this add water screen. This is kind of the main action the users are going to do. So, we want to make it as easy as possible. Like we said, for example, now the user if he wants to go back, he needs to like reach all the way to the top. One key principle design is like to keep everything, every action ideally in the lower part of the screen.
Okay, cool. Okay, so super cool what Sleek Design, your product can do. Just do want to clarify to the audience that this is not a sponsored video for sleek.design. You can probably go on YouTube and learn how to use Figma or use some other tools like that.
Yeah. So, yeah, now that we got our designs ready, essentially we're like building a force prototype that is actually a working app that you can try and install on your phone. This is a solid starting point to build all the features, build your on boarding flow and all the other features that the app is going to need. And first option is to use some vibe coding platforms like anything or broke or if you want a little bit more flexibility I like to use cloud code and with sleek we can copy this prompt that we can give to cloud code to build our app. So let's go over to corsor let's open cloud code and paste this entire prompt. I like to use the always the keyword like ultra think because this triggers like a mode where cloud code really thinks a lot before doing things. So usually gets better results. So it's give me this design the code of these designs and giving it to cloud code so it can take the design code and turn it into react native application code if that makes sense. So yeah this is the concept here.
>> You you're sending it the design files already right in here.
>> Yeah, we're giving essentially some HTML code which is the design code and it's going to turn it into a working app. By the way, I'm using a starter repository that I can share because this is already set up to have basically everything that you need to make the designs work without much setup. And like every time with AI, I mean, I have cloud code max, so I need to enjoy it. So, I'm just going to run it twice cuz you never know, one might be better than the other. So we can just like decide which to use.
>> And that's that's a lesson that I learned today is when you want to just get ideas, you're sort of in this starter mode, just flip up three chat GPT tabs, put the same prompt in there, and just having multiple options can kind of open up your mind to not just going with the first thing that it gives you. Cool. Thanks for sharing that.
>> Yeah. Yeah, exactly. I am fast forwarding through this section right now because Claude Code is just doing its thing and I don't want to bore you with this right here. But we are about to be done and it's ready right now. Okay, so this is actually pretty good for one prompt. We got our fonts working. The icons are working. For some reason, we lost our plants, but I'm pretty sure we can get it back. Let's see if the app actually works. Okay, if I drag here. Okay. So, it's actually we can select amounts. Let's do uh let's do 250. We're at 1,250. So, if you Okay, so it's actually it's actually working.
>> So, not only did you get the design almost one for one. Yeah, we get we didn't get the plant in there. That's okay. Uh, but all the functionality works including some of the math logic there. And this is all oneshotted. This is amazing.
>> Yeah. 100%. There's no need to know Figma anymore. No need to have an expensive team. Take some time to gather inspiration, understand the apps that are working in your space, and try to design something that can give you more confidence to go out there, market, and make your first dollars.
>> So, let's fix the plant issue and then at that point, I think people will know what to do next if they were building their own app.
>> So, for the plant, we're missing the image. So, grab the image from my downloads folder. It's called plant cmp2.png.
>> Okay, we got >> there it is. >> We got it. >> And it's looking much better now.
Okay, so we got here, we found inspiration, we mocked up our app using sleek design and just came up with a mockup of all the features and how it could work. Then we pumped that into Claude Code. And now we have a live working app that is actually functional and as far as we can see works and has nice design. Obviously, this app isn't live in the app store right now. We don't have time for that. We wanted to create this video to show you that this can be done. We I mean we're really here for about like 30 45 minutes and we have an app that is essentially has the potential to make up to $50,000 per month which is what we validated with our first step in the app store which is super cool.
Mati I just want to ask you here what are the next things you would do once you get off this call and you're going to go build the rest of this app. What are some other things you'd be thinking about?
>> I would think about creating a great on boarding flow in mobile apps. On boarding flow really does a big part of the job. I would apply the same rule. Study what works, apply it, and test it as much as possible.
>> Cool. Okay. Well, thanks for coming on and sharing this, Matia. If you want to learn more about how to build iOS apps, we have our full iOS boot camp, uh, which will show you how to come up with an idea, build it with AI tools, and actually ship it live to the app store with all the things we talked about, good design, uh, good onboarding, and all the other elements that are a little bit more complicated than just oneshotting into clock code. I will put a link down there if you want to check out the iOS boot camp if you are ready to build and ready to ship. Thank you Matia for coming on. I hope you guys enjoyed this design. It's the future. Let's go.