<b>Welcome back to the series where I show</b>

<b>you how to use coding</b>

<b>agents like Claude Code</b>

<b>to build real world applications that</b>

<b>include everything from user</b>

<b>authentication to payment</b>

<b>processing. So in this video I really</b>

<b>want to focus on planning and</b>

<b>implementing new features,</b>

<b>and this seems to be a real pain point</b>

<b>for people using coding</b>

<b>agents. So much so that</b>

<b>workflows like Speckit, OpenSpec, and</b>

<b>BMAD Method were created</b>

<b>to try and assist developers</b>

<b>with these challenges. Now Speckit and</b>

<b>OpenSpec are very similar.</b>

<b>They focus very much on the</b>

<b>implementation side of things. So you</b>

<b>give it a high level</b>

<b>description of what you're trying to</b>

<b>implement, and these workflows will guide</b>

<b>you through the process</b>

<b>of planning the changes</b>

<b>and creating detailed implementation</b>

<b>plans, where the BMAD</b>

<b>Method is a bit more involved.</b>

<b>Yes, it can assist with the</b>

<b>implementation side of things, but I</b>

<b>think the real power of the BMAD</b>

<b>Method is planning everything before the</b>

<b>implementation step.</b>

<b>So it gives you all of</b>

<b>these different tools and agents to help</b>

<b>you brainstorm your</b>

<b>product idea. Now the real</b>

<b>question is, do you have to use any of</b>

<b>these frameworks? And the</b>

<b>short answer is no. Depending</b>

<b>on your project, these might be overkill.</b>

<b>You could end up</b>

<b>spending a lot of time planning</b>

<b>and discussing your requirements with</b>

<b>these agents, and the end result could</b>

<b>look exactly the same</b>

<b>as when you one-prompted the agent. So in</b>

<b>this video, I'll show</b>

<b>you a very simple workflow</b>

<b>that you can implement yourself. But if</b>

<b>you would like to learn how to use</b>

<b>something like Speckit</b>

<b>in your own projects, then check out my</b>

<b>dedicated masterclass, which</b>

<b>I'll link to in the description.</b>

<b>Right, so at the moment, we've got this</b>

<b>border plate project. We</b>

<b>want to replace all of this</b>

<b>with our own application. And as a</b>

<b>reminder, what we're trying to build is a</b>

<b>SaaS app where users</b>

<b>can upload images of themselves or their</b>

<b>family and friends or even</b>

<b>their pets, and we'll use an</b>

<b>AI model to create classified versions of</b>

<b>the subjects in those</b>

<b>images. And users will have to</b>

<b>purchase credits in order to use our</b>

<b>application. So what I like</b>

<b>to do is to break all of these</b>

<b>challenges down into simple components or</b>

<b>features. If we try to tell</b>

<b>the agent to just implement all</b>

<b>of the stuff immediately, we're going to</b>

<b>run into a lot of issues and</b>

<b>most likely lose control of our</b>

<b>application. So instead of telling it to</b>

<b>go and build the UI and</b>

<b>also build the authentication</b>

<b>system and implement the payment</b>

<b>processing, we'll break the solution down</b>

<b>into its simplest components.</b>

<b>Now this is a personal choice, but I like</b>

<b>to start with the UI and</b>

<b>none of the backend logic. This</b>

<b>means we can easily prototype what the</b>

<b>user experience would look</b>

<b>like. And only once we're</b>

<b>happy with the UI components, will we</b>

<b>start working on the backend</b>

<b>functionality. So let's say then</b>

<b>that building the UI is our very first</b>

<b>feature. So back in our project, let's</b>

<b>start up Claude Code</b>

<b>and then let's press shift and tap to go</b>

<b>into planning mode. All</b>

<b>right, so let's use the AI to</b>

<b>plan out these changes. Hey, please</b>

<b>create a detailed</b>

<b>implementation plan for the following.</b>

<b>At the moment, we have a border plate</b>

<b>project, but what we actually want to do</b>

<b>is replace it with an</b>

<b>actual SaaS application that allows users</b>

