Vibe Coding Beginner's Guide

Vibe coding has completely changed how you can build websites, apps, and other projects. Because instead of needing to know exactly how to write every line of code yourself, you can describe what you want to an AI tool like ChatGPT, Claude, or Gemini and have it write the code for you.

But there's a little more to vibe coding than simply asking AI to “build me an app” and hoping for the best.

You still need to know how to communicate what you want, give the AI the right context, test what it creates, and recognize when something isn't working as intended.

That's what you'll learn in this guide, so let’s get into it!

Sidenote: I actually teach how to become a vibe coder in this course:

Beginner

Vibe Coding Bootcamp: Build Your Wildest Dreams From Scratch

18 Hours •158 Lessons

If you can dream it, you can build it. Learn to code by using AI tools like Cursor, Copilot, Claude, Gemini, ChatGPT, open source tools & more by crafting your vision and building 10+ professional projects.

Jacinto Wong

I teach you how to learn to code by using AI tools like Cursor, Copilot, Claude, Gemini, ChatGPT, open source tools & more by crafting your vision and building 10+ professional projects. Perfect for both beginners and experienced developers looking to start their journey with AI coding. 

If you want a sneak peak at that 18 hour course, I actually put the first 7 hours online for free that you can watch below:

The first 2-3 hours or so are what this article is based on, so if you prefer to watch vs read then check that out. Otherwise, let’s get into it!

What is Vibe coding?

In the past few years, it's become even easier to code and build a project thanks to AI. 

Why?

Simply because we can now start coding by using conversational English:

We call this ‘vibe coding’ and it allows people to become an ‘AI augmented developer’ but what does that really mean?

Well, the easiest way to think about this shift is that instead of being the person who writes every line of code, you become more like the film director on a movie set.

Think about what a film director does.

They don't personally operate every camera, build every set, or create every special effect.Instead, they hold the vision for what they want to create, communicate that vision to their team, and then review the results and make adjustments until they get what they want.

Vibe coding works in much the same way.

The AI becomes your technical partner. It can handle much of the actual coding, while your job is to decide what you want to build, communicate that clearly, review what the AI creates, and guide it when the result isn't quite right.

It’s kind of crazy really because we went from developers manually writing everything themselves, to tools like IDEs and GitHub Copilot helping developers write code faster, to today's generative AI tools being capable of creating entire features and applications from conversational instructions.

However, that doesn't mean you can simply ask AI to build something and blindly trust whatever it gives you!

To use these tools effectively, you first need to understand some of their quirks and limitations.

Understand the quirks and limitations of AI

AI can generate a huge amount of working code incredibly quickly, but it's not perfect.

If you're going to act as the director, you need to understand the strengths and weaknesses of the tool you're directing.

There are four main quirks you need to be aware of.

Garbage in, garbage out

The quality of the code you get from AI is heavily influenced by the quality of the instructions you give it.

For example

You could simply ask:

Make me a button in HTML.

The AI can certainly do that, but you've left almost every decision up to it, so it has to decide what the button says, what color it is, what it looks like, and how it behaves.

This means you’re probably not going to get what you want, because the request was weak. But, if you compare that with a more specific prompt:

Create the HTML and CSS for a modern call-to-action button. It should say "Get Started Now." The background should be a vibrant blue gradient, the text should be white and bold, the corners should be rounded, and it should have a subtle box shadow. When a user hovers over it, the button should slightly grow in size.

Now the AI has a much clearer idea of what you actually want, so the result should be much closer to your original vision.

We'll look at how to write better prompts in more detail later in this guide.

AI can hallucinate

AI can also confidently give you information or code that's completely wrong.

This is known as a hallucination.

For example

You might ask an AI to use a particular function from a JavaScript library. But rather than tell you that the function doesn't exist, it may occasionally generate convincing-looking code that uses the nonexistent function anyway.

The problem here is that the code can look completely legitimate… until you actually try to run it and realize it’s not doing anything. This is why you should never assume AI-generated code is correct simply because the AI sounds confident.

You need to test what it gives you.

AI doesn't always have the latest information

AI models also don't necessarily know everything that's happening right now.

Depending on the model and tools you're using, its underlying knowledge may have a cutoff date. That means it could suggest an older approach even though a newer or better solution is now available.

Some AI tools can overcome this by searching the web, and you can also provide current documentation directly when you're working with a newer library or feature.

