How to Vibe Code in 2026: The Complete Beginner's Guide (Updated May 2026)

You've heard the term. Maybe you saw Andrej Karpathy coin it, or you've watched the r/vibecoding threads where people ship a working app in an afternoon. Maybe you saw the May 2026 Hacker News piece where Simon Willison wrote that "vibe coding and agentic engineering are getting closer than I'd like." Maybe Claude Code's own creator is on record asking for a different word for it, and r/technology gave that post 2,200 upvotes.

Whatever brought you here: you want to try it yourself.

This guide walks you through everything: opening your first vibe coding tool, writing a prompt that actually works, iterating without losing your mind, and deploying a live app. No prior coding experience required. By the end you'll know the workflow, you'll have copy-paste prompts that work right now, and you'll know which of the five major tools fits your situation best.

Last updated May 2026 with the current tool landscape (post the Claude Code Pro plan change, with Codex now in CLI parity, and Bolt / Lovable both shipping major updates this quarter).

Let's build something.

Quick answer: what is vibe coding in 2026

Vibe coding is building software by describing what you want in plain English and letting an AI write and edit the code while you supervise. You don't read every line. You don't manage the file tree. You describe the outcome, the AI proposes the change, you accept or iterate. The "vibe" is staying in flow with the idea instead of getting pulled into the syntax.

In 2026, you can do this with five mainstream tools: Lovable (browser, full apps), Bolt.new (browser, prototypes), Cursor (IDE, developer-oriented), Claude Code (CLI), and OpenAI Codex (CLI). Picking one is Step 1 below.

---

What You Need Before You Start

Here's what you don't need:

• Coding skills
• Design experience
• A computer science degree
• Expensive software

Here's what you do need:

• A clear idea – even a simple one like "expense tracker" or "landing page for my side project"
• Access to a vibe coding tool – free tiers exist for all the major ones
• About an hour – your first app won't take longer than that

If you can describe your idea to a friend, you can describe it to an AI. That's the whole premise.

---

Step 1: Choose Your Tool

Different tools work better for different people. Here's the honest breakdown for May 2026.

If You Don't Code: Start Here

Lovable: Best for polished UIs and full apps

• Generates complete applications from descriptions
• Tight integration with Supabase for backends
• Clean, professional-looking output
• Free tier available, $25/mo for Pro

Bolt.new: Fastest for prototypes

• Browser-based, no setup required
• From idea to live URL in under 30 minutes
• Great for demos and concept validation
• Free tier available, ~$20/mo for Pro

If You Have Some Coding Experience

Cursor: Best for control and learning

• AI-native IDE with full codebase access
• Composer feature for multi-file edits
• You see and understand the code being written
• Free tier available, $20/mo for Pro

Claude Code: Best CLI agent in 2026

• Runs in your terminal, reads your repo, edits files, runs commands
• Anthropic recently removed it from the Claude Pro plan, so you now pay per-token or via API. We wrote a Claude Code alternatives guide for people who don't want to switch billing
• Strong for refactors and long-horizon multi-file edits

OpenAI Codex: The Codex CLI revival

• ChatGPT Pro subscribers get usage included
• Pairs naturally with anyone already in the OpenAI billing relationship
• Newer than Claude Code; closing the gap fast

The Decision in 10 Seconds

For your first project: Lovable if you're non-technical, Cursor if you have any coding background. You can always switch later.

Browse all options in our Vibe Coding Tools Directory.

---

Step 2: Write Your First Prompt

Your prompt is your blueprint. Better prompts produce better results.

The Anatomy of a Good Prompt

A good vibe coding prompt answers these questions:

1. What is this? – The type of app or feature
2. Who is it for? – The user and their context
3. What does it do? – The core functionality
4. How should it look? – Style preferences (optional but helpful)

Bad Prompt vs. Good Prompt

Bad prompt:

"Make me an app"

This gives the AI nothing to work with. You'll get something generic and probably not what you wanted.

Good prompt:

"Build an expense tracker for freelancers. It should have:

• A form to add expenses with amount, category, and date
• A dashboard showing total expenses by month
• Categories: Travel, Software, Office, Marketing, Other
• Clean, minimal design with a dark mode option
• Use Tailwind CSS for styling"