<b>to upload images of</b>

<b>themselves, their friends,</b>

<b>their family, or even their pets. This</b>

<b>app will then use an AI</b>

<b>model to convert the subject's</b>

<b>inner images to plushies. This means that</b>

<b>our app needs to have a</b>

<b>beautiful landing page where it</b>

<b>shows the user the end result so we could</b>

<b>show a before and after</b>

<b>image and some SEO optimized text</b>

<b>to promote the product. Users should also</b>

<b>be able to sign into the</b>

<b>application and from the dashboard</b>

<b>they should be able to generate images.</b>

<b>These images will be stored</b>

<b>to their gallery. This app</b>

<b>should also have public facing</b>

<b>documentation on using the application</b>

<b>along with all the legal</b>

<b>documents like the privacy pages, etc.</b>

<b>Now at this stage, I do not want to focus</b>

<b>on the backend logic.</b>

<b>We're only focusing on the UI components</b>

<b>and nothing else. This</b>

<b>will give us a feel for the</b>

<b>user experience before moving on to</b>

<b>adding the actual backend</b>

<b>logic. Please remember to ask any</b>

<b>clarifying questions during this process.</b>

<b>Alright, so I think that's</b>

<b>good enough. Let's actually</b>

<b>send this. So I'll actually scroll up. So</b>

<b>if you wanted to pause the</b>

<b>video and have a look at this</b>

<b>prompt, you're more than welcome to do</b>

<b>so. It's how to look at our</b>

<b>requirements and it's asking us</b>

<b>clarifying questions and even providing</b>

<b>possible solutions. So it's</b>

<b>saying what design style and</b>

<b>tone should the landing page convey?</b>

<b>Payful and fun, modern and clean, warm</b>

<b>and family friendly.</b>

<b>Let's go with option one. What features</b>

<b>should the image gallery have?</b>

<b>I'll just go with option one.</b>

<b>Which legal and documentation pages are</b>

<b>needed? I'll just go with</b>

<b>option three. Should the landing</b>

<b>page include pricing and plan</b>

<b>information? Now this is a really good</b>

<b>question. In my requirements,</b>

<b>I forgot to ask plotcode to create a</b>

<b>separate page for pricing. So I'm going</b>

<b>to go to option three</b>

<b>and say create a dedicated pricing page</b>

<b>with three different</b>

<b>packages. So basic package,</b>

<b>a pro package and an elite package. How</b>

<b>does Apple work? Is that</b>

<b>users will purchase credits.</b>

<b>So maybe the basic package could give the</b>

<b>user 30 credits. The pro</b>

<b>package will give them 100</b>

<b>credits and the elite page will give them</b>

<b>200 credits. And the</b>

<b>pricing for these different</b>

<b>packages are $9 for the basic package,</b>

<b>$19 for the pro package and</b>

<b>$29 for the elite package.</b>

<b>And then let's send this. All right, so</b>

<b>then we can just submit all</b>

<b>of these answers. Now what's</b>

<b>really cool is if you realize that you</b>

<b>actually forgot something</b>

<b>else, you can go ahead and send</b>

<b>that message to plotcode in the meantime.</b>

<b>So I'll just add something</b>

<b>like, all right, I forgot to</b>

<b>mention that because we currently have a</b>

<b>boilerplate project, I need</b>

<b>you to remove any pages and</b>

<b>components in this boilerplate project</b>

<b>that's not a part of our</b>

<b>actual app. And also I forgot to</b>

<b>mention that since we're not using real</b>

<b>data, you can simply simulate</b>

<b>a scenario where the user is</b>

<b>currently signed in and you can just use</b>

<b>mock data. Okay, cool. So Claude just</b>

<b>finished and let's have</b>

<b>a look at this implementation plan. And I</b>

<b>will definitely recommend</b>

<b>going through this plan in</b>

<b>detail and then ask plotcode to make any</b>

<b>changes to the implementation</b>

<b>plan. So for phase one, it's</b>

<b>going to remove all of the boilerplate</b>

