Vibe Coding Guide

Build Anything withPlain English

Vibe coding = describe what you want → AI writes it → you ship it. No boilerplate, no context-switching.

10x

Faster shipping

Zero

Boilerplate

∞

What you can build

Setup Guide See Examples

Prerequisites

What You Need First

Install these tools once. Then you can build anything.

Tool	Used For	Verify	Priority
Node.js 18+	React, Next.js, JS scripts	node --version	Required
npm / pnpm	Package manager	npm --version	Required
Python 3.11+	Scripts, bots, automation	python3 --version	Required
Git	Version control, deploy	git --version	Required
Bun	Faster Node.js runtime	bun --version	Optional
pnpm	Faster npm alternative	pnpm --version	Optional
nvm	Switch Node versions	nvm --version	Optional

Node.js & npm

For React, Next.js apps, and JS scripts

bash

# Install Homebrew first (if not installed)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js
brew install node

# Verify
node --version  # should be 18+
npm --version

Python

For scripts, bots, and automation

bash

brew install python@3.11

# Verify
python3 --version
pip3 --version

Git

bash

brew install git

# Configure
git config --global user.name "Your Name"
git config --global user.email "you@email.com"

git --version

Optional (but recommended)

bash

# Bun — faster Node.js runtime
curl -fsSL https://bun.sh/install | bash

# pnpm — faster npm
npm install -g pnpm

# nvm — switch Node versions easily
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

You're ready when:

node --version shows 18+, python3 --version shows 3.10+, and git --version works. That's all you need to start.

The Process

How Vibe Coding Works

6 steps from idea to shipped product

Set Context

Tell your AI your stack. "I'm using React + TypeScript + Tailwind. Next.js App Router." This front-loads the important stuff.

Describe the Goal

Big picture first. "Build a crypto price tracker showing BTC, ETH, SOL with 24h change." Not "write a useState hook for..."

Let It Build

AI writes the full file or component. Don't interrupt. Let it generate the complete implementation.

Run It

Actually execute the code. See what breaks. Real errors > theoretical ones. Paste the error back into the chat.

Iterate

"Fix the button alignment." "Add error handling for the API call." "Make it work offline." Small, specific steps.

Ship

"Deploy this to Vercel" / "Give me a one-command deploy to Railway." AI handles the config. You push the button.

vibe-coding-session

Build me a crypto price tracker that fetches BTC, ETH, SOL from CoinGecko and shows 24h change

✅ Built crypto_tracker.py — fetches prices from CoinGecko free API, formats with 24h % change, outputs to terminal. Run: python3 crypto_tracker.py

Add a Telegram notification when BTC drops more than 5% in 24h

✅ Added Telegram alerts — reads TELEGRAM_BOT_TOKEN and CHAT_ID from .env, sends a ⚠️ alert message when BTC drop exceeds threshold. Updated crypto_tracker.py

Make it run every hour as a cron job

✅ Add this to crontab (run crontab -e):
0 * * * * /usr/bin/python3 /path/to/crypto_tracker.py >> /var/log/crypto.log 2>&1

Or use the systemd timer I've included in tracker.service

Copy & Paste Prompts

Project Recipes

Exact starter prompts. Copy → paste → ship.

Landing page with waitlist

15 min

Complete Next.js page with email form and modern design

"Build a landing page for [PRODUCT NAME]. Include: hero section with headline + CTA button, 3 feature cards with icons, social proof section (fake testimonials OK), and an email waitlist form at the bottom. Stack: Next.js + Tailwind. Make it look premium and modern."

SaaS dashboard

20 min

Full dashboard layout with sidebar, stats, table, chart

"Build a SaaS dashboard UI in Next.js + Tailwind. Include: sidebar nav with 5 items, top bar with avatar, stats row (4 metric cards), a data table with fake users, and a line chart component. Use fake/hardcoded data. No backend needed yet."

Personal portfolio + blog

30 min

Multi-page portfolio with markdown blog

"Build my personal developer portfolio in Next.js. Pages: home (hero + skills + projects), about, and a blog with markdown support. Use Tailwind. Projects should come from a local JSON file. Blog posts from /content/posts/*.md files."

Price comparison table

10 min

Interactive pricing table with billing toggle

