Vibe Coding
Prompts.
Build real software by describing what you want to AI. No deep syntax knowledge required. Just ideas, prompts, and iteration.
What Is Vibe Coding?
In February 2025, AI researcher Andrej Karpathy described a new way of programming: "fully give in to the vibes, embrace exponentials, and forget that the code even exists." He called it vibe coding — building software by describing what you want to an AI and iterating until it works.
Vibe coding isn't about being sloppy. It's about a fundamental shift in how we interact with computers. Instead of translating ideas into syntax, you describe outcomes. The AI handles the translation. You stay at the idea level.
The key skill in vibe coding isn't programming — it's prompting. How well you can describe what you want, communicate constraints, and guide the AI through iteration determines how good your output is.
Describe, don't code
Focus on outcomes, not syntax
Iterate rapidly
Each prompt is a step forward
Ship fast
From idea to deployed in hours
Which Tool to Use
Cursor AI
Full app developmentBest for building complex, multi-file apps. Has codebase awareness and Composer for multi-file edits.
v0 by Vercel
UI componentsBest for generating React/Next.js UI. Outputs clean shadcn components you can copy directly.
Bolt.new
Quick prototypesRuns in browser, no setup. Great for fast prototypes and demos.
Lovable
Full-stack appsPoint-and-click + prompts. Connects to Supabase automatically. Good for non-developers.
Claude (claude.ai)
Complex logicBest at reasoning through architecture and writing clean, idiomatic code.
ChatGPT
Quick scriptsGreat for one-off scripts, data processing, and explaining concepts.
Starting a New App
The opening prompt is the most important. A strong start defines the entire architecture. Be specific, verbose, and detailed.
The Architecture First Prompt
Before writing any code, help me plan this app: App idea: [describe your app in 2-3 sentences] Users: [who will use it and what's their technical level] Core features: 1. [feature 1] 2. [feature 2] 3. [feature 3] Tell me: 1. Recommended tech stack (be specific about libraries/versions) 2. Database schema (tables and relationships) 3. Key pages/routes I'll need 4. Authentication approach 5. The order I should build things 6. Any tricky parts I should know about upfront
First Code Prompt (After Planning)
Build the initial scaffold for my [app type] app. Stack: Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, Prisma, PostgreSQL Auth: [NextAuth/Clerk/none] Set up: - Project structure with app router - Database schema for: [list main entities] - Base layout with sidebar navigation - Landing/home page with hero section - Authentication pages (if applicable) - Dark mode toggle - Mobile responsive from the start Follow these conventions: - Server components by default - Client components only when needed for interactivity - All data types in types.ts - API routes in /app/api/
Adding Features
Each new feature should be a focused, specific prompt. Don't ask for too much at once.
Standard Feature Prompt Template
Add [feature name] to the app. What it should do: - [behavior 1] - [behavior 2] - [behavior 3] UI: [describe what it should look like — button, modal, page, sidebar, etc.] Data: [what data it reads/writes] Edge cases: [what should happen when X] Follow the patterns in [existing feature] and use the same component style. Don't change any existing functionality.
CRUD Feature (Full)
Build complete CRUD functionality for [resource type]. Fields: [list all fields with types] Business rules: [any validation or logic — e.g., "title is required, max 100 chars"] UI needed: - List view with search and pagination - Create form with validation - Edit form (pre-populated) - Delete with confirmation dialog - Success/error toast notifications Use the existing form patterns and connect to the database via Prisma.
Debugging in Vibe Coding
You'll hit errors. Here's how to handle them effectively with AI.
Paste the exact error
Here's the exact error: [paste]. It's happening when I do [action]. The relevant file is [file]. Fix the root cause — don't just suppress it.
Something looks wrong
This isn't working correctly. Expected: [X]. Actual: [Y]. Here's the relevant code: [paste]. Walk me through why and fix it.
Page not rendering
The [page/component] isn't showing anything. Console shows: [paste]. Here's the component: [paste]. Diagnose and fix.
Performance issue
The app is slow when I [action]. Profile this and tell me why. Suggest the top 3 optimizations and implement the most impactful one.