<b>stuff, which is great. All right, so for</b>

<b>phase two, it's going</b>

<b>to update the project metadata and the</b>

<b>styling. For phase three,</b>

<b>it's going to create a landing</b>

<b>page. For phase four, it's going to</b>

<b>create the pricing page, etc. All right,</b>

<b>so I just went through</b>

<b>the implementation plan and I'm happy to</b>

<b>proceed. Now at this point, we could</b>

<b>simply say, yes, code,</b>

<b>implement this, but I would advise</b>

<b>against that. So instead, let's say no.</b>

<b>If we type front slash</b>

<b>and context, we can see our current token</b>

<b>usage. So let's just scroll</b>

<b>up. And here we can see that</b>

<b>we've almost used 50% of this context</b>

<b>window. Now this is critical irrespective</b>

<b>of what coding agent</b>

<b>you use. Each and every agent will have</b>

<b>some sort of context window</b>

<b>limit. For Claude code, that's</b>

<b>200,000 tokens, but you really don't want</b>

<b>to get anywhere close to</b>

<b>this limit. I would argue that</b>

<b>after about 60%, the quality of the</b>

<b>output starts to degrade. So</b>

<b>the goal is really to keep this</b>

<b>context window as lean as possible. And</b>

<b>that means implementing one</b>

<b>small change and then starting a</b>

<b>new conversation. But of course, at this</b>

<b>point, we can't start a new</b>

<b>conversation, we're going to lose</b>

<b>our implementation plan. One alternative</b>

<b>is that you could try to compact or</b>

<b>summarize the conversation.</b>

<b>But again, we're going to lose a lot of</b>

<b>this important context.</b>

<b>And at a very high level,</b>

<b>this is a problem that spec kit and B mat</b>

<b>tries to solve those</b>

<b>frameworks, like all the work that was</b>

<b>done up to now, and then stores that</b>

<b>information in separate files in our</b>

<b>project. So it could take</b>

<b>our initial requirements, along with some</b>

<b>other important</b>

<b>information that was discussed in the</b>

<b>conversation and then store that in a</b>

<b>requirements file, it will</b>

<b>also install that massive</b>

<b>implementation plan in its own file as</b>

<b>well. And those</b>

<b>implementation plans are then split up into</b>

<b>phases. And each phase contains an</b>

<b>actionable list of tasks that need to be</b>

<b>completed. This means as</b>

<b>we're completing tasks, we can mark them</b>

<b>as complete in the implementation plan.</b>

<b>This means we can ask</b>

<b>Claude code to go and implement phase one</b>

<b>only. And then once phase one is</b>

<b>complete, we can start</b>

<b>a new conversation to clear up the</b>

<b>context window, and then ask Claude code</b>

<b>to move on to phase two.</b>

<b>All right, so without using spec kit or B</b>

<b>mat, how do we implement this</b>

<b>ourselves? Well, it's really</b>

<b>easy. We already have our implementation</b>

<b>plan. So what we can do</b>

<b>next is create a new folder,</b>

<b>and we can call this specs. So this</b>

<b>little folder over here. Now I</b>

<b>do want to mention that at the</b>

<b>moment we're still in the main branch,</b>

<b>which means if we had to</b>

<b>push any of these changes,</b>

<b>it will affect our production</b>

<b>environment. So a safer convention is</b>

<b>actually to create a new</b>

<b>branch. So maybe something like create</b>

<b>UI, and then build and test</b>

<b>your changes in this branch</b>

<b>before merging the changes with our</b>

<b>production branch. But because this</b>

<b>project is still very</b>

<b>much in development, I'll just push</b>

<b>directly to the main branch.</b>

<b>All right, so now that we have</b>

<b>our specs folder, what we can do is</b>

<b>change over to change mode, and we can</b>

<b>say, please create a</b>

<b>sub folder in the specs folder for this</b>

<b>specific feature within</b>

<b>a folder create two files</b>

<b>requirements.md and implementation</b>

<b>plan.md. The requirements</b>

<b>file should contain our initial</b>

<b>requirements with any other functional</b>

