“AI is not going to take your job – but a developer who knows how to use AI will.” I’ve seen this statement everywhere, and it’s the only one about AI taking our jobs that I totally agree with. Software development has changed. It’s not what it used to be, and that’s a good thing.
Let’s get one thing straight: AI is here to help, not to replace. Your job, my job, was never just to write code. Writing code was always just a part of it. Our real job is to build software solutions that work. And since an AI, trained on the collective knowledge of millions of developers, can probably write better, cleaner boilerplate than you, you should let it. Your expertise is better used elsewhere.
In this article, I’ll show you exactly how I use AI to get work done faster. We’ll walk through building a car rental website, and you’ll see how I use AI for:
-
Initial planning and research
-
Design and even UI Copy
-
Writing all the boring boilerplate code
-
Improving the code and making it better
Here’s what the website we’re building looks like: (Live demo) (Github Repo)
-
Step 1: Planning and Research (The Brainstorm)
-
Step 2: Design and UI Copy
-
Step 3: Writing the Boilerplate Code
-
Step 4: Making the Code Actually Good
-
So, What’s the Takeaway?
-
Frequently Asked Questions
Step 1: Planning and Research (The Brainstorm)
So, a client hits me up. They own a car rental business and want a simple website. People need to see the cars and have an easy way to call and rent them. Simple enough.
So what do I do? I don’t fire up VS Code. I take this info straight to ChatGPT and ask it for ideas.
Prompt:
You’re a website designer and you have a client that owns a car rental website. They want a simple website that displays the cars they have for rent and an option for people to rent them. How would you go about building this?
Output:
You can see how easy that was. So what did it spit out? Basically a full project brief. It gave me a roadmap suggesting key pages like a Homepage, Car Listings, and a Contact page. It also outlined essential features like a search bar and filtering options, and recommended a modern tech stack like React which was exactly what I was planning to use.
With that sorted, I wanted to see what it might look like, so I had it generate some quick wireframes.
Prompt:
From the above, Generate the wireframes of what the entire website with its pages will look like.
Output:
Now I’ve got a blueprint. The whole discovery phase, which could take hours or days of back-and-forth, is done in minutes.
Step 2: Design and UI Copy
Okay, I’ve got a rough idea of the layout. Time to turn these ugly wireframes into a real design. For this, I use AI-powered UI generation tools (you can find a few out there, like https://stitch.withgoogle.com, or even use v0.dev to get ideas).
I just uploaded the wireframes from ChatGPT and told it what I wanted.
Prompt:
Turn these wireframes into a clean, modern design for a car rental website. Make it look trustworthy.
Output:
Now, one thing I love about these tools is that they don’t just spit out a pretty picture. They give you the actual code for it.
Here’s a sample of the kind of clean HTML it gave me for a single car card:
<div class="bg-white rounded-lg shadow-md p-4 flex flex-col"> <img src="/path-to-your-car-image.png" alt="Toyota Camry" class="rounded-md mb-4"> <h3 class="text-xl font-bold text-gray-800">Toyota Camry</h3> <p class="text-lg font-semibold text-blue-600 mt-2">$50/day</p> <ul class="mt-4 space-y-2 text-sm text-gray-600"> <li class="flex items-center"> <span>4 Seats</span> </li> <li class="flex items-center"> <span>Automatic</span> </li> </ul> <button class="mt-auto bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300"> Rent Now </button> </div>
You can always play with the full code here.
And just like that, I’ve got the design of the website and the starter code for it. No Figma, no slicing assets, just straight from an idea to code.
Step 3: Writing the Boilerplate Code
I said earlier that AI can write better code than you, and I stand by it. It was trained on all the code from every public repo, every tutorial, every developer put together. Assuming the collective brain of every developer is better than you alone, the AI has a serious edge – if you can guide it.
For my car rental site, I wanted to use React. So I just copied the HTML code from the design tool and pasted it into Gemini with some very clear instructions.
Prompt:
You are a senior React developer. Convert the following HTML and Tailwind CSS code into a fully functional React application.
Requirements:
-
Use Vite as the build tool.
-
The project must be in TypeScript.
-
Implement the UI components using shadcn/ui where appropriate (for example, Buttons, Cards).
-
Use lucide-react for icons
-
Structure the code into logical components (for example, Navbar, CarCard, Footer).
-
Create a root App.tsx file that assembles these components.Output:
Notice how I was super specific about the tools I wanted? If you want the best output, you have to tell the AI exactly what you want. Don’t be vague. Guide it. This means you’ll need to be familiar with and understand the tools needed to create this kind of project.
Overall, it took maybe ten minutes from the time I got the message from the client to the time I had a working React app running on my machine. A website built in ten minutes or less. This was not possible a while back, but with AI helping, you can move insanely fast.
Step 4: Making the Code Actually Good
Look, I know this is far from done. The AI gave me a great start, but it’s not a finished product. I still have to plug in a CMS or a database, set up the real logic – you get the idea. This is where the real development starts, and AI is still my co-pilot.
What the AI Got Right (and Wrong)
The AI did a surprisingly good job on the first pass. It correctly scaffolded the Vite + React + TS project, created a components folder, and even used shadcn/ui components where I asked. This saved me at least 30-45 minutes of tedious setup.
But it wasn’t perfect. For example, the initial data for the cars was hardcoded directly inside the component. That’s a huge no-no for a real app that needs to scale or pull from a database. Also, the components weren’t as reusable as I’d like.
This is where your job as a developer comes in – to review, refactor, and architect properly.
Refactoring in Action
I constantly go back to the AI to refine the code. I treat it like a pair programmer. Here’s an example. The AI first gave me a CarCard component that looked something like this:
Before Refactoring (AI’s First Draft):
import { Button } from "./ui/button"; export const CarCard = () => { const carName = "Tesla Model S"; const price = 95; const handleRentNow = () => { console.log("Renting Tesla Model S"); }; return ( <div> <h2>{carName}</h2> <p>${price}/day</p> <Button onClick={handleRentNow}>Rent Now</Button> </div> ); };
This is fine for a demo, but useless for a real application. So, I guided the AI to refactor it. I’d ask it something like, “Refactor this CarCard component to accept props for car data (name, price, image) and a function for the rent button click.”
After Refactoring (My Guided Version):
import { Button } from "./ui/button"; export interface CarProps { name: string; price: number; imageUrl: string; } interface CarCardProps { car: CarProps; onRentNow: (carName: string) => void; } export const CarCard = ({ car, onRentNow }: CarCardProps) => { return ( <div> <img src={car.imageUrl} alt={car.name} /> <h2>{car.name}</h2> <p>${car.price}/day</p> <Button onClick={() => onRentNow(car.name)}>Rent Now</Button> </div> ); };
See the difference? Now it’s a reusable, type-safe component that gets its data from outside. It’s a back-and-forth conversation. I write some code, the AI cleans it up. The AI writes some code, I fix the logic. It’s pair programming on steroids.
So, What’s the Takeaway?
The game has changed. AI is a tool, probably the most powerful one we’ve ever been given. It automates the boring stuff so we can focus on the hard problems – architecture, performance, and user experience.
The developers who ignore this are going to be lapped by the ones who embrace it. It’s about working smarter, not harder.
Frequently Asked Questions
Q: What’s the best AI model to use? ChatGPT or Gemini or something else?
A: Honestly, they’re all great at writing code, and it’s all a matter of “Garbage in, Garbage out.” The results you get are only as good as your prompts. But if I had to choose one right now specifically for writing and refactoring code, I’d probably pick Gemini. Your mileage may vary.
Q: Will I forget how to code if I rely on AI?
A: That’s on you. If you just copy and paste without understanding what’s happening, then yeah, your skills will get dull. But if you use it to learn, to see different ways of solving a problem, and to check your own work, it’ll actually make you a much better developer, faster.
Q: Is it ethical to use AI for client work?
A: Of course. Your client is paying you for a working website, not for your blood, sweat, and tears typing every single bracket. Is it unethical to use a framework like React or pull in a package from npm? No. This is the same thing. It’s a tool. Just make sure the final product is solid, because you’re the one who is ultimately responsible for it.
Q: What about bugs? Does AI write perfect code?
A: Heck no. It will give you buggy code. It will make things up. Don’t trust it blindly. My rule is to treat code from an AI like it came from a talented but very eccentric junior dev. You have to check their work. Run it, test it, and if it breaks, you can even paste the buggy code back into the AI and say, “Hey, fix this.” It’s surprisingly good at cleaning up its own mess.
If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!
Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More.
