in the past creating apps used to take weeks or months and now with AI you can actually cut this down to being able to create apps in days or sometimes even hours which is pretty crazy already and today I want to show you a couple of workflow hacks five to be specific how you can make your workflow of coding with AI even faster and I'm going to be going over five tools and methods how you can speed up your coding workflow so let's jump in so the first workflow hack that I want to show you
is copy coder you might have heard me talk about this in my previous video because we just launched this tool last week what copy coder does is you could take any screenshot of an app or of a design paste it in here get some prompts and these prompts then allow you to build things really fast and recreate whatever it was in that screenshot so I'm going to give you a quick just rundown of how this works let's take a screenshot here of YouTube music and we're going to try to clone this put it into copy
coder generate prompt okay here we have the prompt so now we can take that and before we actually copy it I'm going to go into cursor and I'm going to paste this command which is to set up a nextjs skeleton and also add Shad CN components cool now let's go and grab this initial prompt and we'll just paste that in here so it looks like it's finished generating okay so if it says something like this completes the interface then this round of iteration is done and we can run this and check it out and there
we go we have in just a few seconds we have a clone of this application right if you like a design or an existing application this allows us to just take a screenshot and go really fast from zero to one and have this there and then we can keep iterating on that and there's another cool feature here which is generate the page structure and this allows us to not only have this initial page but also the other pages that are inside of this application will then also be generated if we use this prompt here so
let's try that paste that in here so now it's creating the explore page creating the library page boom it completed here so this the homepage and now the explore page is actually working too and the library page is working too okay awesome and we can obviously iterate from here so as you can see using copy coder just allows you to go from zero to one really fast and this really speeds up your workflow and the second workflow hack that I want to show you is this tool called flow. a and it's a dictation tool but
it's much better than previously existing dictation tools on the market because this one actually has a technology of chat gbt integrated in the background and it just works so fast and so good especially in the context of using this for coding okay I've just opened up a new project here and I'm just going to hit a button on my keyboard and then just speak and it will take that down and write out whatever I said okay so help me create a Chrome extension that lets me track the time that I spent on tasks boom it's
there so it was really fast and if I misspeak or say something wrongly it will obviously correct that for me it takes like the context of the screen and makes sure that the things actually make sense whatever you put there makes like small grammatical corrections as well so it's really powerful we're just going to build out this Chrome extension quickly okay initial part of the Chrome extension is done let's test this let's open this up so as you can see we have the extension here let's open it up and there we go we already have
a time tracker Let's test this so just from one simple voice command we have a time tracker here as you can see there's an error now when I try to log the time so let me go back and just say that so I'm getting an error now when I try to lck the time here let me paste the error past it and we just keep iterating on it with our voice let's see if it did the right job now Okay cool so now it's actually logging the time now I don't like the task history because
it's just showing the time and not the actual name of the task so let's fix that now again with our voice in the task history you're showing only the time and not the name of the task that seems to be missing okay boom so fast and the voice is translated again into text maybe let's try improving the design as well I would like a more minimalistic and modern design instead of the one that we have right now boom voice is transcribed done accept all let's check out how it looks like cool looks a bit more
modern I definitely like it more so just from our voice right so the awesome thing about this is it just allows you to iterate on your code really fast you're just talking to the AI like a true assistant that's just like there waiting for your commands and your commands are just quickly translated into text and all you need to do is hit two buttons like a button to record and then just hit enter to send it off and the cool thing is that most of the time the Ai No matter how rough it is what
you're saying because sometimes it's difficult to describe for example like how you want the design to look like or what you actually mean with the navigation bar being on top but it doesn't have to be perfect because the AI will usually just understand this is what allows you to go so fast and so using a tool like this is just an amplifier for that because you can just speak your mind and the AI will just interpret it usually in the correct way okay the third workflow hack that I want to show you is using CLA
for an initial planning phase of your project because one of the mistakes that I see people making is jumping too quick into projects especially if the projects are really big so you jump in you start building it and then you realize oh actually maybe I want this feature this means I need to rework the feature that I built before or like I didn't think about this dependency that actually means that I need to change the whole setup again and that's why sometimes it's just much smarter to do a planning phase before you actually jump into
the implementation phase and the way to do that is you can use Claud for planning phase and it will help you a lot I'll show you an example here of how I did it I was planning a building a testimonials management app and I just said I want you to help me scope out the product requirements for a new web app that I want to build and then I just I just described what I wanted to have the workflow of how it should look like what features I'm think thinking about and just roughly how the
architecture should look like where things should be saved and so on what claw then does is it does a really good job of breaking everything down that just provides you a lot of clarity first and it provides like technical considerations and fill any of the missing the knowledge gaps that I've have or just help me understand things better when I do this I want to answer three questions I want to know what are the features that this application should have I want to have a overview of how the general architecture of this project should look
like and I want to know if I have any specific knowledge gaps or things that I still need to understand better before I jump into this project and once I feel like this sounds good to me and I want to move forward with this I'll say okay now write a product requirements documentation from this conversation so that I can start designing the app and it wrote this requirements documentation here which is like phase one MVP post MVP what other features we can add and some open questions I actually came back into this chat to ask
some more follow-up questions that I had while was building this project so for example how much will the deployment cost be if I deploy this and things like that just to figure out what my cost would be definitely do a planning phase before you start a semi big project it will save you a lot of time later on then the fourth workflow hack that I want to show you it actually comes right after the planning phase so if we take again this example of the testimonials management app I then took that product requirements documentation that
I generated from Claude and pasted that here into v0 so v0 you can imagine it as a really cool tool that's like your personal designer you can just chat with it and it will create really nice designs for you so in this phase you're trying to refine the design so I pasted the product requirement stock in here after a few iterations it then built something like this which I already really liked and it was it looks very simple but I can take that and iterate from here and it took my requirements and gave me a
visual representation of that which just takes me a step further and lets me think about this in a visual way which is awesome and what you can then do is give give me each page as a separate file so I was starting to break this down so that I can take each page and bring it into development much more easily okay and the last workflow hack is maybe a bit counterintuitive but it is to sometimes just go slower than faster because that will help you go faster in the end when you're coding with AI the
number one thing that makes you spend a lot of unnecessary time on things is when the AI starts messing things up going in loops and ending up breaking up all of your code and then you have to go and dig in and try to find out what the problem is where things broke and you cannot fix it this usually costs the most amount of time the best way to avoid that is to really break things down into small steps for example in this project here on the image generator page I would like to add a
couple of more templates that can be more customizable can you explain all of the steps that are needed to do that and try to make the steps as small as possible it's a f the exact steps to Define new template types create template definitions create template form components so you see there's quite a lot involved in a small change like this update the image generator page step five add preview components Okay cool so it broke down all of the steps for me now I have a better overview of what to do and then you can
from there now go step by step and try to get all of these things done in very small incremental ways this has mainly two benefits it will be easier for the AI to implement each step and the second thing is also that if you do the step-by-step approach you yourself will understand a lot more about what is happening instead of if you give it a huge command and it does everything at once then you have no idea what's happening you don't need to understand the specifics of the code but you should understand roughly what this
file is doing or like how these files interact with each other and once you understand that it will become much easier for you to fix issues and direct the AI to fix the issues later on and if you would like more support and even if you're a beginner who has never written code before and would like to start building something with AI we have a community here called The Prompt Warriors community where there are over 1,000 Builders we're we're building things together we have regular calls we have chats with other builders who are helping each
other out so come join us there if you want to learn how to code with AI all right bye-bye