<b>and non functional</b>

<b>requirements, as well as acceptance</b>

<b>criteria. For the implementation plan, I</b>

<b>need you to create a</b>

<b>detailed implementation plan</b>

<b>that is split into separate phases. Each</b>

<b>phase should contain an</b>

<b>actionable list of tasks with</b>

<b>checkboxes so that we can track our</b>

<b>progress. At this stage, do not include</b>

<b>any unit or end to end</b>

<b>testing. Right again, you're welcome to</b>

<b>pause the screen if you</b>

<b>want to read all of this,</b>

<b>but I'm just going to say go. All right,</b>

<b>so our agent created the</b>

<b>sub folder called PlushifyUI,</b>

<b>and within that folder, we have an</b>

<b>implementation plan and this requirements</b>

<b>document. Let's actually</b>

<b>have a brief look at these. Right in</b>

<b>requirements, we get this project</b>

<b>overview, and the scope is</b>

<b>correct. We're only focusing on UI and</b>

<b>UX, and we've got our initial</b>

<b>requirements, etc. So this</b>

<b>is really useful. It's a great way to</b>

<b>remind the agent of what we're</b>

<b>trying to achieve during this</b>

<b>implementation. Let's also have a look at</b>

<b>our implementation</b>

<b>planning. And yes, we've got our</b>

<b>implementation plan, along with these</b>

<b>tasks that have these little</b>

<b>checkboxes. And we'll actually</b>

<b>get the agent to mark these as complete</b>

<b>as it's making changes. Of</b>

<b>course, we've got phase two,</b>

<b>and whatever else. I mean, just look at</b>

<b>how detailed this file is. And by the</b>

<b>way, if we had to have a</b>

<b>look at our context window in Claude</b>

<b>code, we're already sitting at</b>

<b>56%. So if we try to implement</b>

<b>all of this as part of a single</b>

<b>execution, we would</b>

<b>definitely be in very big trouble.</b>

<b>Now before we move on to implementing</b>

<b>this feature, I do want to</b>

<b>show you one really cool tip.</b>

<b>The next time you implement a new</b>

<b>feature, you don't have to</b>

<b>give all of those instructions</b>

<b>on creating that sub folder and the</b>

<b>implementation plan. I've</b>

<b>already created a command for you.</b>

<b>So in the Claude folder under commands, I</b>

<b>created this create feature</b>

<b>command. And this is the same</b>

<b>as the command that we provided earlier.</b>

<b>It's just that the next</b>

<b>time you plan a change,</b>

<b>all you have to do is enter front slash</b>

<b>and select create</b>

<b>feature. Either way, I'm going to</b>

<b>clear the chat. And now we should have a</b>

<b>clean context window. And</b>

<b>this reminds me our MCP tools</b>

<b>are taking up a lot of space. So by</b>

<b>default, I've included a few</b>

<b>MCP servers in this project.</b>

<b>And you don't have to use these, by the</b>

<b>way, we have contact</b>

<b>seven, we've got playwright,</b>

<b>and we've got chat cn. So to free up some</b>

<b>space, I'm actually going</b>

<b>to remove context seven and</b>

<b>playwright, we can always add those back</b>

<b>if we need them in a</b>

<b>future video. But for now,</b>

<b>let's actually clear the chat again.</b>

<b>Let's go to context. And</b>

<b>cool, we greatly reduced the MCP</b>

<b>tool usage. So all we have to do now is</b>

<b>grab our feature folder and</b>

<b>add it into the chat. Then we</b>

<b>can say, hey, please go ahead and</b>

<b>implement phase one of the implementation</b>

<b>plan. Once you're done,</b>

<b>mark the tasks as complete in the</b>

<b>implementation plan. I call it spin a</b>

<b>minute, and Claude code just</b>

<b>implemented phase one of these changes.</b>

<b>And if we go to our</b>

<b>implementation plan, Claude also marked</b>

<b>all of these tasks as completed. And of</b>

<b>course, now we can move on to</b>

<b>phase two. So what we can do</b>