"Build a pricing comparison table component in React + Tailwind. 3 tiers: Free, Pro ($29/mo), Enterprise (custom). Each tier has 8 features with checkmarks/X marks. Add a toggle for monthly/annual billing. Highlight the Pro tier as 'Most Popular'."

Templates

Prompt Templates

6 battle-tested templates. Fill in the brackets and go.

Builds: Scaffolds a full project structure and builds the first component/file

text

I want to build [PROJECT NAME].

Stack: [React/Python/Node.js]
Purpose: [1-sentence description]
Key features:
- [feature 1]
- [feature 2]
- [feature 3]

Please scaffold the project structure first, then build [FIRST COMPONENT/FILE].

Tip: Replace placeholders systematically

Search for [ in the template and fill every placeholder before sending. The more specific you are, the better the output. Vague in → vague out.

Project Context

Rules Files

Set project-level context so your AI always knows your stack — no repeating yourself every session.

RULES.md

OpenClaw

Loaded automatically each session. Defines stack, conventions, and hard constraints.

.cursorrules

Cursor IDE

Project-level rules for Cursor AI. Lives in project root. Auto-loaded on every query.

AGENTS.md

OpenClaw Agents

Defines agent identity, shared memory workspace, and project-specific instructions.

Example RULES.md for a Next.js project:

markdown

# Project Rules

## Stack
- React 18 + Next.js 14 (App Router)
- TypeScript strict mode
- Tailwind CSS (no custom CSS files)
- Lucide React for icons

## Conventions
- Components: PascalCase, one per file in /components
- Hooks: useXxx pattern, live in /hooks
- No default exports except pages
- Always handle loading/error/empty states
- Use server components by default, 'use client' only when needed

## Patterns
- Data fetching: fetch in server components or React Query
- Forms: React Hook Form + Zod validation
- API routes: /app/api/[route]/route.ts

## Don'ts
- No jQuery, no Bootstrap, no styled-components
- No class components
- No inline styles (use Tailwind)
- Never hardcode API keys — use process.env

Save this in your project root

The file needs to be in your project root to be auto-loaded. For OpenClaw, it also works from ~/.openclaw/workspace/RULES.md as a global default.

Human Oversight

When to Step In

Know when to let AI run and when to take the wheel.

✅ Let AI run freely

Scaffolding & boilerplateCRUD operationsUI componentsConfig filesTest writingDocumentationRefactoringCSS stylingType definitions

⚠️ Review carefully

Auth & sessionsPayment flowsFile system opsAPI integrationsDatabase schemasEmail sendingUser data handling

Read the code. Ask AI to explain anything unclear. Test edge cases yourself.

🛑 Write (or deeply review) yourself

Cryptographic operationsKey managementSmart contractsRegulatory complianceFinancial calculationsSecurity-critical logic

AI can help scaffold these areas, but you need deep understanding before shipping.

Pro tip: Force explanations

When AI writes anything security-related, always append: "Explain every security decision you made and any risks I should be aware of." This forces the AI to surface hidden assumptions.

Stack Guide

What Stack to Use

Pick the right tool for the job. Simpler stack = faster ship.

Landing page

Next.js + Tailwind

Best deploy story (Vercel), great DX, fast.

Setup: 5 min

Telegram bot

Python + python-telegram-bot

Python has best Telegram library ecosystem.

Setup: 3 min

Data script / automation

Python

No setup, massive library ecosystem, AI knows it best.

Setup: 1 min

REST API

Node.js + Express or Python + FastAPI

FastAPI for typed APIs; Express for JS teams.

Setup: 10 min

Full-stack app

Next.js + Prisma + Postgres

Full-stack in one repo. Neon for free Postgres.

Setup: 20 min

Browser extension

Vanilla JS (Manifest V3)

No build step needed. AI generates complete MV3 extensions.

Setup: 5 min

Discord bot

Node.js + discord.js

discord.js is the standard; massive docs.

Setup: 5 min

CLI tool

Python (Click or Typer)

Typer + Click = beautiful CLIs with minimal code.

Setup: 3 min

Scheduled jobs / cron

Python + APScheduler or cron

Simple scripts. No framework overhead.

Setup: 2 min

Ready to build?

Start shipping in the next 30 minutes

Set up OpenClaw, pick a recipe, paste the prompt. Your first project will be running before you finish your coffee.

Start with the Setup Guide See 50+ Examples

Join the Discord community