Either way, don't automatically assume that the first solution you're given is the most current or best way to solve the problem.

The same prompt can produce different results

Finally, AI is non-deterministic. This means you can give the same model the exact same prompt multiple times and receive different answers.

This can actually be incredibly useful.

Why?

Well, if you're brainstorming designs or trying to solve a problem and don't like the first result, generating another response may give you a completely different approach that you can then have an aha moment from.

However, it also means you shouldn't expect perfectly repeatable results every time.

The important thing to remember with all four of these quirks is that AI is a tool you need to direct, not something you should blindly trust.

Be specific about what you want, verify the output you're given, provide up-to-date information when necessary, and be prepared for the results to vary.

Next, let's look at some habits that will help you work with these tools more effectively.

Develop a professional vibe coding mindset

Understanding AI's limitations is only half the battle. You also need to change how you work with it.

The goal isn't to sit back while AI does everything for you. You still need to actively direct the process, question what it gives you, and take responsibility for the final result.

Here are a few habits that will help.

Be an active participant

Don't blindly copy and paste whatever the AI gives you.

Look at the result and ask yourself whether it actually matches what you wanted:

• Does it work correctly? 

• Does it look right? 

• Is there anything you want to change?

Remember, you're the director. The AI's first response is simply a first draft that you can continue directing and improving.

Actually build things

Watching someone else vibe code isn't the same as doing it yourself.

The best way to learn this workflow is to open the tools, write your own prompts, generate the code, run it, make mistakes, and figure out how to fix them. That's how you start developing an instinct for communicating with AI and recognizing when something isn't working.

We’ll actually go through a mini project later on you can play around with.

Sidenote: If you want to build even more, we have 10 projects to build inside my vibe coding course:

Don't be afraid to break things

Experimenting is an important part of vibe coding.

For example

You might ask AI to completely change a layout, replace a feature, or try an approach you're not sure will work, but then it breaks everything.

This is fine!

Later in this guide, we'll look at version control using Git, which allows you to create save points for your project. This way if an experiment goes horribly wrong, you can simply return to a previous working version.

That gives you the freedom to try things without constantly worrying about destroying your project.

Ask why

One of the biggest advantages of learning to code with AI is that the same tool writing your code can also explain it to you, so if it generates something you don't understand, just ask!

For example

“Why did you use CSS Grid instead of Flexbox here?”

Or

“Explain this JavaScript function to me as if I'm a complete beginner”.

You can even ask whether there's a more modern or accessible way to achieve the same result.

The goal isn't simply to generate working code as quickly as possible. Use AI as a tutor and gradually build your own understanding as you create things.

Protect sensitive information

However, there is one thing you need to be aware of that a lot of general users seem to forget, and that's the fact that there is information you should never casually paste into an AI chat.

That includes things like:

• Passwords

• Private keys

• Sensitive customer or client data

• And proprietary information you don't have permission to share

Basically, treat anything sensitive with the same care you would anywhere else online.

You're responsible for what you build

Finally, remember that you're responsible for the finished product, even when AI wrote the code.

That means that if the AI introduces a bug or security vulnerability and you publish it, you can't simply blame the AI.

Your job as the director is to review, test, question, and refine its work before you approve it.

That's why the workflow we're about to look at is so important as well as learning the core foundations of coding once you’re up and running.

Before then though, let’s break down this workflow…

Follow the Director's Process

Now that you understand your role as the director, let's turn that idea into an actual process you can follow whenever you vibe code.

Remember that AI is incredibly good at knowledge and speed. It can write code much faster than you can, remember the syntax for different programming languages, and come up with solutions to technical problems, but it doesn't truly understand what you're trying to create.

That's your job.

You provide the creative why behind the project, while AI helps you figure out the technical how.

Always start with the simplest possible version

One of the easiest mistakes to make when you first start vibe coding is trying to build everything at once.

For example

Let's say you wanted to create an interactive quiz.

You could give the AI one enormous prompt asking it to create 50 questions, multiple categories, a scoring system, animations, user accounts, a leaderboard, and everything else you eventually want the project to include.

But that's also giving the AI a lot of opportunities to get something wrong, so instead, start with the simplest possible version of your idea.

• Ask it to create a quiz with a single question and make sure that works first

• Then add another question

• Add the scoring system

• Add the next feature

• And test each new piece as you go

