YouTube Deep Summary

We have AI now and everyone thinks building apps is suddenly easy. But here's the truth. Most apps built with AI will never see a single download. And the few that do, they'll be deleted within days because they're missing something crucial. The difference between apps that fail and apps that succeed isn't about features or fancy designs. It's about understanding the psychology that makes users open your app 10 times a day without even thinking about it. That's what I'm going to show you in this video. the exact framework for building apps that tap into what users actually crave and turn casual users into people who can't imagine their day without your app. First, you need to decide what you're going to use to build your app. There are many AI builders out there. There's Lovable, which builds whole apps for you. And then there are idees like Cursor and Windsurf. You also have AI agents like Claude Code and the Gemini CLI. In my opinion, the best coding tool you can use is cursor AI. The reason is it gives you way more control than web-based builders like Lovable or Bold. New while being much more beginnerfriendly than Claude Code or Gemini CLI. Getting started is really easy. Installation is simple and when you open it up, you'll see this layout with your files on the right. On this side, you'll see a chat box and this chat box is what you use to code with AI. After that, you're going to hop into Claude or ChatgPT. The free version is enough. You need to describe your app in plain and simple words. And then this is the important part. You need to ask for the user journey because we're going to build our app based on that. Once we have the basic user journey, we'll improve the experience bit by bit from there. I'm building a photo cleaner app. I've seen a lot of apps like this blow up on the iOS app store. But the main thing I noticed is that the user experience they offer is really bad. And this is another important point. Ideas don't really matter anymore. What matters more is how you execute them. Even if you have the same idea, you can easily convert users or get them to switch over if you're giving them a better experience. This photo cleaner app lets you clean your photos by swiping left or right. It's a very simple concept. Now, Claude gave me the user journey. It's up to you if you want to fully accept it, but I always like to read through it and make changes. For example, it grouped the photos based on where they came from, and I told it I wanted them grouped according to months. So, users can clean out their photos month by month. and actually feel some sense of achievement. After that, it gave me the improved version. I hopped back into cursor and made a new file named ux.md. The reason for this is because I need to make sure my user journey is saved and I can reference it whenever I want to. You also need to know that cursor doesn't remember anything. If I open a new chat, it won't remember what my app was. Important bits of information need to be saved at all times. This is context engineering, the new version of prompt engineering. In that file, I pasted the full user journey that Claude gave me. If I scroll up, you'll see what I asked cursor to build. I told it I needed to build a mobile app prototype. And again, this is another important point. You need to have it built in HTML. Making changes in HTML, whether it's design or structure, is way easier compared to doing the same in iOS apps. This right here is an iOS app template, and it's completely empty right now. If I open up the simulator, you'll see that it's blank. I'll be filling it up later with my actual app. But right now, it's in HTML format. After that, I told it that the structure and user experience should be built exactly according to the UX journey I had given. It got to work and built the app according to that user journey. And if I show you the app, this is what it created. It's really basic right now, but it allows me to make changes however I want. For example, if I want the cards to be bigger or have one card in each row instead of two, I can do that easily. When I open this up, you can see that if I swipe right, the photo gets saved. If I swipe left, it gets deleted. It has made some weird icon choices, but that's not a big issue. We can easily fix them. You can see we've got an undo button, and we're also tracking how many photos we've changed. Pretty basic app structure, but this is exactly what we need. We're going to make a few changes, then convert it into an iOS app, and move on from there. Over on the AI Labs Discord community, we're hosting our first ever hackathon from July 22nd to July 28th. Submit your most interesting builds and projects, and the top five submissions will be featured in one of our YouTube videos. You can join by clicking the link in the pinned comment below. And if you're enjoying the content so far, make sure to hit that subscribe button so you don't miss what's coming next. So, whatever structure it's made, the first thing I do is implement a color palette. For that, I ask it to remove all the existing colors and emojis from the app. Once that's done, I tell it to identify the elements inside the prototype, things like cards, buttons, and so on. And then I ask it to map a color palette to those elements for a consistent look. I also tell it to save that in a color scheme.md file so it doesn't forget the mapping. To get the color palette, you can go to this site called colors. I leave it in the description below. You press spacebar again and again and it keeps generating different color palettes. Once you find one you like, you can export it. Grab the CSS and copy it. Give that to cursor and it will create this color scheme mapping and save it in the file. Once that was done, I told it to implement the scheme on the HTML prototype. Let me show you what the prototype looks like now. This is what it's looking like. Much better and minimal. The style looks really better. I'm still not fully happy with the design, but we can change that later on. You can see when I swipe this way, we get this red color. When I swipe the other way, we get this blue color. And it's all implemented according to the color palette. So overall, it has a simple coherent look and it's much better than before. Then another really important part of crafting a good experience for your users, we come to the fonts. Choosing a coherent font is super important. For this, you can head over to Google Fonts. They have an amazing collection of fonts you can choose from. They've got playful fonts, modern fonts, every type you could want. So you find one that you like. For example, I wanted to implement this font right here. To me, it looks really nice, much better than the default font. So I click get font, then grab the embed code. I choose the HTML one. Go back and paste it in. And if I go back and refresh the app, you can see that now it's actually using that font. You might not notice it at first, but if you look really close, you can see that the new font is now being used. Another thing that's really important for your user experience is your app icon. You don't need to go through designers. You can just use the chat GPT4 image model, which is actually pretty great. Now, I described that I wanted a cartoonish icon of a leaf since that's the name of the app I'm making, and mentioned it's for an iOS app. It gave me this icon, but it didn't match the color palette I was using inside the app. So, I gave it some additional instructions along with the color palette, and it created this icon that actually matches the colors used in the app. Now, the app was still in HTML, not a proper app yet. So, we needed to convert that HTML into a full Swift app. I came back to cursor and told it I needed to convert the HTML app into an iOS swift app. It gave me some conversion rules inside a file called conversion.md. Another thing is it needed to use the context 7 MCP. If you don't know what MCPS are, they're essentially a way to give your AI model some extra context or information. Context 7 MCP is really solid. It has documentation for a bunch of different frameworks and languages. It uses vector search, which means the AI model can pull in the relevant info it needs much more efficiently. So, it called the MCP tool and got all the important conversion details. If you don't know how to add the MCP to cursor, I'll link a video below. It wrote everything down in conversion.md and listed out a lot of points to properly convert the app. After this, you're going to open a new chat because when you open a new chat in cursor, it forgets what you were talking about. That's actually a good thing because it can approach things more cleanly and often perform better. Once you've got that new chat open, you tell it to convert the HTML app into a Swift app inside the test app we created and to use the conversion file. After that, we see another cool cursor feature, to-do lists. It sets up a to-do list with 15 items and then one by one, it goes ahead and edits the files. Once that's done, it runs the app a few times. It failed a couple of times, but that's normal. After running the app and seeing the errors, it fixed them automatically. Once that was done, it informed us that the app has now been successfully converted and we can go ahead and open it up. Okay, so you can clearly see that we have the app running in our iOS simulator and it's a fully usable app right now. You can see that we're going through the pages and I already gave it the permissions. So now it has access to the photos. But this is the basic view that we have. It's still a little janky right now. We're getting small errors like views overlapping, but that's bound to happen and it's something that'll get fixed gradually. You just have to focus on each page or in iOS apps as they call it, each view one by one. After your iOS app is functional and running, you need to focus on the animations. For that, you're going to copy your UX.md, the one you got from Claude, and go back to it. You're going to explain to Claude that this is the user journey, and now you need to focus on the animations. Give it the first section and tell it to describe how the animations will look visually. You don't want the specifications like timing or directions. It just needs to describe them visually. Then go back into cursor and create an animations guide file. In this animations guide, you'll place each section or page as you get them from Claude. For example, the welcome to leaf screen goes here. Then you have the permission request screen and that gets its own animation description. Once you list them down, go into cursor and tell it you want to implement animations. It needs to look at the descriptions and break them down into individual pieces. Here's the most important part. Cursor doesn't really know how to implement animations in Swift UI or in any other framework. Even if it tries, the results will often be janky and not polished. But with the context 7 MCP, it goes into the Swift UI documentation and finds the proper recommended ways to implement those animations. Then it writes out the full implementation inside the animations guide. The welcome screen animation has its own section and each animation has a complete implementation written down. Now cursor doesn't have to think. It just follows that exact implementation and adds it into the iOS app. If I go back to the app and restart it, you'll see we now get this amazing animation exactly how Claude described it. Even if I had described all these small interactions myself, cursor wouldn't have gotten it right. Now I start on the next section. I open a new tab and give it the same prompt. This time I ask for the permission request screen instead of the welcome screen. You go one by one through the whole app. You can't implement all the animations at once. Even if you try, cursor won't remember everything and the models will mess it up. It's definitely recommended to do it one at a time. When you encounter errors, capture a screenshot and send it to cursor. Make sure to tell it to use the context 7 MCP again. That way, it becomes contextually aware of how to fix the errors. It performs much better with context 7 MCP because it pulls the exact implementation and code needed to fix the problem. And to show you the final result, this is what it looks like after editing everything. It's looking pretty good. If I go back to the homepage, you'll see the app icon we implemented is also right here. Opening it back up and going through the onloading process, you'll notice some jitters that I'll need to fix. This isn't a single day process. It's actually quite lengthy to fix everything properly. Even with AI, where it used to take about 6 months, it now takes about a month to make fully polished products. Moving forward, you'll see the animations look really nice and polished, especially on this screen. It nailed this one. Next is the gallery page. I haven't made any edits to it yet, so I'll come back to that later. Then we have the main picture swipe screen. I got it into good condition, but there's still a lot to implement. The rest works well, and if you skip ahead, it gives us a summary of what we achieved. For example, when I delete this photo and skip, it confirms that one photo was deleted. You can see there are still some UI issues, but it takes time. What you need to do is use this framework and fix everything one by one. That's how you get really well-made, polished apps and gain a competitive edge over any competitors. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.