This is How You Should Build using Coding Agents

Key Takeaways

So AI coding agents are changing how us as software engineers or developers write code and build software. Like it or not, this is the reality now with the new agent in coding, the new coding agent and how good the AI models are or LLM models are. It's just fascinating to say the least. And if you're not using it, I'm sorry for this, but you are just an idiot. Honestly, I think this is the biggest shift that has ever happened in the field of software engineering since probably like the invention of compilers or programming languages like Python or JavaScript. This is changing how we write code and build software forever and it's already changed. So, in today's video, I want to share with you my AI agent coding workflow. Now, what is my day-to-day workflow to use AI coding agents and LLMs to build software to 10x my old workflow of like just writing code? Now, instead of writing code, I'm going to be like the architect where I plan, decide what I'm going to build, properly, write the prompts, and follow the agent and test the code and review the code and everything. And the agent does everything else for me. And by everything else is it writes the code. It makes sure libraries are working. It reads the API documentation or the documentation of any library out there. It does everything for me and all I have to do is do research and of course know what I'm doing. So outside, grab a coffee and let's get started. I wrote or draw this uh diagram in here which represents my day-to-day or every single day coding workflow. So what are the steps I go through? Why I go through these steps? uh what are the notes, what I do and don't do and at the end as well I'm going to add tricks and tips that I've learned through my journey. I've been using this workflow for the past year. I've written code like in the past year alone I've written or I was able to write code more than I ever did in my entire career more than I did in in my life literally and using the help of coding agents and it's so good. Okay. All right. So the first most important part obviously is figuring out or knowing what problem or feature that you want to solve there are only two things that you would want to do obviously in software is whether you build a new feature okay whether it's functionality whether it's like a landing page add a button whatever that's basically called a feature or fix a problem and a problem in here is more of like a bug something that's not properly working something is misbehaving or just like an issue you're noticing. Maybe the website is not responsive or not as respon as as responsive as it should be. So you have to figure out first to set something say oh I'm going to work on this new feature today and that's actually we're going to develop. So in the case of you're actually starting a new project which is you know not always something happening so it only happens once when you're starting a project. So if you're building a project from scratch, then you want to write all the project details or specs in in basically in every detail possible. So this is where you're basically going to spend a lot of time in here crafting and planning and writing everything like what you want the program to do, what you don't want it to do and all that kind of stuff. Now when I say this is for the MVP, you don't imagine that you want to actually build the entire project. Let's say for example Microsoft Word which is you know a little hard but I'm just putting this in perspective because Microsoft Word is huge and let's say you want to actually build a similar program to Microsoft Word. So putting the specs in here doesn't mean that you're going to cover every single feature, every single scenario, every single edge case on this initial prompt or initial project specs. That's impossible. Okay. So what you want to do is focus on MVP. So you put a set of features. You say this, this, this, and I want to cover this, this edge case, like just as minimal as possible. And the fewer features and fewer like edge cases and stuff that you want to cover on this spec sheet, like the initial spec sheet, the better it is. Okay, so in my opinion, I better start with like one feature uh and then get everything sorted out. and also maybe tell the LLM that I have this other feature 2, feature three, feature four that I'm going to be, you know, expecting my program or my software to do in the future when I provide another prompt. But for now, they just going to be like placeholders. Do not implement them for now. I only want to implement feature one for like of obviously the first MVP. Um, in the other case in here where you know you're not starting a project from scratch, you already have a project. So you want to just you know do a feature or a bug as said before. So now you want to write exactly what future bug you want to address. Include examples as much as and as much context as possible. So this is one thing that a lot of developers that I've seen um saying, "Oh, AI coding agents are bad or I'm just getting slop code or garbage code that is really not working or hard to read or hard to maintain." Is mainly because you don't provide as many examples as you should and you don't provide context for the LLM. So context is the main important thing for an LLM. LLM is just basically like a transformer where it you give it a bunch of words and starting from these words, it kind of like completes exactly what you want. So if you don't give it the right words or if you don't give it enough words that represent what you're thinking about or your idea, the LLM is not going to be able to actually figure this out by itself. And obviously you're just going to fumble. It's just going to give you garbage. It's not going to give you exactly what you want. So you have to focus on context and by context in here like give it anything relevant to the idea you're working on like documentation pages maybe go ahead into the documentation and copy some very important reference over there uh as of examples you just say oh I'm building Microsoft Word so like yes just give it Microsoft Word as an example and say I want to build a minimal or less minimal version something like that or you want to build like a slack so you you give it slack as an example so after you do all that I go ahead and ask the agent to draft for me a prd and this is very important. So this will create a prd for you for like your your set of features and this step is the most important when it comes you're starting a projects from scratch. Okay. So, in the case of like you're working on a feature or a bug that are small, kind of like small, they're not like big or something, there are sometimes like big features or big bugs. In that case, I would advise going with the PRD. But in the other case where you just like say, oh, I didn't or changing the color of this button or I don't know, maybe changing the color of this button is is uh is very negligible. But you got the idea. It's like something very simple. In that case, you don't go through the PRD because that would be an overkill and that would like, you know, waste a lot of your time and it's not really going to help the LLM at all. So, you just skip this over to the next step. And also, you make sure next ask the agent to iteratively ask all questions to create a solid plan and write that plan into a plan MD file. Of course, that plan MD is going to be saved inside of like your current workspace or your current projects folder for the LM to reference that later on and of course for you to check it out. Also, make sure to focus on the question section in here, like when you tell the LM to ask questions, especially iteratively in here because it's going to check what's missing from the prompt and all the projects or the features that you currently have and, you know, read the code that you have and everything. And if you see something missing or something ambiguous, something not very clear or what tools you want to use or what like how you want to handle this specific scenario and stuff like that, it's going to ask you questions. But if you don't tell it, most LLMs are not going to ask you these questions and it's just going to assume, oh, this user wants this and it's just going to go ahead and and put something or slap something at you that you don't want to or it's just going to basically use a library that you don't want to. Let's say for example, you don't specifically mention which ReactJS library like or framework that you want to use like you don't mention you want to use like Nex.js or ten stack start or vit or something like that. So it automatically assumes if you don't tell it to ask questions it automatically assumes that you want to use vit and it just goes for it with it. In your mind you're thinking oh um I want to use nextjs. So you're probably thinking that it's going to implicitly know that you want to use nextjs but it's not. Okay, so make sure to do that and make sure to provide as said before as many examples and context as possible inside of your prompt. Next is reviewing the plan that was generated by the agent like the plan or MD that we were talking about above here. After you review the plan in here, make sure to carefully ask the agent to amend the plan and ask it any questions regarding the plan. if there's anything ambiguous or you don't understand because you know this will make sure that you as a developer and the AI agent and LLM you are both on the same page and and you guys being both on the same page is more important than actually rushing to the coding or implementation because this will ensure that you don't waste a lot of time and you get like 90% or 95 or even 99% of what you are looking for and the idea from like inside of your head visualized right into code. Finally, in here, of course, submitting the plan after you review everything. Now, you submit the plan for implementation. And that's when the AI agent is going to read the plan, is going to do the reasoning, is probably maybe going to plan this even more and um ask you questions. Again, you don't never know. But uh now you know that you haven't got a solid plan and you will just go ahead and start implementing this and writing the actual code and putting things together. Okay. Now, after you get the projects, that's basically where the part you get the projects. It's it starts from here from right over here. Um you go to test and testing is very important and that's like what the agent cannot automate and do and that's still what the developer has to do. It's actually QA and testing on general. So QA and testing you still have to go ahead and understand exactly the software you built and how it works and how it should behave and you go ahead and test it and you review the generated code. At least at first you just do a testing and make sure that like the features are working as expected. Now there are two cases. If everything works well, which is very very unlikely to do so from like the first one, especially for bigger softer and like you know complicated features and stuff like that, this is like one or 5% chance okay for this to happen. So in case of this happens, you move to adding more features and fixing bugs. Now, now you've got like for let's say you've got feature one on your MVP and feature one works without any bugs. Everything is correct. COI is cool and everything you're good. Now you just move to adding feature two, three, four and so on or maybe fixing bugs. That's actually when you uh move forward with that. Otherwise, in the majority of the times is you get something broken like a broken button. The UI does not look great. it's not responsive as you basically instructed it to or the uh MVP features that are required are not working or behaving as expected and that's when you basically like write exactly what's missing the exactly what's happening when you do the testing and review and you write a very specific prompt about that only specific to that to tackle one thing at a time because clearly the LM cannot handle a lot of things at once and it's better just to give it one very specific specific thing to work on and and think about at a time. So that's the best you could do in this particular case because the LM already failed to oneshot your thing. So it's better just to let you focus on one thing. Uh make sure to include as many contexts and examples. If you could do screenshots, uh copy logs or error logs or something like that, that's the best thing you could do. And that will like 10x or 20x the LM output. Okay? Now keep doing this if you know sometimes it's stubborn. It happened with me so many damn times where I tell it exactly what's happening and give it a screenshot or give it a log from the browser console or immediately what's going on the exception but it fails miserably even with like best Frontier models like Opus 4.6 or GPT codecs like 5.3 or something like that. And I I go through this or I try this like twice or three times until it actually gets through. You know, it's it's a black box. you never know what's happening and LM are not as smart as we think they are. They're just like, you know, they follow instructions and they have this huge corpus of knowledge and information and data. Okay, so once you get that fixed, you just move to adding more features or fixing bugs as you did before because now you have an MVP and obviously you want to add more features because you want to have a complete software of X number of features and as less bugs as possible. not we we cannot say there are no bugs obviously but that's basically what happens over there and obviously u you just want to go with incremental prompts next so because you know your your other prompts or first prompt is like prompt number 01 now you start like you know you write prompt two prompt three prompt four and make sure each prompt in here actually addresses a very specific problem or feature do not include or bloat that with like so many things because the LM said therefore tends to hallucinates and uh cannot parallel or work in parallel with on on multiple features especially if they're as complicated. So better to focus on small things and always save your prompts as I'm as I'm basically noting in here save prompts so you would that's a that's a typo sorry uh so you would later visit them if needed I always use notion to put like you know just prompt two three four five to like prompt 100 and I always save what prompts if puts so later on if I stumble upon something or I know oh why this is a regression or something like that I just go back to the prompt where I already said about this and basically just copy the prompts and you know uh feed it back to the LLM for it to fix or to the AI agents to be a little more specific. But technically that's my workflow. That's been my workflow past couple months. I always try to amend and improve the workflow as much as possible. But that's basically how things should be working and that's what I actually found out to be working best for me. And u I'm pretty sure like a lot of developers um use somewhat similar kind of like workflow because I've been going through Twitter and blog post and stuff like that. That's basically what people agree on cuz that's basically like what LLMs are bound to you know in terms of like pros and cons what they can do what they cannot do and their limits. This is like in my opinion and what worked for me the best workflow that you could follow to use AI agents and LLMs to build good software and write good code. So to put you in perspective, I tried to go through that workflow and build two websites or web applications. You see the first one in here clearly does not follow that workflow and it just you know it it basically does what every beginner AI engineer um or you know developer that wants to use coding agents to build something like a beginner developer would basically just write a simple prompts a couple lines of code or a couple sentences of paragraph and it doesn't or they don't provide as much um as description or content. text or details as possible. This is basically what they end up with. Even though I provided exactly the same thing, the same idea. This is what it ends up with. Everything is kind of like broken. You see the links up here in the navigation bar are bad. Even the sign in and sign up. The only good thing about it is like this wavy thing which is like a video playing in the background. Kind of like got this working. Everything else is bad. Okay, maybe the background is good though. Uh, but the overall structure and color selection, it looks super templatey and it looks just like any other AI slop. Okay, so wait for this. I'm going to show you another web page or another web application that I built following that workflow. Even though I haven't pursued it to fix all the bugs and make sure it like 100% works, but you should see the difference. Uh, this one is basically what following that simple workflow with small adjustments here and there. This is actually where it got me. Like a website that is production ready. I could ship this and nobody's going to think I built this using AI because everything is so good. Everything is almost perfect even though there are small teeny tiny details that are kind of like look broken and it works. The other one does not. So for example, if I provide I'm sorry uh if I provide like let's say I want to scrape Wikipedia. So the idea of the website in here obviously is just to uh a bots or run bots in the background for them to scrape and give you back HTML markdown and plain text. Okay. So I do scrape in here. It takes me to another page. And you guessed it right. The page does not work because I haven't provided as much context as I should and stuff like that. So it's basically not um working. And you can clearly see the UI is garbage. So back to our application in here uh the good workflow. So, I'm going to paste Wikipedia. Click enter. And now bots is going to scrape. So, even though this does not work as intended, well, it it works. You know, it just needs to be fixed for this bug. It gives you back the HTML, which is great. But when it comes to markdown, it still gives you this garbage JavaScript thing, which is not great. It should only give you like, you know, the text of the HTML in markdown. And same thing for text only, it does not work. But overall um when it comes to like styling uh functionality wise everything is you see even hover effects in here are perfect. Um yeah animations you see the landing page in here logos in here are they nailed logos as well. So you see like what I mean by this. If I pursued this, if I'm like actually building this application, I could continue going through the workflow of basically I'm I'm stopping like right into like thoroughly test and review and uh you know I'm just like I found a couple of bugs. So I want to like go through that bug and tell it to you know fix this, fix that. Then I will add another featur like features once get everything or my initial MVP to be working. But you get the point of what I'm trying to say in here and how important or how cool this is uh compared to the other one and functionally and aesthetically as well. Now for both websites I used Gemini 3.1 Pro uh which is absolutely great when it comes to UI design. I I I was mind blown when I tried it first. It's so good. Okay. I'm usually an Opus 4.6 six user and Gemini 3.1 came out I think yesterday the day before and I was like let's give it a try then it actually went so far and he made that design I mean if I give or basically tried it I gave Opus that other design the one that you see in here and he made it absolutely terrible only Gemini crushed this and he made it awesome okay from of course when it first shot so using anti-gravity in here because it's the only place that I could access Gemini 3.1 without rate limits and um through my like $20 subscription to Google. So this actually the prompts I provided if you notice in the top in here prompts looks good first glance right I mean you see everything good I was saying in here make a dark mode website with NexJS react uh the user can put URL in our uh and our bot will scrape it so we can give back HTML markdown and text the scraper needs to bypass antibbot stuff for the design I want a glass navbar logo s pass I don't know what is that but uh some links plus hero section that says is where innovation meets execution with some badges yada yada yada and I'm saying this is actually the video they use your background using this link. I'm just providing a link in here which is like an hls video. Uh I'm not even stating that in this bad prompt which you should you should state the format the video is in what player you want to use, how you want to play it, how you want to position it, all the details in order to get exactly what you want. Okay. Uh all I'm saying in here just play it in loop. And uh the most important part is the big glass input bar that you want to where you know the user submits the button inside of it when the submit link you animate everything and take them back to the empty results page stuff like that. So this basically what most of you or maybe you're good but most of like junior uh developers that are using AI to build stuff would think is good and would basically do and just going to tell you oh why did AI give me slop? Why did AI give me this bad landing page, bad UI, uh semi or half functioning application or something that doesn't even compile and work? Well, duh, because you gave it garbage prompts because you weren't, you know, it didn't provide as many details possible. The LM doesn't have as much context. You may think it does, but many things are missing like the video format I was talking about and the video player, the LLM would not know most of the times. And also like design-wise, you're not telling it what uh design aesthetic to use, what layout to follow, uh whether it should be responsive or not. Text stack is super vague. So there are many many bad things. Let me just jump into the good prompt so you can clearly see the difference in here. This is what the good prompt looks like. Let me So I copy pasted the prompts in here into Figma so you guys can basically read through this better than the other garbage um anti-gravity. I am not a big fan of it. The UI looks awful. So, just from zooming out, you see the comparison in here between the bad prompt. I'm not going to call it the bad prompt, but the like the naive prompt. That's what I'm going to call it because this may seem good, but it misses a lot of important stuff and a lot of important details that you have to put. This is what the good prompt looks like. Even though this prompt could be improved, there are a lot of other details that could be added uh for like if you want a full landing page with other sections and stuff like that. But as I said before, we want to start small. So always start with better start like with one section with one feature something like that. It's best for the LLM and it's going to generate the best code for you as well. So the good prompt now or the better prompt I'm going to call it. I'm telling you to build a highfidelity dark theme web application next.js React TSS and frame of motion. I'm giving it the background in here right away. By the way, these prompts both copied from like a guy on Twitter that was crushing landy pages and it was like I'm going to copy this prompt and I'm going to adjust it to my workflow. And um yeah, here we are. Uh credits to that guy. I forgot their name, but I'm going to provide their um profile down description below or their portfolio. And uh so here the prompts putting that in into sections. except first I'm saying like main idea um I'm giving them like the main idea of the website in here what it does like a you know highlight like an overview the website is for allowing users to provide a web page URL specialized but network would go ahead and scrape the content uh give back HTML markdown stuff like that so I'm giving like a an overview for the LLM to know exactly what to expect next here I'm giving structure and layouts which is important if you want to get back a good user interface right so I'm telling navbar uh should be fixed with blurred glass effects. So, I'm giving it both position and effect in here and styling. I'm giving it the logo, the links, what they should look like. So, like different links in here, maybe case study in here, strikethrough style, uh the CTA for the navigation bar, of course, like get started for free, white gray background or gray gradient button, uh the hero context in here with like center text. I'm even giving it like some small values that I know that the LLM sometimes, you know, doesn't get right for like Z10 and stuff like that to uh put the Zindex. So, that's actually what I'm talking about. When you actually write in a good prompt to provide all the context and details, you have to be as specific as possible and that's why you have to already know um software engineering. You have to be good at your field. And I know, you know, like somebody could be like a product manager and they don't even know what Z10 is or uh what top positioning is or blurred glass effect is. They just like, you know, try to put hard garbage uh into their prompts and expect something good while another developer that does something like this and actually gets back something good. Okay, so I'm going to fast forward through this. Uh you got the point. So like buttons, same thing in here for the video. I'm getting like background video in here. This is actually the source of the video. I'm telling the implementation create a memoise video player component using hls do java. So I'm telling it to use what specific library to read the stream in here and ensure proper cleanouts and and mount to make sure there are no memory leaks. Another good thing uh put in styling positioning made inputs talking about the main input I was talking about before. Now when it comes to animations I'm telling it what to animation to use what fading animations for badges headlines and everything. Now functionality. You see I'm putting everything in here. So functionality I'm telling you the input bar should only accept a valid website web page URL. Uh what happens when you submit it should use the both the enter key and the button. And I'm telling it also that I'm going to be following with prompt two for the functionality of this. So just leave it as an empty placeholder for now. So that's because I don't want to pollute the context. I don't want to make the LM hallucinates or have hard times, you know, doing this. I just want to give it one task. I don't want to actually, you know, give it too much at once. That's what I'm saying. And also like telling in here what the bot should have like anti-bot detection mechanism for the first MVP. Um I'm also telling it how it should basically behave. So when you get back in HTML um I'm telling like to use known libraries from mpm and I'm telling you how you should do the conversion of like HTML to markdown then markdown to basically text only because that's much easier and much better and faster as well. Um the other important part in here is the text and sometimes people do not provide that and I think this is very important. Again context is important. So I'm telling it what to use for video streaming uh animation in here. React use measure for sizing logic and responsiveness. CLX in here for Taywind and Taywin merge and Lucid React in here for icons when it's needed. Uh last but not least, I've put this important section. I always do that all my prompts. I find this to be kind of like guardrail and tell the LM exactly what I'm looking at. So it's always good to provide this. So I'm saying important uh write and clean easy to read and maintainable code. Make sure it's modular and each component is well reused across the projects respecting don't repeat yourself principle. That's good because I'm a big fan of these principles. I use them all the time when I'm code and I want to instruct the LM to write clean code. I hate bad code. Okay. Uh potato code. Um also telling that you're a software or a senior software front end engineer that designs perfect user interfaces and create great user experience. landing page you create translate to high conversion rates and they are perfect. Make sure to build it and test the project to make sure it runs successfully. If there's build errors or something goes wrong, you check what went wrong, fix it, and try again until everything is properly fixed and working. Last but not least, make sure to iteratively ask any questions for clarifying anything before finalizing the plan. This will ensure both me and you are on the same page and you know having yourself and the LM on the same page that is very underrated very important as well and we're moving towards a perfectly planned landing page and project okay that is my prompts my workflow uh how I do it I you know my upgrade my workflow obviously I should because everything should be upgraded as we live more and experience more So, thank you guys for watching. Uh, you're going to find this workflow down description below if you want to check it out. I'm probably going to put it in a git or a gist guest GitHub guest. Um, but anyway, thank you guys for watching. Hope you guys enjoyed the video. Let me know what you think about this workflow. Let me know your workflows. Maybe I could add something or two to mine. Maybe I could change something. Maybe I'm doing something wrong and I'm an idiot. Um, anyh who, thank you guys for watching. I said before, see you hopefully in another interesting AI video. Bye.