By breaking a complicated project into smaller problems, you make it much easier to see what's working, identify what's broken, and tell the AI exactly what needs to change.

This leads us to the Director's Process.

I’ll deep dive into this later as we build a project together, but for now let’s break down a quick overview.

Step #1. Have an end vision for what you want to create

Every project starts with your vision.

What is it that you’re actually trying to create?

You don't need to know how to code it yet. That's where AI can help. But you should have a reasonably clear idea of what the finished result should do, who it's for, and what you want the experience to be like.

For example

For a simple project, your vision might be:

I want to build a simple Pong game that two people can play in their browser.

But for a larger project, you'll want to spend more time planning the features, design, audience, and goals before you start generating code.

We'll look at how to do that later in this guide.

Step #2. Prompt

Next, you need to communicate that vision to the AI, and we call this ‘prompting’.

The clearer you can explain what you're trying to achieve, the easier it is for the AI to generate something close to what you actually want.

You don't need to become a master prompt engineer before you build anything. You can start with simple instructions and improve them as your projects become more complicated.

We'll also look at a framework later in this guide that makes writing detailed coding prompts much easier.

Step #3. Generate

Once you've given the AI your instructions, let it generate the code.

Depending on the tool you're using, it might generate code that you need to copy into another application, or it may allow you to preview and run the project directly inside the AI tool.

Either way, don't treat the generated result as the finished product. It's simply the AI's first attempt at turning your vision into something real.

Which leads us to the next step in the process…

Step #4. Test it works!

Next, test what the AI created and check that it actually works:

• Click the buttons

• Try the features

• Look at the design

• Try to use the project the way a real user would.

Don't just look at the code and assume everything is fine because it appears convincing.

Remember what we learned about hallucinations earlier. AI can generate code that looks perfectly reasonable but contains errors or doesn't behave the way you intended. Sometimes it can even refer to things that don’t exist, so always check!

Testing is how you find those problems and fix them, which leads us to the final stage in the process…

Step #5. Refine

This is such an important part, and it’s just about fixing what’s broken. It’s also useful for getting the end vision in place.

• Maybe something is broken

• Or it technically works, but the design isn't what you pictured

• Or perhaps the first version gives you a new idea for how the project could be improved

All you need to do is tell the AI what needs to change, generate another version, and test it again.

This means the Director's Process isn't really a straight line.

It's a loop:

Vision → Prompt → Generate → Test → Refine

For example

You might go through the Test and Refine stages several times before you're happy with the result and that's completely normal.

The goal of vibe coding isn't to write one perfect prompt that magically produces a finished application. Your job as the director is to guide the AI toward your vision one step at a time.

Make sense?

So now that you understand the process, let's look at some of the AI tools you can use to actually do it.

Choose an AI tool for vibe coding

Now that you understand the Director's Process, you need an AI tool that can actually generate the code for you.

The good news is that you don't need to overthink this when you're getting started.

There are plenty of AI tools available, including dedicated AI coding tools. But for now, you can learn the fundamentals using a general-purpose AI assistant such as ChatGPT, Gemini, or Claude.

You can also get started with the free versions of these tools. Paid plans generally give you access to additional features and higher usage limits, but you don't need to pay just to start learning the vibe coding process.

Let's quickly look at the three tools we'll use.

ChatGPT

ChatGPT gives you a conversational interface where you can describe what you want to build and continue refining the result through follow-up messages:

Each conversation also keeps the previous messages as context, which is important when you're vibe coding.

For example

You could ask ChatGPT to generate a simple website and then follow up with:

Make the heading larger.

It understands that you're referring to the website you've already been working on because that previous conversation is part of its context.

You can also regenerate responses if you're unhappy with the result.

Remember our lesson on non-determinism earlier? Generating another response to the same prompt can sometimes give you a different solution.

Gemini

Google Gemini works in a similar conversational way:

However, it also has a Canvas feature that we can use. This is a workspace where you can generate code and see a preview of what you've built alongside it.

That's particularly useful for vibe coding because you can immediately see what the generated code actually does rather than judging it purely by looking at the code itself.

You can then continue giving Gemini instructions and refining the project.

Claude

Claude is fairly similar to Gemini in that it has the same conversational interface as all 3 tools:

But it also has another useful feature for this kind of workflow called Artifacts.This means that when Claude generates something such as a website or interactive project, it can place the result inside an Artifact where you can preview what you've created.

