The Complete Process I Use to Build Real AI Apps (Research → UX/UI → Build)

I've spent hundreds of hours vibe coding and building apps this year trying out new tools and helping my students and businesses build products with AI. What

I found is that most people are wasting a lot of time and credits doing it wrong. So, if you want to be better than

wrong. So, if you want to be better than most at vibe coding, I'm going to show you my four-step framework for figuring out what idea you should build, what to do to make it successful, what tools you

should use, and how to turn your idea into a real app step by step. And we're

going to do this by building a complex SAS app together that integrates LLMs and third party apps. Doesn't matter if you're a designer, a developer, a product manager, or a founder. This

process is going to save you a ton of messy trial and error and credits. And

I've tried out a lot of different AI generation tools this year. And by far, Replet is the most non-technical personfriendly that's still capable of making really complex apps without me

having to do any technical stuff. It

lets you design it, build it, and deploy it. It has a super smart agent to help

it. It has a super smart agent to help you. It integrates really well with

you. It integrates really well with Figma, which I like because it's a tool that I'm in all day anyway as a designer. I don't need an API key or to

designer. I don't need an API key or to make like a developer account in order to integrate my app with things like Claude or Open AAI. I can use thirdparty connectors and integrations like Google

Calendar. Oh, and I don't have to worry

Calendar. Oh, and I don't have to worry about losing all of my work because it has built-in version control. Those are

just some of the things you really want to consider when you're choosing what tools to build your app with. And for

all of those reasons, I'm going to go with Replet. And if you want to try it

with Replet. And if you want to try it out, too, which I highly recommend, then make sure to use my code in the description so that you can get $10 of free credits to try it out. But before

we dive into it, tell me in the comments, what is the closest that you have come to building a really good app?

Did you get stuck at some stage? Was it

learning the tool? Was it the prompting?

Did you have trouble coming up with an idea? Take a minute, let me know in the

idea? Take a minute, let me know in the comments because I genuinely want to hear what you're working on and how I can help go deeper in upcoming videos.

So, step one is research and problem definition. Now, this is by far the most

definition. Now, this is by far the most important step, but it's the part that people don't spend nearly enough time on. It all starts with picking the right

on. It all starts with picking the right problem to solve. And keep in mind that I said the right problem to solve and not the right solution to build. So I

wanted to solve a problem that I had and that my fellow creators and teachers and founders that I know complain about constantly and that is how do we create better social media posts to get more

eyes on our content. So for this we need to do some good old-fashioned user and market research because honestly building is easy now. Good ideas and distribution are really hard. So, I

kicked off my research by talking to a bunch of folks that I know that are content creators to see what they're doing, what they're struggling with.

Whatever it is, spend as much time as you can getting to know the people and the problem space. If you're thinking about launching and monetizing later, this is even more important. Do enough

people have this problem? How would you actually get out in front of them? And

would they pay to solve this problem?

What about existing products that already do this? Well, Buffer is an example of one of the most popular social media scheduling tools, and this is what it generates with its AI assistant. So, just because there's a

assistant. So, just because there's a solution out there doesn't mean it's any good, and it doesn't mean that you can't do better. But the end goal of this step

do better. But the end goal of this step is to have two to three big insights and one unique value proposition. And I'm

going to show you why that's really important later. So, after interviewing

important later. So, after interviewing and surveying and talking to a bunch of people, this is what I found. Insight

number one, there is different social media platform etiquette and these invisible algorithm rules that no one really knows unless they have run experiments and tested it themselves.

And insight number two, AI thinks in content. People think in shapes. What I

content. People think in shapes. What I

mean by that is AI might write a wall of text and it might sound really good, but when you post it to a place like LinkedIn, it's more about how that copy

actually looks, the length of the lines, how many emoticons it uses, how many characters are above the fold, and just the general format. And what I'm seeing everyone doing right now is they're

digging through their own notes. They're

asking each other for advice, and they're duct taping together a bunch of different tools. And the ones that have

different tools. And the ones that have been doing this for decades, they have figured out what works from real world trial and error, not theoretical. Which

brings me to my unique value proposition. It's all of that knowledge

proposition. It's all of that knowledge that you can't just get from scouring the internet that makes a tool like this a lot more valuable and I feel pretty

confident about moving forward with it.

Step two is planning and strategizing. I

need to come up with the features and the UI and the user experience that I want for the app. It doesn't have to be a massive startup idea either. It can be an internal tool that saves you time,

something that reduces a repetitive task, a B2B tool like a dashboard or an automation, or something that consolidates scattered tools. And to

save myself time here, I'm going to start by enlisting the help of chat GBT.

Now, as I mentioned earlier, most people are doing it wrong. They just type in a single prompt asking the AI to build them something. But if you want to spend

them something. But if you want to spend a lot less time going back and forth with the agent and debugging things, then I recommend ditching the prompt altogether and doing something called

metarrompting. Prompting is just telling

metarrompting. Prompting is just telling the AI what to make. Metarrompting is

telling the AI how to think. And usually

it's done by asking one AI to generate a complex prompt that you will then give to another AI. That's exactly what we're going to do here with chat GPT. So this

