Claude Code: EASY Feature Planning (No SpecKit or BMAD!)
How to Build Full-Stack AI SaaS with Claude Code (Tutorial)Fresh📅 2025-11-12
Tutorial Overview
┌─────────────────────────────────────────────────────────────────────┐
│ LEARNING PATH │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ LEARN │
│ ───── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Watch │───►│ Understand │───►│ Follow │ │
│ │ Tutorial │ │ Concepts │ │ Along │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ PRACTICE │
│ ──────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Try It │───►│ Experiment │ │
│ │ Yourself │ │ & Adapt │ │
│ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ MASTER │
│ ────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Build │───►│ Share & │ │
│ │ Your Own │ │ Iterate │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Key Takeaways
- Core concepts explained
- Step-by-step implementation
- Practical examples
Transcript
[00:00] Welcome back to the series where I show you how to use coding agents like Claude Code to build real world applications that include everything from user authentication to payment processing. So in this video I really want to focus on planning and implementing new features, and this seems to be a real pain point for people using coding agents. So much so that workflows like Speckit, OpenSpec, and BMAD Method were created to try and assist developers with these challenges. Now Speckit and
[00:30] OpenSpec are very similar. They focus very much on the implementation side of things. So you give it a high level description of what you're trying to implement, and these workflows will guide you through the process of planning the changes and creating detailed implementation plans, where the BMAD Method is a bit more involved. Yes, it can assist with the implementation side of things, but I think the real power of the BMAD Method is planning everything before the implementation step. So it gives you all of these different tools and agents to help you brainstorm your
[01:01] product idea. Now the real question is, do you have to use any of these frameworks? And the short answer is no. Depending on your project, these might be overkill. You could end up spending a lot of time planning and discussing your requirements with these agents, and the end result could look exactly the same as when you one-prompted the agent. So in this video, I'll show you a very simple workflow that you can implement yourself. But if you would like to learn how to use something like Speckit in your own projects, then check out my dedicated masterclass, which
[01:31] I'll link to in the description. Right, so at the moment, we've got this border plate project. We want to replace all of this with our own application. And as a reminder, what we're trying to build is a SaaS app where users can upload images of themselves or their family and friends or even their pets, and we'll use an AI model to create classified versions of the subjects in those images. And users will have to purchase credits in order to use our application. So what I like to do is to break all of these challenges down into simple components or
[02:03] features. If we try to tell the agent to just implement all of the stuff immediately, we're going to run into a lot of issues and most likely lose control of our application. So instead of telling it to go and build the UI and also build the authentication system and implement the payment processing, we'll break the solution down into its simplest components. Now this is a personal choice, but I like to start with the UI and none of the backend logic. This means we can easily prototype what the
[02:34] user experience would look like. And only once we're happy with the UI components, will we start working on the backend functionality. So let's say then that building the UI is our very first feature. So back in our project, let's start up Claude Code and then let's press shift and tap to go into planning mode. All right, so let's use the AI to plan out these changes. Hey, please create a detailed implementation plan for the following. At the moment, we have a border plate project, but what we actually want to do
[03:04] is replace it with an actual SaaS application that allows users to upload images of themselves, their friends, their family, or even their pets. This app will then use an AI model to convert the subject's inner images to plushies. This means that our app needs to have a beautiful landing page where it shows the user the end result so we could show a before and after image and some SEO optimized text to promote the product. Users should also
[03:36] be able to sign into the application and from the dashboard they should be able to generate images. These images will be stored to their gallery. This app should also have public facing documentation on using the application along with all the legal documents like the privacy pages, etc. Now at this stage, I do not want to focus on the backend logic. We're only focusing on the UI components and nothing else. This will give us a feel for the
[04:06] user experience before moving on to adding the actual backend logic. Please remember to ask any clarifying questions during this process. Alright, so I think that's good enough. Let's actually send this. So I'll actually scroll up. So if you wanted to pause the video and have a look at this prompt, you're more than welcome to do so. It's how to look at our requirements and it's asking us clarifying questions and even providing possible solutions. So it's saying what design style and
[04:36] tone should the landing page convey? Payful and fun, modern and clean, warm and family friendly. Let's go with option one. What features should the image gallery have? I'll just go with option one. Which legal and documentation pages are needed? I'll just go with option three. Should the landing page include pricing and plan information? Now this is a really good question. In my requirements, I forgot to ask plotcode to create a separate page for pricing. So I'm going
[05:07] to go to option three and say create a dedicated pricing page with three different packages. So basic package, a pro package and an elite package. How does Apple work? Is that users will purchase credits. So maybe the basic package could give the user 30 credits. The pro package will give them 100 credits and the elite page will give them 200 credits. And the pricing for these different packages are $9 for the basic package,
[05:38] $19 for the pro package and $29 for the elite package. And then let's send this. All right, so then we can just submit all of these answers. Now what's really cool is if you realize that you actually forgot something else, you can go ahead and send that message to plotcode in the meantime. So I'll just add something like, all right, I forgot to mention that because we currently have a boilerplate project, I need you to remove any pages and components in this boilerplate project
[06:09] that's not a part of our actual app. And also I forgot to mention that since we're not using real data, you can simply simulate a scenario where the user is currently signed in and you can just use mock data. Okay, cool. So Claude just finished and let's have a look at this implementation plan. And I will definitely recommend going through this plan in detail and then ask plotcode to make any changes to the implementation plan. So for phase one, it's going to remove all of the boilerplate
[06:39] stuff, which is great. All right, so for phase two, it's going to update the project metadata and the styling. For phase three, it's going to create a landing page. For phase four, it's going to create the pricing page, etc. All right, so I just went through the implementation plan and I'm happy to proceed. Now at this point, we could simply say, yes, code, implement this, but I would advise against that. So instead, let's say no. If we type front slash and context, we can see our current token
[07:11] usage. So let's just scroll up. And here we can see that we've almost used 50% of this context window. Now this is critical irrespective of what coding agent you use. Each and every agent will have some sort of context window limit. For Claude code, that's 200,000 tokens, but you really don't want to get anywhere close to this limit. I would argue that after about 60%, the quality of the output starts to degrade. So the goal is really to keep this context window as lean as possible. And
[07:43] that means implementing one small change and then starting a new conversation. But of course, at this point, we can't start a new conversation, we're going to lose our implementation plan. One alternative is that you could try to compact or summarize the conversation. But again, we're going to lose a lot of this important context. And at a very high level, this is a problem that spec kit and B mat tries to solve those frameworks, like all the work that was done up to now, and then stores that information in separate files in our
[08:14] project. So it could take our initial requirements, along with some other important information that was discussed in the conversation and then store that in a requirements file, it will also install that massive implementation plan in its own file as well. And those implementation plans are then split up into phases. And each phase contains an actionable list of tasks that need to be completed. This means as we're completing tasks, we can mark them as complete in the implementation plan.
[08:46] This means we can ask Claude code to go and implement phase one only. And then once phase one is complete, we can start a new conversation to clear up the context window, and then ask Claude code to move on to phase two. All right, so without using spec kit or B mat, how do we implement this ourselves? Well, it's really easy. We already have our implementation plan. So what we can do next is create a new folder, and we can call this specs. So this little folder over here. Now I
[09:17] do want to mention that at the moment we're still in the main branch, which means if we had to push any of these changes, it will affect our production environment. So a safer convention is actually to create a new branch. So maybe something like create UI, and then build and test your changes in this branch before merging the changes with our production branch. But because this project is still very much in development, I'll just push directly to the main branch. All right, so now that we have our specs folder, what we can do is
[09:50] change over to change mode, and we can say, please create a sub folder in the specs folder for this specific feature within a folder create two files requirements.md and implementation plan.md. The requirements file should contain our initial requirements with any other functional and non functional requirements, as well as acceptance criteria. For the implementation plan, I
[10:20] need you to create a detailed implementation plan that is split into separate phases. Each phase should contain an actionable list of tasks with checkboxes so that we can track our progress. At this stage, do not include any unit or end to end testing. Right again, you're welcome to pause the screen if you want to read all of this, but I'm just going to say go. All right, so our agent created the sub folder called PlushifyUI,
[10:50] and within that folder, we have an implementation plan and this requirements document. Let's actually have a brief look at these. Right in requirements, we get this project overview, and the scope is correct. We're only focusing on UI and UX, and we've got our initial requirements, etc. So this is really useful. It's a great way to remind the agent of what we're trying to achieve during this implementation. Let's also have a look at our implementation planning. And yes, we've got our implementation plan, along with these
[11:21] tasks that have these little checkboxes. And we'll actually get the agent to mark these as complete as it's making changes. Of course, we've got phase two, and whatever else. I mean, just look at how detailed this file is. And by the way, if we had to have a look at our context window in Claude code, we're already sitting at 56%. So if we try to implement all of this as part of a single execution, we would definitely be in very big trouble. Now before we move on to implementing
[11:52] this feature, I do want to show you one really cool tip. The next time you implement a new feature, you don't have to give all of those instructions on creating that sub folder and the implementation plan. I've already created a command for you. So in the Claude folder under commands, I created this create feature command. And this is the same as the command that we provided earlier. It's just that the next time you plan a change, all you have to do is enter front slash and select create
[12:22] feature. Either way, I'm going to clear the chat. And now we should have a clean context window. And this reminds me our MCP tools are taking up a lot of space. So by default, I've included a few MCP servers in this project. And you don't have to use these, by the way, we have contact seven, we've got playwright, and we've got chat cn. So to free up some space, I'm actually going to remove context seven and playwright, we can always add those back if we need them in a
[12:53] future video. But for now, let's actually clear the chat again. Let's go to context. And cool, we greatly reduced the MCP tool usage. So all we have to do now is grab our feature folder and add it into the chat. Then we can say, hey, please go ahead and implement phase one of the implementation plan. Once you're done, mark the tasks as complete in the implementation plan. I call it spin a minute, and Claude code just
[13:23] implemented phase one of these changes. And if we go to our implementation plan, Claude also marked all of these tasks as completed. And of course, now we can move on to phase two. So what we can do maybe is just do a bit of a context check. We've only used about 55%. So I think we can risk it and say, hey, please continue with phase two of the implementation plan. Again, remember to mark the tasks as complete once you're done. Honestly, I would just start a new conversation for each new
[13:54] phase. But in this instance, phase one and phase two are just so small, we'll just do it in a single conversation. Right, cool. So Claude is done. And we can see it marked phase two as complete as well. So I am going to clear the context at this stage. So let's actually just say clear. And since we've completed quite a lot of work so far, I'm going to go to source control. And let's create a commit for all of these changes. Now we can give it a name ourselves, or even easier is we can run
[14:25] the command checkpoint. This is a command that I've created for you. And all it does is it looks at all of these untracked changes, and creates a detailed comment for this commit. And cool, we now have a snapshot of all of the changes that we made up until now. So let's clear this chat is grab our feature folder and simply say, go ahead and implement phase three and phase four, mark the tasks as complete once you're done. And let's send this. So this is just a very simple workflow.
[14:57] This requirements file is really useful for giving the agent all the context it needs about the feature that we're trying to implement. And of course, it will then reference the implementation plan to track our progress, and then implement these incomplete changes. In the interest of time, I'm going to let cloud code run through all of these phases by basically implementing one phase at a time, during the conversation and then continuing on to the next phase. All right, cool. So we've just gone through all of these phases. So if I
[15:28] show you this version control history, you'll notice I created commits each and every time I completed a conversation. So once we've implemented all of the changes, there is one more thing I like to do, I'm going to grab our feature folder, and I get caught to review this implementation. So let's say, hey there, we've just implemented all of the phases for this feature. Now what I want you to do is to review the implementation. So the actual coded solution, and
[15:58] see if we missed anything, please try to identify any gaps, or any issues related to the implementation, not following next.js entry act best practices. Use your web search tool to look up any up-to-date documentation related to any libraries or features used in our application. And cool, let's end this. Now the reason I'm doing this is because we created new conversations each time we implemented a new phase, there's almost a slight chance
[16:29] that cloud missed important context from the previous phase. So there could be functions or components that have been duplicated, because the agent had no idea that function was already created as part of a previous phase. So by running an agent to review the solution holistically, we can identify any of those types of issues. In fact, let's add that. So I'm just going to stop this, and let's also say, so how this worked was we had different developers working on different phases of the solution. So it's possible that there might be
[17:00] code duplication, or duplicate functions, or components. So as part of your review, try to see if there were any duplicate files or functions created, or duplicate components, as part of this implementation. Okay, let's end this as well. Another good use case of this is once we start implementing the backend functionality that deals with creating APIs and database connections, we can also review agent to try and find any security related issues. And you'll be really surprised to see how useful this review
[17:30] step can be. All right, so the overall code quality is good. So here's an interesting thing, we can ask the agent to implement these fixes for us. Of course, if this is a huge change, we could run into context limit issues again. So what we can do is simply say, hey, create an implementation plan for these fixes, and the agent will create the implementation plan within this feature folder. Now we don't have to do that, I think these changes are really simple. So I'll just say, thank you for the review, please go ahead
[18:01] and implement all of these suggestions. And now we're getting a score of a plus, right, so I'm actually just going to create a checkpoint again. And this should also be a good time to review our actual app. So let's start the dev server. And there we go. So we've got our app along with this logo that the agent created itself. And we've got all of this marketing copy and placeholders for our plushy images. So we've got all of this marketing stuff. This how it
[18:32] works section, along with other images created by other users. And we also have this review section, and another call to action. And finally, our footer. We also have access to light and dark modes, which look really cool. We have our user button on the top right. We can also see the amount of credits that we have left. And if we click on credits, we can see these different packages. So we can also view our dashboard, but we can see our credits. And it seems we can view our previous
[19:02] creations down here. We have this button to generate a new plushy. So we can upload an image, or just select this thumbnail. And it's asking us what we're trying to classify a person, a bit or other. And by generating this, we'll burn one credit. Let's see what happens when we click on generate. Now, obviously, at this point, we haven't actually implemented any of the backend logic. We're simply looking at the user experience at this point. So after we've generated the image, we'll see this before and after snapshot. And
[19:33] this is really cool. Then we have the option to download this image. We can share it or generate another. And of course, we can go to the gallery where we can view all of our previous generations. So far, this is looking really cool. Let's also have a look at this doc section. So here we can search for documentation. We have a getting started guide. And the documentation looks really cool as well. And we should have legal documents as well, which we do. So we've got a privacy policy, which actually gives an error. Then let's
[20:04] have a look at terms of service. This doesn't work either. The cookie policy seems to work. And if we go to refund, this one doesn't work either. Right. So what we can do is actually click on this button. It's copy all of this. And it's a, hey, when I try to access some of the legal pages, I get this error message. Please resolve this error for all pages on this app. So what I also want to do is actually create a sample before and after image
[20:34] for the homepage. So on pixels.com, I actually found this image. So I'm just going to download a pretty small version of this. Then in AI studio, let's upload this image. And it's a, please change the people in this image to adorable plushy versions of themselves. Let's run this. All right. This is not bad. Let's try one more, make them even more plushy fight. Well, I'll just see what we get back from this. But for now, I'm also just going to download this version. Right. And this is cool as
[21:06] well. Let's download this version. So at the moment, these images are massive. They're nearly two make each. So I'll just add this to photo PR or photo PR or whatever it's called. Let's resize this image to about 640 with the end. Let's say, okay. And on the file, let's export this and I'll just export it as PNG. Let's save this. Then let's copy these two images. And back in our project, let's add these to the public folder.
[21:37] I'll just create a subfolder called example. And let's add those two images. Okay. We already have our after photo. So let's change this one to before. All right, by the way, our agent completed those fixes. So in our app, let's actually see if those pages are working now. So we can go to the privacy page. And this is indeed not working. Let's go to terms of service. And this is all working as well. The cookie policy page is working as well as the refund
[22:08] page. So let's ask the agent to make another change for us. I'm just going to say that in the public example folder, I added two images, a before and after image. Let's add this to the home page to show users what this app actually does. All right, they'd send this. And cool. So now we have this section and the images are a little bit low resolution. That's not Claude's fault. I think what I'll do is I should just go back and use a high resolution image. And I'm also going to
[22:40] remove this public gallery as this app won't have a public gallery. Right, so we nearly done with building our UI. I noticed that there was no consistency between the width between these different pages. So what I did is I chose one of the pages that I actually liked. I think it was the pricing page. And I told the agent to apply the same max width to all pages in this application. Then there were also a few issues with the documents page. And again, I just chose a page that I liked. And I asked the agent
[23:10] to apply the same styling to all the other pages. I actually don't like this pink theme that we have at the moment. So a really simple way to change the theme is to go to twixen.com, then it's click on try now. And from here, we can choose between different themes. So we can just go through all of these. And let's say for this app, I actually like this theme, Amber minimal. We can also use this tool to customize things like the fonts. And maybe we want to change things like the roundness of
[23:41] these corners. So once I'm happy, I can click on code. And we can simply copy all of this CSS. Claude code is still applying some of the layout changes to some of these legal pages. So we'll just let it cook. But what we can do is simply go to the app folder is open global. So it's CSS, then I'm just going to close this, this and this, then we can replace dark, root and inline with a code that we just copied. Now when we
[24:11] save this file, our site looks a lot different. We've got this awesome yellow font. And actually, this little icon is starting to grow on me. But if you really don't like this logo, you can simply ask Claude code to create something else or replace it with a Lucid React icon. The border plate project already keeps Claude code access to all of these different icons. So you can just go through this list or maybe search for something and then ask Claude code to use this Lucid React icon. But for now, I think I'll
[24:42] stick with this logo. I might change it in one of the future videos. Another really cool website is a sternity. This gives you highly customized chat C and components. Well, let's just go to any of these. I mean, just look at this cool effect. So really, if you want to add something like this to your project, you can either copy the code example, or you can click on this copy prompt button and select something like lovable. And you can then paste this prompt into Claude code. I'm going to create another checkpoint.
[25:12] So this station shouldn't be any untracked changes. Now I'm going to clear the chat again. And now we'll use Claude code to check that there are absolutely no bold errors before we deploy to Vercel. So I'll say please run lint type check and NPM bold resolve any issues. I'm actually going to copy all of this, then let's run this. And since I'm planning to rerun that same command quite a few times, I'm going to go to the Claude folder commands. And let's create
[25:43] our very first custom command. Let's call this check bold dot MD, then let's add three dashes with description. And let's say run lint type check and bold, then let's simply paste in that command. Now we can easily reuse it going forward. Alright, so apparently all checks have passed. I'm just going to create one commit for this to say added new command for checking builds. Let's
[26:15] commit this. And now let's sync this. If you follow the previous video, then we already have get up set up. So we just pushed all of those new changes to get up. And in Vercel, we can see that this bolt is now running. Since we set up this deployment pipeline, our changes are automatically pushed to production. As soon as it's sent to get up, I bought this complete. Let's go to our website. And there we go. All of our changes are now in production. This is how I use Claude code to implement features in my applications
[26:46] without needing frameworks like spec kit or be mad. In the next video, we'll start implementing the back end functionality. If you've got any questions related to this series, then please ask them in the comments below. Remember to subscribe to my channel to be notified as soon as I publish a new Claude code video. I'll see you in the next one. Bye bye.