<b>maybe is just do a bit of a context</b>

<b>check. We've only used about 55%. So I</b>

<b>think we can risk it</b>

<b>and say, hey, please continue with phase</b>

<b>two of the implementation</b>

<b>plan. Again, remember to mark</b>

<b>the tasks as complete once you're done.</b>

<b>Honestly, I would just start a new</b>

<b>conversation for each new</b>

<b>phase. But in this instance, phase one</b>

<b>and phase two are just so small, we'll</b>

<b>just do it in a single</b>

<b>conversation. Right, cool. So Claude is</b>

<b>done. And we can see it marked phase two</b>

<b>as complete as well.</b>

<b>So I am going to clear the context at</b>

<b>this stage. So let's actually just say</b>

<b>clear. And since we've</b>

<b>completed quite a lot of work so far, I'm</b>

<b>going to go to source</b>

<b>control. And let's create a</b>

<b>commit for all of these changes. Now we</b>

<b>can give it a name ourselves, or even</b>

<b>easier is we can run</b>

<b>the command checkpoint. This is a command</b>

<b>that I've created for you. And all it</b>

<b>does is it looks at all</b>

<b>of these untracked changes, and creates a</b>

<b>detailed comment for this</b>

<b>commit. And cool, we now have a</b>

<b>snapshot of all of the changes that we</b>

<b>made up until now. So let's</b>

<b>clear this chat is grab our</b>

<b>feature folder and simply say, go ahead</b>

<b>and implement phase three</b>

<b>and phase four, mark the</b>

<b>tasks as complete once you're done. And</b>

<b>let's send this. So this is</b>

<b>just a very simple workflow.</b>

<b>This requirements file is really useful</b>

<b>for giving the agent</b>

<b>all the context it needs</b>

<b>about the feature that we're trying to</b>

<b>implement. And of course,</b>

<b>it will then reference the</b>

<b>implementation plan to track our</b>

<b>progress, and then implement these</b>

<b>incomplete changes. In the</b>

<b>interest of time, I'm going to let cloud</b>

<b>code run through all of</b>

<b>these phases by basically</b>

<b>implementing one phase at a time, during</b>

<b>the conversation and then</b>

<b>continuing on to the next</b>

<b>phase. All right, cool. So we've just</b>

<b>gone through all of these phases. So if I</b>

<b>show you this version</b>

<b>control history, you'll notice I created</b>

<b>commits each and every time</b>

<b>I completed a conversation.</b>

<b>So once we've implemented all of the</b>

<b>changes, there is one more</b>

<b>thing I like to do, I'm going</b>

<b>to grab our feature folder, and I get</b>

<b>caught to review this</b>

<b>implementation. So let's say,</b>

<b>hey there, we've just implemented all of</b>

<b>the phases for this</b>

<b>feature. Now what I want you to do</b>

<b>is to review the implementation. So the</b>

<b>actual coded solution, and</b>

<b>see if we missed anything,</b>

<b>please try to identify any gaps, or any</b>

<b>issues related to the implementation,</b>

<b>not following next.js entry act best</b>

<b>practices. Use your web search tool to</b>

<b>look up any up-to-date</b>

<b>documentation related to any libraries or</b>

<b>features used in our application. And</b>

<b>cool, let's end this.</b>

<b>Now the reason I'm doing this is because</b>

<b>we created new conversations</b>

<b>each time we implemented a new</b>

<b>phase, there's almost a slight chance</b>

<b>that cloud missed important</b>

<b>context from the previous phase.</b>

<b>So there could be functions or components</b>

<b>that have been</b>

<b>duplicated, because the agent had no</b>

<b>idea that function was already created as</b>

<b>part of a previous phase. So</b>

<b>by running an agent to review</b>

<b>the solution holistically, we can</b>

<b>identify any of those types of issues. In</b>

<b>fact, let's add that.</b>

<b>So I'm just going to stop this, and let's</b>

<b>also say, so how this</b>

<b>worked was we had different</b>

<b>developers working on different phases of</b>

<b>the solution. So it's</b>

