What is Vibe Coding? — Vibe Coding with Claude Code

Imagine you want to build a website. Traditionally, you would need to learn a programming language — memorize special syntax, understand how browsers interpret code, and spend months practicing before you could make anything useful. It is like needing to become fluent in Japanese before you can order food at a restaurant in Tokyo.

Vibe coding flips that entirely. Instead of learning the language of computers, you describe what you want in your own words — and an AI assistant writes the code for you. You stay in control of what gets built. You just skip the part where you have to speak the machine's language.

The term was coined by Andrej Karpathy, one of the founders of OpenAI, in early 2025. He described it as "fully giving in to the vibes" — focusing on what you want to create rather than how to write the code.

Traditional Coding vs. Vibe Coding

Here is the difference at a glance. To create a simple web page with a heading and a colored background, here is what each approach looks like:

Traditional Coding

index.html

<!DOCTYPE html>

<head>

<style>

body {

background: #1a1a2e;

color: white;

font-family: sans-serif;

text-align: center;

padding-top: 100px;

}

</style>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

Vibe Coding

Terminal

you: Make me a web page with a dark background, white text, and a big centered heading that says "Hello World"

claude: I'll create that for you.

Created index.html

Done! Open index.html in your browser to see the result.

Same result. One requires you to know what <!DOCTYPE> means, how CSS properties work, and where every bracket and semicolon goes. The other requires you to describe what you want, in English. That is vibe coding.

How Vibe Coding Works

Every vibe coding session follows the same three-step loop. You will repeat this cycle dozens of times per project, and it becomes second nature fast.

Describe

Tell Claude what you want in plain language. Be as specific or as vague as you like — you can always adjust later.

Review

Claude writes the code and creates the files. Open them in your browser and see what it built. Does it match what you had in mind?

Refine

Tell Claude what to change. "Make the heading bigger." "Add a photo on the right." "Change the blue to green." Repeat until it is right.

This is a conversation, not a one-shot request. The magic is in the back-and-forth. You do not need to describe everything perfectly on the first try — you just need to get started and keep talking.

Installing Claude Code

Before you can start vibe coding, you need Claude Code on your machine. There are two ways to get it:

Terminal Install

If you have Node.js installed, run:

npm install -g @anthropic-ai/claude-code

VS Code Extension

Open VS Code, go to Extensions, and search for "Claude Code". Click Install.

Either way works. The terminal version gives you a standalone tool. The VS Code extension integrates directly into your editor. If you are brand new and not sure which to pick, start with the VS Code extension — it gives you a familiar interface with a sidebar panel.

Once installed, open your terminal (or the Claude Code panel in VS Code) and type:

Terminal

$ claude

Welcome to Claude Code!

How can I help you today?

That is it. You are ready to start building.

Your First Vibe

Let us walk through a real first conversation. You have Claude Code open, and you want to make a simple web page. Here is what you type:

Terminal — Claude Code

you: Make me an HTML page with a centered heading that says "Hello World" and a subtitle underneath that says "My first vibe coded page". Use a nice font and warm colors.

claude: I'll create a warm, welcoming page for you.

Creating file: index.html

Done! I created index.html with:

- A warm cream background (#fffaf0)

- The heading "Hello World" in a serif font

- A subtitle in a softer brown tone

- Everything centered on the page

Open index.html in your browser to see it.

You open the file in your browser, and here is what you see:

file:///Users/you/projects/index.html

Hello World

My first vibe coded page

A real web page. Built in about ten seconds. No syntax to memorize. No tutorials to watch. You described what you wanted, and Claude made it.

And if you want to change something? Just keep talking:

Terminal — Claude Code

you: Nice! Can you make the heading bigger and add a subtle shadow behind the text?

claude: Sure, I've updated the heading to be larger and added a soft text shadow to both lines.

Updated: index.html

That is the Describe → Review → Refine loop in action.

Try This

Open your terminal (or VS Code with the Claude Code extension), type claude, and ask it to make you an HTML page about your favorite hobby. It could be cooking, hiking, photography — anything. Open the resulting file in your browser and see what you get. Then ask Claude to change one thing about it.

Pro Tip

You do not need to be precise on the first try. It is faster to describe roughly what you want, see the result, then say "change the background to navy blue" than to specify every detail upfront. Think of it like giving directions to a talented designer sitting next to you — start with the big picture and fine-tune as you go.

Quick Check

1. What makes vibe coding different from traditional coding?

A You need to memorize programming syntax

B You describe what you want in plain English

C You copy and paste code from the internet

D You draw wireframes and export them as code

2. What are the three steps of the vibe coding workflow?

A Plan, Code, Debug

B Write, Compile, Deploy

C Describe, Review, Refine

D Research, Draft, Publish

3. What should you do if your first description to Claude is not perfect?

A Start over from scratch

B Edit the code by hand

C Search online for the right syntax

D Tell Claude what to change and keep refining

4. How do you start Claude Code from the terminal?

A Type npm start

B Type claude

C Type code --ai

D Open a web browser and go to claude.ai

Key Takeaways

Vibe coding means building software by describing what you want in natural language, not by writing code yourself.
The core workflow is a loop: Describe what you want, Review the result, and Refine with follow-up instructions.
You do not need to be precise upfront. Start rough and iterate — that is the whole point.
Claude Code can be installed via npm or as a VS Code extension. Either way, you are up and running in under a minute.
Your first project is just one sentence away. Type claude, describe a page, and open the file in your browser.