Stop Building AI Slop – Build High-End Web Apps with AI

#Programming
💬 Chat with this Video
Ask anything about this video…
Stop filling generic AI slop and learn how to ship high-end productionready web applications using modern AI coding workflows. In this hands-on course, you'll discover how to extract deep project context, clone proven UI architectures, and restyle them into unique polished interfaces. Finally, you'll master adding dynamic Apple style scroll animations and deploying your full front-end live to Cloudflare. In this 1hour course, I'm going to teach you everything you know on how to building applications that are not AI slop. And in this video, I'm going to show you exactly how to do this in five simple ways. And by the end of it, I'm going to show you exactly how you can be able to build applications that are just like this. And this application, you can see, is called thin influencers, which basically keep track of all the financial influencers that are on the internet. And basically, you can see that this is the application that doesn't look like AI slop, right? So you can see we have our stats cards and we have individual creators, influencers that we can keep track of their performance. And if I were to click into it, you can see we have a really nice amazing chart here that you can see here. And also we can be able to click into individual ticker symbols and see exactly when they buy and when they sell, right? Any action they took. And I can also open or in this case zoom in, zoom out a bit more for the time range and so much more. And finally, we also have a really cool scrolling animations on embedded into the about page for the application. So if user here navigate this page and scroll down, you can see that we have a visual animation here showing in the background, which is really cool, right? So it really kind of separates a normal application that AI built into something that's more like highass high-end application that you can see here. And we're going to do this in five simple steps. And you can see that these are the steps that we're going to take in this video. First of all, we're going to take a look at how to collect in our context like what we were trying to build, right? We're going to brain dump that to AI so AI knows exactly what we're trying to build. And then we're going to take a look at how to find inspirations, how we can actually to clone that applications. And eventually using that clone versions and try to build our own versions with the context that we collected. And once we have built out the versions, then we're going to do here is we're going to see what are skills, what are some tools that can help us to restyle and our entire applications. And finally, we're also going to take a look at how we can be able to actually adding these scroll animations that you just saw and eventually deploy this applications to Cloudflare so that you can be able to actually use this anywhere else in the world. Okay, so those are things we're going to cover in this video. If you're interested, let's get into the video. All right, so to get started, the first step we're going to do here is to building our context for our UI. So essentially what we're trying to do here is that if we don't provide the context to AI, then AI just going to guess on what kind of features style you want to build, right? So the result here is that you're going to get lower accuracy because AI just going to guess it. But if you were to actually give enough context so AI knows fully on what they're trying to build, then the accuracy for that result here is going to be a lot higher. But the problem here is that the way how we collect in this context have AI here to collect in this context is really challenging because AI doesn't know what context to collect. But luckily there's actually a skill for that that teach AI on exactly how to collect in those context by relentlessly interview you until AI fully understand what you're trying to build. So in that case to get started here you can see I'm going head over to my VS code. I have created my project called the investor tracker app which currently you can see we have an empty folder. Now I have also started my clock session here in a terminal here and all we had to do here is we're going to start to install this growing skill. Here you can see it gives you a command. We're simply just going to copy that and we're just going to paste it in the clock sessions or in our terminal. So right here you can see it's going to run the command here and install this onto our current project. Once we have that installed we can then be able to trigger the skill. It's called the grow me skill. And then what we're going to do here is we're going to explain on exactly what we're trying to build. For example, I want to build a investor tracker applications that focusing on how to tracking the influencers that talk about when to buy and when to sell. Right? So as simple as that. Now in this video here, we're just going to focusing on the UI side, the front end side of things. But in the next coming video, if you're interested for that, you can like this video, comment down below, and I'll make sure to prepare a next video where we're going to build out the entire data pipeline, the full applications of the API, the database, everything else so that we can connect this entire UI into the actual back end and host it so that you guys can use it. So now we're going to do here is we're just going to give it a simple prompt and we're just going to have AI here to go deeper based on the prompt that we give it. Now the prompt you give here, it doesn't have to be really really deep, right? could be a really simple one like what I have here and we're just going to have AI here to asking us clarification questions by asking user question one at a time. So for example, what is the user? What is the real mock data here? What kind of text stack? And what's the version one that we have? Right? So we're just going to take some time here to answer those questions. Highly recommend you just pause the video right here. Answer those questions. Once it's complete, come back to the video and continue on. All right. So after we have done the growing session, here is what the end result look like. So what you see on the screen here is my decisions MD file and also my spec MD as well. So I ask it to basically create a spec MD file and decision MD file based on the conversation that we have. Now decisions MD file here contains all the decisions every conversations every decision that we make is logged into this file right here. So that we're not losing context as we start rolling with like 30 or 100 questions deep. Right? So the other part here you can see here is that we have our spec. Now the spec here is essentially basically put everything that we have right summarize all the decisions that we have and basically try to aggregate it into a single MD file which is like a summarized version of the decisions. All right so at this point you pretty much have collected all the context for your applications. The next we're going to do here is try to build it. And the way how we're going to build it here is really unique because most developers on YouTube here or in this case most YouTuber mostly just talk about or recommend just using something like hey creating a wireframe using cloud design or designing a template from a design system or like dribble.com or a template that you see on Pinterest or maybe using a skill and helping you to build this right and honestly I have tried all of those methods and I don't find it really accurate in terms of results that I get from AI. So what I like to do instead of this, right, I'm just going to remove this. So what I like to do instead of this is basically try to clone an existing working templates that are already available and that you think that your application care could maybe clone that and just build us something different, right? I'm sure that there's tons of application you probably already use every single day and you realize that okay, well this application if we were to tweak it just some parts of it and make it like similar to my niche that would be like really good, right? or maybe like a really nice landing page here, maybe tweak a bit more and we can be able to make it something similar to what we're trying to do, right? Based on the context that we feed it in, right? That's exactly what I propose here is that we can clone the application first and then later on try to dump our context onto that application, right? Maybe changing the color, maybe changing the names, maybe changing the elements of how it functions, right? And for my use case here, I'm trying to build a uh fin influencer, which is basically a way where we can track all the financial influencers on YouTube or Instagrams on the things that they've been calling out that uh people should like how they recommend people to buy and we're just going to track each of those influencers performance on when they call and when they call to sell and when they call the buy and try to track their performance for the wins, right? So I think a perfect way for this is something like coin market cap where we can actually to track like a dashboard like this where we can keep track of all the coins but instead of keeping track on the coins we can keep track of all the influencers right so here you can see in the coin market cap I want to do something similar where maybe I want to clone this application first right entirely logos text typographies colors everything but I'm going to change a few things I'm going to change maybe this one right here I'm going to have it to change the this this uh names here to be influencers and I can be able to click here to actually visit their socials, right? Right? I can also be able to keep track this will be like their wins like okay what is the percentage of increasing right compared to you know S&P 500 right or also how many wins they've been calling stuff like that right and I could also click into it and if I were to zoom out a bit more you can see it has like this um three column layouts where here is going to be the performance here is just about section about this creator and here is all the call outs or the communities and all the stock that have been investing right so it's going to be very very similar view. Now, there's actually two ways you can go about this. One is you have a working website or working app that you already know that you want to try to like clone. And the other option here is try to see if there's any templates that are already available out there, right? For example, if you don't know Versel, this is a platform called Versel. And Versel has its own template where you can actually refine all the working template that they have already, you know, built, right? That literally you can just clone it and just build on top of it, right? So for example there is a so many template here you can see there's different templates for different kind of use case one of them is for e-commerce so for example e-commerce here there's this NestJS commerce applications now if you don't know what versel is versel is just a hosting platform they're the creator of NestJS for the front-end framework so literally you can use this kind of template that they created and just build on top of it right so if I were click on like view demo here is the actual working e-commerce store that they have created so I click on an item here. Click on the color, the size, I can add it to the cart. And after I add it to the cart, I can also click on proceed to checkout. And this entire checkout page here is all built, right? And if you actually want to see the source code of, you know, where they actually build this applications, right? You can actually uh check out the description. So you can see this is the GitHub, this is the repository. If I were click on this, this is the entire code of like everything that they have built. And you can see the last person uh commit this was like two months ago. Okay. So literally you can just have AI here clone this repository and have it to build something that's similar to what you have feed in in the context. And the reason why I say this is because as a senior software engineer working at companies like Amazon and Microsoft I realized that you don't have to be an expert right as a user experience designer right or a project manager. You don't have to have so many experience of like doing AB testings because there's already an applications that's working that's already built and ready and already have customers are being used and you can literally just copy the layout for that application and try to replicate it right for example this coin market cap application I'm sure this application here has over a million users daily active users and if this application already successful then why do we have to reinvent the wheel because we already have a successful applications that drives revenue, that drives conversion rates, then we should just replicate that. And of course, later on this video, I'm show exactly the skills, the tools, and try to make it this application here really customized so that there's no way that user can tell the difference and is really customized and unique to our application. Okay, that's we're going to show you later on this video. But for now, let's try to focus on how we can clone it. And the reason and the way how we clone it here is very simple. So here you can see I navigated to my VS code and essentially what you see on the left here is what we have done so far right. So you can see the spec the decisions those are all done from the quilling session and I also have created a new folder here called the web folder which you can see and essentially this is the entire session right so I start a new clock session here on the right and here you can see this is the entire prompt that I give it so I basically paste the entire link of like where I want to clone it from which is coinarketcap.com and I also have uh copied the another page which is a detail page of a particular coin right those are the two things that I want to clone And I'm basically also referencing the folder that I created which is the web folder where I want the call code here to clone the application to right. So essentially the prompt is like this is that I want to clone the application and here's a link and essentially I trigger a skill called the deep research. Now this skill here you don't have to install it because this skill is come by default from claw code. So essentially what you can do here is that you can trigger the deep research skill and have cloud here to do deep research on the UI libraries that are being used on that app. So coin market cap if you take a look at the actual application this is a UI library this is a UI library this is a UI component I would say this is a UI component right those component here believe it or not most of them are actual open source that you and I here can actually be able to use inside our application and what we can do here is that we can actually be able to use those open source applications here inside of this clone app uh clone version of it uh by having deep research here to find them and try to apply them and that way it's going to save up a lot of time here to actually build that component from scratch but using the actual libraries that are already exist right so rather than just reinvent the wheel we can just use what's already out there [snorts] and you can see that's exactly the whole thing right this is my my entire prompt and essentially if we were to scroll all the way all the way to the bottom here you can see we have claw here to finish building the application and here is how long it took how much token we spent so far okay I'm using opus 5 right here and I have basically cloned the entire application And if I were to open this application here, you'll be really shocked that the application looks exactly the same as quick market cap. And that's exactly our baseline is to use an application that are already successful and use that as a start. So in that case, you can see here that after we have cloned the entire applications, this is what it looks like. So here you can see this is basically onetoone with coin mark cap. So we have our navbars, charts, and if we were to click into individual pages, zoom out a bit more, you can see we have three column here, exactly the same as CMC. Now before we continue, if you watch this far, you probably want to build something with AI. And just for quick context, my name is Eric and I used to be a senior software engineer working at companies like Amazon and Microsoft. And on this channel, I help you to master how to build AI agents, automation workflows, and real SAS product here. So, if you're interested for that, make sure to like this video and consider subscribing for more content like this. And lastly, if you actually want to take your skills up to the next level, I do have a school community here where I hold you accountable. And this school community here, we have tons and tons of school classes that you can actually be able to learn from different topics in AI. And if you have any questions, you can post it in our school community as well as we have our weekly live calls where I hold you accountable to answer any questions you have on the AI space. So, if you're interested for that, make sure to check it out in the description below. But with that being said, let's get back to the video. All right. So once we have the clone version of our application which lives in our web folder and we also have our context which is something that we just talked about which contains all the decisions the application functionalities the spec right everything that we have created so far right what we're going to do here is we're going to combine the two now and basically try to create a clone version of this. Right? So using all the UI library from the clone applications but this time we're actually going to embed our own context the functionalities everything into a another application here which contains everything that we have here. Okay. So you can see here that I have gone ahead and created that project simply just copied this entire folder which is the clone version of CMC and I renamed it to be web 1.0 zero and I basically just using this folder here using this codebase as a baseline and try to grilling claw here right using claw here to grilling me and basically try to using the specd driven development here to take the spec the decisions and try to refresh or redesign every single or in this case restructure every single components in the entire application here based on the context that we have we're still going to using the UI components that are uh that are basically contained in the actual uh CMC or in this case the clone version of that. We're just basically just going to use that, right? Using that as a baseline here to building our own kind of functionality bit. Okay, so let me show you exactly what that looks like right now. You can see this is the application and this is the clone version of CMC, right? Everything looks really alike. You can see we have the tabs and we have the search bar. I can also do slash. It also populate the search. Everything's also working as well. Uh this is the login page. This is signin page. This is the user page, right? I can go to dark mode, light mode. Uh I can also click into individual person, right? Individual creators now. And you can see this is the charts, the popup over here. You can see is also really similar to CMC. The timelines, right? The growth comments. Uh I can also click into individual ticker symbol. I can see the uh different time range, different date range, right? I can also see that. and the community as well as who's on it, right? Who call it who uh which creator here actually uh introduced this ticker symbol, right? And then we also have a request the FIN 20 which is the top popular stocks uh index and then you can see like everything's all created right I have gone through this entire process here. Now if you want to see the entire process how I was using the map pokeout skill here to basically taking everything right the entire clone application combining with the context that we built initially and put it together into a finished version application here or in this case the UI uh you can check out our school community here which I basically created two video here right part one part two which show you exactly the prompts the walkthroughs the timestamps everything all shown here you can actually check it out I actually show you exactly how I build this ent uh end to end right from this clone version all the way to this finished version here. So highly recommend you check it out. But essentially what you can do now is once we have the finished version, right? Once we have the clone combining with the context, this is the initial version of applications. Next thing we're going to do here is we're just going to make this ours, right? Because currently is the clone version of CMC. Literally, we're using all the components that's coming from CMC. And in order to make this unique, in order to make this customized to us, we need to introduce you couple skills I'm going to show you next which can help you to actually make it unique, different compared to what you actually initially clone and we're just going to improving the actual user experience from there. So in that case to get started the first skill we're going to introduce here is called impeccable. Now this is going to be a really gamecher one. So you can see that this is the before right before this is the AI generated one and this is the after. Now obviously this is not AI generated because we pretty much like copy exactly what CMC has done so far. But essentially what we can do here is we can actually change using the skill here to change out the style right to make it customized to us. You can see this is what we have before this is what we have after. And if we were to take a look at how it works it actually shows you a complete road map like okay well these are the skills that you can use at the start and these are skills of like how you want to use it when you want to polish it right want you to iterate. Okay. And if you want to start with context, so before asking agent here to design it, give context. Okay. We already have done this so far, right? If you want to completely build things things from scratch, this is exactly how you can do it. Uh there's also iterates, right? How you can be able to actually have it to iterate with different designs. Uh in this case, you can also do that as well. If you want to polish it, which is currently where we are right now, we want to actually, you know, rewrite the copy or, you know, score it or refining it, right? Audit it, harden it, right? That's exactly the polish part. Okay. So, we're actually going to using the polish skill here to actually see how we can do this. So, in this case, what we're going to do here is we're just going to head over to our repository, right? We're going to open a new one. I'm going to open a new clock session here. And first of all, we're just going to install in the skills that we have. So, I'm just going to head over to the impeccable. Okay. And I can also go to their repositories here and copy the link for the repository. And just going to say, hey, I want to have you install the impactual skills right into this current project. And after you have that installed, I want to kind of like refine this current project that we have here, right? This is basically the current version of our influencer. And I kind of wanted to do a audit. So I'm looking at the impeccable uh designing page. So there is the start, the iterate and the polish and also maintain right. So currently we already have the application already uh you know built right for the UI. So if I want to continue to refining it, want to improving it to you know to make it something that's like customized or unique then how can we do this right? I want you to point out point me to some skills that can basically help us to get there. So I'm just going to put it out there and let it generate a plan and try to see how we're going to do this. But essentially if you want to use impeccable right you can simply see like if you want to actually start like let's say if you have a context you have nothing to clone you can also using impeccable here to initialize it right so if you click on initialize it's going to set up a project here uh collecting the context where it starts right so it creates you the product MD design MD uh those kind of things but let's say if you're like in the middle of the project right like okay we already have the project built then you can also try to using iterate so once something already exists you want to iterate it you want to be able to build it with like multiple iterations You can also use iterate or you can also using polish here. uh so if they don't redesign they find what's left to fix and pull them at the uh narrow target right you can also do iterate as well like for example okay well first of all well um maybe iterate is for us when you know I kind of wanted to uh change up the color because current application here kind of similar to you know the CMC right so I wanted to kind of like change up the style here right maybe give us different variations right maybe like a little change a huge change or a kind of like a medium change here. So, giving a different variation here also uh also could help too as well. Okay, I'm just going to copy the link for that website and just going to paste it over to claude and just going to have it to also giving us different path here that we can choose. Okay, so right here you can see we have the impactable skill area is fully installed right and two things to know before we design it here. So, it rows the hook into the setting.local.json. Uh so, a detector runs after every edit or write on the UF files. So it basically just going to kind of like do like a cleanup I think I think. So after uh every time it writes a UI component it's just going to refining it. So you put me at the web 1.0 but that's the frozen CMC reference uh says that frozen. Okay. So why it looks like this? So this is an AI slab is actually deliberate. So you can see that the token here is you know actually similar to the CMC right the actual detector found that only three end pattern here. So your command here map to the impactable skills. So first of all this is exactly what I like to do here. Okay, so we're not the expert of impact rule obviously. I just ask it to see okay what skills should we use right into what we're trying to do right explain exactly hey install the skill uh based on the skill what are the things that we should run right what are skills we should trigger uh based on what are what are we trying to looking for right so you can see that I said there are three sides of change small like a retint like maybe changing up tokens like design tokens or design styles or colors right how it looks or maybe like a medium change like okay rechanging the skin or maybe there could be a large change like a new visual world like okay well once we open it it looks completely different right so how do we want to target this so which tree should the redesign land we're actually going to do this for the web 1.0 zero. So, uh you can just remove or in this case ignore the this this file right here because uh currently we we are not at that right now. Um that's basically if you don't know what it is that's just one of the lesson that I did on school. I basically mentioned like okay you can just using grill here to continue if you want to start new session but we don't have to worry about this one for now. Okay. So essentially that's basically our target is one web 1.0. And another thing that I want to talk about here at this point here is that because we're generating three different versions here, right? So I like I highly recommend just using work trees. Okay, because when we generating this like it will basically just modifying the same application. But if we were to have the skill here to be triggered and have them to be spit up multiple sub agent here like one agent per branch, then we can have a single change here live in this branch, a single change here live in another branch and another branch here. And this way we can have three different changes here are not in conflict because if you were to write it in the same folder then there's going to be conflict because one change is going to be small one change is going to be smidium one change could be large right but if you were to split it into different branches and you can think like three different folders here and each folder here is a replicate version of a current application and we're just going to have three different web application right small medium large change and at the end we're just going to have them spin up the applications run it and we're just going to have them to run on different port, right? So, you can see this one is running on 5175. That's the initial clone version and this one is like 5173 and that's the second version which is like after we embed it into our context. But now we're going to do here is we basically just going to have three more ports, right? Three more folders, three more projects here. And each project here is going to be just a smaller change or medium large change or just a large change based on whatever we have here. Okay, so that's exactly what we're trying to do is basically try to using git work here to basically creating different folder or different branches and try to have different agent here to work on it. Okay, so let's take a look at how we can do this. Okay, so this is what I would say. I highly recommend just because we're changing this for three different versions, right? So small, medium, and large change. And I want to actually have this to be uh forked into three different work trees. Each work tree here is going to be a uh a changes that's clone from the one the web 1.0 at the current moment right now. Okay, I want you to clone that and basically try to making that change. Okay, for each work tree and then after you done that, I want you to basically run this in different ports so that I can see exactly what they look like just for a backup. I want to also have a different version here like I want to have total four variations small, medium, large and another one here. The last one I want you to surprise me. Okay. So basically I want you to take a look at uh the entire application that currently we have how it functions and also you can also referencing the entire spec that we have right the entire uh decisions dumb defile initially is when we actually like try to grill on like exactly what we're trying to build you can also take a look at that on exactly we're trying to build okay so using that as a context having AI here to uh fill it in and then in terms of the skill here uh how big a change do you want to explore first so All three side by side. Uh yeah, I would say all three side by side, but because we also want to add one more here to just make it unique. Surprise me. Probably all four. Okay, so I'm just going to say that and just going to submit my answer here and just basically have claw here to building all four different versions here. Okay, so after we have claw here to building the entire four different variations, here is the entire links. So you can see it just created those links. Simply just copy them and just going to head over to the browser, paste it. You can see this is the first version. Okay, this is a small change. Okay, where we really did a very small change. So you can see really small change, right? So this is a work tree called small and here is literally all the changes we have. Okay, so if we click on one of them, you can see pretty much everything still stays similar. Okay, but it's just that we're changing the color, the theme of it. You can see the background color changed. Uh click on the call right here is what we have. Okay, uh and then we also have the version two. This one is a medium change. So here you can see that um pretty much it changed the typographies the lines the table now are looks quite different now okay so you can see it looks a bit different of this course we can also changing the background color the theme of it right that's no problem okay uh it pretty much changed the color of it right changing the entire typography okay so entire thing are all changed but the layouts the foundation are the same okay now here is the uh large change so this one is the I guess this one right here. Okay. So, I guess this one looks bit better. All right. Was the previous one I think uh was a kind of like Excel sheet kind of look for tables. And then uh I can also click into it and see what it looks like, right? I can see different colors of it. Obviously, I can use different color combos here to change it up. But, um you know, this is what it looks like, right? Signins. Uh change it to dark mode, right? This is what dark mode looks like. Yeah. Like overall it looks a lot better, right? U and then we also have a surprise me version. So this is the surprise me version of this. Uh I believe the surprise me version is 84. I'm going to go there. So yeah, this is the surprise version of this. So I guess this one has a bit more contrast. Uh so if I go to the dark, right? So it gives you a different look. And obviously I have also go ahead here and just generate a couple more because I didn't really like the style. Uh if you here you can see this is another style here that it generate for me. I kind of like that Excel kind of table look. So here's what that look like, right? And also just try to have it to uh kind of follow the similar typography. We can change up the color later, but at least you can see this is the typography what it looks like, right? We have the trending, we have the watch list. Uh I can also click into one of them. And here is what it looks like, right? So you know have a better design version of that. And we have portfolio stuff like this. And we have our requests timers, right? Uh there's another version here. You can see this looks a bit different. Okay, so this one uh will kind of still have that kind of look, table look, but this time you can see um it kind of have a different color. Okay, so at this point I think it's really important to kind of like choose exactly what kind of color you want and we can literally just go with that, right? Uh this is another one. I I think this one is kind of like feels kind of like a um a newspaper kind of thing. So if I click on one of them, you can see this what it looks like, right? And I can literally just click on individual stock symbol. Okay, so here's what it looks like. Okay, all all of them looks pretty good. I really like this one and this one. I think this really minimal, but uh you can kind of tell that like overall looks quite different now, right? So kind of like there's also green color of this. Okay, so depends on what your preference is. Uh we can literally make, you know, a better version of this. And also you can click on dark mode and see, okay, is it looks exactly like what we want. Uh maybe let's take a look at the yellow one. This is what the yellow one looks like. kind of looks like a Binance uh uh application, per se. Let me take a look at this one. So, this one, this the black one here kind of blends into the background. So, I would say all of them looks pretty good. Honestly, it's really hard to choose at this point. Uh it's kind of like choosing, you know, different apples here. Um so, I'll probably go with the yellow one this time. Okay? Cuz this cuz at least this doesn't conflict with the green color. So, kind of has that contrast there. So I'm going to copy that color or in this case the the link and just going to have it to keep the keep this one and delete the rest. Okay. So in that case I'm going to say hey I want to keep this one and delete the rest. So um and I want to merge this entire branch like this work tree onto the current main branch. And then for the rest of them we can just remove them. So I'm just going to uh commit this send it over and let claw here do the rest. All right. So finally we have claw here to complete it and basically dropping all the work trees and keeping just this version once we have that current version here up and running. Here is what it looks like. So here is what it is. Finally, what I want to talk about here is basically just do some final touches because obviously you can see that there's some parts of it that still shows kind of like a purple look, right? which is kind like out of our styles that basically tells me that there's some parts in these pages or this applications that basically hard- coding these styles, right? So, if you were to have a constant variables like okay, well, this is a part of the yellow cuz you can see that the color theme that we have for this application is yellow and black, right? Or this case yellow, black and white. So, if we were to see like purple, right, different color here, then we want to definitely basically try to have it to reference that constant variable color that we have. Okay, so let's say if we were tomorrow, let's say if we don't like yellow, we want to change that to be blue, green, whatever it is, we can actually have that to be referencing that variable. Now, luckily with AI, we can do this very easily. So, I'm going to go back and like for example like here, you can see this purple. What I can do here is I can be able to take a screenshot of it, right? And obviously for another example here, you can see if I click on this, right? Click on sign up, right? So, everything looks good. But if I click on this one, uh, click on the dark mode, you can see there's some parts of it that also has a different contrast. Like there's some button here I wasn't able to see. So, what I'm going to do here is I'm going to have Claw here fix it. Okay. I'm going to open a CL terminal session here. All right. And we're just going to have Claude here to basically figure this out and say, "Hey, based on the current application here, you can see like uh if we were to switch over to dark mode, I kind of want you to improve the contrast, improve the accessibilities." Okay? And also like you can see like some parts of it like shows a purple uh purple color like the follows, the purple lines, right? Obviously purple lines is fine, but like we just wanted to have like a consistent color. So since the our theme here is yellow and black uh we want to kind of change that and also for all the pages right if it's like going dark mode I kind of want you to improve okay improve the actual application look right so you can see like there's some parts of it some button here that are really bit hard to see like the return right if I were to disable that it kind of bit hard to see and for example uh if I were to click on like individual um uh stocks right for example if I click on individual stocks And the chart here is a bit hard to see for the lines. So I kind of want you to fix that. Okay? And maybe in the dark mode here, we can have yellow lines instead, right? So those kind of things I kind of want you to extract into kind of like constant variables, right? So that we can have uh so if we're changing the constant variable, if let's say today we don't like the color, we can kind of like changing the constant variable, it kind of changes the entire application so we don't have to hardcode those values. Okay? So kind of want you to focusing on that and try to look at each and every single pages. Spin out different sub agent here to look at different sub uh different different pages, right? Making sure that everything are good. Like for example, like the X button here, the the social accounts here you can see in dark mode I wasn't able to see. There's some parts of it like you can see the the postures, the pill I'm not able to see it clearly. So I want you to fix that and try to take a look at it and see how you can fix it. Okay? So spend some time and try to do that. So I'm just going to tell that to claude and just going to have claw here to fix that. All right. So finally you can see that we have claw here fixing all the maintenance work. So here is what it looks like. So now if I were to open the dashboard here, if I were to click on the creators and zoom out a bit more, you can see the line here is no longer purple. It's in yellow color, right? Everything's consistent throughout every single pages. And if I were to click on like a consensus here and just click on one of them, you can see everything's working as fine as it is, right? So everything's working as fine. I can see the color here, right? The text. There's a clear contrast of like the actual text. So, uh before some of those buttons here are kind of like blends into the background. So, we have claw here already fixed that which is pretty good. Okay. So, pretty much we have already everything are all fixed. Uh so, now we're going to do here is we're going to move on to next section. All right. So, at this point to summarize everything so far, so far we have done is basically try to build our own context, right? what we're trying to build using the grill me session and then we also take a look at how to take a clone version of any application right for example CMC and try to clone it okay once we clone it and you see that we have a folder which contains a clone version of that applications then what we did here is we're basically focusing on how we can combine the two combining the context on what we want the application to function and also the current clone version of the application here and exactly the entire UI style here into the first version right the version one of application. And then what we did so far here is we also using a skill called impeccable here to redesign the entire v1 so that it doesn't look exactly like CMC like a clone version of CMC uh or in this case like a knockoff version of CMC right we basically tried using like impeccable here to restyle this to redesign this we're not changing any foundation like layouts the pages they're all set right the context the states they're all set there's nothing's going to change the only thing that's going to change here is the color typographies maybe the way how it looks, right? The backgrounds, the animations or maybe like some shadows or stuff like that, right? Those are things that we'll try to restyle here. Okay. So, once we have finishing the restyling for the entire applications, we went from something that looks like a cloning, right? Kind of like a clone version of CMC now all the way to a restyle version of this. How can we to make it even better? How can we to take it one step further, right? Because what applications you're looking at nowadays, maybe it could be just another CMC dashboard, right? Well, the way how we can do this is we're going to take this into a next level by simply just going to start to animate it, start to make it like so that it actually moving, right? Like it's alive like the website here is alive. Okay, it's not like okay well just a static data. It's going to be having moving stuff moving around so that as user scrolling it will sees you know it will it be be a really visualized uh website right and a really good example of this is like apple.com right if you look take a look at the apple.com's landing page uh for a product you can see like if I scroll down the MacBook start open right okay there's like a video started playing okay and then it kind of blends into the background here and scrolling down there's some stuff popping out and then scrolling down bit more Okay. So, we have the uh laptop here start twisting, right? Showing different specs and we also have like to-dos all those kind of things, right? Kind of like having this really cool scrolling effects, right? As user scrolls, it kind of feels really visual, right? Oh, okay. Well, this is this is like really different. Okay. Okay. Well, we have this, we have that, right? We have some video here playing in the background. We have some animation showing, right? how we can be able to make our website here really alive rather than just some boring stats here showing here. So that's exactly what I want to talk about in the section here is how we can be able to make that happen. And the way how we're going to do this here is we're actually going to use a platform called Hakesfield.ai. And this platform here if you know anything about like AI content generations you can actually have AI here generating any images and literally turn that videos into exactly kind of like the moving animation that we just saw. So in that case the first thing first going to do here is to navigate to hixo.ai AI and simply we're just going to click on the MCP and COI section. So you can see that there's the MCP and COI section and through that you can see that we have different AI agents right you can use claw GBT openclaw anything but for our case here we're going to using claw code and you can see that we have a block of text we can copy here that we can pass to claw code and basically try to install it and setting up the skills. Now you can see that it does two things for the block here. So first of all it tried to install the CLI and try to authenticate it. Then eventually here we're just going to install the skill so that it teaches claude on how to using Hfield to generating the content that we want. Okay. So we're just going to first of all let's let's try to have it to install this and we're just going to go from here. Okay. So once we have that installed first of all what we're going to do here is we're just going to run the ooth. So if we were copy this including the exclamation mark we're just going to paste that to cloud or we can also do that in the in terminal. So if you do this in exponential mark you can see that it's going to actually run this command in the terminal. Okay. So if I were to enter this uh you can see that we have navigated to Hfield. All we have to do here is we're going to sign in to Hixfield with my account. All right. So once we have HIfield here fully authenticated you can see that if we scroll up a bit more these are things that we can do right. We can ask Hickfield here to generating images using GBT image 2. We can using it to making videos using Cense 2.0 but also of course using the Cense 2.5. There's also a Photoshops, thumbnails, brand kits, and so much more. Now, to get started, the first thing first going to do here is we're going to use a skill that I created called the animated website skill that's going to turn our entire website here into animations. So, simply we're just going to creating some images here and using Hixfield. And then we're just going to have it to generate some videos, converting that video into animations. So, we can embed it somewhere here for our call to action, right? Imagine we can have this uh stay at the bottom here or maybe at the top or somewhere that you know user can learn about you know what this application does by having like a call to action here so that you know user can actually be able to create the account and start converting right so essentially what we're going to do here is we're just going to have that skill to be uh added in into our application simply we're just going to drag that skill into the skills folder in the agents I'm just going to say hey can you help me to uh make sure that this skill here is fully installed right make sure that is added in into our agents andclaw folder please. So in this case I'm going to send this in and have it to basically just save this skill here so that we can actually use it. So let's take a look at how we can be to add this. So because we already have the data here, right? Maybe we're going to adding like a about page or like maybe a homepage some sort that you know we can be with having this scroll animation, right? So, we're going to create that later, but right now, what we're going to do here is we're just going to focusing on how we can be able to actually generate a video inside of our Hfield. Now, at this point here, I highly recommend just getting some inspirations like look at some trillers, right? Some applications that have a really nice, you know, videos, right? Depends on the product you're trying to build. For my case here, you can see is mostly for stocks. And what I realized here is that this platform here is really for people who telling you what to buy, right? It's kind of like, okay, well, we have different influencers who tell you, okay, well, this is when to buy, when to sell kind of thing. So, it's [clears throat] kind of like really directed by the influencers that we have. So, I saw a really nice trailer here, okay, from you know, Hicksfield, uh, you know, website. So, you can see the Cance 2.5 community. I like this one. Now, I'm going to play this one more time and I'll tell you what I think. So, it's going to be like, you know, starting from here where where someone taps and then maybe turns green for the arrow and then, you know, turns down for red, right? And then spinning around and having multiple different uh charts flowing, right? Or it could be a coin, right? So, coin going up or going down kind of thing. So, in this case, you can see this is like a really nice video. Uh but obviously, I can be able to save this video here, right, into somewhere. So, I'm going to save this video and I'm going to pass this video here into Claude and have Claude here to analyze frame by frame and combining that with our context and try to see if we can be able to mimics something like that. Creating a prompt and calling Hickfield CLI here using Cense 21.5 and generate that. So, in this case, we're just going to go ahead and do that. Um, I'm just going to head over back to my CL code session. Now, for some reason, Colo here is not able to work because you can see it gives me like a 529 uh while I'm filming this video. So, for the remaining of this video here, I'm actually going to switch over to using codeex here. Now, if you don't have codeex, that's completely fine. You can also stick to clock code, but essentially codeex is similar to clock code, but it's using GBT models, right? So, that's the thing is like sometimes the model here like your AI agent here is not working because the model here somehow the server here times out. Maybe we can using like a different coding agent here just for backups. So here you can see I have open my codeex and I'm just going to open a project. So this is the project that we have influencer and we're just going to open this pencil icon to create a conversation. So we already have a skill called the animated website, right? That we're going to save that in the later and we also have a skill for the hixel skill which you can see here, right? These are all things we have. So essentially what I'm going to do here is I'm going to first have it to analyze that video which if I were to open the video here, this is what it looks like, right? So you can see it kind of has a sound and it kind of have like this kind of thing, right? So we're just going to add this video into the current directory that we have. Okay. So once we have that video here, I'm just going to copy the path of the video and just going to have it to analyze frame by frame. So in this case, I'm going to paste the file path and we're going to say, hey, I want you to take a look at this video. I want you to look at frame by frame. So essentially, I want you to uh analyze each frame like what's going on, right? What happened here? And I want you to kind of put this right into this uh folder right here. I'm just going to create that. It's called the frames. You can basically uh digest or in this case break that frames down into different uh images, analyze it and eventually create me a MD file that we can put in the frames in the folder to tell me exactly what happens in each frames. Okay. So in this case, we're just going to have claw here too or in this case codeex and try to analyze this entire videos to show me exactly what happened. Okay. So once we have GBT here generate a response which you can see that after we have you know prompted and here you can see this on the right we have the entire folder which contains all the images that it has break from that video and as well as the MD file which analyze all the frames. So you can see that for each frames this is the events and here you can see the first hand approach the touch. So honestly we can literally take this right kind of be like okay well we can literally take everything that we have break this entire video down and convert it something to ours right so that's exactly what we're going to do now is we're just going to say no okay so now you know exactly what each frame does in a video and we break that frames now we're going to do here is we're basically just going to take a look see okay how we can be able to adding our own stuff into it right because if you take a look at our application in the web folder what we have in our application here is influencer right it's basically like a application here that you know influencer tells audience what to buy and what to sell and we keep track of that so we kind of want a similar effects right where okay we can have like a coin right maybe like a golden coin u or some somehow maybe like a dollar coin or something or it could be like the actual dollar and it touches it goes you know it goes like there's an arrow key that goes up um and makes more money [snorts] And then if I were like the coin start to stack up more maybe like uh one coin turn into three or five and then if user tap again right kind of like that's exactly what happened in the video uh then we will basically just have it to um you know kind of like go through uh turn it down right turn less right and also we can spin it around and having having so many other uh coins here are all kind of like showing right different coins and try to basically see how we can be able to actually change this before actually going to generate this similar type of video and also similar type of sound. Okay, so I want you to kind of do that and help me out here. Okay, so I'm just going to send it over here and obviously I'm just blasting kind of my thoughts to codeex and we just have codeex here to basically give me thumb thoughts or in this case directions or creativeness for what we're trying to build. So here you can see we have three different versions. I ask it to generate three different versions and each of them with less than 100 words. So you can see that we have black and yellow coin floats and finger taps. Uh you can see that the green arrow draws upwards. Okay. So coins are start to stacking up and second tap here you can see arrows start to go down. Uh maybe like stack uh contracts. So like 5 31 right down like for example 11%. I don't know but like five different um outcomes find out right. So it can be like different outcomes here. Everything collapsed into one uh influencer coin, right? I don't know. Like basically could be like just one single platform or single app or whatever. Uh tracks the call see the return, right? That could be a really good one. Okay. I like this one. There's the creator war. Okay. So creators buy call out touches. Uh dollar becomes a growing coin stack. Okay. And then four more creator here coin appear. And each stack grows, shrinks, or stays flat with a distinct uh distinct clinks. And stack arranged from the best to worst. Okay, so that could be another one here. But you can see like we pretty much have three different versions. And what I'm going to do here is I like them. So I'm just going to go ahead and try to generate all three of them. So I'm going to now trigger a skill. Okay. So this time we're going to call the hixo generates. And you can see that it's going to generate images, videos, 3D assets, and so much more. Now, first of all, I'm actually going to take this one step at a time and basically have it to generate the images for each solution. So, I'm going to click on Hixfield Generates. And what I'm going to do is this. I'm going to say, "Hey, I want you to generate the entire sequence, maybe like a character sheet, like six uh 2x3, right? Kind of like a six frames where okay, it shows exactly what each frame look like, right? So, kind of like a rough idea, kind of like a sketch, right? So for each and every single solution ABC I want you to do that so that I can be able to easily visualize that. Okay. So help me to generate that. Show me exactly looks like and for each ABC I want you to generate two versions right two variations so that I can be able to pick the right one here. Okay. So in this case we're just going to send it over and have it to generate. So obviously the reason why we generate images first is because we want to kind of like get a rough idea right because if you take a look at the model like cense 2.5 it cost like 45 credits here to generate roughly around like 5 seconds or even worse like if you were to generate like 30 second video that's going to be 270 credits okay it's quite expensive but if we're generating images like using GPT image 2 or using anything and you [clears throat] can see the model here roughly cost around four credits each right if I were to switch over to even like GBT image too. You can see it only cost like 14 credits for just one image. So that's the thing is that we should be able to just focusing on generating the entire sketch, the entire story, right? Take a look at what each frame look like, right? Rough idea before we're actually going to generate the video. Okay. So once we have the image generated here, you can see this is the first one exactly we want. So you can see that this is the roughly around time where kind of like the long coin here kind of float or sorry the lone coin here floats drift up and down kind of thing. And then once a finger uh kind of like clicks and or in this case the fingertip taps the coin then it kind of symbolized that it's a buy, right? I'm just going to go back to the uh this one. Yeah. So you [clears throat] can see it generates a different version here. So it taps. Okay. So then it started go up and then we kind of grow the stack and it taps it go kind of goes down, right? So and then just kind of like uh track the call, see all the returns. So it's kind of like F out kind of thing. So that's kind of like really cool, right? So we kind of want this kind of thing, right? So this is exactly what we want. Very similar, but like you get an idea, right? This is kind of like a sketch, like a rough idea. Uh we also have like some different ones. You can see like, okay, we have our coin and we have buy and hold and then different person here. This one I feel like is kind of getting over complicated. Um but we can still generate one uh if we have enough credits. And then we have a call receipt. So buy and then start grow and then start to has different things. So every call here measured. So again I feel like we should just focusing on the first one because that one is the easiest. So I'm going to say okay. So I like the editorial sketch. Okay. So I wanted to have very similar to this and basically I want you to using the Hixfield generates right and just try to generate a video with this. Okay. This time I want to use the seed ends 2.5 and I want you to generate maybe like roughly around 15 right to 20 seconds video similar to the video that I gave you initially and I want you to generate like exact version of that and using the A2 kind of like the sketch version. So instead of like using that kind of background but I want kind of using a sketch version kind of like that. So if you can also generate that that would be really cool. So um and also make sure to have sounds right every tabs or every kind of like animations right similar to that video and when we f out we want to make sure that okay well we have like different different um you know clicks all those kind of things so want you to actually start to generate three version of this right using cdense 2.5 with the uh 1080p uh for the resolution okay so in this case I'm going to send over to Hixfield or in this case uh codeex and just going to have it to using that skill and generate some video here. Okay, so we're just going to have it to generate video because I it seems like this one looks pretty good. Okay, so finally you can see that we have the Hixfield video here fully generated for all four different versions. And let's take a look at what each looks like. So this one is the right in the center and you click it, it kind of grows and then kind of gives like a really nice touch there for the coin which I really like. And obviously I don't really like this part because those avatars isn't really relevant to the famous people. Like did nobody know those avatars, right? It's kind of like just generate some random avatars which doesn't really feel really customized. So I'll probably just stop it like honestly like right here which I think is really good like coin middle right second 10. Um and that's probably where I'll start or in this case end. And then same thing for the rest of them too for the avatar it generates. it wasn't really relevant to the actual applications or in this case those those influencers doesn't really you know not not really famous right or in this case the unknown or anom anominous like kind of like a free stock images for those images so probably want to avoid that uh so here you can see this is another version kind of gives you a you know 360 look of the coin right and then here it goes down these ones is okay but you can see the Instagram one here got one but overall you can see it's pretty good Right. Honestly, the output that it generates which is pretty good. And now we're going to do here is we're going to adding this entire video and converting that into a scrolling animation so that we can embed it into our application. Right? So we're going to have our homepage for the application or in this case about page and basically try to have this as kind of like okay what it is right. We also have a last one here. So this one is very similar to the previous one and you can see that it kind of grows the stack tabs and it will start to go down. Uh and then you can see we have different avatars shown here. Okay. So I'll probably say like stop it at second 9 or 10 right for each of them. Uh ju just so before it kind of like you know stop it. So I'll probably just copy the file path here and just going to go to like GPT. Okay. I'm just going to open a new thread say that hey for those videos that we have all four videos I want us to for the version one I kind of want to stop it at around second 10. Okay so second 10 or 9 right before where it start to shows the avatars I want to remove that and I also want you to do that for all four videos here. Can you help me to cut that uh so that you know we can be able to trim it down a bit more. Only want to show the ones that are good for version two here. Like I said before, I kind of like shift it to the to the left, right? Um I kind of wanted to, you know, stop it right there, right? Um and then also for version three as well. Okay, help me to do that and let me know once it's all done. Okay, so in this case, we're going to send it over and just have codecs here to basically trim this video here before we actually go into using the skill and try to convert that into a about or in this case a scrolling animation page here. All right. So, once we have the trim version for each of them, you can see that it trims to this part right here. Same thing for this one. It kind of trims down to this part uh right over here, right? And everything are trimmed. I'll probably going to start with the first one because this one, the coin here, or in this case, the money sign is big, right? In this case, is a really good start. So, I'm going to use that. So, what I'm going to do here is I'm going to head over to my codeex. I'm going to open a brand new one. I'm going to trigger the skill called the animate websites. and it turns any MP4, which is the one that we generate, into a premium scrolling driven website. So, in this case, we're going to tap this skill. And I'm just going to copy the file path for the first one. And I'm going to paste the path right here. And we're just going to have it to generate. Now, I'm not going to have it to generate a brand new HTML for this. I'm actually going to have it to generate on top of our current application. So, I'm going to copy the link for this, and we're just going to paste it here. This is going to be the place where we're actually going to generate a new page. So I want you to generate a new page for this, okay? Inside of this application and basically trigger the skill here to design the whole thing. Okay? So want you to do that and then basically you can change out the layout. It doesn't have to be the same layout as what we have now. But it's going to be another page like a slashabout page. And I want you to kind of like convert that from here. Okay. So we're just going to give that a prompt and have codeex here using the skill that I built and basically just building a complete animated version of that video into an about page. All right. So finally you can see that we have the full website here. It's fully generated and I can always go back to the ranking. This is what we have in the ranking and go back. You can see the slashabout page. Here is what it looks like. So here you can see we have our text on the left and we also have our animation. Scrolling down here, you can see we have our finger here and then the text started changing and you can see that we have our scrolling animation. We can pause it anywhere we want. And of course, these are some texts, right? So, as we scrolling down here, uh there's also the about section about what this application does, right? So, some screenshots of where you know what those application are, right? What what are the use case of applications and it's scrolling a bit more. You can see that we kind of like have this tablet look of the application, right? So, here is the dashboard, the chart, the creators, the ticker symbol page, right? And the consensus, right? just give you like an overview of like what this application does. So it's kind of like a about page here, right? So let's say someone lands on this page, they want to know exactly what this application does, then this applica then this page here is actually the right one for this, right? I also have generated different versions of the text, right? So it doesn't have to be just that specific text. I ask it, you know, basically the context that we built initially. We just have it to feed it in and just going to choose the right words here for that, right? So you can see that this is what it looks like. very similar but just the type text and the typography the color here changed a bit more. Uh we also have a version two that's going to be shifted on the right. Um and then you can see as we scroll down here we have different texts. Okay. And then we have the call to action I guess. And then uh furthermore you can see these are the things we have the tablets. Right. So those are the things we have here. Okay. I'm just going to choose the right one. But hopefully I think we're probably stick with either V1 or just the about section or in this case this this version that we have right here. So those are really good. Like honestly, you know, you can see that we can be able to make it even better here with the version, right? This is the landing page. Click here. This is the actual uh dashboard and we can click into different pages, right? Click into the actual creators, see exactly what's going on. Click into the ticker symbol here to see the entire charts. We can add a comment. We can be able to click on bullish bearish sign in right we can be to click on sign up right those are all the things that we can do so now you can see we have the entire UI application here is fully built right so all the functionalities as well as the actual uh landing page we have that fully built which you can see here okay looks really awesome and that's pretty much it for this video okay so last part we're going to do here is we're just going to stick with this uh current version that we have so I'm just going to scroll down here I'm going to say hey I want you to take a look at the current version here I want you to basically remove v1 v2 and keep the current version and commit it and push it. Okay, so I'm just going to make sure that everything's all done before we're actually going to wrap it up. And if you want to see the full codebase on how I built this entire thing, I'll make sure to put this in our school community here so that you can actually get it. Okay, so inside our school community for the map pog skills, I actually have another page or another lesson which I'll basically keep all the resource that I talk about in this video inside of it. So you can actually download this entire codebase, replicate it, and basically just do whatever you want with it. Okay, so that's pretty much it for this video. All right, so the next part we're going to do here is we're going to try to see how we can deploy this entire applications onto our actual website, right? So how can we deploy this entire application here onto somewhere so that anyone else can can be able to access it. Now, obviously, like I said before, this application here doesn't have any database or backend. We're going to build this in a nest series of videos, but for this video specifically, we're just going to show you exactly how you can deploy it, right? So that you and your friends here can actually go see it. So in this case, what we're going to do here is we're just going to head over to a play platform called Cloudflare. And essentially what this platform does is it can help you to deploy anything for free, right? So in this case, we're just not using Versel, we're not using GitHub because it requires you to have a public repository. We're just going to using Cloudflare here for free. Now essentially what we can do here is that you're just going to create the accounts, right? Right. So, click on login and simply we're just going to create account for this. And then once we create the account right here, you can see this is our account. The next thing we're going to do here is we're just going to uh run this command right inside our terminal. So, what we're going to do here is I'm going to open my claw code or in this case my terminal. And I'm just going to run this and we're going to say yes. And then we're just going to authorize it. And here you can see we're pretty much authorized and grant to the regular. Now, regular just their CLI so that it can be able to have AI agent here. It's using the CLI to control our Cloudflare account. So, next we're going to do here is we're just going to run this command right here uh codeex and run this. So, you can see mpm uh web run build and everything else. Cloudflare is going to give you a URL, right? So, what we're going to do here is we're going to say, hey, I have completed step two. Why don't you go ahead here and do the step three, step four, and deploy this application here for me and let me know once this everything's done. Okay? Okay. So, we're just going to say that. Let me see what it does here. All right. So, just like this, you can see that we have the full deployment here is fully complete. So, if I were to copy the URL and come to a website, I'm just going to paste the URL here. You can see that we have our entire app. Now, if I were to change the route here to slashabout, uh you can see that we have our entire website, right? So, all the assets here, the images are all shown here. Can see this. These are the images of our screenshot for the applications, right? And I can also close it. Uh I can also click on any anywhere in the application here everything are all working fine. Uh and here if I will scroll minimize it you can see this this is the entire charts right. So the portfolios follow right. So kind of like their calls. Um we can see everything. Okay. So that's pretty good. And honestly so far this is really good so far. So we have everything are all fully built and honestly this link here we can actually share this to anyone and anyone can see it. Okay, so that's pretty much it for this video. Honestly, in this video, we went over exactly how we can collecting our context and how we can using our context along with things like a clone version of any applications that you find that you find inspired from and just try to create a version one of our application. Right? So version one of our application and once we have that then we also talk about how we can be able to take the version one of application here and try to make it even better by adding things like using impeccables, right? giving different taste like kind of like we call it restyled our entire applications. Once we restyle that. Okay. Then what we did here is we basically uh gone over here and tried to creating any videos, right? Try to create this into like a scrolling animation using Hfield Cense 2.5. So scroll uh animation websites, right? We can actually create something like this. So all this entire process here, you can see this is how you can be with creating a really nice UI with AI. And I hope that this entire 1hour course here can help you to actually build out this entire any applications the entire UI of it from zero all the way to the finish right like what you just saw right so hopefully this will really helpful and of course there's additional resource if you want to get the full application codebase you can check out in our school community here where you can find it and I'll make sure to put this entire video resource into our school community so you can check it out and be able to follow along if you have okay so pretty much that's it for this video hopefully that helps and if you do found this video please make sure to like this video, consider subscribing for more content like this.

Generated algorithmically for Search Engine Indexing.

Summarize Another Video