Transcription
Okay, let's talk about specs driven development. Everybody recommends doing it, but how do you even come up with the initial specs as a non-technical and non-developer person?
The good news is there are some really good tools out there. The one that I am trying these days is from Enthropic and it's called ask user question tool. Here is how it works. You come up with the initial description of the feature that you want to implement. Claude asks you a number of different questions on a variety of different topics and then it will help you build technical specifications for the project that you want to implement.
Let me show you this in practice. So let's say we have a completely new session and I have a file called specs.md. I'm going to just describe what I want Claude to build and then we're going to iterate with Claude to build complete technical specifications for this project.
So create a text to image generator. The user is going to provide text description and then we're going to use the Google Nano Banana REST API to generate four different images. The API does not support concurrent generation. So you will have to create or make multiple different calls. Do not use any SDK. Use the REST API. I am going to provide a link to the documentation.
Okay. So I'm happy with the transcription. Now I'm going to provide the documentation on how to access the REST API. So these are just our initial specs. We just described what exactly we want. We didn't tell it about technology stack. Let's use Claude code to help us refine these specifications.
So I'm going to fire up Claude code. And I am in the YOLO mode. So it's going to be able to do anything at once. Okay. So we're going to click continue. Now here is the prompt that you want to use for this part of your development process. So this is from Taric who is part of the Claude code team and they build this tool called ask user question.
Now before this I used to do this manually. So I would have a session with Opus or Sonnet and I would ask it to ask me questions based on the specifications that I have provided. We'll go back and forth and then I'll take everything that we discussed and create a new specification document but now they have really formalized this whole process and it is actually extremely helpful.
Now I copied that prompt so we're going to send this in. It works really good if you're starting on a green field or a project from scratch but it can be also useful in brownfield projects as well.
So here I started asking questions. So, usually it will show you a block of questions and then you're going to just pick one of the four options. For example, here it's asking me when two of the four image generation fail in sequence, should the UI show partial results immediately or prompt the user to decide? So, let's say we're going to just select the first one.
Then since the API doesn't support concurrent calls, how should the four sequential generation appear to the user during 20 to 40 seconds? Now another set of two questions. Should the system enhance user prompt before sending it to the API or pass it verbatim? We'll say web only and trust the API for generating different variations.
Okay, so it's asking me how to manage the Gemini API. So we're going to just say user provided in the UI. Okay, now these are some of the things that I did not really even think about. So, it's really good to see that Claude is able to ask some very technical questions and this is what you want to start with.
Now, it's asking me about the text stack for the front end. So, we're going to just go with the HTML CSS. And even as a non-technical person, you can use this for your own learning. You will know a lot about different options that are available. So rather than the LLM or an agent making a choice for you, you can actually do some research and select the best option there.
It's asking me how those four images should be generated in terms of the layout. So we're going to just select the second one, minimal and clean. Submit. In some cases, you will just need to type the answer. So for example, it's asking me how it's going to show up on the mobile screen, but I don't I just want it to be desktop only. So no mobile.
It asked me a total of 26 questions and all of them were really good questions. These are the type of questions you would assume an engineer is going to ask you to come up with a really good design for your app.
Now we went from that simple specs document to something like this where we have the architectural details of what exactly the architecture is supposed to look like, what the API integrations are going to look like, how the API key is going to be managed, information about user interface, what happens when we make the API call, what the file structure for the project is going to look like, right? So very detailed specifications.
Now before handing this over to Claude I would highly recommend to actually go through this and make sure that Opus did not miss anything but once you're happy then you can proceed with the implementation phase.
So what I usually do is that I will just clear this conversation and now I'm going to ask Claude to implement everything based on the specifications that we have created. But there is one more thing I usually do. I want to operate in the plan mode. So if you hit shift tab twice, you're going to go into the plan mode. So we're going to take that specifications we created and we're going to ask Claude to create a plan around it and then we're going to implement that plan.
Okay. So in the plan mode I just said use the specification in the specs.md file to create a text to image app. We're going to send this in. Now Claude is going to come up with a plan based on the specifications and then we can make adjustments to it if we want to. Here's the plan that it came up with. It's going to create index.html then some CSS. This is how the user management and data storage going to look like. I'm happy with everything. So we're going to just accept this and let it cook.
So the app is fully functional but I don't like the UI that it created. So I use the Chrome or Claude in Chrome extension for it to look at the web page and then suggest some improvements to the UI. Right now it's using its front-end design skill to implement some improvement.
Okay, so here is what it came up with. It took that boring design, transformed it to something pretty amazing looking, right? It even added these custom prompts. These are pre-built templates. So let's actually try one of these. And you can even see that it removed that API text and just added the API here. So I would say Opus with the front-end design skill is pretty awesome. It goes on par with Gemini 3. Okay, pretty neat.
Now, one thing is that the grainy effect is even on the images. But here's the full resolution downloaded image. Images looks good. It might be like a simple iteration that we need to do with Opus in order to remove that effect. But overall, I'm really happy with it.
So this is how you go from a very simple basic prompt to full specs with the help of Claude code. Now you can do exactly the same thing with brownfield projects. That means existing code bases. You can just start with a specification of what you want to change and then let Claude help you with that.
I created another specs document and here I just am going to ask it to implement dark mode in the existing codebase. Help me implement dark mode where the user should be able to switch between light and dark mode. Okay, so we're going to just save this.
Now for this again I am going to just clear the current conversation and we are going to start new. So I'm using exactly the same prompt that we used in the beginning. Okay, this is just an example. I know it's a very simple thing to just ask Opus to do it but I want to show you the process of working with existing code bases.
So this time it asked me 23 different questions which is a lot for just switching to dark theme but these are actually really great technical details. So here's the new specs document for us and we're going to just go through the same process that I did before. This time I'm going to just tell Claude code that implement this in the existing code base.
Okay. So here's the dark mode in action. Claude is testing this in the background. So, you are going to probably see some flickering, but this was a quick example of how you can use this new ask user question tool to help you build more detailed technical specifications from your simple user prompts.
Now, these were very simple examples. You probably want to test these on more complex problems or projects. But the idea is that not only you want to use these tools to help you build specifications but also help you learn as well especially if you don't have some skill set. So for example I'm am more of a data scientist or backend developer. I don't really have front-end skills but using these tools I can learn a lot about different options that are available.
Anyways, do give it a try. Also do share what do you use for building specifications for your projects. Share that information in the comment section below. Anyways, I hope you found this video useful.