How to use AI effectively in your giant plans

“AI won’t take your job – but a developer who knows how to use AI’s will.” I have seen this statement everywhere, and this is the only one in which we take jobs that I fully agree. Software development has changed. It was not what happened before, and it is a good thing.

Let’s get one thing straight: AI is to help, not to change. Your work, was never my job Only To write the code. The writing code was always a part of it. Our original job is to develop software solutions that work. And since an AI trained on the collective knowledge of millions of developers, perhaps you can write a better, clean boilerplate, so you should allow it. Your skills are better use somewhere.

In this article, I show you exactly how I use AI to perform work fast. We will walk through the car rental website, and you will see how I use AI:

• Preliminary planning and research

• Design and even copy UI

• Write all boring boiler plate code

• To improve the code and improve it

Looks like the website we are building: ((Direct demo(Gut Hub RippoJes

The table of content

1. Step 1: Planning and Research (Mental Storms)

2. Step 2: Design and Copy UI

3. Step 3: Writing boiler plate code

4. Step 4: Making the code actually good

5. So, what is a techway?

6. Frequently asked questions

Step 1: Planning and Research (Mental Storms)

So, a client kills me. They own a car rental business and want a simple website. People need to see cars and have an easy way to call and rent them. Quite easy

So what should I do? I do not fire the code vs. I take this information directly to GPT and ask it for IDs.

Instant:

You are a website designer and you have a client who owns a car rental website. They want a simple website that shows the cars they have for rent and an option for renting people. How would you go about building it?

Output:

You can see how easy it was. So what did he spit? Basically a complete project short. It gave me a roadmap that suggested key pages, such as homepage, car lists, and contact page. It also outlined the essential features of the search bar and filtering options, and recommended a modern tech stack such as React that was exactly what I intended to use.

With this order, I wanted to see how it looks like it, so I had some sharp wire frames.

Instant:

From the above, prepare the wire frame that looks like the entire website like its pages.

Output:

Now I have got a blueprint. The whole step of the discovery, which may take hours or days, is done in minutes.

Step 2: Design and Copy UI

Well, I have a rough idea of layout. Time to turn these ugly wire frames into real design. Its i, i use AI -powered ui generation tools (you can find something there, such as https://stich.withgogle.comOr even use v0.dev To get ideas).

I just uploaded the wire frame from Chat GPT and told me what I want.

Instant:

Transform these wire frames into a clean, modern design for a car rental website. It looks reliable.

Output:

Now, one thing I like about these tools is that they just don’t spit a beautiful picture. They give you the original code for it.

Here is a sample of the kind of clean html that I have given 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 Camryh3>
  <p class="text-lg font-semibold text-blue-600 mt-2">$50/dayp>
  <ul class="mt-4 space-y-2 text-sm text-gray-600">
    <li class="flex items-center">
      <span>4 Seatsspan>
    li>
    <li class="flex items-center">
      <span>Automaticspan>
    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 full code Here.

And that’s how, I have found the website design and the Starter Code for it. No Figma, no slicing asset, directly to an idea of code.

Step 3: Writing boiler plate code

I said earlier that AI can write better code than you, and I stand with it. He was trained on all code with every public report, every tutorial, every developer. Suppose every developer’s collective brain is better than you, AI has a serious edge. If You can guide it.

I wanted to use my car rental site, I wanted to use the reaction. So I just copied the HTML code from the design tool and pasted it into Gemini with some clear instructions.

Instant:

You are a senior rect developer. Convert the following HTML and Tel Wind CSS code to a completely functional react application.

Requirements:

1. Use the White as a Blood Tool.

2. The project type should be in the script.

3. Enforce UI components using shadcn/ui Where appropriate (for example, buttons, cards).

4. Use the loside reaction for icons

5. Code in logical components structure (eg, NavbarFor, for, for,. CarCardFor, for, for,. Footer,

6. Make a root App.tsx The file that collects these ingredients. Output:

Consider how much I was very specific about my desired tools? If you want the best output, you have to tell the AI exactly what you want. Don’t be vague. Her guidance. This means that you will need to know and understand the tools needed to make such a project.

Overall, it was probably ten minutes since I reached the client’s message when I operated a working react app on my machine. A website is built in ten minutes or less. This was not possible a little ago, but with the help of AI, you can move forward very fast.

Step 4: Creating a code Original Nice

Look, I know it’s far from work. The AI gave me a good start, but this is not the finished product. I still have to plug in CMS or database, setting up real logic – you think. This is the place where Actual Development begins, and AI is still my partner pilot.

What got the right (and wrong) to AI

The AI did a wonderful job on the first pass. It correctly resorted to the Wat + React + TS Project, components Folder, and even used shadcn/ui The ingredients where I asked. It saved me for a traumatic setup for at least 30-45 minutes.

But it was not perfect. For example, the initial data of the cars was directly coded directly within the component. This is a very large number of a real app that needs to be scale from the database. Also, the ingredients were not as reusable as I want.

This is the place where you work as a developer – properly for review, reflects and architects.

Refecting in the process

I go to AI permanently to improve the code. I treat him like a couple’s programmer. Here is an example. AI gave me a first CarCard The ingredient that looks like this:

Before Refecting (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 (
    

      
{carName}
      
${price}/day
      Rent Now
    
  );
};

This is fine for the demo, but useless for real application. So, I guided to reactivate AI. I would ask him something like this, “Refector this CarCard Car data (name, price, photo) and a component of accepting the papers for a function for the rent button. “

After reflecting (my guide 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 (
    

      
      
{car.name}
      
${car.price}/day
      () => onRentNow(car.name)}>Rent Now
    
  );
};

See the difference? Now it is a re -usable, type caffar component that receives its data from the outside. This is another behind conversation. I write some code, AI clears it. AI writes some code, I fix the logic. This is a pairing programming on steroids.

So, what is a techway?

The game has changed. AI is a tool, perhaps the most powerful we have been given. It automate boring things so we can focus on severe problems – architecture, performance and user experience.

The developers that neglect it are operating with the help of embracing people. It is about to work hard, not difficult.

Frequently asked questions

Q: What is the best AI model to use? Chat GPT or Gemini or something else?

A: In fact, they are very good at writing the code, and it’s all about “trash, garbage out”. The results you get are as good as your indications. But if I had to choose one for the writing and reflecting code, especially, I would probably pick up Gemini. Your mileage may vary.

Q: If I trust AI, do I forget how to code?

A: It’s up to you. If you just copy and paste what’s happening without understanding, yes, your skills will be dimmed. But if you use it to learn, look at different ways to solve a problem, and to check your work, it will, in fact, make you faster, faster.

Q: Is it moral to use AI for client work?

A: Of course your client is paying for a working website, not type every bracket for your blood, sweat and tears. Is it immoral to use a framework such as reacting or pulling a package from NPM? No, it’s the same thing. This is a device. Just make sure the final product is solid, because you are the one who is eventually responsible for it.

Q: What about insects? Does AI write the perfect code?

A: The hack number will give you a small code. It will make things. Do not close your eyes and trust it. My rule is to treat the code with an AI as it has come from a talented but extremely scary junior Dev. You have to test their work. Run it, test it, and if it breaks, you can also paste the small code into AI and say, “Hey, fix it.” It’s amazingly good at cleaning your dirt.

If you have any questions, find me on Twitter free SpruchekhalifaAnd don’t forget to follow me for more points and updates. Happy coding!