Again, this makes the Director's Process easier because you can generate something, test the result, and then continue the conversation to refine it.

Which AI should you use for vibe coding?

For now, don't worry too much about choosing the best AI because they can all pretty much do the same job, and they all improve regularly.

The most important thing is learning the process because once you understand how to direct AI effectively, those skills can transfer between different models and tools, so pick one and start building.

Speaking of which…

Build your first project with AI

Now that you've seen the tools, let's actually build something and start with a simple Pong game.

So let's get into it..

Create the first version

Open a new chat and give it this prompt:

Can you generate a Pong game with HTML, CSS, and JavaScript?

That's it.

We're deliberately keeping our first prompt simple because right now we just want to see whether the AI can turn our basic vision into something that works. 

(Remember the Director's Process from earlier. Rather than trying to create a huge application with dozens of features, we're starting with the smallest version of our idea and getting that working first).

ChatGPT will generate the HTML, CSS, and JavaScript needed to create the game.

Depending on the tool you're using, you may be able to preview generated projects directly. Otherwise, you can copy the code into a tool such as CodePen and run it:

Now comes the important part.

Don't assume it works just because the AI gave you some code. Test it.

In my example, the generated Pong game worked. There were two paddles, the ball moved around the screen, and two players could control the paddles using their keyboards.

So we've successfully gone from: 

Vision → Prompt → Generate → Test

And because our simple version works, we can start refining it.

Refine what the AI created

You don't need to throw away the entire project and write another enormous prompt every time you want to change something.

Instead, just tell the AI what you want changed.

For example

In the video I shared earlier, I actually went ahead and built the game using all 3 tools just to see what it would look like from each of them (and to show you can do this with all the tools). 

What was interesting is that some of them had cool UI and explanations of how to play the game:

I really like that part, however, it had quite a small game interface:

I decided that I wanted the game area to be larger, and the paddles to be smaller, so I simply asked Gemini to make those changes:

That worked, so then I asked it to make the design to look more like classic Pong:

Pretty cool right!?

This is the Refine part of the Director's Process. 

We generated something, tested it, decided it wasn't quite what we wanted, and then gave the AI more direction. You can continue doing this until the project gets closer to the vision you had in your head.

For a simple project like this, that might only require a few instructions, but as your projects get larger, you'll quickly run into a new problem…

Fortunately there’s a solution.

Create a project brief before you start coding

Our Pong game was simple enough that we could describe what we wanted in a single sentence and start building, but what happens when you want to create something more complicated?

Well, you could try putting every idea you have into one enormous prompt, but you'll usually get better results if you take a few minutes to plan the project first.

I like to think of this as creating a blueprint.

If we go back to our film analogy, before a director starts shooting a movie, they have a script, storyboards, casting decisions, locations, and a plan for how everything fits together.

We can do something similar when vibe coding, and the great thing is that you can use AI to help you create the blueprint!

Start with the goal of your project

First, decide what you're actually trying to build.

For example

Let's say I want to create a personal portfolio website. Rather than immediately asking AI to generate the website, I can start by explaining the idea and asking it to help me plan the project:

From there, I can start working through the important decisions before we write any code.

Decide who it's for

Think about who will actually use the project, because knowing your audience helps you make better decisions about everything that follows.

A portfolio designed to help you land a development job might need to emphasize your technical skills and projects, while a portfolio designed to attract freelance clients might focus much more heavily on your services and previous results.

If you’re not sure,you can even ask the tools to help you with some clarification:

Decide what it needs to do

Next, list the functionality and content your project actually needs. (And again, you can ask the tool if you’re not sure).

For our portfolio, that could include things like:

• A hero section

• An about section

• Featured projects

• Skills

• Contact information

• Links to GitHub and social profiles

You don't need to think of absolutely everything. The goal is to get the core structure of the project out of your head and into a plan that both you and the AI can understand.

Plan the look and feel

You can also make some basic UI and UX decisions before you start coding.

For example

• What colors do you want to use?

• Which fonts fit the style you're going for?

• Should the design feel minimal and professional, or bright and playful?

• How should the hero section be laid out?

Again, you don't need to be a professional designer.

If you're unsure, ask the AI for suggestions and then direct it toward the options you prefer:

Turn everything into a project brief

Once you've made these decisions, bring them together into a simple project brief.

Your brief should give the AI a much clearer picture of:

• Goal: What are you building and why?