This tells the AI exactly what to build. You'll get something usable on the first try.

Starter Templates You Can Copy

For a landing page:

"Create a landing page for [your product]. Include a hero section with headline, subheadline, and two buttons (Get Started, Learn More). Add a features section with 3 cards, a testimonials section, and a simple footer. Use a modern, clean design with [color preference]."

For a dashboard:

"Build a personal dashboard that shows [metrics you want to track]. Include a sidebar for navigation, cards for key numbers, and a simple chart. Use a dark theme with accent colors."

For a simple tool:

"Create a [type of calculator/converter/tool] that takes [inputs] and shows [outputs]. Make the interface simple and mobile-friendly. Add a clear button and show the result prominently."

---

Step 3: Generate Your First Version

Open your chosen tool. Paste your prompt. Hit generate.

What happens next:

• The AI analyzes your description
• It creates the file structure, components, and styling
• You see a preview of your app (usually within 30 seconds to 2 minutes)

What to expect:

• About 80% of what you asked for will be right
• Some things will be off: that's normal
• The layout might not be exactly what you imagined
• Some features might be missing or interpreted differently

Don't panic. The first generation is a starting point, not the final product. The real magic happens in iteration.

The 80% Rule

Your first generation will be roughly 80% correct. That's actually great: it means you have a foundation to build on. Traditional development would have taken hours to reach this point.

The remaining 20% comes from iteration. That's Step 4.

---

Step 4: Iterate With Conversational Edits

This is where beginners make the most progress, and where most get the workflow wrong.

The Key Insight: Small Prompts Beat Big Prompts

Don't try to fix everything in one message. Break it down.

Instead of:

"The header is too big, the buttons are the wrong color, the spacing is off, I wanted the sidebar on the left not the right, and can you add a search bar and make it responsive?"

Do this:

"Make the header smaller: about half the current height."

Then:

"Change the button colors to blue."

Then:

"Move the sidebar to the left side."

Each small prompt is easier for the AI to execute correctly. You catch problems early. You stay in control.

Example Iteration Prompts

Layout adjustments:

• "Make the header sticky so it stays visible when scrolling"
• "Add more padding between the cards: about 24px"
• "Center the content and limit the max width to 1200px"

Adding elements:

• "Add a search bar at the top of the list"
• "Include a 'Back to top' button in the footer"
• "Add a loading spinner while data is being fetched"

Changing behavior:

• "Sort the items by date, newest first"
• "Make the sidebar collapse on mobile"
• "Add form validation: email field should require @ symbol"

The Feedback Loop

The vibe coding workflow is a loop:

1. Prompt
2. See result
3. Identify one thing to change
4. Prompt again
5. Repeat until satisfied

Most successful vibe coders do 10-20 iterations on a single feature. That's normal. Each iteration takes seconds.

---

Step 5: Add Logic and Functionality

Once the layout looks right, you add the behaviors that make the app useful.

Common Beginner Features

Forms and inputs:

• "Add a form with fields for name, email, and message"
• "Validate the email field before allowing submission"
• "Show a success message after the form is submitted"

Data operations:

• "Calculate and display the total at the bottom"
• "Filter the list to show only items marked as 'active'"
• "Sort by price from low to high"

User interactions:

• "Add a confirmation dialog before deleting an item"
• "Show a tooltip when hovering over the info icon"
• "Collapse the sidebar when clicking outside of it"

How to Ask for Specific Behaviors

Be precise about triggers and outcomes:

Not great: "Make the delete button work"

Better: "When the user clicks the delete button, show a confirmation dialog. If they confirm, remove the item from the list and show a toast notification saying 'Item deleted'."

The more specific you are about what triggers an action and what the result should be, the better the output.

---

Step 6: Polish the Design

Functionality first, then aesthetics. Once everything works, make it look good.

Layout Polish

• "Increase the spacing between sections"
• "Make the cards all the same height"
• "Add a subtle shadow to the card elements"
• "Use a consistent border radius across all elements: 8px"

Color and Typography

• "Use a warmer color palette: soft whites and warm grays"
• "Make the headings darker and increase the font weight"
• "Add a subtle gradient to the primary button"