is the metaprompt framework that I use for every product that I build. I tell

the AI the role I wanted to assume and then I have it ask me questions. Who is

this app for? What is the problem statement? What are the user stories?

statement? What are the user stories?

And what type of app am I building? The

goal here is to generate a PRD, which is known as a product requirements document. So, I'm just going to copy and

document. So, I'm just going to copy and paste my research right into chat GBT.

And I'm going to just put in some bullet points of those insights that I found and the unique things that I want it to do and all of these special insights that I have and that I've gathered from the people that I've talked to. And I'm

going to say, I want you to act like a co-founder and help me build this app idea called visual verality. Okay. And

so, what that did was generate the metaprompt for replet agent. It's the

PRD, the user stories, and that checklist logic that I talked about. So

it has our goals here and here is the core user flow and those platform specific rules that I discovered in my research and some best practices for the

checklist. And there's some other things

checklist. And there's some other things here like how I want the micro interactions and special animations and stuff like that. Some really design specific things. Some of the stuff you

specific things. Some of the stuff you don't really need here. Replet agent

will figure all of that out. The rest of it we can pretty much use. and leave me a comment below if you would like this whole metaprompt and my PRD. Okay, so

from what it's generated here, it seems like I'm definitely going to need some help from other tools, maybe third party integrations, and I definitely want to add AI assistance. Now, from this PRD, I

can start to decide what tools I want to use to build this thing. So, here we are inside of Replet, and you'll see the main prompt screen here. Now, you can just choose to design a prototype, and

that means it's not going to have all of the back-end functionality, or you can go right into building your idea with the integrations, the database, the app scaffolding, etc. So, that's what I'm

going to do here. I can describe the idea here, and then it says use backslash for integrations. So, you can see over here in the left panel all of the integrations that it offers, and

there are a few more here in terms of Open AI that was just added and the other LLM. So when we go back here to

other LLM. So when we go back here to home, we can see those when we hit the backslash and you can search for one or you can just scroll to find the one that you need. So first I am going to paste

you need. So first I am going to paste in that problem statement and what I want it to build. Then for integrations I'm going to do the backslash and I'm going to say I want open AI for

generating content. I want let's say Gemini. It's

content. I want let's say Gemini. It's

using the latest Gemini 3 for generating images. And maybe I want anthropic for

images. And maybe I want anthropic for generating further content or doing research. And I'm going to take that big

research. And I'm going to take that big PRD and I'm going to paste it in here as well. Oh, and if you have any examples

well. Oh, and if you have any examples of mock-ups or screens you want to use, you can upload them here. Okay, that

just took a few minutes and it generated this entire plan and it's letting us know it has these integrations and I can also change the plan which I'm going to

do because I forgot to tell it to also add in / Google calendar integration.

So, I'm going to just tweak this plan and get it exactly how I want it to be before I ask it to start building. Okay,

there it is. It found the Google calendar integration. We're going to

calendar integration. We're going to click connect there. And then it's going to ask me to connect it to my Google calendar, which I'm going to do. Okay,

connected successfully. And now it's updating the plan to include that Google calendar functionality. Now we have the

calendar functionality. Now we have the option of building that app again with the database or just starting with the design prototype. It's much faster to

design prototype. It's much faster to start with the design. It just takes 5 to 10 minutes and it takes longer, 20 minutes to do the full build. So I'm

going to start with the design just to see if I like the way it looks. So let's

click start designing. So now you're going to see two panels. Over here is the agent that we can chat with and it's going to help us make things and test things and make changes. And then over here is the preview area. So it's

actually generating those designs and features for us right now in the form of just a a prototype. It's actually

creating the components. So it's kind of just cycling through and then it's going to put it together in an interactive version. Okay. So it's done. And that

version. Okay. So it's done. And that

only took, as you can see here, 8 minutes. And if you hover over it, it

minutes. And if you hover over it, it also shows that that work only costs $2.34.

It has all of these sections. There are

my posts. That's like the database where the post will all be saved. The calendar

here, so you can see what's upcoming.

Sync this to your Google calendar. Even

analytics. This is pretty awesome. So,

if we can build anything close to this, we'll be in pretty good shape. And so,

let's see what happens when we actually try this. So, let's just say I'm going

try this. So, let's just say I'm going to use productivity and then maybe my goal right now is just comments. I'll

leave this the way it is and then generate viral post. So, you can see all those smooth little animations that come in, right? And micro interactions. This

in, right? And micro interactions. This

is what makes it really special. And

that's what it's going to look like.

It's going to have the post laid out in this canvas style so you can see them all at once. And then you can change the angle like the way you frame it based on, you know, these different

characteristics. and then you can

characteristics. and then you can regenerate it. And then here's our

regenerate it. And then here's our posting checklist with all those best practices that I gathered from my interviews that I put into my PRD. Now,

there is one thing over here. I saw a really cool design pattern, I think it was on Mobin that I like. So, I'm just going to grab a screenshot of that or even mock something up in Figma. As you

see here, I can attach a Figma design or a prototype or upload a file. So, let me upload this file and it looks like this.