• Audience: Who is it for?

• Content and functionality: What does it need to include or do?

• UI/UX: How should someone interact with it?

• Visual style: What colors, fonts, and general design direction should it use?

• Layout: How should the main sections be organized?

This doesn't need to become a 20-page specification. You're simply taking the vague idea in your head and turning it into something concrete before asking AI to build it.

Spending a few minutes doing this upfront can save you from endless revisions later because you're giving the AI a much clearer target to work toward.

Learn how to write better AI coding prompts

Now that you have a blueprint for what you want to build, you need to communicate that vision to the AI.

This is where prompting becomes important.

As we saw earlier, you can give AI a simple prompt like:

Can you generate a Pong game with HTML, CSS, and JavaScript?

And sometimes that's all you need.

But as your projects become more complicated, vague prompts leave more decisions up to the AI. If you want more control over the result, you need to give it clearer instructions.

One framework I like to use for this is RTCCF (Role → Task → Context → Constraints → Format).

Let's break down what each of these means as I build this prompt.

Role

Start off by telling the AI who you want it to act as.

For example

You could tell it to

“Act as an expert frontend web developer”.

By doing this, you're essentially giving the AI a perspective to work from so it has some context for the level it's trying to achieve:

Depending on what you're trying to accomplish, you could ask it to act as a UI/UX designer, JavaScript developer, accessibility expert, or whatever role makes sense for the task.

Task

Next, tell the AI exactly what you want it to do. This should contain a clear action.

Try to avoid vague instructions like "help me with my website."

• Do you want it to create something? 

• Fix something? 

• Explain something? 

• Review something? 

• Refactor something?

Tell it exactly what you want it to do.

For example

Context

Next, give the AI the background information it needs to complete the task properly. This is where the project brief we created earlier becomes incredibly useful.

You might explain who the website is for, what you're trying to achieve, what features you've already built, which technologies you're using, or provide existing code that the AI needs to work with:

Without that context, the AI has to make many of those decisions itself, so the more relevant information you can provide, the better it can understand what you're actually trying to accomplish.

We'll look much deeper at context later in this guide because it's one of the most important parts of working effectively with AI.

Constraints

Constraints tell the AI about any rules or limitations it needs to follow.

For example

You might specify particular colors, technologies, accessibility requirements, browser support, maximum lengths, or things the AI should avoid.

Constraints help narrow the range of possible solutions and stop the AI from making decisions you don't want it to make.

You can also improve your prompts by giving the AI an example or two. 

We call this one shot or few shot prompting. You don’t have to do this every time, but showing the AI what you mean can sometimes be more effective than trying to explain everything in words.

Format

Finally, tell the AI how you want the answer delivered:

You could ask for a single HTML file, a step-by-step explanation, a table, a checklist, or whatever format makes the result easiest for you to use.

This might seem like a small detail, but clearly defining the output makes the AI's response much easier to work with.

Then put RTCCF together

Once you combine these five elements, you go from giving AI a vague instruction to giving it a much clearer creative brief.

We've told it:

• Who to be

• What to do

• Why we're doing it

• Which rules it needs to follow

• And how we want the result returned

That doesn't guarantee perfect code, but it gives the AI a much better chance of producing something close to your vision on the first attempt:

You don't always need every part

That all being said, RTCCF isn't a rigid template that you have to fill out every single time you talk to AI.

For example

If all you're doing is making a tiny change to something you've already built, you might simply say:

Make the button blue.

The AI already has the context from your existing conversation, so writing a giant structured prompt would be unnecessary.

Think of RTCCF as a tool you can use when you need to communicate a larger or more complicated request clearly. The bigger the task, the more useful that structure becomes. But remember, even a great prompt doesn't mean the first result will be perfect. You're still going to generate the code, test what it creates, and refine the result.

However, before we start making lots of changes, there's one more thing we should put in place and that’s a way to safely undo them!

Use version control before you start experimenting

What happens when everything is working perfectly, you ask AI to make one more change, and suddenly the whole project breaks?

This is why you need version control.

Version control gives you a way to save working versions of your project so you can experiment without worrying about permanently breaking something.

Think of it like the save system in a video game:

Before attempting something risky, you save your progress. If everything goes horribly wrong, you can reload your previous save and try again.

We can do the same thing with code using Git.

What is Git?

Git is a version control system that keeps track of changes to your project over time. So rather than having one copy of your project that you're constantly changing, Git allows you to create snapshots of your project as you work:

This means you can experiment with your code while still having a record of earlier versions that worked.

There are two terms you need to understand before we go any further.

Repository

A repository, often shortened to repo, is essentially your project being tracked by Git:

It contains your project files along with the history of the changes you've saved.

You can think of the repository as the entire game, including all of your save points.

Commit

A commit is one of those save points:

Once you've made some changes and you're happy that everything works, you create a commit.

You also give that commit a short description of what changed.

For example

Added navigation menu or Fixed mobile layout

It's generally better to make frequent, small commits rather than waiting until you've changed half the project. That way, if something goes wrong, it's much easier to understand what changed and return to a working version.

Where does GitHub fit in?

You'll also hear Git mentioned alongside GitHub, but they're not the same thing:

• Git is the version control system that tracks the changes to your code

• While GitHub is an online platform where you can store your Git repositories

This gives you an online backup of your project and its history, while also making it possible to share your code and collaborate with other developers.

Earlier, our Director's Process looked like this:

Vision → Prompt → Generate → Test → Refine

But now we can add one more step:

Once you've generated something, tested it, refined it, and you're happy that it works, commit that working version so that now you have that save point.

This way you don't need to be terrified every time you ask AI to make a significant change because you're no longer relying on one fragile copy of your project.

• If the change works, great. Test it and create another commit.

• But if it breaks everything, you still have your previous working version to return to.

We'll get hands-on with Git and GitHub later in the video above and in my full course. For now, I just want you to understand why version control is such an important part of vibe coding.

Especially when you encounter this next common issue…

The AI Context window issue

Earlier, we looked at the importance of adding context to your prompts, but there's another part of context you need to understand when vibe coding and that’s the fact that AI doesn't have an unlimited memory.

The context window contains the information the AI can currently consider when generating its next response. This can include your prompts, its previous responses, code you've provided, documents, and other information from the conversation.

As your conversation becomes longer and you keep adding more information, older details may eventually stop being available or useful to the AI and as you can imagine, this can cause problems when you're working on a larger project.

• Perhaps you made an important design decision much earlier in the conversation.

• Or you explained how a particular feature should behave.

If the AI no longer has that information available, it might start generating suggestions that contradict decisions you've already made. That's why you shouldn't rely on the AI to remember everything about your project forever. 

Instead, you need to deliberately give it the important context it needs.

Decide what context actually matters

This doesn't mean dumping your entire project history into every prompt, but rather to think about what information the AI needs to complete the specific task you're giving it.

That might include:

• Your project's goal

• The relevant code

• Technologies or frameworks you're using

• Important design decisions

• Coding conventions

• Requirements or constraints

• Examples of the output you're trying to achieve

The better the context you provide, the less the AI has to guess.

Create reusable context

You can also take important information from one conversation and turn it into something reusable.

For example

Imagine I've spent time creating a website and refining the visual design until I'm happy with it.  I've chosen the colors, typography, spacing, buttons, and other elements that give the project a consistent style.

Now I want to start another project with the same visual identity.

Rather than expecting a new AI conversation to somehow know what I decided previously, I can ask the AI to extract those decisions into a style guide:

That style guide then gives us a reusable description of the design:

Now I can open a fresh conversation and provide the style guide as context when asking the AI to create something new:

Even though this is a completely separate project and conversation, the AI now has the information it needs to follow the same design direction.

This idea goes far beyond colors and fonts though!

You could create reusable context containing your project's architecture, coding conventions, brand guidelines, feature requirements, or other information that you regularly need the AI to understand.

The important lesson is that context is something you actively manage so don't assume AI knows everything you know about the project.

Ask yourself:

• What does the AI need to know to complete this task correctly?

• Then make sure that information is actually available to it.

Simple!

Giving AI the right context will help you get much more consistent results. However, even with a great prompt and perfect context, you still can't assume the code it generates will work, which is why you always need to test it…

Test and refine everything AI creates

Whenever AI generates code for you, test it immediately because the earlier you test something, the easier it is to identify which change caused a problem and give the AI the information it needs to fix it.

Don't wait until you've added another five features!

Go ahead and check it works as if you were a real user:

• Click the buttons

• Try the different features

• Resize the browser if it's supposed to be responsive

• Look for anything that behaves differently from what you expected

• You should also check your browser's developer console for errors that might not be immediately obvious from looking at the page