Mobile Responsiveness

This one matters. Always ask:

• "Make the layout responsive: stack the columns on mobile"
• "Hide the sidebar on screens smaller than 768px and add a hamburger menu"
• "Increase the button size on mobile for easier tapping"

Test on your phone. If it looks broken, tell the AI what's wrong and how to fix it.

---

Step 7: Audit, Then Deploy

You've built something. Before you put it on the internet, run a 30-minute security pass. AI-generated code has predictable gaps and you can catch most of them without being a security expert.

Before-you-ship checklist (5 minutes per item):

1. Are there any API keys, tokens, or .env values committed to git? Search the repo for "sk-", "API_KEY", "SECRET".
2. If you're using Supabase, is Row Level Security enabled on every table?
3. Does every API route check that the request is authenticated?
4. Is there a rate limit on the routes that call an LLM (otherwise one user can rack up a $5k bill)?
5. Is CORS restricted to your domain, not *?

Full deep-dive: The 7 security gaps in every vibe-coded app.

If anything from the checklist trips you up, that's the point at which inheriting some help is cheap: our agency directory lists vetted teams who do exactly this kind of pre-launch audit.

Once you're clean, deploy.

Option 1: Replit (Easiest)

If you're using Replit, deployment is one click. Your app gets a .repl.co URL immediately. Great for sharing, demos, and simple projects.

Option 2: Export and Use Vercel/Netlify

Most vibe coding tools let you export your code or push to GitHub. From there:

1. Connect your GitHub repo to Vercel or Netlify
2. They auto-deploy when you push changes
3. You get a custom URL (or connect your own domain)

This gives you more control and looks more professional.

Option 3: Stay in Lovable/Bolt.new

Both platforms offer built-in hosting. Lovable projects can be published directly. Bolt.new generates shareable URLs. For MVPs and prototypes, this is often enough.

---

How to Vibe Code With Each Tool in 2026

The 7-step workflow above is tool-agnostic. Here's how it plays out inside each of the five major options. Pick the section for the tool you chose in Step 1 and copy the starter prompt.

How to vibe code with Lovable

Lovable is the friendliest entry point for non-developers. The interface is a chat sidebar next to a live app preview, so you describe and watch.

1. Sign up at lovable.dev, click "New project"
2. Describe your app in one message
3. Wait 60-90 seconds for the first version
4. Iterate via the chat sidebar; previews update live

Starter prompt:

Build a simple expense tracker. Form to add expense (amount, category from dropdown: Travel, Software, Office, Other, date). Dashboard with total spend this month and a list of recent expenses. Connect to Supabase, store expenses per user. Dark mode, mobile-friendly. Use Tailwind.

Read the full Lovable review for what it's strong at and where it pushes back.

How to vibe code with Cursor

Cursor is a fork of VS Code with Anthropic and OpenAI models wired into the editor. You see the codebase, you accept or reject each diff. Best if you want IDE comfort + AI control.

1. Install Cursor from cursor.com
2. Open or clone a project
3. Press Cmd+K (inline edit) or Cmd+L (sidebar chat). Use Composer (Cmd+I) for multi-file work
4. Reference files with @filename to give Cursor context

Starter prompt (inside Composer, on a new Next.js project):

Add an expense tracker page at /expenses. Form with amount, category dropdown (Travel, Software, Office, Other), date. Use a local state store for now. Display a list below the form sorted by newest. Match the existing design system.

Read the full Cursor review for the agent vs auto-complete distinction.

How to vibe code with Claude Code

Claude Code is the Anthropic CLI agent. It opens a repl in your terminal, reads your repo, makes a plan, edits files, runs commands. Note: Anthropic removed Claude Code from the Pro plan in May 2026, so check the alternatives guide if you don't want to switch billing.

1. npm install -g @anthropic-ai/claude-code
2. Set your ANTHROPIC_API_KEY
3. In your project folder, run claude
4. Type what you want in plain English

Starter prompt (after running claude in an empty Node project):

Add an Express API with one route /expenses that accepts POST (amount, category, date) and GET (returns all expenses, newest first). Store in a SQLite database via better-sqlite3. Add a minimal HTML page at / that lists expenses and has a form to add them. Include a package.json with the right deps and a README with how to run it.