<b>possible that there might be</b>

<b>code duplication, or duplicate functions,</b>

<b>or components. So as</b>

<b>part of your review, try to</b>

<b>see if there were any duplicate files or</b>

<b>functions created, or duplicate</b>

<b>components, as part of this</b>

<b>implementation. Okay, let's end this as</b>

<b>well. Another good use</b>

<b>case of this is once we start</b>

<b>implementing the backend functionality</b>

<b>that deals with creating APIs and</b>

<b>database connections,</b>

<b>we can also review agent to try and find</b>

<b>any security related</b>

<b>issues. And you'll be really</b>

<b>surprised to see how useful this review</b>

<b>step can be. All right, so the overall</b>

<b>code quality is good.</b>

<b>So here's an interesting thing, we can</b>

<b>ask the agent to implement</b>

<b>these fixes for us. Of course,</b>

<b>if this is a huge change, we could run</b>

<b>into context limit issues</b>

<b>again. So what we can do is simply</b>

<b>say, hey, create an implementation plan</b>

<b>for these fixes, and the agent will</b>

<b>create the implementation</b>

<b>plan within this feature folder. Now we</b>

<b>don't have to do that, I</b>

<b>think these changes are really</b>

<b>simple. So I'll just say, thank you for</b>

<b>the review, please go ahead</b>

<b>and implement all of these</b>

<b>suggestions. And now we're getting a</b>

<b>score of a plus, right, so I'm actually</b>

<b>just going to create</b>

<b>a checkpoint again. And this should also</b>

<b>be a good time to review our</b>

<b>actual app. So let's start the</b>

<b>dev server. And there we go. So we've got</b>

<b>our app along with this logo that the</b>

<b>agent created itself.</b>

<b>And we've got all of this marketing copy</b>

<b>and placeholders for our</b>

<b>plushy images. So we've got</b>

<b>all of this marketing stuff. This how it</b>

<b>works section, along with</b>

<b>other images created by other</b>

<b>users. And we also have this review</b>

<b>section, and another call to action. And</b>

<b>finally, our footer.</b>

<b>We also have access to light and dark</b>

<b>modes, which look really cool. We have</b>

<b>our user button on the</b>

<b>top right. We can also see the amount of</b>

<b>credits that we have left.</b>

<b>And if we click on credits,</b>

<b>we can see these different packages. So</b>

<b>we can also view our dashboard, but we</b>

<b>can see our credits.</b>

<b>And it seems we can view our previous</b>

<b>creations down here. We have</b>

<b>this button to generate a new</b>

<b>plushy. So we can upload an image, or</b>

<b>just select this thumbnail. And it's</b>

<b>asking us what we're</b>

<b>trying to classify a person, a bit or</b>

<b>other. And by generating</b>

<b>this, we'll burn one credit. Let's</b>

<b>see what happens when we click on</b>

<b>generate. Now, obviously, at</b>

<b>this point, we haven't actually</b>

<b>implemented any of the backend logic.</b>

<b>We're simply looking at the user</b>

<b>experience at this point. So</b>

<b>after we've generated the image, we'll</b>

<b>see this before and after snapshot. And</b>

<b>this is really cool.</b>

<b>Then we have the option to download this</b>

<b>image. We can share it or generate</b>

<b>another. And of course,</b>

<b>we can go to the gallery where we can</b>

<b>view all of our previous generations. So</b>

<b>far, this is looking</b>

<b>really cool. Let's also have a look at</b>

<b>this doc section. So here we</b>

<b>can search for documentation.</b>

<b>We have a getting started guide. And the</b>

<b>documentation looks really cool as well.</b>

<b>And we should have legal documents as</b>

<b>well, which we do. So</b>

<b>we've got a privacy policy,</b>

<b>which actually gives an error. Then let's</b>

<b>have a look at terms of service. This</b>

<b>doesn't work either.</b>

<b>The cookie policy seems to work. And if</b>

<b>we go to refund, this one</b>

<b>doesn't work either. Right. So</b>

<b>what we can do is actually click on this</b>