Once you've tested the result, you'll generally find yourself on one of three paths:

Path #1. Everything works

This is the Happy Path because the code works and the project looks and behaves the way you wanted. 

Create a commit and save that working version of your project, then you can safely move on to the next feature.

Path #2. It works, but it's not quite right

Sometimes the code technically works, but the result doesn't match your vision.

• Maybe the button is too large

• The animation is too slow

• The layout feels wrong

• Or a feature behaves slightly differently from how you imagined it

This doesn't necessarily mean there's a bug.

You just need to refine the result and tell the AI specifically what you want changed.

For example

The navigation works, but it's taking up too much vertical space. Reduce its height and make the links slightly smaller.

Then let the AI make the change and test the result again.

Does it look how you want and work how you want?

If not, keep at it. You might go do this several times before you're happy and that's completely normal. 

Remember, your job isn't to write one perfect prompt and accept whatever comes back. You're directing the project toward your vision.

Path #3. Something is broken

The third possibility is that the code simply doesn't work and this puts you into the Debug Loop.

When this happens, avoid giving AI vague feedback like:

It doesn't work.

That's the equivalent of telling a mechanic that your car is broken without explaining what happened.

Instead, give the AI as much useful information as you can.

There are three particularly useful things you can provide:

• The relevant code. Give the AI the code that's causing the problem, or make sure it already has access to it.

• The exact error. If you're seeing an error in the browser console, copy the actual error message and give it to the AI. Don't paraphrase it if you don't need to.

• Expected vs. actual behavior. Explain what you expected to happen and what actually happened.

For example

When I click the Submit button, I expect the form to display a success message. Instead, nothing happens and I get this error in the console: [then paste the ERROR here].

This gives the AI something much more useful to work with than simply saying the project is broken because it can inspect the code, consider the error, compare the expected and actual behavior, and suggest a fix.

Then apply the fix and test again.

If it still doesn't work, give the AI the new information and continue through the loop until you've solved the problem.

Do a quick code audit before you commit

Once everything appears to work, there's one final habit I want you to build and that’s to take a quick look at the code before you commit it.

You don't need to understand every single character, especially when you're just starting out. But don't treat the code as something you're never allowed to look at because AI created it.

• Ask yourself whether it's reasonably organized and readable.

• If something looks confusing, ask the AI to explain it.

• You can also ask AI to review its own work and identify anything that could be simplified, cleaned up, or improved.

The more you do this, the more familiar code will start to become.

Once you've tested the project, checked for errors, refined anything that needed changing, and you're happy with the result, commit it.

Then you're ready to start the process again and work on the next part until your project is finished.

Simple!

The best way to understand this though is to see it in action, so let’s build a quick project now so you can see this from start to finish.

Put everything together in a real project

Just for fun, I'm going to create a deliberately frustrating website that plays a series of UI/UX pranks on the user.

The project will have four stages:

1. A loading bar that reaches the end and then starts going backwards while displaying funny loading messages.

2. A "Click to continue" button that moves away when the user tries to hover over it.

3. A ridiculous user agreement that the user has to accept.

4. A collection of colorful popups where closing one causes even more to appear.

It's a silly project, but there are multiple features and interactions to build, which gives us plenty of opportunities to test, find problems, debug them, and refine the result.

Start with a detailed prompt

We’re going to use the RTCCF framework from earlier so that we can give the tool our exact project goal and specifications, and then work from there.

I start off by telling the AI to act as an expert UI/UX frontend developer and explain each of the four stages of the experience:

I also give it some constraints, including using Tailwind CSS and returning everything inside a single HTML code block:

Then I let the AI generate the first version:

Not bad!

Remember though, we never assume something works just because the AI generated it so I start testing and refining before I commit anything.

Test the first version

From a visual standpoint, the basic idea is there, but I immediately notice things I want to change.

For example

The website makes it too obvious that it's a prank, some of the sections contain too much text, and some of the behavior isn't quite what I had in mind.

Those are refinement problems because the project works, but the result doesn't completely match my vision:

More importantly though, when I check the console, I also find an actual error:

That's a debugging problem.

So this one project has already put us onto two of the paths we learned about in the previous section.

Let's deal with the actual error first.

Debug what's broken

Because the AI already has the project and relevant context, I can tell it about the error and ask it to fix the problem. In this case, it’s as simple as clicking the ‘fix error’ button:

Once the AI gives me the fix, I apply it and test the project again:

This is our Debug Loop in action:

Test → Find error → Debug → Fix → Test again

We're not blindly hoping that the next version works. We're identifying a specific problem, giving that information back to the AI, applying the fix, and then verifying the result ourselves.

Now that the project is working, I can start directing the experience toward what I originally had in mind.

Refine what isn't quite right

So these are my particular style changes that I want to tweak:

• I don't want the loading screen to have so many messages, so I ask the AI to reduce them

• I don't want the website revealing that it's a prank too early

• I want the green Continue button to jump away from the user's cursor, but only a limited number of times

• I want the terms section to be shorter

• And I want the popups to use solid colors without borders.

None of these necessarily require us to start the project again because we already have something that works.

We just need to give the AI some more specific creative direction:

The tool will then apply those changes and I can see if it meets my goals:

In this case I tweaked them a few times:

• I adjust the loading messages again so they don't repeat

• I change the popup colors to make them look more modern.

• I added dark mode.

• Then I decide that after the user closes five popups, they should finally be congratulated and rewarded with confetti

However, I don't make all of these changes and then wait until the end to see whether they worked. I keep testing between each change, then I continue refining the details! 

In this case I included the popup close buttons, clearing the remaining popups when the user succeeds, and improving the confetti effect:

And just like that it's working and we’re done.

(Obviously there are a few more steps as we would need to build this out and put it on a domain etc, but you get the idea).

This is what real vibe coding tends to look like.

• The first output gets us somewhere

• We test it

• We find an error and debug it

• We notice things that don't match our vision and refine them.

• Those refinements give us new ideas

• We test those ideas and refine the project again

• And eventually, we get most of the way toward the experience we originally wanted.

This is the Director's Process in action!

It's not about writing one magical prompt and having AI instantly create a perfect application.

You're the director.

AI handles much of the technical implementation, but you're still responsible for the vision, the decisions, the testing, and ultimately deciding when the result is good enough.

And if you've followed everything up to this point, you now have the basic process you need to start building projects of your own.

Where to go from here?

At this point, you have everything you need to start experimenting with vibe coding.

You know:

• How to turn an idea into a plan

• How to communicate that plan to AI

• How to use the AI to generate the code

• How to do a basic test on what it creates

• How to communicate with the tool to debug problems

• How to refine the result

• And the basic overview of saving working versions as you go.

All that being said, don't use vibe coding as an excuse to not learn to code.

Yes, vibe coding is a great entry point for non-coders to get started building and playing around.

It’s actually very similar to how all of us started. We saw something we liked, played around with the code and saw what broke and then learned from there.

The thing is, because the barrier to entry is so low, it’s easy to think you don’t need the core skills but that's just not the case. Sure the AI might be writing much of the code for you, but you're still working with real HTML, CSS, JavaScript, frameworks, APIs, databases, and all the other technologies that power modern applications.

You don't need to understand all of those things before you start, but you do need to learn them if you want to build properly and launch something that's secure and works with the public.

Otherwise you run the risk of it all breaking, or worse, information being stolen or lost.

For example

You might build an app, but not realize that there are open security issues that someone can get into right away, simply because you never knew about those areas. It never came up in a project because the AI never thought to build for these. (It only builds what you ask for).

It’s almost like asking AI to build you a house.

It’ll plan it out in bricks and have doors, windows and a roof, but will it also remember to build the plumbing? Or get planning permission? Or double check the size because you asked for it in ft instead of metres?...

The tool can only do so much without an expert behind it.

The real power of vibe coding is for developers who know how to code, who can then use it to help them do their work faster and easier. Because they know what it’s all supposed to look like with the finished product.

The good news is I cover all of this and more inside my complete vibe coding course:

Beginner

Vibe Coding Bootcamp: Build Your Wildest Dreams From Scratch

18 Hours •158 Lessons

If you can dream it, you can build it. Learn to code by using AI tools like Cursor, Copilot, Claude, Gemini, ChatGPT, open source tools & more by crafting your vision and building 10+ professional projects.

Jacinto Wong

I'll also show you how to work with AI coding agents, compare different AI models, set up a professional development environment, use Git and GitHub, work inside Visual Studio Code, and build increasingly advanced projects from scratch.

If you want to go from an absolute beginner, to a working developer that can do their role faster and easier, then check out my course.