Read the full Claude Code review for the agent-loop details.

How to vibe code with OpenAI Codex

Codex is OpenAI's CLI agent, paired naturally with anyone already paying for ChatGPT. The 2026 revival closes most of the gap with Claude Code.

1. npm install -g @openai/codex (or follow the OpenAI install instructions for your platform)
2. Sign in with your OpenAI account (or set OPENAI_API_KEY)
3. Run codex in your project folder
4. Same conversational workflow as Claude Code

Starter prompt:

Add a Python FastAPI backend with one route /expenses, in-memory storage for now, returns JSON. Include a sample curl in the README and a simple test in tests/test_expenses.py using pytest.

Read the full Codex review for the model and pricing context.

How to vibe code with Bolt.new

Bolt.new lives in the browser. No install, no setup, fastest path from idea to demo URL. Best for landing pages, prototypes, and validation builds.

1. Go to bolt.new
2. Paste your prompt in the chat
3. Bolt scaffolds the full app, runs it in WebContainer, shows a preview
4. Iterate via the chat; download the source or one-click deploy

Starter prompt:

Build a landing page for a SaaS called "ExpenseFlow" that helps freelancers track expenses. Hero with headline, subheadline, two buttons (Try Free, See Pricing). Three feature cards. Pricing table with Free, Pro $9, Team $29. Testimonials section with 3 quotes. Footer with links. Use a modern dark/lime design.

Read the full Bolt.new review for the WebContainer tradeoffs.

---

10 Example Prompts That Actually Work

Copy these, modify the bracketed parts, paste into your tool of choice. All ten have shipped at least one working app for someone in r/vibecoding or r/ClaudeCode in 2026.

1. Landing page with email capture

Build a single-page landing site for [product]. Hero with headline, subheadline, and an email capture form. Three feature blocks below. Footer with social links. Use [Lovable / Cursor / Bolt] and connect the form to a Google Sheet or a Supabase table.

2. Personal CRM

Create a personal CRM. Pages: People (list with name, company, role, last contacted), Person detail (notes, interaction history), Add interaction (date, type, notes). Search by name. Dark mode. Local storage for now.

3. Habit tracker

Build a habit tracker. Add habit (name, frequency: daily / weekly), check off habits per day, show a 30-day grid view per habit with streak count. Mobile-first design.

4. Invoice generator

Make an invoice generator. Form fields: client name, address, line items (description, qty, price), tax rate, notes. Generate a printable PDF with my company info at the top.

5. Internal admin dashboard

Build an admin dashboard for [my SaaS]. Auth via [Supabase / Clerk]. Pages: Users (list with search), User detail (subscription, last login, actions: refund, ban, message), Recent signups chart, Recent churn chart.

6. Markdown notes app

Notes app with markdown support. Sidebar with note list, main pane with editor + preview side-by-side. Save to local storage. Add full-text search. Dark mode toggle in the header.

7. AI chat wrapper with system prompt

Single-page chat app that calls the [OpenAI / Anthropic] API. System prompt: "[your system prompt]". Save chat history to local storage. Show streaming responses. Token usage counter at the bottom.

8. Tip calculator

Tip calculator. Inputs: bill amount, tip %, number of people. Output: total per person and total tip. Big tappable buttons for 15 / 18 / 20 / 25 %. Mobile-first.

9. URL shortener

Build a URL shortener. Paste long URL, get short URL. Store mapping in [Supabase / Postgres]. Redirect handler at /:slug. Dashboard showing my links with click counts. Auth required for dashboard.

10. Pomodoro timer with task list

Pomodoro timer that lets me link each session to a task. Add task, start 25-minute timer, log session against the task when it completes. Show daily session count per task. Browser notifications when a session ends.

If your specific app idea doesn't match any of these, pick the closest one and modify it. That's faster than starting blank.

---

Real Apps People Built With Vibe Coding

If you're wondering whether vibe coding produces shippable products, here are three concrete ones from 2026 (all sourced from public posts, all with usage or revenue data the builders shared themselves).