<b>button. It's copy all of</b>

<b>this. And it's a, hey, when I</b>

<b>try to access some of the legal pages, I</b>

<b>get this error message.</b>

<b>Please resolve this error for all</b>

<b>pages on this app. So what I also want to</b>

<b>do is actually create a</b>

<b>sample before and after image</b>

<b>for the homepage. So on pixels.com, I</b>

<b>actually found this image.</b>

<b>So I'm just going to download</b>

<b>a pretty small version of this. Then in</b>

<b>AI studio, let's upload</b>

<b>this image. And it's a,</b>

<b>please change the people in this image to</b>

<b>adorable plushy versions of themselves.</b>

<b>Let's run this. All right. This is not</b>

<b>bad. Let's try one more, make</b>

<b>them even more plushy fight.</b>

<b>Well, I'll just see what we get back from</b>

<b>this. But for now, I'm</b>

<b>also just going to download</b>

<b>this version. Right. And this is cool as</b>

<b>well. Let's download this</b>

<b>version. So at the moment,</b>

<b>these images are massive. They're nearly</b>

<b>two make each. So I'll</b>

<b>just add this to photo PR</b>

<b>or photo PR or whatever it's called.</b>

<b>Let's resize this image to</b>

<b>about 640 with the end. Let's say,</b>

<b>okay. And on the file, let's export this</b>

<b>and I'll just export it</b>

<b>as PNG. Let's save this.</b>

<b>Then let's copy these two images. And</b>

<b>back in our project, let's</b>

<b>add these to the public folder.</b>

<b>I'll just create a subfolder called</b>

<b>example. And let's add those two images.</b>

<b>Okay. We already have</b>

<b>our after photo. So let's change this one</b>

<b>to before. All right, by</b>

<b>the way, our agent completed</b>

<b>those fixes. So in our app, let's</b>

<b>actually see if those pages are working</b>

<b>now. So we can go to the</b>

<b>privacy page. And this is indeed not</b>

<b>working. Let's go to terms of service.</b>

<b>And this is all working</b>

<b>as well. The cookie policy page is</b>

<b>working as well as the refund</b>

<b>page. So let's ask the agent</b>

<b>to make another change for us. I'm just</b>

<b>going to say that in the</b>

<b>public example folder, I added</b>

<b>two images, a before and after image.</b>

<b>Let's add this to the home</b>

<b>page to show users what this app</b>

<b>actually does. All right, they'd send</b>

<b>this. And cool. So now we have this</b>

<b>section and the images</b>

<b>are a little bit low resolution. That's</b>

<b>not Claude's fault. I</b>

<b>think what I'll do is I should</b>

<b>just go back and use a high resolution</b>

<b>image. And I'm also going to</b>

<b>remove this public gallery as</b>

<b>this app won't have a public gallery.</b>

<b>Right, so we nearly done</b>

<b>with building our UI. I noticed</b>

<b>that there was no consistency between the</b>

<b>width between these</b>

<b>different pages. So what I did is</b>

<b>I chose one of the pages that I actually</b>

<b>liked. I think it was the</b>

<b>pricing page. And I told the</b>

<b>agent to apply the same max width to all</b>

<b>pages in this application.</b>

<b>Then there were also a few</b>

<b>issues with the documents page. And</b>

<b>again, I just chose a page that I liked.</b>

<b>And I asked the agent</b>

<b>to apply the same styling to all the</b>

<b>other pages. I actually don't like this</b>

<b>pink theme that we have</b>

<b>at the moment. So a really simple way to</b>

<b>change the theme is to go to</b>

<b>twixen.com, then it's click</b>

<b>on try now. And from here, we can choose</b>

<b>between different themes. So</b>

<b>we can just go through all of</b>

<b>these. And let's say for this app, I</b>

<b>actually like this theme, Amber minimal.</b>

<b>We can also use this</b>

<b>tool to customize things like the fonts.</b>

<b>And maybe we want to change</b>

<b>things like the roundness of</b>

<b>these corners. So once I'm happy, I can</b>

