# How to Become an Expert Vibe Coder in 6 Months (Full Course + Resources)
**作者**: Avid
**日期**: 2026-05-20T16:51:06.000Z
**来源**: [https://x.com/Av1dlive/status/2057142081018315116](https://x.com/Av1dlive/status/2057142081018315116)
---
## Vibe coding has gone from a niche Twitter experiment to one of the most in-demand builder skills
I just broke down how to become a top 1% Agentic coder
The window to get in early is still open; but only for people who actually build things.
The problem is that most beginners have no idea where to start. They either:
- Download Cursor, paste in a vague idea, and wonder why the output is garbage
- Watch endless YouTube tutorials without building a single thing
- Jump straight into complex tools without understanding how to structure a prompt, manage context, or deploy anything
The result is always the same: half-finished demos, the "doom loop" of bug-fixing bugs, and zero shipped products.
This guide was written to fix that. It is a detailed, month-by-month roadmap with verified 2025–2026 resources for every skill you need to go from complete beginner to a competent vibe coder who ships real products. Every month ends with a milestone. Every skill has resources with links.
One rule before you start: build everything. Not read about it. Not watch someone else build it. Actually open the tool, follow the steps, break something, fix it, and ship it.
## What Vibe Coding Actually Is
The term "vibe coding" was coined by AI researcher Andrej Karpathy, who described it as fully surrendering to the AI, accepting every suggestion without manually reviewing the code, and focusing entirely on describing outcomes rather than writing logic.
- In practice, it means building software by describing what you want in natural language and letting AI generate, iterate, test, and fix the code for you.
- But here is what most beginners miss: vibe coding is not passive, and it is not magic. It is a structured pipeline that converts human intent into functional software.
- The output quality is almost entirely determined by the quality of your inputs; your prompts, your context files, your planning, and your ability to review what the AI produces. Mastering those inputs is the entire game.
Vibe coding tools in 2026 split into two categories:
1. AI App Builders; tools like Lovable, Bolt, and Replit that generate entire full-stack applications from a description, including hosting and deployment. Designed for non-technical users and rapid prototypers. No local setup required.
2. AI Coding IDEs; tools like Cursor 3.0, Claude Code, and Windsurf that sit inside your development environment and help developers write, debug, and iterate on code. They require some technical familiarity but offer far more control and power for serious production work.
The roadmap below takes you through both worlds, starting with the foundational skills that make all tools work better, and building toward specialization.
## Month 1: Foundations; What Every Vibe Coder Must Know
Your goal this month: Understand how software works at a conceptual level so that AI-generated code stops being a black box, and you can direct it intelligently.
The biggest mistake new vibe coders make is skipping this month entirely. They open a tool, write a vague prompt, get confused by the output, and fall into what the community calls the doom loop; asking the AI to fix bugs that create new bugs, indefinitely. The people who escape the doom loop are the ones who understand just enough of the fundamentals to read and direct the AI rather than just react to it.
You do not need to become a programmer. You need enough conceptual grounding to ask intelligent questions and catch obvious errors.
1. How the Web Works
Before you build anything on the web, you need to understand what you are building on top of. Most vibe-coded products are web apps. That means knowing the basic client-server model, how browsers talk to backends, what a URL actually does, and what an API is.
Resources:
1. MDN Web Docs: How the Web Works (free)Link: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works The clearest, most authoritative explanation of browsers, servers, and HTTP. Maintained by Mozilla.
2. MDN: HTTP Overview (free)Link: https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview Covers GET vs POST, status codes (200 OK, 400 Bad Request, 401 Unauthorized, 404 Not Found, 500 Server Error), and why they appear when your app breaks.
3. REST API Tutorial (free)Link: https://restfulapi.net/ Short, practical, and directly applicable. After this, you will understand what every vibe-coded backend is doing when it "calls an API."
What to understand:
- What happens from the moment you type a URL to the moment a page renders
- The difference between frontend (what the user sees) and backend (server logic and database)
- What an API is, what a request is, and what a response is
- HTTP status codes and what they mean when debugging your app
- What "environment variables" are and why secrets should never be in code
2. Git and GitHub; Your Time Machine
This is the single most important practical skill in this entire guide. Every serious vibe coder uses Git. Without it, one bad AI prompt can destroy hours of work with no way to go back. With it, every working state is a checkpoint you can return to instantly.
Git is not optional. It is the difference between building productively and rebuilding from scratch every time the AI makes a mess.
How to approach it: Do not try to memorize commands. Understand the model: Git tracks file changes over time and lets you move backward and forward through that history. Once that clicks, the commands make sense.
Resources:
1. Git for Vibe Coders: What Actually Matters (YouTube, free)Link: https://www.youtube.com/watch?v=ADEFvP5Gw5c Specifically made for vibe coders. Covers git add, git commit, git push, git pull, branching, and rollbacks with a real Next.js project.
2. Git and GitHub for Vibe Coders (free guide, DeepakNess.com)Link: https://deepakness.com/blog/git-for-vibe-coders/ Written specifically for AI-assisted builders in late 2025. Covers the daily Git workflow for vibe coders, including committing every 15-20 minutes and using git diff to review AI-generated changes before accepting them.
3. Learn Git Branching (free, interactive)Link: https://learngitbranching.js.org/ The best visual tool for understanding branches and merges. Runs in the browser with no setup.
4. GitHub Skills (free, interactive)Link: https://skills.github.com/ Official interactive courses built inside GitHub itself.
What to focus on:
- git init, add, commit, push, pull, status, diff
- Creating a new branch before starting any new feature
- Using git log to view history and git revert to undo changes safely
- Creating a .gitignore file and adding your .env file to it before your first push
- Using feature branches when experimenting with AI: create a branch, vibe code into it, test it, then merge
The rule: From this point forward, every project you build lives in a GitHub repository. No exceptions.
3. Basic HTML, CSS, and JavaScript Literacy
You do not need to become a front-end developer. You need to be able to look at an AI-generated component and understand what a div, a button, an onClick, and a useState are. This takes about a week and saves you enormous time when you need to direct the AI to modify specific parts of your UI.
Resources:
1. The Odin Project: Foundations (free, self-paced)Link: https://www.theodinproject.com/paths/foundations The best free full-stack foundations curriculum on the internet. Do the HTML Foundations, CSS Foundations, and JavaScript Basics sections only. Takes 1–2 weeks at a moderate pace.
2. freeCodeCamp: Responsive Web Design (free, interactive)Link: https://www.freecodecamp.org/learn/2022/responsive-web-design/ Browser-based exercises with no setup required. Good supplement to Odin.
3. JavaScript.info (free reference)Link: https://javascript.info/ The clearest JavaScript documentation available. Use as a reference when the AI generates code you do not recognize. It is the MDN of JavaScript explanations.
What to focus on:
- HTML: elements, attributes, nesting, and the structure of a page
- CSS: selectors, flexbox, and why things look the way they do
- JavaScript: variables, functions, arrays, objects, and what async/await means
- React basics: what a component is, what props and state mean
4. Choose Your Tech Stack and Commit to It
One of the most common beginner mistakes is constantly switching frameworks. AI models are trained on publicly available code; they are significantly better at popular, well-documented stacks than obscure ones. The more popular your stack, the more tutorials, examples, and training data the AI has for it, and the better its output will be.
Recommended beginner stack for vibe coders in 2026:
- Frontend: React via Next.js (App Router)
- Styling: Tailwind CSS
- Database + Auth: Supabase (Postgres database, authentication, storage; all via API)
- Deployment: Vercel
- Language: TypeScript (preferred) or JavaScript
This stack is beginner-friendly, fully managed, AI-optimized, and lets you ship a complete full-stack product from database to live URL with no server infrastructure to manage. It is also the most commonly used vibe coding stack, which means the AI tools are deeply familiar with it.
Resources:
1. Next.js Official: Learn Next.js (free, interactive)Link: https://nextjs.org/learn The official interactive course. Builds a full dashboard application step-by-step. The App Router version was updated in 2024 and remains current.
2. Tailwind CSS Docs (free)Link: https://tailwindcss.com/docs Tailwind is utility-first CSS. The docs are excellent and the AI produces better Tailwind code than almost any other styling system because of training data density.
3. Supabase Docs: Getting Started (free)Link: https://supabase.com/docs/guides/getting-started Supabase provides a Postgres database, row-level security, authentication (email, social, OTP), and file storage; all accessible through a simple JavaScript SDK.
4. Vercel: Getting Started (free)Link: https://vercel.com/docs/getting-started-with-vercel Connect your GitHub repository to Vercel and every push automatically deploys. Takes about 5 minutes to set up.
Month 1 Milestone
By the end of this month, you should be able to:
- Explain what an API is and what happens when a browser makes a request
- Create a Git repository, make commits, create branches, and push to GitHub
- Read an AI-generated React component and understand its general structure
- Create a basic Next.js project and run it locally with npm run dev
- Deploy a static page to Vercel by connecting a GitHub repo
## Month 2: Master the Tools; Cursor 3.0, Claude Code, and the Builder Ecosystem
Your goal this month: Become genuinely fluent with the core vibe coding tools. Understand which tool is right for which situation, and build your first complete projects.
This is where vibe coding gets real. The tools available in 2026 are extraordinary; but they reward people who understand how to use them and consistently punish those who treat them as magic.
1. Understand the Full Tool Landscape (2026)
The vibe coding ecosystem in 2026 has matured significantly. Here is the current state of every major tool worth knowing, verified as of May 2026.
AI Coding IDEs (best for semi-technical to technical builders):
- Cursor 3.0. All-round AI-first editor. Free / $20/mo Pro. Agents Window, parallel cloud agents, Composer 2, Marketplace, built-in browser.
- Claude Code. Agentic, full-codebase reasoning. Usage-based (Claude Pro $20/mo). Now available as CLI, VS Code extension, desktop app, and web.
- Windsurf. Enterprise-friendly, budget dev. Free / $15/mo Pro. Cascade agent, acquired by Google for $2.4B in 2025.
- GitHub Copilot. Daily assistance in any IDE. Free / $10/mo Pro. Works across VS Code, JetBrains, Neovim, Xcode, and more.
- Cline. Open-source power users. Free (pay per API token). VS Code extension; connects to Claude, GPT-5.5, Gemini, or local models.
- Google Antigravity. Multi-agent parallel builds. Price TBA. Launched with Gemini 3, November 2025; "Manager View" for parallel agents.
No-Code / Full-App Builders (best for complete beginners and rapid prototyping):
- Lovable. Non-technical founders, React UI. Free / $25/mo Pro. Generates full-stack React + Supabase app; best for non-coders.
- Bolt.new. Rapid web app generation, no local setup. Free / $29/mo Pro. In-browser, no setup required; best for beginner speed.
- v0 by Vercel. UI component generation. Free / $20/mo. Best for developers; GitHub sync + direct Vercel deploy.
- Replit. All-in-one builds with hosting. Free / $20/mo. Most feature-rich; Agent 3 builds, runs, and deploys in the browser.
- Base44. No-code internal tools. Free / $20/mo. AI-assisted app + backend for non-technical builders.
Decision guide:
- Complete beginner with no technical background → start with Lovable or Bolt.new
- Developer who wants AI in their existing workflow → Cursor 3.0 or GitHub Copilot
- Terminal-native user who wants full codebase control → Claude Code
- Budget-conscious developer → Windsurf at $15/mo
- Building enterprise apps with a team → Windsurf (post-Google acquisition)
Resources:
1. roadmap.sh: The 10 Best Vibe Coding Tools in 2026 (free guide)Link: https://roadmap.sh/vibe-coding/best-tools Maintained community ranking of the 10 best tools, updated for 2026.
2. BuildMVPFast: 10 Best Vibe Coding Tools 2026 (free guide)Link: https://www.buildmvpfast.com/blog/best-vibe-coding-tools-2026 Comprehensive decision tree and tool-by-tool breakdown with pricing verified in 2026.
3. 2026 Vibe Coding Tool Comparison (free, Technically.dev)Link: https://technically.dev/posts/vibe-coding-tool-comparison A real bake-off test comparing Replit, v0, Lovable, and Bolt on identical projects.
4. Vibe Coding: Why We Prefer Windsurf Over Lovable and Bolt (free guide, Koncile)Link: https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable Detailed team evaluation of four tools on real web projects, published April 2026.
2. Cursor 3.0; A Complete Rebuild
Cursor 3.0 was released on April 2, 2026, and is the most significant update since Anysphere forked VS Code in 2023. It is no longer primarily a file editor with AI features added on top. It is now a unified workspace for building software with agents.
What is new in Cursor 3.0:
- Agents Window; A new standalone interface (Cmd/Ctrl+Shift+P → Agents Window) for running multiple AI agents in parallel. Agents can run on your local machine, in cloud environments, via SSH, or in Git worktrees; all simultaneously.
- Composer 2; Cursor's own frontier coding model, trained specifically for multi-file code editing and iteration.
- Cloud Agents; Agents that run in remote cloud sandboxes, allowing you to kick off a task and come back to review the results. Enterprise self-hosted cloud agents became available March 25, 2026.
- Built-in Browser; An integrated browser lets agents test their own fixes by viewing what actually renders, without you needing to take screenshots.
- Cursor Marketplace; One-click plugins that bundle Skills, Subagents, MCP servers, Hooks, and Rules. Available plugins include AWS, Figma, Linear, Stripe, Vercel, Datadog, Snowflake, and more.
- Design Mode; Click and drag directly on browser-rendered UI elements to target them for AI editing. No more describing components in text.
- Automations (released March 5, 2026); Always-on agents triggered by external events: schedules, Slack messages, Linear issues, GitHub events, and PagerDuty alerts. The agent spins up a cloud sandbox and executes using your configured MCPs. - New Diffs View; Word-level change review, staging, and pull request creation; all without leaving the Agents Window. - /worktree command; Runs tasks in isolated Git worktrees so the agent can work without polluting your main branch. - /best-of-n command; Runs the same task across multiple models and returns the best result.
Resources:
1. Cursor Changelog: 3.0 (official, free)Link: https://cursor.com/changelog/3-0 The official release notes for Cursor 3.0.
2. DataCamp: What Is Cursor 3? (free guide)Link: https://www.datacamp.com/blog/cursor-3 The most comprehensive written breakdown of every new Cursor 3.0 feature, published April 7, 2026.
3. Cursor 3 Changes Everything for Agentic Coding (YouTube, free, Scrimba)Link: https://www.youtube.com/watch?v=HTKGyLar8AU Full walkthrough of the Agents Window, Composer 2, embedded browser, parallel agents, and the Marketplace in a real project.
4. Cursor Tutorial 2026: Learn AI Coding in 15 Minutes (free guide, NXCode)Link: https://www.nxcode.io/resources/news/cursor-tutorial-beginners-2026 Step-by-step beginner guide covering Composer, Agent mode, and Cloud Agents.
5. Build Fast with AI: Cursor 3 vs Google Antigravity (free guide)Link: https://www.buildfastwithai.com/blogs/cursor-3-vs-antigravity-ai-ide-2026 Practical feature comparison between Cursor 3.0 and Google's new Antigravity IDE.
3. Claude Code; Agentic Coding That Reasons Across Your Whole Codebase
Claude Code is Anthropic's terminal-native agentic coding tool. Unlike IDE tools that operate on open files, Claude Code reads your entire codebase, reasons across multiple files, runs commands, handles Git operations, and executes multi-step tasks autonomously; while asking for your approval at each step.
It is now available in four places: the terminal CLI, VS Code extension, JetBrains IDEs, and a desktop app.
How to get started:
1. You need a Claude Pro subscription ($20/month) or higher, plus a terminal on macOS, Linux, or Windows 11.
2. Install via npm: npm install -g @anthropic-ai/claude-code
3. Navigate into your project folder: cd ~/projects/my-app && claude
4. Begin with an exploratory prompt: "What does this project do?" to let Claude analyze your codebase before touching anything.
The core workflow (Explore → Plan → Code → Commit):
- Explore: Press Shift+Tab twice to enter Plan Mode. Claude reads files and answers questions without modifying anything. Use this to understand architecture, trace data flows, and map out the codebase.
- Plan: In Plan Mode, ask Claude to create an implementation plan. Review it, refine it, push back on anything you disagree with. Only then say "go ahead."
- Code: Switch back to Normal Mode. Claude implements the plan, shows diffs, and asks for your approval at each step.
- Commit: Review the diffs. Run tests. Commit with a descriptive message.
CLAUDE.md is a markdown file at your project root that tells Claude Code how your project works, what conventions to follow, what commands to run, and what to never touch. Run claude /init to generate a starter version, then customize it.
Resources:
1. builder.io: How to Use Claude Code (Beginner Guide) (free guide)Link: https://www.builder.io/blog/how-to-use-claude-code The most comprehensive beginner walkthrough of Claude Code installation, the Plan Mode workflow, CLAUDE.md setup, and best practices, published April 2026.
2. Full Claude Code Tutorial for Non-Technical Beginners (YouTube, free)Link: https://www.youtube.com/watch?v=bqJzIWAEn40 Step-by-step app build using Claude Code from scratch, no coding experience required, published April 2026.
3. Claude Code Full Course; 4 Hours (YouTube, free)Link: https://www.youtube.com/watch?v=QoQBzR1NIqI The most comprehensive video course on Claude Code available. Covers everything from setup to shipping and selling products.
4. Claude Code Tutorial for Beginners 2026 (free guide, dev.to)Link: https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma Written guide covering installation, terminal setup, and building your first project.
5. Getting Started with Claude Code: A Researcher's Setup Guide (free guide)Link: https://paulgp.substack.com/p/getting-started-with-claude-code Particularly good for understanding the "be specific" principle, context window management, and iterative prompting.
6. OpenSaaS.sh: Best Way to Vibe Code a SaaS in 2026 (free guide)Link: https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/ The winning 2026 setup: Claude Code + a structured SaaS boilerplate + LLM-friendly docs (llms.txt). Also covers running a background dev server so Claude can see real-time logs, and browser automation via Chrome DevTools MCP.
Month 2 Milestone
By the end of this month, you should be able to:
- Choose the right tool for any given project type
- Use Cursor 3.0's Agents Window to run a task with a cloud agent
- Work with Claude Code in Plan Mode before any code is written
- Set up a CLAUDE.md file for any project
- Build and deploy at least one complete project (a functioning web app that is live at a real URL)
## Month 3: The Art of Prompting; Context, Structure, and Getting Consistent Output
Your goal this month: Master the core skill of vibe coding; writing prompts and managing context so well that the AI does what you intend on the first attempt, reliably.
Prompting is the highest-leverage skill in the entire vibe coding stack. The tools barely matter if your prompts are vague. A mediocre tool with an excellent prompt outperforms an excellent tool with a vague prompt, every single time.
1. How Good Vibe Coding Prompts Actually Work
The difference between a beginner's prompt and an expert's prompt is almost entirely structural. Beginners say: "Add a login page." Experts say: "Create a login page in app/login/page.tsx using the existing Supabase auth client in lib/supabase.ts. Use the same form styling as app/signup/page.tsx. Include email/password fields, a submit button, and error handling for invalid credentials. Do not modify any other files."
One of these produces a working component. The other produces something that might work, might break other files, and might introduce patterns inconsistent with the rest of the codebase.
The four-part prompt structure:
1. Goal; What exactly should this do?
2. Context; Which files are relevant? What already exists?
3. Constraints; What should NOT change? What patterns should it follow?
4. Output format; What should the finished result look like?
Resources:
1. Anthropic: Interactive Prompt Engineering Tutorial (free, GitHub)Link: https://github.com/anthropics/prompt-eng-interactive-tutorial A 9-chapter interactive course with exercises, designed to be run as Jupyter notebooks with the Claude API. The best hands-on prompting course available.
2. PromptingGuide.ai (free)Link: https://www.promptingguide.ai/ Covers everything from basic prompting through chain-of-thought, few-shot examples, and agentic prompting techniques. Updated regularly.
3. r/PromptEngineering: The Ultimate Vibe Coding Guide (free, Reddit)Link: https://www.reddit.com/r/PromptEngineering/comments/1kyboo0/the_ultimate_vibe_coding_guide/ 18 battle-tested practices from active vibe coders, including how to handle AI drift, maintain consistency across features, and build the "Common AI Mistakes" file.
4. Roadmap.sh: Vibe Coding Best Practices (free guide)Link: https://roadmap.sh/vibe-coding/best-practices 10 practical rules for getting consistent results from vibe coding tools, verified and updated for 2026.
5. Appwrite: Complete Vibe Coding Guide 2026 (free guide)Link: https://appwrite.io/blog/post/the-complete-vibe-coding-guide-2025 Comprehensive guide covering what vibe coding is, how to write clear prompts, and how to stay in control as a builder rather than just a passenger.
2. The PRP Framework; Plan Before You Prompt
The most common cause of doom loops is jumping straight into feature development without any planning. The AI writes code, it breaks something, you ask it to fix that, it breaks something else, and you spiral.
The fix is deceptively simple: write a plan before writing a single line of prompt for code.
The PRP Framework (Product Requirements Prompt):
Before touching your vibe coding tool, answer these three questions in a document:
1. Who is this for? (Target user, their level of technical comfort)
2. What problem does this solve? (The core value, in one sentence)
3. What does success look like? (Specific, testable criteria)
Then take your document to Claude or ChatGPT and ask it to expand it into a full Product Requirements Document (PRD). That PRD becomes your opening prompt in Cursor or Claude Code. This one habit separates people who ship from people who doom-loop.
In Claude Code specifically: Press Shift+Tab twice to activate Plan Mode before any implementation. Ask Claude to outline which files it will create or modify, what functions it will introduce, and any edge cases or architecture decisions. Review the plan. Push back on anything questionable. Then and only then say "go ahead."
3. llms.txt; The Standard for AI-Readable Documentation
One of the most underused techniques in vibe coding is llms.txt; a plain-text markdown file placed at the root of any library, framework, or project that gives AI tools the exact context they need to work with it correctly.
The problem it solves: most library documentation is written for humans and optimized for browsers. AI models struggle with HTML, JavaScript-heavy docs pages, and navigation menus. llms.txt strips all that away and gives the model a clean, structured, API-focused reference that fits inside a context window.
Where llms.txt files exist and how to use them:
- Most major libraries now publish one. Example: https://docs.supabase.com/llms.txt
- Paste the URL into Claude Code, Cursor, or ChatGPT and say: "Read this first, then help me build with this library."
- For libraries that do not have one yet, generate one yourself: copy the library's API docs, paste into Claude, and ask: "Summarize this into a clean llms.txt format: classes, methods, required parameters, and examples. Keep it under 5,000 tokens." - The OpenSaaS stack (Claude Code + Open SaaS boilerplate) uses llms.txt for both the boilerplate and the Wasp framework, which is one reason Claude Code produces significantly more consistent code when using it compared to arbitrary stacks.
Resources:
1. llms.txt Official Standard (free)Link: https://llmstxt.org/ The official specification. Lists all libraries and frameworks that have published llms.txtfiles.
2. OpenSaaS: The Best Way to Vibe Code a SaaS in 2026 (free guide)Link: https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/ The real-world case study for how llms.txt + SaaS boilerplate + Claude Code combine into the most consistent vibe coding setup available in 2026.
4. Cursor Rules and CLAUDE.md; Your AI's Permanent Instructions
Cursor Rules and CLAUDE.md files are the most underused and highest-ROI vibe coding practice. They are persistent instruction files that the AI reads at the start of every session. They define your project, your conventions, your tech stack, and what the AI should never do.
The current Cursor setup (2026):
Cursor now uses the .cursor/rules/ directory with individual .mdc files (replacing the legacy single .cursorrules file). There are four rule activation modes:
- Always Apply; loaded in every conversation, regardless of context
- Auto Attached (globs); activated when matching file patterns are referenced (e.g., *.tsx files)
- Agent Requested (description-based); the AI decides when to apply based on task description
- Manual (@rule-name); only loaded when you explicitly reference it in a prompt
What a good rules setup includes:
- A .cursor/index.mdc file with project overview, tech stack, and universal conventions (keep under 100 lines)
- Separate .mdc files in .cursor/rules/ for specific contexts (one for auth, one for database patterns, one for UI components, etc.)
- A CLAUDE.md at the project root with the same information, for Claude Code
Resources:
1. Vibe Coding Academy: Cursor Rules Complete Guide + 15 Templates (free guide)Link: https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide The most detailed 2026 guide to Cursor Rules, covering the .mdc format, all four activation modes, and 15 copy-paste templates for common stacks.
2. CLAUDE.md and Cursor Rules: Multiple Levels (YouTube, free)Link: https://www.youtube.com/watch?v=Ia54BXaci5o Deep dive into how to set up multi-level rules for both Cursor and Claude Code, with real examples. Published mid-2025, still fully applicable.
3. How to Create and Use SKILLS.md in Cursor (YouTube, free)Link: https://www.youtube.com/watch?v=DfLL5_zbWGc Guide to Cursor's skills system, published February 2026. Covers creating .cursor/skills/ files that agents can invoke with a slash command.
4. Cursor Directory (free, community)Link: https://cursor.directory/ Community-contributed rules files for dozens of stacks. Pick one matching your stack and customize it.
5. Awesome CursorRules (free, GitHub)Link: https://github.com/PatrickJS/awesome-cursorrules Curated repository of high-quality rules files organized by framework. Regularly updated.
6. Sync Coding Rules: Cursor, Claude Code, and Windsurf (free guide)Link: https://www.concret.io/blog/sync-coding-standards-across-cursor-agentforce-vibes-claude Advanced technique using hard links to keep a single master rules file synchronized across all your AI tools automatically.
4. Spec-Driven Development; The Professional Upgrade to Vibe Coding
Spec-Driven Development (SDD) is what happens when vibe coding hits real projects and needs to scale. Coined as a formal methodology by JetBrains in a 2026 DeepLearning.AI course, it is the discipline of defining what the system should do before letting any agent write code; through structured specification documents housed directly in the repository.
Vibe coding hits a wall at roughly month 3 of a project. The model starts producing code that contradicts earlier decisions. Context accumulates. Conflicting patterns appear. The doom loop arrives. Spec-driven development prevents this by making the spec; not the prompt; the source of truth.
The SDD workflow:
1. Write the specification. Before any code exists, describe the system's behavior precisely: what the feature does from the outside, its inputs, outputs, edge cases, and constraints. Not implementation details; observable behavior.
2. Generate requirements. Pass the spec to your AI agent and ask it to produce a structured requirements document. Review it. Does it capture everything? Approve or refine.
3. Create a design document. The AI turns approved requirements into a technical plan with concrete tasks for code, tests, and documentation. You review before a single line of code is written.
4. Implement. The AI writes code against the spec, not from a vague prompt. Retry logic, idempotency handling, timeout behavior; all of these were decided in the spec, not left to the model's imagination.
5. Generate and run tests. Because the spec defines inputs, outputs, and edge cases explicitly, test cases generate themselves from the spec.
The document structure that makes SDD work:
- mission.md; what you are building and why
- tech-stack.md; core technical decisions
- roadmap.md; project phases in implementation order
- specs/[feature-name]/plan.md; numbered task groups for the feature
- specs/[feature-name]/requirements.md; scope, key decisions, and context
- specs/[feature-name]/validation.md; criteria for success and merge confirmation
When to use SDD vs. pure vibe coding:
- Vibe coding for prototyping, experimenting, building proof-of-concepts, and discovering direction in Month 3–4 of this roadmap - SDD for any feature you intend to maintain, any project with a second contributor, and any feature whose behavior has business or legal implications - The middle path: SDD for the constitution (mission, stack, architecture) + vibe coding for executing individual tasks within those boundaries
Resources:
1. Toward Data Science: From Vibe Coding to Spec-Driven Development (free guide)Link: https://towardsdatascience.com/from-vibe-coding-to-spec-driven-development/ The most detailed practitioner guide to implementing SDD, including the full document structure, the plan → implement → validate loop, and how to automate spec workflows as Claude Code skills.
2. GitHub Spec Kit (free, open source)Link: https://github.com/github/spec-kit GitHub's official open-source toolkit for spec-driven development. Provides templates, the specify CLI, and structured commands (/specify, /plan, /tasks) that work with Claude Code, GitHub Copilot, and Gemini CLI. Works with 30+ coding agents.
3. GitHub Blog: Get Started with Spec-Driven Development (free guide, official)Link: https://github.blog/ai-and-ml/generative-ai/spec-driven-development-with-ai-get-started-with-a-new-open-source-toolkit/ The official GitHub walkthrough of Spec Kit: the four phases (Specify → Plan → Tasks → Implement), how to install the specify CLI, and how to use /speckit.constitution to establish project governance principles.
4. JetBrains Course: Spec-Driven Development with Coding Agents (free on DeepLearning.AI)Link: https://www.deeplearning.ai/courses/spec-driven-development-with-coding-agents/ The course that formalized the methodology. Covers the full plan-implement-validate cycle and how to automate SDD workflows inside Claude Code as reusable skills.
5. Test Collab: From Vibe Coding to Spec-Driven Development (free guide)Link: https://testcollab.com/blog/from-vibe-coding-to-spec-driven-development Tool-agnostic explainer of the SDD workflow with real examples, covering how CLAUDE.md, Cursor Rules, and GitHub Copilot PRD workflows each implement the same underlying pattern.
6. Red Hat: Vibes, Specs, Skills, and Agents; The Four Pillars of AI Coding (free guide)Link: https://developers.redhat.com/articles/2026/03/30/vibes-specs-skills-agents-ai-coding The advanced framework: use vibes for exploration, specs for precision, skills for reusable agent capabilities, and agents for execution. The most complete mental model for professional AI-assisted development.
5. The 18 Practices Every Expert Vibe Coder Uses
These practices come directly from the r/ClaudeAI and r/PromptEngineering communities, verified against practitioner experience in 2025–2026.
1. Begin with a detailed vision; write it out fully before opening any tool
2. Use Git and branch liberally; create a new branch for every feature experiment
3. Maintain an instructions folder; a /docs or /instructions directory with markdown files describing your architecture, components, and decisions
4. Break features into phases; never ask for a whole feature at once; break it into 3–5 prompts
5. Open a new chat when context gets long; long conversations degrade output quality; start fresh on new features
6. Reference specific files in every prompt; tell the AI exactly which files to look at
7. Do not overwhelm with context; mention only the most pertinent files, not everything
8. Reference existing components; when asking for a new component, link to an existing one as a style reference
9. Use Gemini 3.5 Pro as a secondary reviewer; copy generated code and paste it into Gemini to check for security vulnerabilities or poor patterns
10. Always validate and sanitize server-side; never trust client-submitted data
11. Keep secrets server-side; use environment variables; never put API keys in frontend code
12. Handle errors explicitly; copy error messages from the console and paste them to the AI
13. If the fix fails three times, revisit your prompt; do not ask the same broken prompt four times
14. Ask the AI to add logs; when debugging, ask for console.log statements at key points rather than guessing
15. Be explicit about scope; add "Do not change anything I didn't ask for" to every prompt
16. Maintain a "Common AI Mistakes" file; document errors the AI repeats and reference it when starting new features
17. Ask for a plan, not code; always extract the plan first, then approve it before any implementation begins
18. Ask for explanations of unfamiliar code; do not accept code you cannot read at all; ask the AI to explain it before moving on
Month 3 Milestone
By the end of this month, you should be able to:
- Write structured prompts that produce consistent output on the first attempt
- Use the PRP framework to plan any app before building it
- Set up Cursor Rules and CLAUDE.md for any project
- Apply all 18 expert practices habitually
- Maintain a working "Common AI Mistakes" file for your projects
## Month 4: Build Real Projects; From Idea to Shipped Product
Your goal this month: Build 2–3 complete projects that go from idea to live URL. These become your portfolio.
The gap between tutorial demos and real products is where most vibe coders stall permanently. Real products have users, break in unexpected ways, require databases and authentication, and need to work on mobile. This month is about closing that gap.
1. Projects Worth Actually Building
Forget the habit tracker. Forget the weather app. The best vibe coding projects are narrow, niche, and solve one painful problem for one specific type of person. Here are real ideas; some already being monetized by indie hackers in 2026, some things people have actually shipped, none of them cookie-cutter.
Beginner: Get Your Hands Dirty (Month 3–4)
These are tight, single-flow projects. They have a real use case, can be built in a weekend, and are genuinely useful rather than just demos.
1. Reddit Diss Track Generator Connects to the Reddit API via PRAW (Python Reddit API Wrapper), pulls comments from any thread, identifies the best insults and burns, then chains them into lyrics using an LLM. Outputs a .wav file using text-to-speech + basic audio editing. This is weird, funny, shareable; exactly the kind of project that gets Twitter attention. What you learn: third-party API integration, LLM chaining, audio file generation.
2. AI Meeting Brief Generator Before a meeting, the user pastes in the company name and meeting purpose. The tool scrapes the company website and LinkedIn, pulls your last email thread with them (via Gmail API), and generates a one-page brief with talking points, key risks, and suggested questions. What you learn: multi-source data fetching, prompt chaining, API auth. Monetization: $19/month for consultants and account executives; people who run 5+ client calls per week.
3. AI Changelog Writer Connects to a GitHub repo via the GitHub API. Every week, reads the latest commits, extracts what changed, and writes a clean, customer-friendly changelog post. Developers hate writing changelogs. This makes it automatic. What you learn: GitHub API, structured LLM output, scheduling. Solo founders and dev teams are the exact audience.
4. Freelance Invoice Chaser Built for freelancers who hate chasing late payments. Integrates with Stripe or manual invoice data. Sends polite, automatically escalating payment reminder emails on a schedule; tone gets firmer the longer the invoice is overdue. Logs all activity. What you learn: email sending via Resend/Nodemailer, scheduling with cron, Stripe webhook handling. A tool every freelancer immediately wants.
5. StickyCanvas; a note tool that isn't Notion A real project being used daily by its creator. A minimal canvas where you drag sticky notes around freely. No folders, no tags, no hierarchy. The entire value prop is that it's stupidly simple; no menus, no commands, no Notion complexity. Just notes on a canvas. What you learn: drag-and-drop UX, canvas interactions, local storage. Ship it in a weekend.
Intermediate: Portfolio Pieces That Get Attention (Month 4–5)
These require a database, user authentication, and real design. They demonstrate real product thinking.
6. Vertical AI Chatbot for a Specific Business Type Not a generic chatbot; a chatbot trained on the knowledge base of one specific type of business. Pick a niche: dental offices, auto repair shops, real estate agencies, yoga studios. Build a chatbot that answers booking questions, pricing questions, and FAQs for that niche. Sell setup as a service. Indie hackers report $850–$3,200/month per niche from this. What you learn: RAG pipeline, Supabase vector search, embeddable widget, multi-tenant architecture.
7. Proposal Version Tracker A tool for freelancers and agencies that tracks every version of a sales proposal sent to a client. Shows which version was opened, for how long, and sends a notification when a client re-opens the proposal (which usually means they're considering it again). Think DocuSign analytics, but for proposals only. What you learn: PDF upload + storage, email open tracking, real-time notifications, Supabase database design.
8. Screenshot-to-React Component Converter User uploads a screenshot of any UI; a landing page, a competitor's app, a Figma design they screenshotted. The tool sends it to a vision model (GPT-5.5 or Claude), which generates a clean React + Tailwind component matching the layout and styling. What you learn: vision model APIs, image upload, structured output from multimodal models. This one is legitimately useful for developers and commands $25/month easily.
9. Water Pipeline / Infrastructure Map Tool A real project someone built in the vibe coding subreddit: an interactive map where a municipality or utilities team can sketch water pipelines and basins, add a history of repairs, costs, and maintenance logs, and search/filter by date or location. This exact type of bespoke operational tool; niche, slightly boring, deeply useful; is what B2B buyers pay real money for without blinking. What you learn: map rendering with Mapbox or Leaflet, geospatial data storage in Supabase, form-heavy UIs, file uploads.
10. Gamified Family Chore App The person who built this never planned to launch it; they built it over a weekend because their family needed it. A month later, 100+ families were using it. Chores are assigned to family members, completing them earns points, and points unlock rewards set by the parent. Built with FastAPI + PostgreSQL + PWA. Lesson: build for a problem you actually have. It ships faster, it's more honest, and real users find it because you're one of them.
Advanced: Ambitious Builds That Prove Real Skill (Month 5–6)
These are complex enough to require proper architecture, context engineering, and multi-session builds. Each one is a legitimate product, not a demo.
11. VC Investor CRM A deal-tracking CRM designed specifically for venture capitalists or angel investors. Track startup deals, manage relationship history, auto-summarize conversations, and score companies against a custom investment thesis using an LLM. The key insight: off-the-shelf CRMs (Salesforce, HubSpot) are built for sales teams, not investors. The mental model is completely different. Building a tool for one specific type of user that existing tools ignore is the highest-probability path to revenue.
12. Basketball Management Simulation Game A full browser-based sports management game (real project: azario.floot.app). Build your own basketball team, develop player skills through training programs, trade on a live market with other players, and simulate matches with real-time score logic. What you learn: complex state management, game simulation algorithms, multi-user real-time data, leaderboards. The kind of project that showcases real engineering ambition.
13. AI-Powered Speech Therapy App (Aphasio) Built for stroke survivors with aphasia using Cursor. An iPhone app that delivers AI-generated speech exercises; the user practices reading words and sentences, the app listens, evaluates their pronunciation, and adjusts difficulty over time. Built because the creator's family member needed it. What you learn: speech recognition APIs, adaptive exercise generation, mobile build (React Native), cloud storage for progress tracking. The kind of project that means something.
14. PDF Accessibility Tool for Visual Impairments An AI tool that takes any PDF and makes it meaningfully accessible for people with visual impairments. Goes beyond basic text extraction; rewrites complex tables and charts into plain-language descriptions, adds logical reading order, generates alt text for embedded images, and outputs an accessible HTML or EPUB version. What you learn: PDF parsing (PyMuPDF or pdfplumber), multimodal AI for chart description, accessible HTML output. Potential for grant funding or institutional sales, not just SaaS.
Resources for Project Discovery:
1. r/vibecoding: Show Me Your Awesome Projects (free, Reddit)Link: https://www.reddit.com/r/vibecoding/comments/1rl5ccj/show_me_your_awesome_vibe_coded_projects/Real community showcase of actually-shipped vibe coded projects. Scroll for inspiration that is honest about scope and difficulty.
2. r/vibecoding: What Is Your Most Unique Vibe Coded Project? (free, Reddit)Link: https://www.reddit.com/r/vibecoding/comments/1rxjc3u/what_is_your_most_unique_vibecoded_project/The genuinely weird and creative ones. Includes the diss track generator, the accessibility PDF tool, and a geospatial database built in 30 days.
3. DodoPaments: 30 Profitable Micro SaaS Ideas for 2026 (free guide)Link: https://dodopayments.com/blogs/micro-saas-ideas-2026 30 validated micro SaaS ideas with market size, MRR potential, startup cost, and monetization paths. Each is solo-buildable.
4. SuperFrameworks: Vibe Coding Hits a Tipping Point (free guide)Link: https://superframeworks.com/articles/vibe-coding-tipping-point-what-founders-need-to-know 7 specific niches where indie hackers are already generating $500–$3,200/month from vibe-coded products, with actual revenue numbers.
5. IdeaProof: 50 Micro-SaaS Ideas for Solo Founders in 2026 (free)Link: https://ideaproof.io/lists/micro-saas-ideas Each idea includes technical difficulty rating, startup cost estimate ($1K–$15K), and specific market gap analysis. The most actionable idea list available.
6. Cursor Forum: Built with Cursor in 2025 (free, community)Link: https://forum.cursor.com/t/built-with-cursor-in-2025-share-your-projects/147737 The official Cursor forum showcase thread. Real projects, real builders, honest about what was hard.
2. The Plan-Review-Fix Cycle; The Professional Approach
Most beginner vibe coders run a "prompt → accept → prompt → accept" loop. This works for 20 lines of code. It catastrophically fails for real features in real products.
The professionals use a Plan-Review-Fix cycle with three distinct parties: you, the coding agent, and an independent AI reviewer.
The workflow:
1. Plan first. Before any code, ask the AI to outline: which files it will create or modify, what functions it will add, any dependencies, and potential edge cases. Explicitly say: "Do not write any code. Just show me the plan."Review the plan and refine it.
2. Implement. Once the plan is approved, let the AI write the code.
3. Review. Copy the generated code and paste it into a fresh Gemini 3.5 Pro session (chosen for its very large context window) acting as a senior security engineer and code reviewer. Ask it to look for bugs, security vulnerabilities, hallucinated package names, and bad patterns.
4. Fix. Share the reviewer's findings back to the coding agent and iterate until clean.
Resources:
1. ProductTalk: Vibe Coding Best Practices; Avoid the Doom Loop (free guide)Link: https://www.producttalk.org/vibe-coding-best-practices/ The most detailed guide to the doom loop and the plan-review-fix cycle, with practical examples.
2. 5 Vibe Coding Workflows That Actually Ship Production Code in 2026 (free guide, dev.to)Link: https://dev.to/dohkoai/5-vibe-coding-workflows-that-actually-ship-production-code-in-2026-1nmn Practical workflows using Claude Code, Cursor, and Windsurf for real production code, not demos. Covers the test-driven approach, context-loading patterns, and real cost numbers.
3. Security Fundamentals Every Vibe Coder Must Know
AI-generated code has a predictable set of security problems. You do not need to be a security expert, but you need to know these patterns exist and build a habit of checking for them before anything goes live.
The vibe coder's security checklist:
- API keys and secrets: Every secret lives in .env.local. That file is in .gitignore before the first push. No exceptions.
- Server-side validation: Always validate and sanitize all user input on the server. The AI often skips this.
- Auth patterns: Supabase handles auth correctly out of the box. If building custom auth, use a battle-tested library.
- CORS configuration: Ask the AI to explain what CORS settings it generated and why. Bad CORS settings are a common AI mistake.
- Dependency audit: Ask the AI to check for known-vulnerable or hallucinated package names before deploying. AI occasionally invents package names.
- Prompt injection: If your app passes user input to an LLM, users can try to hijack the system prompt. Read the OWASP guide.
Resources:
1. OWASP Top 10 for LLM Apps: Prompt Injection (free)Link: https://genai.owasp.org/llmrisk/llm01-prompt-injection/ The authoritative reference on prompt injection; the #1 security risk in LLM applications. Covers direct and indirect injection attacks and defensive patterns.
2. OWASP API Security Top 10 (free)Link: https://owasp.org/API-Security/ The definitive list of API security risks. Understand these before you ship anything that accepts user data.
3. Clarifai: Vibe Coding Best Practices and Security (free guide)Link: https://www.clarifai.com/blog/vibe-coding-explained Step-by-step security checklist for AI-generated code, with specific prompting strategies to get the AI to build securely.
4. Cycode MCP Server: Secure AI Code in Real Time (free)Link: https://cycode.com/blog/introducing-cycodes-mcp-server/ Cycode's MCP server integrates directly into Cursor and Windsurf as a live security scanner, checking AI-generated code in real time without leaving your vibe coding workflow.
4. Supabase; Your Full-Stack Backend
Supabase deserves its own section because it is the most important piece of infrastructure for vibe coders building real products. It gives you a Postgres database, authentication, file storage, and real-time subscriptions; all accessible via a JavaScript SDK with no server management required.
Resources:
1. Supabase: The Vibe Coder's Guide to Environments (free guide, official)Link: https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments Written specifically for vibe coders. Covers setting up dev vs. production environments, database migrations, and the most critical beginner mistake: testing on live data.
2. Supabase YouTube Channel: Quickstart Guides (free)Link: https://www.youtube.com/@Supabase Short, practical video guides for every major feature (auth, database, storage, realtime). Each is 5–10 minutes.
3. Supabase Migrations Docs (free, official)Link: https://supabase.com/docs/guides/deployment/database-migrations Treat every database schema change as a migration, not a direct edit. This is how you avoid catastrophic data loss. The guide includes rollback scripts.
5. The 9 Failure Patterns of Coding Agents; What Will Break Your Projects
Researchers at Columbia University's DAPLab published the most rigorous study of vibe coding failure modes to date, analyzing Cline, Claude, Cursor, Replit, and v0 on identical tasks. They found 9 key failure patterns. The two most common and most dangerous:
Silent failures; Code appears to run without errors but does not do what you asked. No red terminal output. No crash. Just wrong behavior, discovered much later, often in production.
Business logic failures; The model implements the mechanism correctly but misunderstands the intent. A streak counter that resets under a condition you forgot to specify. An invoice total that excludes tax when it should include it. These are catastrophic for real products.
The other 7 patterns researchers identified:
1. Error handling gaps; try {... } catch (e) {} that swallows errors completely and logs nothing
2. Over-editing scope; The agent modifies files you didn't ask it to touch, breaking other features
3. Stale context drift; The model loses track of your conventions as conversations grow longer
4. Self-justifying test mocks; Tests that test the AI's own mocks instead of actual behavior; produce 100% pass rates with zero real coverage
5. God component sprawl; One file with 600+ lines and 10+ useState calls; essentially impossible to maintain
6. Policy blindness; The agent treats your constraints as preferences, not rules; it follows them until it finds a reason not to
7. Transparency gaps; When something fails, current tools provide almost no visibility into what the agent was trying to do and where it went wrong
The fix for policy blindness (from the same research): treat your CLAUDE.md and rules files as enforced contracts, not suggestions. Include explicit failure criteria: "If no RLS policy exists on this table, stop and ask before proceeding."
6. Testing; The Skill Most Vibe Coders Skip and Regret
Vibe-coded applications accumulate technical debt at roughly three times the rate of traditionally developed software when there is no structured QA process; a finding from an ICSE 2026 meta-analysis across 101 sources on AI-assisted development. The practical result: the cost of professionally rebuilding a vibe-coded app that "works" is routinely $5,000–$30,000.
The fix is not to stop using AI; it is to make the AI write tests alongside the features.
The test-first vibe coding approach:
1. Before writing feature code, ask the AI to write a test for the expected behavior. This forces you to specify the behavior precisely, which immediately improves the feature code too.
2. Run the tests. Watch them fail.
3. Ask the AI to write the code that makes them pass.
4. Ask the AI to run npm test after every significant change. The failing test is the feedback loop that prevents regressions.
The 70/30 rule; a practical guideline for where AI adds the most value:
- 70% AI-assisted: Boilerplate, CRUD operations, form validation, writing tests for existing code, documentation, refactoring with clear patterns, format conversion (JSON → TypeScript), regex, one-off scripts
- 30% Human-only: System architecture decisions, security-critical code (auth, encryption, payments), complex race conditions, novel problem domains, performance-critical algorithms, legal/compliance logic
If you are at 95% AI, you are almost certainly shipping bugs. If you are at 20% AI, you are leaving productivity on the table.
Resources:
1. Testomat: 8 Best AI Testing Tools for Vibe Coders (free guide)Link: https://testomat.io/blog/best-ai-testing-tools-for-vibe-coders/ The most comprehensive guide to vibe testing tools in 2026, including Vitest, Playwright, and AI-native QA tools.
2. Vibe Testing with Playwright + MCP (free guide, Tim Deschryver)Link: https://timdeschryver.dev/blog/vibe-testing-with-playwright How to use the Playwright MCP server with Cursor or VS Code Copilot to write and run browser tests using natural language. The "copy as prompt" button in Playwright's error tab lets you paste failing tests directly into your AI agent.
3. AI Vibe Coding Notes from the Basement (free guide, Awesome Testing)Link: https://www.awesome-testing.com/2025/04/ai-vibe-coding-notes-from-the-basement The most detailed practitioner guide on TDD-first vibe coding. Covers using o1 for planning, Cursor + Sonnet 4.6 for execution, keeping tests running as a feedback loop, and using gitingest to flatten a codebase into a single file for a thinking model to reason over.
4. Playwright Codegen (official, free)Link: https://playwright.dev/docs/codegen Run npx playwright codegen and just click through your app in a browser. Playwright records every click and generates a Playwright test file automatically. The fastest way to get browser tests written.
5. Vitest Official Docs (free)Link: https://vitest.dev/ The standard unit testing framework for Vite-based Next.js projects in 2026. Fast, Jest-compatible, works natively with TypeScript.
Month 4 Milestone
By the end of this month, you should have:
- 2–3 complete, deployed projects live at real URLs
- At least one project with user authentication and a Supabase database
- Tests written alongside (or before) every significant feature
- A Plan-Review-Fix workflow embedded in how you build
- Security review as a standard pre-deployment step
- A GitHub profile with 3+ real repositories
## Month 5: Context Engineering and MCP; The Meta-Skill That Separates Good from Great
Your goal this month: Master context engineering; the discipline of giving AI exactly the right information at exactly the right time to produce consistently excellent, architecturally coherent output.
Context engineering is what separates vibe coders who produce messy, inconsistent codebases from those who produce clean, maintainable products. As your project grows, context management becomes your most critical skill.
1. What Context Engineering Actually Is
Context engineering is the practice of deliberately shaping what information enters the AI's context window before and during every prompt. It is not one thing; it is a system. That system includes your rules files, your project documentation structure, the files you reference in prompts, how you organize your codebase, and how you handle the AI's context limits.
An AI with poor context produces inconsistent, outdated, and conflicting code. An AI with excellent context produces code that matches your patterns perfectly, understands your architecture, and avoids your known mistakes.
The context engineering stack for 2026:
- .cursor/rules/ + CLAUDE.md; Permanent project-level instructions (covered in Month 3) - /docs or /instructionsfolder; Markdown files documenting key architecture decisions, component patterns, and third-party integrations - Feature spec files; A markdown file per major feature, describing what it does, how it connects to the rest of the system, and any constraints - Example files; Existing components pointed to in prompts as style references - Background dev server; Run npm run dev as a background task so the AI can see compile errors and server logs in real time while building- Browser automation via MCP; Chrome DevTools MCP or Vercel's agent browser lets AI see what actually renders, console errors, and network requests without screenshots
Resources:
1. NXCode: Agentic Engineering; The Complete Guide to AI-First Software Development (free guide)Link: https://www.nxcode.io/resources/news/agentic-engineering-complete-guide-vibe-coding-ai-agents-2026Karpathy coined the term "agentic engineering" in early 2026 to describe the professional evolution beyond casual vibe coding. This guide covers the full PEV loop (Plan → Execute → Verify), context architecture, and quality gates. Published March 2026.
2. 10 GitHub Repositories to Master Vibe Coding (free guide, KDnuggets)Link: https://www.kdnuggets.com/10-github-repositories-to-master-vibe-coding Curated list of the most useful GitHub repos for context engineering, workflow templates, rulebook setups, and more.
3. Awesome Vibe Coding (free, GitHub)Link: https://github.com/filipecalegario/awesome-vibe-coding The most comprehensive curated list of vibe coding references, tools, guides, and resources.
2. MCP; Model Context Protocol
MCP (Model Context Protocol) is the open standard, created by Anthropic, that lets AI tools connect to external data sources; databases, APIs, real-time data, external documentation, and third-party services. It is now supported natively in Cursor 3.0 (via the Marketplace), Claude Code, and Windsurf.
Understanding MCP unlocks the next level of vibe coding: agents that can query your actual data, look up documentation in real time, interact with third-party services, and take actions in external systems.
What MCP looks like in practice:
- A Stripe MCP server lets your agent read and create invoices in Stripe
- A Supabase MCP lets your agent query your live database during development
- A Figma MCP lets Cursor agents read your design file and implement components from it
- A GitHub MCP lets agents create issues, open PRs, and manage workflows
- A Qdrant MCP gives your agent access to your vector database for RAG-enabled builds
Resources:
1. MCP Official Introduction (free, Anthropic)Link: https://modelcontextprotocol.io/introduction The official documentation and specification for Model Context Protocol.
2. Building Your First MCP Server with Vibe Coding (free guide)Link: https://www.qpython.com/building-your-first-mcp-server-with-python-and-vibe-coding-pk/ Practical walkthrough for building your first MCP server using Cursor, enabling your AI to pull real-time context from external sources.
3. Build Your MCP Server in 5 Minutes with Vibe Coding (free guide, Claranet)Link: https://www.claranet.com/uk/blog/build-your-mcp-server-just-5-minutes-using-vibe-coding-kiro/ Fastest hands-on guide to building an MCP server.
4. Vibe Coding RAG with Qdrant's MCP Server (free, Qdrant)Link: https://qdrant.tech/blog/webinar-vibe-coding-rag/ Webinar on using Qdrant's MCP server to give Cursor and Claude Code direct access to a vector database during builds.
5. Cursor Marketplace (in-app)Link: https://cursor.com/marketplace Browse and install pre-built MCP server plugins for AWS, Figma, Linear, Stripe, Vercel, Datadog, and more; all one-click from inside Cursor 3.0.
3. Figma to Code; The Design Workflow Professional Vibe Coders Use
If your products need to look polished; not just functional; the Figma → Code workflow is the highest-leverage design skill in the vibe coder's toolkit. Instead of describing your UI in text, you design it visually in Figma, then let the AI generate matching code from the design file directly via the Figma MCP.
The workflow:
1. Connect the Figma MCP to Cursor or Claude Code (install it from Cursor Marketplace → Figma)
2. In your prompt, reference the Figma file: "Study the design tokens in this Figma file. Extract the color palette, font sizes, and spacing into a Tailwind config. Do not write components yet."
3. Once design tokens are established, reference specific components: "Generate the Navbar component from the Figma design. Match the exact spacing, typography, and hover states. Use Tailwind CSS. TypeScript only."
4. Build section by section, always referencing the Figma file for measurements and layout logic
Key tip: Even without Figma MCP, a faster beginner alternative is to use Canva for layout mockups. Spend 30 minutes sketching in Canva before opening any builder. This forces you to answer "what's on each page, where does navigation go, and what does each section contain?" before writing a single prompt; and it eliminates hours of corrective prompting later.
Resources:
1. Figma MCP + Cursor: The New AI Design System Workflow (YouTube, free)Link: https://www.youtube.com/watch?v=09VgyFFLrOw Full walkthrough of connecting Figma to Cursor via MCP, importing design tokens, and generating components that match the exact Figma spec. Published November 2025.
2. Claude Code × Figma MCP: The Designer's Playbook (free guide, ADPList)Link: https://adplist.substack.com/p/how-to-build-with-figma-mcp-the-designers After 100 days of vibe coding as a designer, this is the smoothest documented workflow for going Figma → Claude Code → production-ready React components. Includes exact copy-paste prompt templates for extracting design tokens and generating responsive sections.
3. Figma Make (official, free tier)Link: https://www.figma.com/solutions/vibe-coding-tool/ Figma's native vibe coding tool. Describe the UI or prototype in natural language directly inside Figma, generate interactive prototypes, and export clean code. Integrates with the Figma MCP for external agents.
4. Anima: Vibe Code With Your Figma Design System (free tier)Link: https://www.animaapp.com/blog/design-systems/vibe-code-with-your-figma-design-system/ Bring your Figma design system into Anima, then generate React components that follow your design tokens. Outputs can be handed off directly to Claude Code or Cursor via the Anima MCP.
5. Muzli: Complete Vibe Coding Guide for Designers (free guide)Link: https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/ The most thorough guide for non-developers building AI-generated products, covering design system prompting, visual references in prompts, and brand consistency across vibe-coded components.
4. Adding AI Features to Your Products; The Vercel AI SDK
If you want to build products that use AI (not just products built with AI), the Vercel AI SDK is the fastest, cleanest way to do it in a Next.js stack.
Resources:
1. Vercel AI SDK Documentation (free, official)Link: https://sdk.vercel.ai/docs The official reference. Supports 20+ AI providers (OpenAI, Anthropic, Google, Mistral, Groq, and more) through a unified interface. Built-in React hooks (useChat, useCompletion), streaming support, tool calling, and structured generation.
2. AI SDK V5 Tutorial Series (YouTube, free)Link: https://www.youtube.com/playlist?list=PL4cUxeGkcC9h2NkvFCBO4kvA4Y9wiDrIO A comprehensive multi-part series on building Next.js AI applications with the Vercel AI SDK. Part 1 (Introduction) and Part 2 (Project Setup) were released in August 2025 and cover the full setup.
3. Build a Streaming AI Chat App with Vercel AI SDK and Next.js (free guide, dev.to)Link: https://dev.to/nikolasbarwicki/build-a-streaming-ai-chat-app-with-vercel-ai-sdk-and-nextjs-10f6 Step-by-step code walkthrough for building a streaming chat application from scratch.
What to build this month:
Take one of your Month 4 projects and add an AI feature to it using the Vercel AI SDK. For example:
- Add AI-powered auto-tagging to a note-taking app
- Add a "ask questions about your habits" AI assistant to the habit tracker
- Add AI-generated flashcards from pasted text
4. RAG; Making AI Answer Questions From Your Documents
RAG (Retrieval-Augmented Generation) is the skill that powers most serious enterprise AI applications: customer support bots, internal knowledge bases, document Q&A tools. It is also one of the most in-demand skills for anyone pursuing Direction 2 (the AI Product Engineer path).
The core concept: instead of asking an LLM to answer from its training data, you retrieve relevant chunks from your own documents and include them in the prompt. The model answers from what you provide.
Resources:
1. LlamaIndex: Introduction to RAG (official docs, free)Link: https://developers.llamaindex.ai/python/framework/understanding/rag/ Covers the five key stages: loading, indexing, storing, querying, and evaluating.
2. LlamaIndex Starter Tutorial (official docs, free)Link: https://developers.llamaindex.ai/python/framework/getting_started/starter_example/ Build a working RAG system in under 30 lines of code.
3. LangChain Tutorial For Beginners (2026 Guide) (YouTube, free)Link: https://www.youtube.com/watch?v=AOQyRiwydyo Comprehensive 2026 LangChain course covering agents, RAG, and the ReAct agent framework for building AI agents over data.
4. Building Efficient RAG Applications with LangChain and LlamaIndex (YouTube, free)Link: https://www.youtube.com/watch?v=D7YwcDJ75lQ Side-by-side comparison of LangChain and LlamaIndex for RAG with real code examples.
5. How to Choose an AI Agent Framework (LangChain vs. LlamaIndex) (free guide)Link: https://workforcenext.in/blog/how-to-choose-ai-agent-framework/ Honest breakdown published April 2026. The recommendation: LlamaIndex when retrieval is the hardest problem; LangChain / LangGraph when you need a broad ecosystem and production-grade orchestration.
5. Token Costs and Budget Management; What Nobody Tells You Until the Bill Arrives
There is a 30x cost gap between budget models and frontier models at the per-call level. Running GPT-5.5 or Claude Sonnet 4.6 on every request in a production app can spiral from $20/month to hundreds of dollars before you notice. Uber reportedly burned through its 2026 AI coding budget in four months from Claude Code sessions with large context windows. The math is simple: context length drives cost linearly, and Claude Code sessions can accumulate 250K–500K tokens quickly when agents are given the full codebase.
Practical cost management rules:
- Set hard spending limits first. Before any public-facing feature is live, set monthly caps in your OpenAI and Anthropic dashboards. Do this before you ship.
- Route by task complexity. Use claude-haiku or gpt-5.5-mini for classification, tagging, summarization, and formatting tasks. Reserve Sonnet 4.6/Opus 4.6/GPT-5.5 for reasoning-heavy operations. A 10x cost difference with near-identical output quality for simple tasks.
- Use the /compact command in Claude Code. When context gets long, run /compact manually before starting a large task. Claude Code automatically compresses its context history by 60–80%, dramatically reducing the token count going into the next call.
- Keep context windows short. Every doubling of context length roughly doubles the cost. Start new conversations for new features rather than continuing an old one.
- Cache repeated identical prompts. Anthropic's prompt caching charges 10% of the input token price for cache hits. For system prompts or CLAUDE.md files that repeat every call, this compounds to significant savings.
- Add spend alerts. Set up billing alerts at 50% and 80% of your monthly limit so you get notified before a bug or loop runs up an unexpected bill.
Resources:
1. MindStudio: AI Agent Token Budget Management in Claude Code (free guide)Link: https://www.mindstudio.ai/blog/ai-agent-token-budget-management-claude-code/ Detailed breakdown of how Claude Code handles token budgeting: hard context limits, automatic compaction at configurable thresholds, and pre-execution budget checks before expensive operations. The same patterns can be implemented in any LLM app.
2. HackerNews: The Real Cost of Claude Code (free, HN thread)Link: https://news.ycombinator.com/item?id=47976415 Real-world engineering discussion on how context window length drives costs nearly linearly in Claude Code sessions, with specific numbers.
3. HatchWorks: The Real Cost of Vibe Coding in 2026 (free guide)Link: https://hatchworks.com/blog/gendd/cost-of-vibe-coding/ The most honest accounting of the total cost of vibe coding: subscription costs ($20–$200/month) vs. the full cost including security remediation, technical debt, and professional rebuilds ($5K–$30K). Understanding this determines how much QA and structure is actually worth investing in.
4. OpenAI Usage Dashboard (official)Link: https://platform.openai.com/usage Set monthly limits here before you deploy anything publicly. The option is under Billing → Usage Limits.
5. Anthropic Console (official)Link: https://console.anthropic.com/ Same for Claude API usage.
Month 5 Milestone
By the end of this month, you should be able to:
- Structure any project so that the AI always has the right context from the start
- Use MCP to connect Cursor or Claude Code to external data sources
- Integrate AI features into a live product using the Vercel AI SDK
- Build a basic RAG pipeline that answers questions from documents
- Have active cost monitoring and spending limits on every AI API account
- Maintain a clean /docs architecture that any AI tool can immediately understand
## Month 6: Deploy Like a Pro and Specialize
Your goal this month: Make your projects production-ready and choose your direction. Real deployment, real monitoring, real revenue; and a specialization that matches your goals.
1. Production Deployment and Environments
The deployment difference between a demo and a production product is enormous. The most critical piece is separate development and production environments.
Recommended deployment stack (2026 verified):
- Static site or landing page. Frontend on Vercel or Netlify, no backend. One-click from GitHub.
- Full-stack with auth/DB. Vercel frontend, Supabase backend. The recommended beginner stack.
- Complex backend logic. Vercel frontend, Supabase plus Edge Functions for compute. Scale without renting servers.
- Full server control. Fly.io or Railway for the backend, paired with any frontend. More control, more complexity.
Resources:
1. Supabase: Vibe Coder's Guide to Environments (free, official)Link: https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments The essential read for production-safe deployment. Covers dev vs. production environments, migrations, and rollback strategies.
2. Add Jam: How to Deploy Your Vibe Coded Project (free guide)Link: https://addjam.com/blog/2026-04-07/how-to-deploy-your-vibe-coded-project/ Non-technical walkthrough for choosing the right deployment option based on your project type, published April 2026.
3. Deploy Your Vibe Coding Projects for Free with Vercel and Netlify (YouTube, free)Link: https://www.youtube.com/watch?v=85JVKjW-uG0 Step-by-step walkthrough for deploying from GitHub to both Vercel and Netlify.
4. Vercel Deployment Docs (free, official)Link: https://vercel.com/docs/deployments/overview The official reference including preview deployments, environment variable management, and domain configuration.
2. Monitoring Your Live Product
In production, you cannot fix what you cannot see. These three tools give you complete visibility into what your users are experiencing and what your app is doing.
Resources:
1. Langfuse (open source, free tier)Link: https://langfuse.com/ LLM observability platform. Traces every AI call: prompt sent, response received, token usage, latency, cost, and errors. Integrates with OpenAI, Anthropic, and LangChain. The standard tool for monitoring AI applications in 2026.
2. How to Monitor Your AI Application with Langfuse (YouTube, free)Link: https://www.youtube.com/watch?v=V7nugySdrgw Full tutorial on setting up Langfuse locally and in production using OpenTelemetry, published March 2025.
3. Langfuse + Sentry Integration Guide (free, official)Link: https://langfuse.com/docs/observability/sdk/advanced-features How to send error monitoring data to Sentry while simultaneously capturing LLM observability in Langfuse; a complete production monitoring stack in one setup.
4. Sentry (free tier, official)Link: https://sentry.io/ The standard for application error tracking. Get notified the moment your app throws an error in production, before users report it.
5. Vercel Analytics (free tier, official)Link: https://vercel.com/docs/analytics Web analytics built into Vercel. One click to enable. Shows page views, performance metrics, and Core Web Vitals.
3. Choose Your Direction
By Month 6, you have the foundation. The question is which direction to go deeper. There are three viable paths; pick the one that matches your goals.
Direction 1: The Product Builder (Indie Hacker)
Best for: Solo founders, startup operators, indie hackers, people who want to build and sell their own products.
This is the most common path for vibe coders. You are not trying to get a job; you are trying to ship products that generate revenue.
The indie hacker stack for 2026:
- Lovable or Bolt for rapid prototyping and early validation
- Cursor 3.0 + Claude Code for building out and customizing
- Supabase for database and auth
- Stripe for payments
- Vercel for deployment
- PostHog for user analytics
High-signal monetizable app types for 2026:
- SaaS micro-tool; One specific utility, $5–$25/month subscription
- AI wrapper; An LLM capability wrapped in a clean, specific UI for a niche
- Directory or marketplace; Aggregate and organize information people search for
- Internal tool for businesses; Automate something a business currently does manually with spreadsheets
Resources:
1. Indie Hackers (free community)Link: https://www.indiehackers.com/ Real founders sharing revenue numbers, build logs, and lessons. The best source of ground-truth data on what actually sells and what pricing works.
2. Stripe Docs: Payments Quickstart (free, official)Link: https://stripe.com/docs/payments/quickstart The official guide to adding Stripe Checkout for one-time payments and subscriptions. Ask your AI to "integrate Stripe Checkout for a $X/month subscription" and use this guide to verify what it builds.
3. PostHog Getting Started (free, official)Link: https://posthog.com/docs Open-source product analytics. Track user behavior, funnels, retention, and feature flags to know what is working.
Direction 2: The AI Product Engineer
Best for: People who want employment at a startup or tech company building AI-powered products.
Portfolio project for this direction:
Build a "chat with your docs" product. Users upload 10–20 PDF files. The app lets them ask questions and get answers grounded in those documents, with citations. Full-stack, deployed, shareable. This is one of the highest-signal portfolio projects you can show an employer or client in 2026.
Resources:
1. LlamaIndex: RAG Introduction (official docs, free)Link: https://developers.llamaindex.ai/python/framework/understanding/rag/ Fastest path to a working document Q&A system.
2. LangChain Academy: Introduction to LangGraph (free course)Link: https://academy.langchain.com/courses/intro-to-langgraph The official free course for LangGraph, the leading agent orchestration framework. Covers state management, memory, human-in-the-loop, and multi-agent coordination.
3. Vercel AI SDK (free, official)Link: https://sdk.vercel.ai/docs Add streaming chat, structured generation, and tool calling to any Next.js app with minimal code. Supports 20+ AI providers.
4. Vibe Coding to Agentic AI: The Next Evolution of Programming (YouTube, free)Link: https://www.youtube.com/watch?v=LHAvPwOLz8U Overview of how the field is moving from casual vibe coding toward structured agentic systems that plan, execute, and verify autonomously; the direction the job market is heading.
5. MindStudio: What Is Agentic Engineering? (free guide)Link: https://www.mindstudio.ai/blog/what-is-agentic-engineering/ Clear explanation of the shift from vibe coding to agentic engineering; the paradigm employers are hiring for in 2026.
Direction 3: The AI Automation Consultant
Best for: People who want to work with businesses immediately; freelancing, consulting, or building an agency.
Businesses will pay real money to automate expensive, repetitive manual processes with AI. This is the fastest path to revenue from vibe coding skills.
Most common and valuable automation use cases:
- AI-powered email triage and auto-response
- Lead qualification and personalized outreach
- Document extraction and processing
- Customer support bots over a knowledge base
- CRM data enrichment and cleanup
- Invoice and contract processing
Resources:
1. n8n Documentation (free, open source)Link: https://docs.n8n.io/ Visual workflow automation with native AI nodes. Connect LLMs to 400+ integrations; Slack, Gmail, Notion, HubSpot, Airtable, and more. Self-hosted version is completely free.
2. n8n Full Course; 6 Hours (YouTube, free)Link: https://www.youtube.com/watch?v=QoQBzR1NIqI Comprehensive n8n course covering AI-powered workflow automation from beginner to advanced.
3. Make (formerly Integromat) (free tier)Link: https://www.make.com/ Visual automation platform, more powerful than Zapier for complex multi-step workflows.
4. Automation Builders: Vibe Coding to Agentic AI (YouTube, free)Link: https://www.youtube.com/watch?v=LHAvPwOLz8U How automation builders are using n8n, OpenAI, and vibe coding tools together to build end-to-end business automations.
Portfolio project for this direction:
Build an end-to-end lead qualification and outreach automation:
1. Import leads from a CSV or Airtable
2. Use an LLM to research each lead and assess fit against an ideal customer profile
3. Score and rank leads
4. Draft personalized outreach messages in their voice
5. Log everything back to the original spreadsheet with status and notes
This is a real, billable automation that businesses actively pay for.
## Bonus: Mobile Development With Vibe Coding
Everything above assumes you are building a web app. Most vibe coders do. But if your idea is a mobile app; something people install on their phone; the landscape is different and worth knowing before Month 1 begins.
The honest state of mobile vibe coding in 2026:
Mobile development is meaningfully harder to vibe code than web development. The reasons are concrete:
- The React Native dependency tree is larger and more brittle. The AI occasionally generates code that assumes package versions that conflict.
- iOS and Android simulators require local setup that AI cannot manage for you.
- Testing mobile UI requires either a real device or a simulator; you cannot preview it in a browser.
- Expo simplifies this significantly but introduces its own constraints.
If you want to build mobile, the recommended setup is:
- Framework: React Native with Expo (managed workflow)
- Toolchain: Expo Router for navigation (file-based, same pattern as Next.js App Router)
- AI tool: Claude Code + Cursor (the same tools as web; they handle React Native well)
- Starting template: npx create-expo-app or create-rn-new for configured scaffolding
- Preview: Expo Go app on your physical phone via QR code; the fastest feedback loop
Resources:
1. Vibe Coding a Mobile App from 0 to Market (YouTube, free)Link: https://www.youtube.com/watch?v=SzmXEOozpFg Full walkthrough building a fitness tracker app from zero using Claude Code + Cursor + React Native + Expo Router. Covers the Figma-to-spec workflow, the Claude Code phase plan, and navigating Expo dependency issues in real time.
2. Build a React Native App with Vibe Coding in 2026 (free guide)Link: https://blog.vibecoder.me/build-react-native-app-vibe-coding Step-by-step guide to setting up an Expo project, writing a project brief, and using Claude Code to execute a phased build plan for a mobile app.
3. React Native Vibe Code SDK (free, open source)Link: https://github.com/react-native-vibe-code/react-native-vibe-code-sdk An open-source IDE designed specifically for building React Native and Expo apps through natural language prompts; the closest analog to Lovable but for mobile.
4. Expo Documentation (free, official)Link: https://docs.expo.dev/ The essential reference for Expo setup, Router, and device APIs. Keep it open in a browser tab alongside your AI tool.
The most important tip: Before any mobile AI session, paste the relevant Expo library's examples folder into Google AI Studio (Gemini, for its large context window) and have it generate documentation from the examples. Use that documentation in your prompts instead of hoping the model knows the current API. Library APIs change fast; training data lags reality.
## Bonus: The Full Tool Map (Everything That Exists in 2026)
The guide recommends Cursor 3.0 and Claude Code as the primary tools. But the full landscape has expanded significantly in 2026, and certain tools are better for specific use cases. Here is the complete picture.
Terminal / CLI Agents
- Claude Code. Anthropic's terminal-native agent. Best for codebase-wide reasoning and repo-level tasks.
- Gemini CLI. Google's open-source terminal agent. A free alternative to Claude Code, large context window.
- OpenCode. Open-source CLI agent (community). Bring-your-own-model, cost-flexible.
- Factory Droid. Autonomous software engineering agent. Built for enterprise CI/CD automation.
Gemini CLI is worth highlighting specifically because it is completely free and open source. It uses Gemini 3.5 Pro's 1M token context window, which is larger than Claude Code's. Install with npm install -g @google/gemini-cli and run geminito start. Use it as a free alternative for heavy context tasks, or as the secondary reviewer (replacing the manual "paste into Gemini" step from Month 4's workflow).
OpenAI Codex (the agent, not the old model) is also now available as a cloud coding agent in ChatGPT that can run async tasks. It differs from Claude Code in that it runs in the cloud rather than locally. Access via the ChatGPT sidebar.
AI Coding IDEs (extended list)
- Cursor 3.0. Agents Window, parallel cloud agents. Free / $20/mo.
- Windsurf. Cascade agent, enterprise post-Google. Free / $15/mo.
- GitHub Copilot. Everywhere; VS Code, JetBrains, Xcode, Neovim. Free / $10/mo.
- Cline. Open source, bring-your-own-model. Free plus API tokens.
- Google Antigravity. Multi-agent Manager View (parallel builds). Price TBA.
- Zed. Performance-first, AI native from the ground up. Free.
- Kilo Code. VS Code extension, open source, supports all providers. Free.
- Continue. Open-source Copilot alternative for VS Code and JetBrains. Free.
Resources:
1. DataCamp: Top 15 Vibe Coding Tools to Build Faster in 2026 (free guide)Link: https://www.datacamp.com/blog/top-vibe-coding-tools-to-build-faster The most comprehensive tool comparison in 2026, covering CLI agents, AI IDEs, browser builders, and specialty tools with an honest shortlist: v0 for browser-first, Codex for in-editor, Cursor for all-around, Claude Code for terminal-first.
2. The Ultimate Vibe Coding Guide (Full Course Tutorial 2026) (YouTube, free)Link: https://www.youtube.com/watch?v=KO_vCL1ZhpI 3-hour masterclass covering Cursor, Codex, Antigravity, Claude Code, Lovable, Bolt, Supabase, Vercel, Figma Stitch, v0, and MCP servers in one video. The most comprehensive single-video resource available as of May 2026.
3. Vibe Coding for Beginners (Full Course 2026) (YouTube, free)Link: https://www.youtube.com/watch?v=BpOsHF5Oj_I Covers web app + desktop app + iOS app from a single codebase using Codex and Firebase. Published May 2026. Best for beginners who want to cover multiple platforms without switching stacks.
## Bonus: Communities Worth Joining
The fastest learning happens in communities where people share what they are building right now. These are the active ones as of mid-2026.
1. Lovable Discord (free)Link: https://lovable.dev/community 160,000+ members, active across every timezone. The most active vibe coding community in 2026. Real-time help, weekly events, and a showcase channel for shipped projects.
2. r/vibecoding (free, Reddit)Link: https://www.reddit.com/r/vibecoding/ The subreddit where the vibe coding community congregates. Project showcases, tool comparisons, debugging help, and the honest failure stories you won't find in YouTube tutorials.
3. Cursor Forum (free, official)Link: https://forum.cursor.com/ The official Cursor community. The engineering team reads and responds here. The "Built with Cursor" showcase thread is the best source of real project examples and honest difficulty assessments.
4. Build in Public Strategy for Vibe Coders (YouTube, free)Link: https://www.youtube.com/watch?v=ke6oxy8Z7C4 A practical strategy guide for building in public as a vibe coder: what to post, when to post, how to turn a project build into an audience, and how that audience accelerates your next launch.
5. Postiv AI: Vibe Coding to SaaS Pipeline (free guide)Link: https://postiv.ai/blog/vibe-coding-marketing Covers the complete post-build pipeline: validating your business model, building a launch strategy, and using LinkedIn and X to distribute what you have shipped.
6. Karo Zieminski: Vibe Coding Hub 2026 (free, Substack)Link: https://karozieminski.substack.com/p/vibecoding-resources-hub 15+ practitioner-tested guides on vibe coding, spec-driven development, and AI-assisted product building, covering the full builder journey: foundations, production, security, debugging, and tool selection. The most comprehensive single-page resource hub on Substack.
7. 0xMinds: The Complete Guide to AI-Powered Development (free guide)Link: https://0xminds.com/blog/guides/vibe-coding-complete-guide-2026 Comprehensive 2026 guide covering adoption stats, the six-stage build workflow (ideation → context → generation → review → refinement → ship), multi-agent orchestration patterns, and a ready-to-use essential setup checklist.
8. Augment Code: Vibe Coding vs Spec-Driven Development (free guide)Link: https://www.augmentcode.com/guides/vibe-coding-vs-spec-driven-development Clear decision framework for when to use pure vibe coding vs. SDD, with a practical description of the 3-month wall vibe-only projects tend to hit and how to recognize when it is time to switch modes.
## What to Actually Do With This Roadmap
Most people who read this article will not complete it. Not because the content is hard, but because they will treat it as a reading list rather than a building schedule.
The vibe coders who succeed in 2026 share three habits:
They ship, not study. Every month's milestone ends with a deployed project; something live at a URL, not a finished course. Six imperfect shipped products beats twenty completed tutorials.
They build in public. Post your builds on X, LinkedIn, or wherever your target audience is. "Day 1 of building X" and "I shipped X, here's what I learned" posts. The best opportunities in this space come from visibility, not applications.
They go narrow before broad. One tool (Cursor or Claude Code), one stack (Next.js + Supabase + Vercel), one direction (Product, Engineer, or Consultant) for the first six months. Depth beats breadth. Expand after you've shipped three things.
Conclusion
This article has been written and collected by the authors' notes and author's journey over six months and edited by an AI model Minimax and Opus 4.6.
## 相关链接
- [Avid](https://x.com/Av1dlive)
- [@Av1dlive](https://x.com/Av1dlive)
- [22K](https://x.com/Av1dlive/status/2057142081018315116/analytics)
- [https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
- [https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
- [https://restfulapi.net/](https://restfulapi.net/)
- [https://www.youtube.com/watch?v=ADEFvP5Gw5c](https://www.youtube.com/watch?v=ADEFvP5Gw5c)
- [DeepakNess.com](https://deepakness.com/)
- [https://deepakness.com/blog/git-for-vibe-coders/](https://deepakness.com/blog/git-for-vibe-coders/)
- [https://learngitbranching.js.org/](https://learngitbranching.js.org/)
- [https://skills.github.com/](https://skills.github.com/)
- [https://www.freecodecamp.org/learn/2022/responsive-web-design/](https://www.freecodecamp.org/learn/2022/responsive-web-design/)
- [JavaScript.info](https://javascript.info/)
- [https://javascript.info/](https://javascript.info/)
- [https://nextjs.org/learn](https://nextjs.org/learn)
- [https://tailwindcss.com/docs](https://tailwindcss.com/docs)
- [https://supabase.com/docs/guides/getting-started](https://supabase.com/docs/guides/getting-started)
- [https://vercel.com/docs/getting-started-with-vercel](https://vercel.com/docs/getting-started-with-vercel)
- [Bolt.new](https://bolt.new/)
- [Bolt.new](https://bolt.new/)
- [roadmap.sh](https://roadmap.sh/)
- [https://roadmap.sh/vibe-coding/best-tools](https://roadmap.sh/vibe-coding/best-tools)
- [Technically.dev](https://technically.dev/)
- [https://technically.dev/posts/vibe-coding-tool-comparison](https://technically.dev/posts/vibe-coding-tool-comparison)
- [https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable](https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable)
- [https://cursor.com/changelog/3-0](https://cursor.com/changelog/3-0)
- [https://www.datacamp.com/blog/cursor-3](https://www.datacamp.com/blog/cursor-3)
- [https://www.youtube.com/watch?v=HTKGyLar8AU](https://www.youtube.com/watch?v=HTKGyLar8AU)
- [https://www.nxcode.io/resources/news/cursor-tutorial-beginners-2026](https://www.nxcode.io/resources/news/cursor-tutorial-beginners-2026)
- [https://www.buildfastwithai.com/blogs/cursor-3-vs-antigravity-ai-ide-2026](https://www.buildfastwithai.com/blogs/cursor-3-vs-antigravity-ai-ide-2026)
- [@anthropic](https://x.com/@anthropic)
- [builder.io](https://builder.io/)
- [https://www.builder.io/blog/how-to-use-claude-code](https://www.builder.io/blog/how-to-use-claude-code)
- [https://www.youtube.com/watch?v=bqJzIWAEn40](https://www.youtube.com/watch?v=bqJzIWAEn40)
- [https://www.youtube.com/watch?v=QoQBzR1NIqI](https://www.youtube.com/watch?v=QoQBzR1NIqI)
- [dev.to](https://dev.to/)
- [https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma](https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma)
- [https://paulgp.substack.com/p/getting-started-with-claude-code](https://paulgp.substack.com/p/getting-started-with-claude-code)
- [OpenSaaS.sh](https://opensaas.sh/)
- [https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/](https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/)
- [https://github.com/anthropics/prompt-eng-interactive-tutorial](https://github.com/anthropics/prompt-eng-interactive-tutorial)
- [PromptingGuide.ai](https://promptingguide.ai/)
- [https://www.promptingguide.ai/](https://www.promptingguide.ai/)
- [Roadmap.sh](https://roadmap.sh/)
- [https://roadmap.sh/vibe-coding/best-practices](https://roadmap.sh/vibe-coding/best-practices)
- [https://appwrite.io/blog/post/the-complete-vibe-coding-guide-2025](https://appwrite.io/blog/post/the-complete-vibe-coding-guide-2025)
- [https://docs.supabase.com/llms.txt](https://docs.supabase.com/llms.txt)
- [https://llmstxt.org/](https://llmstxt.org/)
- [https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/](https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/)
- [@rule](https://x.com/@rule)
- [https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide](https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide)
- [https://www.youtube.com/watch?v=Ia54BXaci5o](https://www.youtube.com/watch?v=Ia54BXaci5o)
- [https://www.youtube.com/watch?v=DfLL5_zbWGc](https://www.youtube.com/watch?v=DfLL5_zbWGc)
- [https://cursor.directory/](https://cursor.directory/)
- [https://github.com/PatrickJS/awesome-cursorrules](https://github.com/PatrickJS/awesome-cursorrules)
- [https://www.concret.io/blog/sync-coding-standards-across-cursor-agentforce-vibes-claude](https://www.concret.io/blog/sync-coding-standards-across-cursor-agentforce-vibes-claude)
- [DeepLearning.AI](https://deeplearning.ai/)
- [https://towardsdatascience.com/from-vibe-coding-to-spec-driven-development/](https://towardsdatascience.com/from-vibe-coding-to-spec-driven-development/)
- [https://github.com/github/spec-kit](https://github.com/github/spec-kit)
- [https://github.blog/ai-and-ml/generative-ai/spec-driven-development-with-ai-get-started-with-a-new-open-source-toolkit/](https://github.blog/ai-and-ml/generative-ai/spec-driven-development-with-ai-get-started-with-a-new-open-source-toolkit/)
- [DeepLearning.AI](https://deeplearning.ai/)
- [https://www.deeplearning.ai/courses/spec-driven-development-with-coding-agents/](https://www.deeplearning.ai/courses/spec-driven-development-with-coding-agents/)
- [https://testcollab.com/blog/from-vibe-coding-to-spec-driven-development](https://testcollab.com/blog/from-vibe-coding-to-spec-driven-development)
- [azario.floot.app](https://azario.floot.app/)
- [https://dodopayments.com/blogs/micro-saas-ideas-2026](https://dodopayments.com/blogs/micro-saas-ideas-2026)
- [https://superframeworks.com/articles/vibe-coding-tipping-point-what-founders-need-to-know](https://superframeworks.com/articles/vibe-coding-tipping-point-what-founders-need-to-know)
- [https://ideaproof.io/lists/micro-saas-ideas](https://ideaproof.io/lists/micro-saas-ideas)
- [https://forum.cursor.com/t/built-with-cursor-in-2025-share-your-projects/147737](https://forum.cursor.com/t/built-with-cursor-in-2025-share-your-projects/147737)
- [https://www.producttalk.org/vibe-coding-best-practices/](https://www.producttalk.org/vibe-coding-best-practices/)
- [dev.to](https://dev.to/)
- [https://dev.to/dohkoai/5-vibe-coding-workflows-that-actually-ship-production-code-in-2026-1nmn](https://dev.to/dohkoai/5-vibe-coding-workflows-that-actually-ship-production-code-in-2026-1nmn)
- [https://genai.owasp.org/llmrisk/llm01-prompt-injection/](https://genai.owasp.org/llmrisk/llm01-prompt-injection/)
- [https://owasp.org/API-Security/](https://owasp.org/API-Security/)
- [https://www.clarifai.com/blog/vibe-coding-explained](https://www.clarifai.com/blog/vibe-coding-explained)
- [https://cycode.com/blog/introducing-cycodes-mcp-server/](https://cycode.com/blog/introducing-cycodes-mcp-server/)
- [https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments](https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments)
- [https://www.youtube.com/@Supabase](https://www.youtube.com/@Supabase)
- [https://supabase.com/docs/guides/deployment/database-migrations](https://supabase.com/docs/guides/deployment/database-migrations)
- [https://testomat.io/blog/best-ai-testing-tools-for-vibe-coders/](https://testomat.io/blog/best-ai-testing-tools-for-vibe-coders/)
- [https://timdeschryver.dev/blog/vibe-testing-with-playwright](https://timdeschryver.dev/blog/vibe-testing-with-playwright)
- [https://www.awesome-testing.com/2025/04/ai-vibe-coding-notes-from-the-basement](https://www.awesome-testing.com/2025/04/ai-vibe-coding-notes-from-the-basement)
- [https://playwright.dev/docs/codegen](https://playwright.dev/docs/codegen)
- [https://vitest.dev/](https://vitest.dev/)
- [https://www.nxcode.io/resources/news/agentic-engineering-complete-guide-vibe-coding-ai-agents-2026](https://www.nxcode.io/resources/news/agentic-engineering-complete-guide-vibe-coding-ai-agents-2026)
- [https://www.kdnuggets.com/10-github-repositories-to-master-vibe-coding](https://www.kdnuggets.com/10-github-repositories-to-master-vibe-coding)
- [https://github.com/filipecalegario/awesome-vibe-coding](https://github.com/filipecalegario/awesome-vibe-coding)
- [https://modelcontextprotocol.io/introduction](https://modelcontextprotocol.io/introduction)
- [https://www.qpython.com/building-your-first-mcp-server-with-python-and-vibe-coding-pk/](https://www.qpython.com/building-your-first-mcp-server-with-python-and-vibe-coding-pk/)
- [https://qdrant.tech/blog/webinar-vibe-coding-rag/](https://qdrant.tech/blog/webinar-vibe-coding-rag/)
- [https://cursor.com/marketplace](https://cursor.com/marketplace)
- [https://www.youtube.com/watch?v=09VgyFFLrOw](https://www.youtube.com/watch?v=09VgyFFLrOw)
- [https://adplist.substack.com/p/how-to-build-with-figma-mcp-the-designers](https://adplist.substack.com/p/how-to-build-with-figma-mcp-the-designers)
- [https://www.figma.com/solutions/vibe-coding-tool/](https://www.figma.com/solutions/vibe-coding-tool/)
- [https://www.animaapp.com/blog/design-systems/vibe-code-with-your-figma-design-system/](https://www.animaapp.com/blog/design-systems/vibe-code-with-your-figma-design-system/)
- [https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/](https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/)
- [https://sdk.vercel.ai/docs](https://sdk.vercel.ai/docs)
- [https://www.youtube.com/playlist?list=PL4cUxeGkcC9h2NkvFCBO4kvA4Y9wiDrIO](https://www.youtube.com/playlist?list=PL4cUxeGkcC9h2NkvFCBO4kvA4Y9wiDrIO)
- [dev.to](https://dev.to/)
- [https://dev.to/nikolasbarwicki/build-a-streaming-ai-chat-app-with-vercel-ai-sdk-and-nextjs-10f6](https://dev.to/nikolasbarwicki/build-a-streaming-ai-chat-app-with-vercel-ai-sdk-and-nextjs-10f6)
- [https://developers.llamaindex.ai/python/framework/understanding/rag/](https://developers.llamaindex.ai/python/framework/understanding/rag/)
- [https://developers.llamaindex.ai/python/framework/getting_started/starter_example/](https://developers.llamaindex.ai/python/framework/getting_started/starter_example/)
- [https://www.youtube.com/watch?v=AOQyRiwydyo](https://www.youtube.com/watch?v=AOQyRiwydyo)
- [https://www.youtube.com/watch?v=D7YwcDJ75lQ](https://www.youtube.com/watch?v=D7YwcDJ75lQ)
- [https://workforcenext.in/blog/how-to-choose-ai-agent-framework/](https://workforcenext.in/blog/how-to-choose-ai-agent-framework/)
- [https://www.mindstudio.ai/blog/ai-agent-token-budget-management-claude-code/](https://www.mindstudio.ai/blog/ai-agent-token-budget-management-claude-code/)
- [https://news.ycombinator.com/item?id=47976415](https://news.ycombinator.com/item?id=47976415)
- [https://hatchworks.com/blog/gendd/cost-of-vibe-coding/](https://hatchworks.com/blog/gendd/cost-of-vibe-coding/)
- [https://platform.openai.com/usage](https://platform.openai.com/usage)
- [https://console.anthropic.com/](https://console.anthropic.com/)
- [Fly.io](https://fly.io/)
- [https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments](https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments)
- [https://addjam.com/blog/2026-04-07/how-to-deploy-your-vibe-coded-project/](https://addjam.com/blog/2026-04-07/how-to-deploy-your-vibe-coded-project/)
- [https://www.youtube.com/watch?v=85JVKjW-uG0](https://www.youtube.com/watch?v=85JVKjW-uG0)
- [https://vercel.com/docs/deployments/overview](https://vercel.com/docs/deployments/overview)
- [https://langfuse.com/](https://langfuse.com/)
- [https://www.youtube.com/watch?v=V7nugySdrgw](https://www.youtube.com/watch?v=V7nugySdrgw)
- [https://langfuse.com/docs/observability/sdk/advanced-features](https://langfuse.com/docs/observability/sdk/advanced-features)
- [https://sentry.io/](https://sentry.io/)
- [https://vercel.com/docs/analytics](https://vercel.com/docs/analytics)
- [https://www.indiehackers.com/](https://www.indiehackers.com/)
- [https://stripe.com/docs/payments/quickstart](https://stripe.com/docs/payments/quickstart)
- [https://posthog.com/docs](https://posthog.com/docs)
- [https://developers.llamaindex.ai/python/framework/understanding/rag/](https://developers.llamaindex.ai/python/framework/understanding/rag/)
- [https://academy.langchain.com/courses/intro-to-langgraph](https://academy.langchain.com/courses/intro-to-langgraph)
- [https://sdk.vercel.ai/docs](https://sdk.vercel.ai/docs)
- [https://www.youtube.com/watch?v=LHAvPwOLz8U](https://www.youtube.com/watch?v=LHAvPwOLz8U)
- [https://www.mindstudio.ai/blog/what-is-agentic-engineering/](https://www.mindstudio.ai/blog/what-is-agentic-engineering/)
- [https://docs.n8n.io/](https://docs.n8n.io/)
- [https://www.youtube.com/watch?v=QoQBzR1NIqI](https://www.youtube.com/watch?v=QoQBzR1NIqI)
- [https://www.make.com/](https://www.make.com/)
- [https://www.youtube.com/watch?v=LHAvPwOLz8U](https://www.youtube.com/watch?v=LHAvPwOLz8U)
- [https://www.youtube.com/watch?v=SzmXEOozpFg](https://www.youtube.com/watch?v=SzmXEOozpFg)
- [https://blog.vibecoder.me/build-react-native-app-vibe-coding](https://blog.vibecoder.me/build-react-native-app-vibe-coding)
- [https://github.com/react-native-vibe-code/react-native-vibe-code-sdk](https://github.com/react-native-vibe-code/react-native-vibe-code-sdk)
- [https://docs.expo.dev/](https://docs.expo.dev/)
- [@google/gemini-cli](https://x.com/@google/gemini-cli)
- [https://www.datacamp.com/blog/top-vibe-coding-tools-to-build-faster](https://www.datacamp.com/blog/top-vibe-coding-tools-to-build-faster)
- [https://www.youtube.com/watch?v=KO_vCL1ZhpI](https://www.youtube.com/watch?v=KO_vCL1ZhpI)
- [https://www.youtube.com/watch?v=BpOsHF5Oj_I](https://www.youtube.com/watch?v=BpOsHF5Oj_I)
- [https://lovable.dev/community](https://lovable.dev/community)
- [https://forum.cursor.com/](https://forum.cursor.com/)
- [https://www.youtube.com/watch?v=ke6oxy8Z7C4](https://www.youtube.com/watch?v=ke6oxy8Z7C4)
- [https://postiv.ai/blog/vibe-coding-marketing](https://postiv.ai/blog/vibe-coding-marketing)
- [https://karozieminski.substack.com/p/vibecoding-resources-hub](https://karozieminski.substack.com/p/vibecoding-resources-hub)
- [https://0xminds.com/blog/guides/vibe-coding-complete-guide-2026](https://0xminds.com/blog/guides/vibe-coding-complete-guide-2026)
- [https://www.augmentcode.com/guides/vibe-coding-vs-spec-driven-development](https://www.augmentcode.com/guides/vibe-coding-vs-spec-driven-development)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [12:51 AM · May 21, 2026](https://x.com/Av1dlive/status/2057142081018315116)
- [22.1K Views](https://x.com/Av1dlive/status/2057142081018315116/analytics)
- [View quotes](https://x.com/Av1dlive/status/2057142081018315116/quotes)
---
*导出时间: 2026/5/21 10:25:28*
---
## 中文翻译
# 如何在 6 个月内成为一名专家级 Vibe Coder（完整课程 + 资源）
**作者**: Avid
**日期**: 2026-05-20T16:51:06.000Z
**来源**: [https://x.com/Av1dlive/status/2057142081018315116](https://x.com/Av1dlive/status/2057142081018315116)
---
## Vibe coding（氛围编程）已从 Twitter 上的一项小众实验，转变为最受追捧的构建者技能之一
我刚刚详细拆解了如何成为前 1% 的 Agentic coder（代理型程序员）。
及早入局的窗口期依然开放，但只留给那些真正动手去构建东西的人。
问题在于，大多数初学者根本不知道从何入手。他们要么：
- 下载了 Cursor，粘贴进去一个模糊的想法，然后纳闷为什么产出的东西一团糟；
- 观看了无尽的 YouTube 教程，却连一个东西都没做出来；
- 直接跳进复杂的工具，却不理解如何构建提示词、管理上下文或部署任何东西。
结果总是一样的：只有半成型的 Demo，陷入无休止的“修 Bug 地狱（doom loop）”，最终零产品上线。
写这份指南就是为了解决这个问题。它是一份详细的、按月规划的路线图，包含经过验证的 2025–2026 年资源，涵盖了你从零开始到一名能发布真实产品的合格 vibe coder 所需的每一项技能。每个月都有一个里程碑。每项技能都附带资源链接。
在你开始之前有一条规则：构建一切。不是阅读关于它的内容，也不是看别人构建它。而是真正打开工具，跟随步骤，搞坏点东西，修复它，并发布它。
## Vibe Coding 到底是什么
“Vibe coding”这个词是由 AI 研究员 Andrej Karpathy 创造的，他将其描述为完全向 AI 投降，接受每一个建议而无需人工审查代码，并完全专注于描述结果而不是编写逻辑。
- 在实践中，它意味着通过自然语言描述你想要的东西来构建软件，并让 AI 为你生成、迭代、测试和修复代码。
- 但这是大多数初学者忽略的一点：vibe coding 并不是被动的，也不是魔法。它是一个结构化的流水线，将人类意图转化为功能性软件。
- 输出的质量几乎完全取决于你输入的质量：你的提示词、你的上下文文件、你的规划，以及你审查 AI 产出的能力。掌握这些输入是通关的关键。
2026 年的 vibe coding 工具分为两类：
1. AI 应用构建器；如 Lovable、Bolt 和 Replit 等工具，可以根据描述生成完整的全栈应用，包括托管和部署。专为非技术用户和快速原型设计者设计。无需本地设置。
2. AI 编程 IDE；如 Cursor 3.0、Claude Code 和 Windsurf 等工具，位于你的开发环境内部，帮助开发者编写、调试和迭代代码。它们需要一定的技术熟悉度，但对于严肃的生产工作能提供更多的控制力和威力。
下面的路线图将带你领略这两个世界，从让所有工具运作得更好的基础技能开始，逐步向专业化发展。
## 第 1 个月：基础；每个 Vibe Coder 必须知道的事情
你这个月的目标：从概念层面理解软件是如何工作的，这样 AI 生成的代码对你来说就不再是一个黑盒，你可以智能地指挥它。
新的 vibe coders 犯的最大错误就是完全跳过这个月。他们打开一个工具，写一个模糊的提示词，对输出感到困惑，然后陷入社区所谓的“厄运循环”；让 AI 去修复 Bug 结果却产生新的 Bug，永无止境。那些能逃离厄运循环的人，都掌握了足够的基础知识，能够阅读并指挥 AI，而不仅仅是对其做出反应。
你不需要成为程序员。你需要足够的概念基础来提出明智的问题并发现明显的错误。
1. 互联网（Web）是如何工作的
在网上构建任何东西之前，你需要理解你构建的基础之上是什么。大多数 vibe coded 产品是 Web 应用程序。这意味着要知道基本的客户端-服务器模型，浏览器如何与后端通信，URL 实际上是做什么的，以及 API 是什么。
资源：
1. MDN Web Docs: How the Web Works（免费）链接：https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works 关于浏览器、服务器和 HTTP 最清晰、最权威的解释。由 Mozilla 维护。
2. MDN: HTTP Overview（免费）链接：https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview 涵盖 GET 与 POST，状态码（200 OK，400 Bad Request，401 Unauthorized，404 Not Found，500 Server Error），以及当你的应用程序崩溃时为什么会出现它们。
3. REST API Tutorial（免费）链接：https://restfulapi.net/ 简短、实用，且直接可用。读完这个，你将理解每一个 vibe coded 后端在“调用 API”时在做什么。
需要理解的内容：
- 从你输入 URL 到页面呈现的那一刻发生了什么
- 前端（用户看到的）和后端（服务器逻辑和数据库）之间的区别
- 什么是 API，什么是请求，以及什么是响应
- HTTP 状态码以及它们在调试应用程序时的含义
- 什么是“环境变量”，以及为什么机密信息绝不能出现在代码中
2. Git 和 GitHub；你的时光机
这是整个指南中最重要的实践技能。每一个严肃的 vibe coder 都使用 Git。没有它，一个错误的 AI 提示词可能会毁掉数小时的工作，而且无法回退。有了它，每一个工作状态都是一个你可以立即返回的检查点。
Git 不是可选项。它是高效构建和每次 AI 搞砸后从头重来的区别所在。
如何入手：不要试图死记硬背命令。理解这个模型：Git 随着时间跟踪文件变化，并允许你在该历史记录中前后移动。一旦你明白了这一点，命令就变得合情合理了。
资源：
1. Git for Vibe Coders: What Actually Matters (YouTube, 免费)链接：https://www.youtube.com/watch?v=ADEFvP5Gw5c 专为 vibe coders 制作。涵盖 git add, git commit, git push, git pull, branching 和 rollbacks，使用真实的 Next.js 项目进行演示。
2. Git and GitHub for Vibe Coders (免费指南, DeepakNess.com)链接：https://deepakness.com/blog/git-for-vibe-coders/ 专门为 2025 年末的 AI 辅助构建者撰写。涵盖了 vibe coders 的日常 Git 工作流，包括每 15-20 分钟提交一次，并使用 git diff 在接受之前审查 AI 生成的更改。
3. Learn Git Branching (免费, 互动)链接：https://learngitbranching.js.org/ 理解分支和合并的最佳可视化工具。在浏览器中运行，无需设置。
4. GitHub Skills (免费, 互动)链接：https://skills.github.com/ GitHub 内部构建的官方互动课程。
重点关注：
- git init, add, commit, push, pull, status, diff
- 在开始任何新功能之前创建一个新分支
- 使用 git log 查看历史，使用 git revert 安全地撤销更改
- 在第一次 push 之前创建一个 .gitignore 文件并将你的 .env 文件添加进去
- 在使用 AI 进行实验时使用功能分支：创建一个分支，vibe code 进去，测试它，然后合并
规则：从现在开始，你构建的每一个项目都存在于一个 GitHub 仓库中。没有例外。
3. 基础 HTML、CSS 和 JavaScript 读写能力
你不需要成为前端开发人员。你需要能够看一眼 AI 生成的组件并理解什么是 div，什么是 button，什么是 onClick，以及什么是 useState。这大约需要一周时间，并且当你需要指挥 AI 修改 UI 的特定部分时，能为你节省大量时间。
资源：
1. The Odin Project: Foundations（免费，自学）链接：https://www.theodinproject.com/paths/foundations 互联网上最好的免费全栈基础课程。只做 HTML Foundations, CSS Foundations 和 JavaScript Basics 部分。以适中的速度需要 1–2 周。
2. freeCodeCamp: Responsive Web Design（免费，互动）链接：https://www.freecodecamp.org/learn/2022/responsive-web-design/ 基于浏览器的练习，无需设置。是 Odin 的良好补充。
3. JavaScript.info (免费参考)链接：https://javascript.info/ 最清晰的 JavaScript 文档。当 AI 生成你不认识的代码时，将其作为参考。它是 JavaScript 解释界的 MDN。
重点关注：
- HTML：元素、属性、嵌套和页面的结构
- CSS：选择器、flexbox，以及事物为什么呈现出它们的样子
- JavaScript：变量、函数、数组、对象，以及 async/await 是什么意思
- React 基础：什么是组件，props 和 state 是什么意思
4. 选择你的技术栈并坚持使用它
初学者最常见的错误之一是不断切换框架。AI 模型是在公开可用的代码上训练的；它们在流行的、文档齐全的栈上明显优于冷门的栈。你的栈越流行，AI 拥有的教程、示例和训练数据就越多，它的输出就会越好。
2026 年推荐的 vibe coder 初学者技术栈：
- 前端：通过 Next.js (App Router) 使用 React
- 样式：Tailwind CSS
- 数据库 + 认证：Supabase (Postgres 数据库、身份验证、存储；全部通过 API)
- 部署：Vercel
- 语言：TypeScript（首选）或 JavaScript
这个技术栈对初学者友好，完全托管，经过 AI 优化，让你可以从数据库到实时 URL 发布一个完整的全栈产品，而无需管理服务器基础设施。它也是最常用的 vibe coding 技术栈，这意味着 AI 工具对它非常熟悉。
资源：
1. Next.js Official: Learn Next.js (免费, 互动)链接：https://nextjs.org/learn 官方互动课程。逐步构建一个完整的仪表板应用程序。App Router 版本于 2024 年更新，保持最新。
2. Tailwind CSS Docs (免费)链接：https://tailwindcss.com/docs Tailwind 是实用优先的 CSS。文档非常出色，而且由于训练数据的密度，AI 生成的 Tailwind 代码几乎比任何其他样式系统都要好。
3. Supabase Docs: Getting Started (免费)链接：https://supabase.com/docs/guides/getting-started Supabase 提供 Postgres 数据库、行级安全性、身份验证（电子邮件、社交、OTP）和文件存储；所有这些都通过简单的 JavaScript SDK 访问。
4. Vercel: Getting Started (免费)链接：https://vercel.com/docs/getting-started-with-vercel 将你的 GitHub 仓库连接到 Vercel，每次 push 都会自动部署。设置大约需要 5 分钟。
第 1 个月里程碑
到这个月结束时，你应该能够：
- 解释什么是 API 以及当浏览器发出请求时会发生什么
- 创建一个 Git 仓库，进行提交，创建分支，并推送到 GitHub
- 阅读 AI 生成的 React 组件并理解其大致结构
- 创建一个基本的 Next.js 项目并使用 npm run dev 在本地运行它
- 通过连接 GitHub 仓库将一个静态页面部署到 Vercel
## 第 2 个月：掌握工具；Cursor 3.0, Claude Code 和构建者生态系统
你这个月的目标：真正熟练掌握核心 vibe coding 工具。了解哪种工具适合哪种情况，并构建你的第一批完整项目。
这是 vibe coding 变得真实的地方。2026 年可用的工具是非凡的；但它们奖励那些理解如何使用它们的人，并持续惩罚那些将它们视为魔法的人。
1. 了解完整的工具格局（2026）
2026 年的 vibe coding 生态系统已经显著成熟。以下是截至 2026 年 5 月验证过的、每一个值得了解的主要工具的现状。
AI 编程 IDE（最适合半技术到技术型的构建者）：
- Cursor 3.0。全方位的 AI 优先编辑器。免费 / $20/月 Pro。Agents Window（代理窗口），并行云代理，Composer 2，Marketplace（市场），内置浏览器。
- Claude Code。代理型，全代码库推理。按使用量付费。现在可作为 CLI、VS Code 扩展、桌面应用程序和 Web 使用。
- Windsurf。企业友好，预算开发。免费 / $15/月 Pro。Cascade 代理，2025 年被谷歌以 24 亿美元收购。
- GitHub Copilot。任何 IDE 中的日常助手。免费 / $10/月 Pro。适用于 VS Code、JetBrains、Neovim、Xcode 等。
- Cline。开源高级用户。免费（按 API 令牌付费）。VS Code 扩展；连接到 Claude、GPT-5.5、Gemini 或本地模型。
- Google Antigravity。多代理并行构建。价格待定。随 Gemini 3 于 2025 年 11 月推出；用于并行代理的“Manager View（管理器视图）”。
无代码 / 全应用构建器（最适合完全初学者和快速原型设计）：
- Lovable。非技术创始人，React UI。免费 / $25/月 Pro。生成全栈 React + Supabase 应用；最适合非编码人员。
- Bolt.new。快速 Web 应用生成，无本地设置。免费 / $29/月 Pro。基于浏览器，无需设置；最适合初学者速度。
- v0 by Vercel。UI 组件生成。免费 / $20/月。最适合开发人员；GitHub 同步 + 直接 Vercel 部署。
- Replit。包含托管的一体化构建。免费 / $20/月。功能最丰富；Agent 3 在浏览器中构建、运行和部署。
- Base44。无代码内部工具。免费 / $20/月。为非技术构建者提供 AI 辅助应用 + 后端。
决策指南：
- 没有技术背景的完全初学者 → 从 Lovable 或 Bolt.new 开始
- 希望在现有工作流中加入 AI 的开发者 → Cursor 3.0 或 GitHub Copilot
- 想要全代码库控制的原生终端用户 → Claude Code
- 预算有限的开发者 → Windsurf，$15/月
- 与团队构建企业级应用 → Windsurf（被谷歌收购后）
资源：
1. roadmap.sh: The 10 Best Vibe Coding Tools in 2026（免费指南）链接：https://roadmap.sh/vibe-coding/best-tools 维护的社区排名的 10 大最佳工具，更新至 2026 年。
2. BuildMVPFast: 10 Best Vibe Coding Tools 2026（免费指南）链接：https://www.buildmvpfast.com/blog/best-vibe-coding-tools-2026 综合决策树和逐个工具的细分，价格已于 2026 年验证。
3. 2026 Vibe Coding Tool Comparison（免费, Technically.dev）链接：https://technically.dev/posts/vibe-coding-tool-comparison 一个真实的对比测试，比较了 Replit、v0、Lovable 和 Bolt 在相同项目上的表现。
4. Vibe Coding: Why We Prefer Windsurf Over Lovable and Bolt（免费指南, Koncile）链接：https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable 详细的团队评估，在真实的 Web 项目上比较了四种工具，发布于 2026 年 4 月。
2. Cursor 3.0；完全重建
Cursor 3.0 于 2026 年 4 月 2 日发布，是自 Anysphere 于 2023 年分叉 VS Code 以来最重要的更新。它不再主要是一个带有 AI 功能附加的文件编辑器。它现在是一个用于使用代理构建软件的统一工作区。
Cursor 3.0 的新功能：
- Agents Window（代理窗口）；一个新的独立界面 (Cmd/Ctrl+Shift+P → Agents Window)，用于并行运行多个 AI 代理。代理可以在你的本地机器、云环境、通过 SSH 或在 Git 树中运行；所有这些都是同时进行的。
- Composer 2；Cursor 自己的前沿编码模型，专为多文件代码编辑和迭代而训练。
- Cloud Agents（云代理）；在远程云沙盒中运行的代理，允许你启动一个任务并回来审查结果。企业自托管云代理于 2026 年 3 月 25 日推出。
- Built-in Browser（内置浏览器）；一个集成的浏览器，让代理可以通过查看实际渲染的内容来测试他们自己的修复，而无需你截取屏幕截图。
- Cursor Marketplace（Cursor 市场）；一键式插件，捆绑了 Skills（技能）、Subagents（子代理）、MCP 服务器、Hooks（钩子）和 Rules（规则）。可用的插件包括 AWS、Figma、Linear、Stripe、Vercel、Datadog、Snowflake 等。
- Design Mode（设计模式）；直接在浏览器渲染的 UI 元素上点击和拖动以将其作为 AI 编辑的目标。不再需要用文字描述组件。
- Automations（自动化）（于 2026 年 3 月 5 日发布）；由外部事件触发的常驻代理：日程安排、Slack 消息、Linear 问题、GitHub 事件和 PagerDuty 警报。代理会启动一个云沙盒并使用你配置的 MCP 执行。
- 新的 Diffs View（差异视图）；单词级别的更改审查、暂存和拉取请求创建；