Vibe Coding a $20k/year Enterprise Logistics Platform (Show HN post, May 2026): a solo builder rebuilt a logistics workflow tool with Claude Code and shipped it as a yearly contract to a single customer. The HN comments interrogate edge cases for 200+ messages, which is itself instructive: ship, then handle the questions you get asked.

"How I Vibe Coded a $900K App in 13 Minutes (Claude Design + Codex)" (Jason Lee, May 2026 YouTube walkthrough). Take the headline with the caveat the comments raise (one-time deal, not annual recurring), but the prompt sequence is genuinely instructive: design first in Claude Design, then handoff to Codex.

r/vibecoding "Today I built..." threads: every week, a few of these cross 500 upvotes with shipped landing pages, internal tools, and Chrome extensions. Read the comments for the prompts people share. Most working apps came from a single 10-minute session.

The pattern across all three: small, specific scope. Single user or single customer. Ship before polishing. The horror stories you see in r/ClaudeAI "Vibe Coding vs Production reality" (3,500 upvotes) come from people who skipped the audit step in Step 7 and shipped a prototype to thousands of users. Don't do that.

---

Common Mistakes and How to Avoid Them

I see these constantly. Don't make them.

Mistake 1: The Giant Prompt

Problem: Trying to describe your entire app in one massive prompt.

Why it fails: The AI gets confused, misses requirements, or interprets things in unexpected ways.

Fix: Start with the core structure. Add features one at a time.

Mistake 2: Regenerating Instead of Iterating

Problem: Something's wrong, so you regenerate from scratch.

Why it fails: You lose all the good parts. You start over every time.

Fix: Iterate. Tell the AI what specifically needs to change.

Mistake 3: Vague Prompts

Problem: "Make it better" or "Fix the design"

Why it fails: Better how? Fix what? The AI guesses, usually wrong.

Fix: Be specific. "Increase the font size to 18px" instead of "make it more readable."

Mistake 4: Ignoring Mobile

Problem: Building only for desktop, forgetting mobile users.

Why it fails: Your app looks broken on phones. Most traffic is mobile.

Fix: Ask for responsive design explicitly. Test on your phone during development.

Mistake 5: Skipping the Plan

Problem: Jumping straight into prompting without knowing what you want.

Why it fails: You wander, change direction, waste time.

Fix: Spend 5 minutes sketching what you want before you start. Even a rough drawing helps.

Mistake 6: Shipping Without the Audit

Problem: Skipping Step 7's 30-minute security pass and pushing to production.

Why it fails: Every "vibe coding broke our app" thread on Reddit this year was preventable. Most of it was committed API keys or RLS not enabled.

Fix: Run the pre-deploy audit before your first real user touches the app.

---

The 30-Day Roadmap

If you're serious about learning vibe coding, here's a realistic progression.

Week 1: First Builds

Goal: Get comfortable with the basic workflow.

• Day 1-2: Build a simple landing page with Lovable or Bolt.new
• Day 3-4: Build a personal dashboard or to-do app
• Day 5-7: Build something you actually want: an expense tracker, habit logger, or portfolio

Focus on: Prompting basics, iteration, getting comfortable with the tools.

Week 2: Level Up

Goal: Graduate to more powerful tools.

• Try Cursor or Claude Code if you haven't already
• Rebuild one of your Week 1 projects with more control
• Start using file references (@filename in Cursor, plain mentions in Claude Code) in your prompts
• Explore the generated code: understand what the AI created

Focus on: Understanding the code, using developer tools, building intuition.

Week 3: Ship Something Real

Goal: Put something in the world.

• Choose your best project from Weeks 1-2
• Polish it until you're proud of it
• Run the 30-minute pre-deploy audit
• Deploy it publicly
• Share it: get feedback from real people

Focus on: Finishing, deploying, receiving feedback.

Week 4: Build With Purpose

Goal: Create something useful for yourself or others.

• Build a tool that solves a real problem you have
• Add features based on actual use
• Consider connecting to APIs or databases
• Start thinking about authentication if needed

Focus on: Real utility, complexity handling, growing your skills.

By the end of 30 days, most people can ship apps that look and work like real products. You won't be an expert, but you'll be capable.