<b>click on code. And we can</b>

<b>simply copy all of this CSS.</b>

<b>Claude code is still applying some of the</b>

<b>layout changes to some of</b>

<b>these legal pages. So we'll</b>

<b>just let it cook. But what we can do is</b>

<b>simply go to the app folder is open</b>

<b>global. So it's CSS,</b>

<b>then I'm just going to close this, this</b>

<b>and this, then we can replace</b>

<b>dark, root and inline with a</b>

<b>code that we just copied. Now when we</b>

<b>save this file, our site looks a lot</b>

<b>different. We've got</b>

<b>this awesome yellow font. And actually,</b>

<b>this little icon is starting to grow on</b>

<b>me. But if you really</b>

<b>don't like this logo, you can simply ask</b>

<b>Claude code to create</b>

<b>something else or replace it with</b>

<b>a Lucid React icon. The border plate</b>

<b>project already keeps Claude</b>

<b>code access to all of these</b>

<b>different icons. So you can just go</b>

<b>through this list or maybe search for</b>

<b>something and then ask</b>

<b>Claude code to use this Lucid React icon.</b>

<b>But for now, I think I'll</b>

<b>stick with this logo. I might</b>

<b>change it in one of the future videos.</b>

<b>Another really cool website is a</b>

<b>sternity. This gives you</b>

<b>highly customized chat C and components.</b>

<b>Well, let's just go to any</b>

<b>of these. I mean, just look</b>

<b>at this cool effect. So really, if you</b>

<b>want to add something like this to your</b>

<b>project, you can either</b>

<b>copy the code example, or you can click</b>

<b>on this copy prompt button</b>

<b>and select something like</b>

<b>lovable. And you can then paste this</b>

<b>prompt into Claude code. I'm going to</b>

<b>create another checkpoint.</b>

<b>So this station shouldn't be any</b>

<b>untracked changes. Now I'm</b>

<b>going to clear the chat again.</b>

<b>And now we'll use Claude code to check</b>

<b>that there are absolutely</b>

<b>no bold errors before we</b>

<b>deploy to Vercel. So I'll say please run</b>

<b>lint type check and NPM</b>

<b>bold resolve any issues. I'm</b>

<b>actually going to copy all of this, then</b>

<b>let's run this. And since</b>

<b>I'm planning to rerun that</b>

<b>same command quite a few times, I'm going</b>

<b>to go to the Claude folder</b>

<b>commands. And let's create</b>

<b>our very first custom command. Let's call</b>

<b>this check bold dot MD,</b>

<b>then let's add three dashes</b>

<b>with description. And let's say run lint</b>

<b>type check and bold, then</b>

<b>let's simply paste in that</b>

<b>command. Now we can easily reuse it going</b>

<b>forward. Alright, so</b>

<b>apparently all checks have passed.</b>

<b>I'm just going to create one commit for</b>

<b>this to say added new command for</b>

<b>checking builds. Let's</b>

<b>commit this. And now let's sync this. If</b>

<b>you follow the previous</b>

<b>video, then we already have</b>

<b>get up set up. So we just pushed all of</b>

<b>those new changes to get up. And in</b>

<b>Vercel, we can see that</b>

<b>this bolt is now running. Since we set up</b>

<b>this deployment pipeline,</b>

<b>our changes are automatically</b>

<b>pushed to production. As soon as it's</b>

<b>sent to get up, I bought</b>

<b>this complete. Let's go to our</b>

<b>website. And there we go. All of our</b>

<b>changes are now in production. This is</b>

<b>how I use Claude code</b>

<b>to implement features in my applications</b>

<b>without needing frameworks</b>

<b>like spec kit or be mad. In the</b>

<b>next video, we'll start implementing the</b>

<b>back end functionality. If</b>

<b>you've got any questions related</b>

<b>to this series, then please ask them in</b>

<b>the comments below. Remember</b>

<b>to subscribe to my channel to be</b>

<b>notified as soon as I publish a new</b>

<b>Claude code video. I'll see</b>

<b>you in the next one. Bye bye.</b>