It's a little bit more information about each platform, which one's selected with a little check mark, and then it shows you that these are locked behind a pro upgrade feature. So, I'm going to say,

upgrade feature. So, I'm going to say, can you make the platforms look more like this with the check marks and info so that I can paywall some of the platforms? Okay. And there we go. It's

platforms? Okay. And there we go. It's

added those platforms. But I noticed that X, Tik Tok, and threads don't have an icon. So, I'm going to say keep

an icon. So, I'm going to say keep iterating on design here. Now, these are some of the little kinds of quirks you're going to come across. and have to fix. And so what it notic is that it's

fix. And so what it notic is that it's not that the icons or the logos are missing, it's that they're the same color as the background. So it is reasoning and it is figuring out what's

wrong and how to fix it. And there we go. So if you're a designer or a PM,

go. So if you're a designer or a PM, this is a great place to stop and share a prototype with your team to get feedback and see if they like this direction before it gets built. So I'm

ready to build this thing and all I have to do is click build functionality and it's going to get to work building the database. the app structure, adding in

database. the app structure, adding in all of those integrations and making it work smoothly. Okay, so it is done with

work smoothly. Okay, so it is done with the build and we have everything that was in the prototype. So let's check the functionality and see how it's working.

So I can just share something here about UX and UI and then I'm going to select my platforms, keep it casual, and click generate. All

right, so here we have our post. And

these posts are pretty decent. something

that I would post on LinkedIn or that I would see others post. Perfect. Nice and

condensed and more witty and concise as it says. So, the thing I'm noticing is

it says. So, the thing I'm noticing is that it didn't actually generate images for Instagram or Tik Tok. So, let's see how that might work. And also on LinkedIn, I like to see more emojis

breaking things up. Again, I talked about the shape of the content there.

So, I'm going to start with each platform. You want to always take it in

platform. You want to always take it in baby steps. Just take it one platform at

baby steps. Just take it one platform at a time, one feature at a time, one screen at a time. Okay, that post looks much better. No weird characters and a

much better. No weird characters and a lot of cool emojis. So, there are going to be all kinds of little things that you notice along the way. And I suggest putting those into a canban board like

something like this in notion that I use to manage everything. And I'll leave a link to that in the comments. The next

thing I want to do is address the fact that there are no images generated for any of these posts. And I'm going to ask it to have Gemini generate a relevant graphic or image for each post. All

right, so it says that it's now using OpenAI for the post content, Gemini for the graphics, and Anthropic for the scoring. So, let's do another test and

scoring. So, let's do another test and see what it generates. These are

actually not that bad. Um, I don't know what I was expecting. I was expecting something worse, but I can tweak this a little bit more to describe the exact type or style of image that I want so

that all of my posts follow my own branding guidelines. I think it works

branding guidelines. I think it works with all of the text. It's it's pretty contextual. So, a few things to

contextual. So, a few things to remember. It's always better to start

remember. It's always better to start small and then add on as you go. So,

don't try to make a huge app with all of these features. Just treat it as a

these features. Just treat it as a product road map and add one thing.

Improve and iterate over time. The more

intentional and specific you are, the better. If you have an idea for how you

better. If you have an idea for how you want it to look, you can use other tools like Mobin, for example, to find real design patterns. I have a link to that

design patterns. I have a link to that in the description as well. It also

really helps to have the right vocabulary when you're talking to the agent. You don't have to get super super

agent. You don't have to get super super technical, but you want to be able to reference frameworks or talk about the style of animation you want or the thematic elements you want for your components. It really helps you

components. It really helps you fine-tune the design and the user experience. Let's take a look at the

experience. Let's take a look at the rest of the functionality. Over here, I can see all of the posts that it generated. The options are to edit or

generated. The options are to edit or copy, but I want to add it to my calendar. So, I'm going to ask the

calendar. So, I'm going to ask the agent, how do I add a post to my Google calendar. So, it's done some work. It's

calendar. So, it's done some work. It's

fixed some bugs. And now we have our posts here. And I'm going to click on

posts here. And I'm going to click on this context menu. There we go. It's

added the schedule option. And now I can select a date here and I can schedule the post for 9:00 a.m. on Tuesday, for example. Your post has been added to

example. Your post has been added to Google Calendar. Let's pop over to my

Google Calendar. Let's pop over to my Google calendar and see if that is true.

Oh my god, there it is. There is the post right there. Scheduled via visual verality. I don't know why this is just

verality. I don't know why this is just so cool to me. Seeing it interact with my app that I'm using every day. Really,

really cool. And so now we can log into our app and then get that post. So, it

would be much harder to do this with any other AI assisted coding app. Replet

makes this extremely easy. But you can see how this is the loop. I'm now going to take what I built, put it into the hands of the people that I talked to before, see what they think, get their feedback, and then make adjustments

based on all of that. And I've done some other complete builds on Replet. So, if

you want to see how I build other things and how I actually go through the deployment process, then watch this playlist next. And make sure to grab

playlist next. And make sure to grab those Replet credits in the description below. And if you want to get better at

below. And if you want to get better at researching and building apps like this, then have a look at my course where you'll learn how to use tools like Replet and understand the fundamentals of UX and UI Fine.