---

Where Vibe Coding Goes Next: Agentic Engineering

In May 2026 a real conversation started on r/technology (2,200 upvotes) and HN (885 comments on Simon Willison's piece): Claude Code's creator wants to retire the term "vibe coding" in favor of "agentic engineering." The audience hasn't moved (Google Trends shows "vibe coding" at 60+ vs "agentic engineering" at 1), but the vocabulary war is the story.

The short version: agentic engineering is what vibe coding looks like when you add planning, evaluation loops, retry policies, observability, and rollback. Vibe coding is the entry point. Agentic engineering is the professional discipline that grows from it. You don't have to pick one. As you graduate from "ship a landing page" to "ship something paying customers depend on," you naturally add the engineering layer.

Full breakdown: Vibe coding vs agentic engineering: what's actually different.

---

Ready for More?

This guide covers the beginner fundamentals. Once you're comfortable, there's a whole other level:

Intermediate Topics

• Rules files – Teach Cursor your coding conventions with .cursorrules
• Context engineering – Structure your project so AI understands it better
• The Research-Plan-Implement framework – A workflow that catches mistakes early

Advanced Topics

• AI Agents – Autonomous tools that execute multi-step tasks
• MCP (Model Context Protocol) – Connect AI to external data sources and tools
• SpecKit workflows – Structured approach to specification and planning

We cover these in How to Vibe Code: Advanced Techniques.

---

FAQs

How long until I can build something useful?

Your first working app: 1-2 hours. Something you'd show to others: a few days to a week. Something genuinely useful: 2-4 weeks of regular practice. The learning curve is fast compared to traditional coding.

What if the AI gives me bad code?

It happens. Iterate and be more specific about what's wrong. If it keeps failing, try rephrasing your prompt. Sometimes starting a new conversation helps. The AI isn't perfect, but it's remarkably good at course-correcting when you give it clear feedback.

Should I learn traditional coding too?

It helps, but it's not required. Understanding basic programming concepts makes you better at vibe coding because you can spot issues and guide the AI more effectively. But plenty of people build useful apps without ever learning syntax.

Can I vibe code without paying for Claude Pro?

Yes. Cursor, Lovable, Bolt.new, Codex, Aider, Cline, and Continue.dev all work without a Claude subscription. We wrote a full Claude Code alternatives guide covering each one's pricing and tradeoffs.

How do I vibe code with Claude Code specifically?

Install via npm (npm install -g @anthropic-ai/claude-code), set your ANTHROPIC_API_KEY, run claude in your project folder, describe what you want. It reads the repo, makes a plan, edits files, runs commands. Best for terminal-natives doing refactors or multi-file work.

What are good vibe coding examples to follow?

Show HN posts (the "$20k/year logistics platform" thread from May 2026 is a great study), the weekly r/vibecoding "Today I built..." threads, and Jason Lee's "$900K app in 13 minutes" YouTube walkthrough. Read the prompts people share, copy what works.

Can I make money with vibe coding?

People do. Indie hackers build and sell SaaS tools. Freelancers create client websites and apps. Some build internal tools for companies. The economics work because you can test ideas fast: ship something in days, see if anyone cares, iterate or move on.

Is vibe-coded software safe for production?

For MVPs and prototypes, yes with human review. For production with real users, run the 30-minute pre-deploy security audit. Around 45% of AI-generated code contains vulnerabilities, and most of them are catchable in half an hour.

What's the biggest mistake beginners make?

Writing one giant prompt instead of iterating. Small, specific prompts produce better results than long vague ones, every single time.

---

Start Building

You've read the guide. You know the workflow. You have the tools, the prompts, and the roadmap.

Now the only thing left is to actually do it.

Open Lovable, Cursor, or Claude Code. Pick one of the 10 example prompts. Hit generate. Iterate until it works.

Your first app is waiting.

---

Need help choosing the right tool? Browse our Vibe Coding Tools Directory for detailed comparisons and real user feedback.

Ready for advanced techniques? Continue to How to Vibe Code: Advanced Techniques for rules files, agents, MCP, and more.

Shipped something you're proud of? Read our vibe coding case studies or submit your app for review.