原文标题：How to Become an Expert Vibe Coder in 6 Months (Full Course + Resources)
原文作者：Avid
编译：Peggy，BlockBeats

编者按：Vibe Coding 不是简单地「让 AI 帮你写代码」，而是一套从想法到上线产品的完整构建方法。真正有效的方式，不是反复输入模糊需求、等待模型「变魔法」，而是学会先规划、再提示、再审查、再部署。

这份路线图将 Vibe Coding 拆成六个月：先补齐 Web、Git 和基础技术栈，再掌握 Cursor、Claude Code 等工具；随后学习提示词、上下文工程、MCP、RAG、测试、安全和生产部署。它的核心不是让初学者变成传统程序员，而是帮助任何有产品想法的人，用 AI 更系统地把想法做成真实可用的应用。

对初学者来说，最重要的一条建议是：不要只看教程，要持续动手。每个月都应该完成一个可运行、可访问、可迭代的小项目。真正的进步不来自「学完多少课程」，而来自你是否真的把产品发布出去了。

以下为原文：

Vibe Coding 已经从一个小众的 Twitter 实验，变成了最受追捧的构建者技能之一。

我刚刚拆解了如何成为前 1% 的 Agentic Coder。

早期入场的窗口仍然打开，但它只属于真正动手做东西的人。

问题在于，大多数初学者根本不知道从哪里开始。他们通常会：下载 Cursor，输入一个模糊的想法，然后疑惑为什么生成结果一团糟；看了无数 YouTube 教程，却从来没有真正做出一个东西；直接跳进复杂工具，却不理解如何组织提示词、管理上下文，或者完成部署。

结果通常都是一样的：半成品 Demo、不断「修 Bug 又制造新 Bug」的死亡循环，以及一个真正上线的产品都没有。

这份指南就是为了解决这个问题。它是一份按月推进的详细路线图，包含经过验证的 2025–2026 年资源，覆盖你从完全零基础成长为一个能够交付真实产品的 Vibe Coder 所需要的每一项技能。每个月都有一个里程碑，每项技能都配有资源链接。

开始之前只有一条规则：所有东西都要亲手做。

不是阅读相关内容，不是看别人做，而是真的打开工具，跟着步骤操作，弄坏一些东西，再修好它，最后把它发布出去。

Vibe Coding 到底是什么？

「Vibe Coding」这个词由 AI 研究员 Andrej Karpathy 提出。他用它来描述一种完全交给 AI 的编程方式：接受 AI 的每一个建议，不手动审查代码，把注意力全部放在描述最终结果上，而不是亲自编写逻辑。

在实际操作中，它意味着你用自然语言描述自己想要什么软件，然后让 AI 为你生成、迭代、测试并修复代码。

但大多数初学者容易忽略一点：Vibe Coding 并不是被动等待，也不是魔法。它是一套结构化流程，本质上是把人的意图转化为可运行的软件。

输出质量几乎完全取决于输入质量：你的提示词、上下文文件、规划能力，以及你审查 AI 产出内容的能力。掌握这些输入，就是整个游戏的核心。

到 2026 年，Vibe Coding 工具大致分为两类：

AI 应用构建器：例如 Lovable、Bolt 和 Replit。这类工具可以根据一段描述生成完整的全栈应用，包括托管和部署。它们面向非技术用户和快速原型开发者，不需要本地配置环境。

AI 编程 IDE：例如 Cursor 3.0、Claude Code 和 Windsurf。这类工具嵌入在开发环境中，帮助开发者编写、调试和迭代代码。它们需要一定技术基础，但在严肃的生产级开发中提供更高的控制力和能力上限。

下面这份路线图会带你进入这两个世界：先从能让所有工具都发挥更好效果的基础技能开始，再逐步走向专业化。

第 1 个月：基础能力，每个 Vibe Coder 都必须掌握的东西

这个月的目标是：从概念层面理解软件如何工作，让 AI 生成的代码不再像一个黑箱，并且能够更聪明地指挥它。

新手 Vibe Coder 最常见的错误，就是完全跳过这个月。他们打开一个工具，写下一段模糊提示，看到生成结果后感到困惑，然后陷入社区里常说的「死亡循环」：不断让 AI 修复 Bug，而 AI 又不断制造新的 Bug，循环往复。

能够逃离这个循环的人，通常都掌握了足够的基础知识。他们不是单纯对 AI 的输出做反应，而是能够读懂它、引导它。

你不需要成为一名程序员。你只需要有足够的概念基础，能够提出聪明的问题，并发现明显错误。

Web 是如何工作的

在构建任何 Web 产品之前，你需要理解自己是在什么基础设施之上进行开发的。大多数 Vibe Coding 产品都是 Web 应用。这意味着你需要了解基本的客户端—服务器模型、浏览器如何与后端通信、URL 到底做了什么，以及 API 是什么。

资源：

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 维护。

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），以及为什么你的应用出问题时会出现这些提示。

REST API Tutorial（免费）
链接：https://restfulapi.net/
内容简短、实用，并且可以直接应用。学完之后，你会理解每个通过 Vibe Coding 写出来的后端，在「调用 API」时到底发生了什么。

你需要理解的内容：

从你输入一个 URL，到页面完成渲染，中间发生了什么；

前端和后端的区别：前端是用户看到的界面，后端是服务器逻辑和数据库；

API 是什么，请求是什么，响应是什么；

HTTP 状态码是什么意思，以及它们在调试应用时代表什么；

「环境变量」是什么，以及为什么密钥绝不能直接写在代码里。

Git 和 GitHub：你的时间机器

这是整份指南中最重要的一项实用技能。每个严肃的 Vibe Coder 都会使用 Git。

如果没有 Git，一次糟糕的 AI 提示词就可能毁掉你几个小时的工作，而且没有办法回退。有了 Git，每一个可以正常运行的状态，都会成为一个你可以随时返回的检查点。

Git 不是可选项。它决定了你是在高效构建产品，还是每次 AI 搞砸之后都从头再来。

学习方式是：不要试图死记命令，而是先理解它的模型。Git 会随着时间追踪文件变化，并允许你在这段历史中前进或后退。一旦你理解了这一点，命令就会变得自然。

资源：

Git for Vibe Coders: What Actually Matters（YouTube，免费）
链接：https://www.youtube.com/watch?v=ADEFvP5Gw5c
专门为 Vibe Coder 制作。通过一个真实的 Next.js 项目，讲解 git add、git commit、git push、git pull、分支和回滚。

Git and GitHub for Vibe Coders（免费指南，DeepakNess.com）
链接：https://deepakness.com/blog/git-for-vibe-coders/
这份指南专门面向 2025 年末的 AI 辅助开发者，覆盖 Vibe Coder 的日常 Git 工作流，包括每 15–20 分钟提交一次，以及在接受 AI 生成修改之前，用 git diff 检查变更。

Learn Git Branching（免费，互动式）
链接：https://learngitbranching.js.org/
理解分支和合并最好的可视化工具之一，可以直接在浏览器里运行，不需要配置环境。

GitHub Skills（免费，互动式）
链接：https://skills.github.com/
GitHub 官方推出的互动课程，直接在 GitHub 内部完成。

重点关注：

git init、add、commit、push、pull、status、diff；

开始任何新功能之前，先创建一个新分支；

使用 git log 查看历史，用 git revert 安全撤销修改；

创建 .gitignore 文件，并在第一次 push 之前把 .env 文件加入其中；

在用 AI 做实验时使用功能分支：先创建分支，在分支里 Vibe Coding，测试通过后再合并。

规则是：从现在开始，你做的每一个项目都必须放在 GitHub 仓库里，没有例外。

基本的 HTML、CSS 和 JavaScript 素养

你不需要成为前端开发者。你只需要能够看懂 AI 生成的组件，大致理解什么是 div、button、onClick 和 useState。

这大约需要一周时间，但在你需要指挥 AI 修改界面某个具体部分时，会节省大量时间。

资源：

The Odin Project: Foundations（免费，自学）
链接：https://www.theodinproject.com/paths/foundations
互联网上最好的免费全栈基础课程之一。只需要学习 HTML Foundations、CSS Foundations 和 JavaScript Basics 这几个部分即可。中等速度下大约需要 1–2 周。

freeCodeCamp: Responsive Web Design（免费，互动式）
链接：https://www.freecodecamp.org/learn/2022/responsive-web-design/
基于浏览器练习，不需要配置环境。可以作为 Odin Project 的补充。

JavaScript.info（免费参考资料）
链接：https://javascript.info/
目前最清晰的 JavaScript 文档之一。当 AI 生成你看不懂的代码时，可以把它当作参考资料使用。它相当于 JavaScript 解释版的 MDN。

重点关注：

HTML：元素、属性、嵌套关系，以及页面结构；

CSS：选择器、Flexbox，以及界面为什么会呈现出某种样式；

JavaScript：变量、函数、数组、对象，以及 async/await 的含义；

React 基础：什么是组件，什么是 props 和 state。

选择你的技术栈，并坚持使用它

初学者最常见的错误之一，是不断切换框架。

AI 模型是在公开代码上训练出来的。相比冷门技术栈，它们在流行且文档完善的技术栈上表现明显更好。一个技术栈越流行，相关教程、案例和训练数据就越多，AI 的输出质量也越高。

2026 年推荐给 Vibe Coder 初学者的技术栈：

前端：React，通过 Next.js（App Router）使用；

样式：Tailwind CSS；

数据库 + 认证：Supabase（Postgres 数据库、身份认证、存储，全部通过 API 使用）；

部署：Vercel；

语言：优先 TypeScript，也可以使用 JavaScript。

这套技术栈对初学者友好，完全托管，适合 AI 辅助开发，并且可以让你在不管理服务器基础设施的情况下，从数据库一路做到线上 URL，发布一个完整的全栈产品。

它也是目前最常见的 Vibe Coding 技术栈之一，因此 AI 工具对它非常熟悉。

资源：

Next.js 官方课程：Learn Next.js（免费，互动式）
链接：https://nextjs.org/learn
官方互动课程，会一步步构建一个完整的仪表盘应用。App Router 版本已在 2024 年更新，目前仍然适用。

Tailwind CSS Docs（免费）
链接：https://tailwindcss.com/docs
Tailwind 是一种 utility-first 的 CSS 框架。它的文档质量很高。由于训练数据密度高，AI 生成 Tailwind 代码的效果通常优于大多数其他样式系统。

Supabase Docs: Getting Started（免费）
链接：https://supabase.com/docs/guides/getting-started
Supabase 提供 Postgres 数据库、行级安全策略、身份认证（邮箱、社交登录、一次性密码）和文件存储，所有功能都可以通过简单的 JavaScript SDK 调用。

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 年可用的工具已经非常强大，但它们奖励的是懂得如何使用工具的人，也会持续惩罚那些把工具当成「魔法」的人。

理解完整的工具版图（2026）

到 2026 年，Vibe Coding 生态已经明显成熟。以下是截至 2026 年 5 月，所有值得了解的主流工具现状。

AI 编程 IDE

适合半技术型到技术型构建者。

Cursor 3.0
全能型 AI-first 编辑器。免费版 / Pro 版每月 20 美元。支持 Agents Window、并行云端 Agent、Composer 2、Marketplace、内置浏览器。

Claude Code
擅长 Agentic 编程与全代码库推理。按使用量计费，也可通过 Claude Pro 每月 20 美元使用。目前支持 CLI、VS Code 插件、桌面应用和 Web 端。

Windsurf
更适合企业用户和预算有限的开发者。免费版 / Pro 版每月 15 美元。具备 Cascade Agent，2025 年被 Google 以 24 亿美元收购。

GitHub Copilot
适合在任何 IDE 中提供日常辅助。免费版 / Pro 版每月 10 美元。支持 VS Code、JetBrains、Neovim、Xcode 等开发环境。

Cline
面向开源高级用户。工具本身免费，按 API Token 付费。它是一个 VS Code 插件，可以连接 Claude、GPT-5.5、Gemini 或本地模型。

Google Antigravity
适合多 Agent 并行构建。价格待定。2025 年 11 月随 Gemini 3 发布，提供用于管理并行 Agent 的「Manager View」。

无代码 / 完整应用构建器

适合完全零基础用户和快速原型开发。

Lovable
适合非技术背景创始人和 React UI 构建。免费版 / Pro 版每月 25 美元。可以生成完整的 React + Supabase 全栈应用，对非程序员最友好。

Bolt.new
适合快速生成 Web 应用，不需要本地配置。免费版 / Pro 版每月 29 美元。完全在浏览器中运行，适合初学者快速上手。

Vercel v0
适合生成 UI 组件。免费版 / 每月 20 美元。更适合开发者使用，支持 GitHub 同步和直接部署到 Vercel。

Replit
集构建与托管于一体。免费版 / 每月 20 美元。功能最完整，Agent 3 可以直接在浏览器中构建、运行和部署应用。

Base44
适合无代码内部工具开发。免费版 / 每月 20 美元。面向非技术构建者，提供 AI 辅助应用和后端能力。

选择建议

如果你是完全没有技术背景的初学者，可以从 Lovable 或 Bolt.new 开始。

如果你是开发者，希望把 AI 融入现有工作流，可以选择 Cursor 3.0 或 GitHub Copilot。

如果你习惯使用终端，并且想要完整代码库控制能力，可以选择 Claude Code。

如果你是预算敏感型开发者，可以选择每月 15 美元的 Windsurf。

如果你要和团队一起构建企业级应用，可以考虑被 Google 收购后的 Windsurf。

资源

roadmap.sh：The 10 Best Vibe Coding Tools in 2026（免费指南）
链接：https://roadmap.sh/vibe-coding/best-tools
这是一个由社区维护的 2026 年最佳工具排行榜。

BuildMVPFast：10 Best Vibe Coding Tools 2026（免费指南）
链接：https://www.buildmvpfast.com/blog/best-vibe-coding-tools-2026
提供完整决策树和逐个工具拆解，价格信息已按 2026 年情况核查。

2026 Vibe Coding Tool Comparison（免费，Technically.dev）
链接：https://technically.dev/posts/vibe-coding-tool-comparison
对 Replit、v0、Lovable 和 Bolt 进行了同项目实测对比。

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 月。

Cursor 3.0：一次完整重构

Cursor 3.0 于 2026 年 4 月 2 日发布，这是自 Anysphere 在 2023 年基于 VS Code 分叉以来，最重要的一次更新。

它已经不再只是一个「在文件编辑器上叠加 AI 功能」的工具，而是变成了一个用 Agent 构建软件的统一工作空间。

Cursor 3.0 的新功能

Agents Window
一个全新的独立界面，可通过 Cmd/Ctrl + Shift + P → Agents Window 打开，用于并行运行多个 AI Agent。Agent 可以同时在本地机器、云端环境、SSH 或 Git worktrees 中运行。

Composer 2
Cursor 自研的前沿编程模型，专门针对多文件代码编辑和迭代训练。

Cloud Agents
运行在远程云端沙盒中的 Agent。你可以启动一个任务，稍后回来查看结果。企业自托管云端 Agent 已于 2026 年 3 月 25 日上线。

内置浏览器
集成浏览器让 Agent 可以直接查看实际渲染效果，并测试自己的修复结果，不再需要用户手动截图。

Cursor Marketplace
一键安装插件，将 Skills、Subagents、MCP servers、Hooks 和 Rules 打包在一起。可用插件包括 AWS、Figma、Linear、Stripe、Vercel、Datadog、Snowflake 等。

Design Mode
可以直接在浏览器渲染出来的 UI 元素上点击和拖拽，让 AI 精准编辑对应部分。不再需要用文字描述某个组件在哪里。

Automations
该功能于 2026 年 3 月 5 日发布。它是一种常驻型 Agent，可以由外部事件触发，例如定时任务、Slack 消息、Linear issue、GitHub 事件和 PagerDuty 告警。Agent 会启动一个云端沙盒，并使用你配置好的 MCP 执行任务。

新的 Diffs View
支持逐词级别的变更审查、暂存和创建 Pull Request，整个流程都可以在 Agents Window 内完成。

/worktree 命令
让任务运行在独立的 Git worktree 中，避免 Agent 的工作污染主分支。

/best-of-n 命令
让同一个任务在多个模型中运行，并返回最佳结果。

资源

Cursor Changelog: 3.0（官方，免费）
链接：https://cursor.com/changelog/3-0
Cursor 3.0 的官方发布说明。

DataCamp：What Is Cursor 3?（免费指南）
链接：https://www.datacamp.com/blog/cursor-3
对 Cursor 3.0 每个新功能最完整的文字拆解之一，发表于 2026 年 4 月 7 日。

Cursor 3 Changes Everything for Agentic Coding（YouTube，免费，Scrimba）
链接：https://www.youtube.com/watch?v=HTKGyLar8AU
通过真实项目完整演示 Agents Window、Composer 2、内置浏览器、并行 Agent 和 Marketplace。

Cursor Tutorial 2026: Learn AI Coding in 15 Minutes（免费指南，NXCode）
链接：https://www.nxcode.io/resources/news/cursor-tutorial-beginners-2026
面向初学者的分步骤指南，覆盖 Composer、Agent Mode 和 Cloud Agents。

Build Fast with AI: Cursor 3 vs Google Antigravity（免费指南）
链接：https://www.buildfastwithai.com/blogs/cursor-3-vs-antigravity-ai-ide-2026
对 Cursor 3.0 与 Google 新 AI IDE Antigravity 的实用功能对比。

Claude Code：能够理解整个代码库的 Agentic Coding 工具

Claude Code 是 Anthropic 推出的终端原生 Agentic 编程工具。

与那些主要围绕已打开文件工作的 IDE 工具不同，Claude Code 可以读取整个代码库，跨多个文件进行推理，运行命令，处理 Git 操作，并自主执行多步骤任务，同时在每一步请求你的批准。

目前，它已经可以在四种环境中使用：终端 CLI、VS Code 插件、JetBrains IDE 和桌面应用。

如何开始

你需要一个 Claude Pro 订阅，每月 20 美元或更高版本，并且需要在 macOS、Linux 或 Windows 11 上使用终端。

通过 npm 安装：

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

进入你的项目文件夹：

cd ~/projects/my-app && claude

从一个探索性提示开始：

What does this project do?

这可以让 Claude 在动手修改任何内容之前，先分析你的代码库。

核心工作流：Explore → Plan → Code → Commit

Explore：探索
按两次 Shift + Tab 进入 Plan Mode。Claude 会读取文件并回答问题，但不会修改任何内容。你可以用这个模式理解项目架构、追踪数据流、梳理代码库结构。

Plan：规划
在 Plan Mode 中，让 Claude 创建一份实现计划。你需要审查它、细化它，并对不同意的部分提出反驳。只有在确认之后，再说「go ahead」。

Code：编码
切回 Normal Mode。Claude 会按照计划实现功能，展示 diff，并在每一步请求你的批准。

Commit：提交
审查 diff，运行测试，然后用一条清晰的提交信息完成 commit。

CLAUDE.md 是什么？

CLAUDE.md 是放在项目根目录下的 Markdown 文件，用来告诉 Claude Code：

你的项目如何运行；

应该遵循哪些约定；

应该运行哪些命令；

哪些内容绝对不能修改。

你可以运行：

claude /init

来生成一个初始版本，然后根据项目情况进行自定义。

资源

builder.io：How to Use Claude Code（初学者指南，免费）
链接：https://www.builder.io/blog/how-to-use-claude-code
目前最完整的 Claude Code 初学者教程之一，覆盖安装、Plan Mode 工作流、CLAUDE.md 设置和最佳实践，发表于 2026 年 4 月。

Full Claude Code Tutorial for Non-Technical Beginners（YouTube，免费）
链接：https://www.youtube.com/watch?v=bqJzIWAEn40
从零开始用 Claude Code 构建应用的分步骤视频教程，不需要编程经验，发表于 2026 年 4 月。

Claude Code Full Course; 4 Hours（YouTube，免费）
链接：https://www.youtube.com/watch?v=QoQBzR1NIqI
目前最完整的 Claude Code 视频课程之一，覆盖从配置到产品发布与销售的完整流程。

Claude Code Tutorial for Beginners 2026（免费指南，dev.to）
链接：https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma
文字教程，覆盖安装、终端配置，以及构建第一个项目。

Getting Started with Claude Code: A Researcher's Setup Guide（免费指南）
链接：https://paulgp.substack.com/p/getting-started-with-claude-code
特别适合理解「要足够具体」这一原则、上下文窗口管理，以及迭代式提示方法。

OpenSaaS.sh：Best Way to Vibe Code a SaaS in 2026（免费指南）
链接：https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/
介绍 2026 年较优的 SaaS Vibe Coding 配置：Claude Code + 结构化 SaaS 模板 + 对 LLM 友好的文档（llms.txt）。还包括如何运行后台开发服务器，让 Claude 看到实时日志，以及如何通过 Chrome DevTools MCP 进行浏览器自动化。

第 2 个月里程碑

到这个月结束时，你应该能够：

为不同项目类型选择合适的工具；

使用 Cursor 3.0 的 Agents Window 通过云端 Agent 执行任务；

在写任何代码之前，先用 Claude Code 的 Plan Mode 进行规划；

为任意项目设置一个 CLAUDE.md 文件；

构建并部署至少一个完整项目，也就是一个可以正常运行、并拥有真实线上 URL 的 Web 应用。

第 3 个月：提示词的艺术，上下文、结构与稳定输出

这个月的目标是：掌握 Vibe Coding 最核心的能力，也就是写好提示词、管理好上下文，让 AI 能够稳定地在第一次尝试时，就做出你真正想要的结果。

在整个 Vibe Coding 技术栈里，提示词是杠杆最高的一项技能。如果你的提示词很模糊，工具本身几乎不重要。一个普通工具配上优秀提示词，永远会胜过一个顶级工具配上模糊提示词。

好的 Vibe Coding 提示词到底如何工作

新手提示词和高手提示词之间的区别，几乎完全在于结构。

新手会说：

添加一个登录页面。

高手会说：

在 app/login/page.tsx 中创建一个登录页面，使用 lib/supabase.ts 中现有的 Supabase auth client。表单样式沿用 app/signup/page.tsx。包含邮箱和密码输入框、提交按钮，并处理无效登录凭证的错误提示。不要修改其他任何文件。

前者可能生成一个能用的组件，也可能破坏其他文件，或者引入与当前代码库不一致的模式。后者则更可能生成一个真正可运行、且符合项目结构的组件。

一个好的提示词通常包含四个部分：

目标：这个功能到底要做什么？
上下文：哪些文件相关？当前项目里已经有什么？
约束：哪些地方不能改？应该遵循什么既有模式？
输出格式：最终结果应该是什么样？

资源

Anthropic：Interactive Prompt Engineering Tutorial（免费，GitHub）
链接：https://github.com/anthropics/prompt-eng-interactive-tutorial
这是一个 9 章互动课程，包含练习，设计为通过 Claude API 在 Jupyter notebook 中运行。它是目前最好的动手型提示工程课程之一。

PromptingGuide.ai（免费）
链接：https://www.promptingguide.ai/
覆盖从基础提示词、思维链、few-shot 示例，到 Agentic 提示技术的完整内容，并且持续更新。

r/PromptEngineering：The Ultimate Vibe Coding Guide（免费，Reddit）
链接：https://www.reddit.com/r/PromptEngineering/comments/1kyboo0/the_ultimate_vibe_coding_guide/
来自活跃 Vibe Coder 的 18 条实战经验，包括如何处理 AI 偏移、如何在多个功能之间保持一致性，以及如何建立「Common AI Mistakes」文件。

Roadmap.sh：Vibe Coding Best Practices（免费指南）
链接：https://roadmap.sh/vibe-coding/best-practices
提供 10 条实践规则，帮助你从 Vibe Coding 工具中获得稳定结果，已按 2026 年情况更新验证。

Appwrite：Complete Vibe Coding Guide 2026（免费指南）
链接：https://appwrite.io/blog/post/the-complete-vibe-coding-guide-2025
完整介绍什么是 Vibe Coding、如何写清晰提示词，以及如何作为构建者保持控制，而不是成为工具的乘客。

PRP 框架：先规划，再提示

造成「死亡循环」最常见的原因，就是在没有任何规划的情况下，直接开始开发功能。

AI 写了一段代码，弄坏了一些东西；你让它修复，它又弄坏了别的东西；然后整个过程不断螺旋下滑。

解决办法其实很简单：在写任何代码提示词之前，先写计划。

PRP 框架：Product Requirements Prompt

在打开 Vibe Coding 工具之前，先在一个文档里回答三个问题：

这是给谁用的？
目标用户是谁？他们的技术舒适度如何？

它解决什么问题？
用一句话说清楚核心价值。

成功是什么样子？
写出具体、可测试的标准。

然后，把这份文档交给 Claude 或 ChatGPT，让它扩展成一份完整的产品需求文档，也就是 PRD。这个 PRD 就会成为你在 Cursor 或 Claude Code 中的开场提示词。

这个习惯，是「能真正发布产品的人」和「陷入死亡循环的人」之间的分水岭。

特别是在 Claude Code 里，你应该在任何实现之前，先按两次 Shift + Tab 进入 Plan Mode。让 Claude 说明它会创建或修改哪些文件、引入哪些函数、需要考虑哪些边界情况或架构决策。你要审查这个计划，对可疑部分提出反驳，然后，只有在确认后，再说「go ahead」。

llms.txt：面向 AI 可读文档的标准

在 Vibe Coding 中，最被低估的技巧之一是 llms.txt。

它是一个放在库、框架或项目根目录下的纯文本 Markdown 文件，用来给 AI 工具提供正确使用该项目所需的精确上下文。

它解决的问题是：大多数库文档是写给人看的，而且针对浏览器阅读做了优化。AI 模型在处理 HTML、重 JavaScript 的文档页面和导航菜单时，效果并不好。llms.txt 把这些干扰全部去掉，给模型提供一份干净、结构化、聚焦 API 的参考资料，而且能够放进上下文窗口里。

哪里有 llms.txt，以及如何使用它

现在大多数主流库都会发布 llms.txt。例如：

https://docs.supabase.com/llms.txt

你可以把这个 URL 粘贴到 Claude Code、Cursor 或 ChatGPT 里，然后说：先阅读这个文档，然后帮我用这个库构建功能。

对于还没有 llms.txt 的库，你可以自己生成一份：复制这个库的 API 文档，粘贴给 Claude，然后说：请把这份文档整理成清晰的 llms.txt 格式：包括类、方法、必需参数和示例。控制在 5000 个 token 以内。

OpenSaaS 技术栈，也就是 Claude Code + Open SaaS boilerplate，就同时为 boilerplate 和 Wasp 框架使用了 llms.txt。这也是为什么与任意技术栈相比，在这种配置下 Claude Code 能生成明显更稳定代码的原因之一。

资源

llms.txt Official Standard（免费）
链接：https://llmstxt.org/
官方规范，列出了所有已经发布 llms.txt 文件的库和框架。

OpenSaaS：The Best Way to Vibe Code a SaaS in 2026（免费指南）
链接：https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/
这是一个真实案例，展示 llms.txt、SaaS boilerplate 和 Claude Code 如何结合，形成 2026 年最稳定的 Vibe Coding 配置之一。

Cursor Rules 和 CLAUDE.md：给 AI 的长期指令

Cursor Rules 和 CLAUDE.md 文件，是 Vibe Coding 中使用率最低、但投入产出比最高的实践之一。

它们是持久化指令文件，AI 会在每次会话开始时读取。它们定义了你的项目、约定、技术栈，以及 AI 绝对不能做什么。

2026 年的 Cursor 设置

Cursor 现在使用 .cursor/rules/ 目录，并通过单独的 .mdc 文件管理规则，取代了过去单一的 .cursorrules 文件。

规则有四种激活模式：

Always Apply
每次对话都会加载，不管上下文是什么。

Auto Attached（globs）
当引用匹配文件模式时自动激活，例如 *.tsx 文件。

Agent Requested（基于描述）
AI 根据任务描述判断什么时候应用。

Manual（@rule-name）
只有当你在提示词里明确引用它时才会加载。

好的规则设置应该包括什么

一个 .cursor/index.mdc 文件，用来说明项目概况、技术栈和通用约定，建议控制在 100 行以内；

在 .cursor/rules/ 中创建多个独立的 .mdc 文件，分别对应具体上下文，例如认证、数据库模式、UI 组件等；

在项目根目录放一个 CLAUDE.md 文件，写入同样的信息，供 Claude Code 使用。

资源

Vibe Coding Academy：Cursor Rules Complete Guide + 15 Templates（免费指南）
链接：https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide
这是 2026 年关于 Cursor Rules 最详细的指南之一，覆盖 .mdc 格式、四种激活模式，以及 15 个常见技术栈的可复制模板。

CLAUDE.md and Cursor Rules: Multiple Levels（YouTube，免费）
链接：https://www.youtube.com/watch?v=Ia54BXaci5o
深入讲解如何为 Cursor 和 Claude Code 设置多层规则，包含真实案例。视频发布于 2025 年中，但现在仍然完全适用。

How to Create and Use SKILLS.md in Cursor（YouTube，免费）
链接：https://www.youtube.com/watch?v=DfLL5_zbWGc
介绍 Cursor 的 skills 系统，发布于 2026 年 2 月。内容覆盖如何创建 .cursor/skills/ 文件，让 Agent 可以通过斜杠命令调用。

Cursor Directory（免费，社区）
链接：https://cursor.directory/
社区贡献的规则文件目录，覆盖大量技术栈。选择一个与你技术栈匹配的规则文件，然后再进行自定义。

Awesome CursorRules（免费，GitHub）
链接：https://github.com/PatrickJS/awesome-cursorrules
一个高质量规则文件精选仓库，按框架分类，并持续更新。

Sync Coding Rules: Cursor, Claude Code, and Windsurf（免费指南）
链接：https://www.concret.io/blog/sync-coding-standards-across-cursor-agentforce-vibes-claude
一种更高级的做法：通过硬链接，让一个主规则文件自动同步到所有 AI 工具中。

Spec-Driven Development：Vibe Coding 的专业化升级

Spec-Driven Development，也就是规格驱动开发，简称 SDD，是当 Vibe Coding 进入真实项目、需要扩展时出现的专业化方法。

这一方法由 JetBrains 在 2026 年 DeepLearning.AI 课程中正式提出。它强调：在让任何 Agent 写代码之前，先通过结构化规格文档定义系统应该做什么，并把这些文档直接放进代码仓库里。

Vibe Coding 通常会在项目进行到第 3 个月左右撞墙。模型开始生成与此前决策矛盾的代码；上下文不断累积；冲突模式开始出现；死亡循环随之到来。

Spec-Driven Development 试图解决这个问题：让 spec，也就是规格文档，而不是单次提示词，成为项目的事实源。

SDD 工作流

写规格文档
在任何代码出现之前，先精确描述系统行为：这个功能从外部看要做什么，它的输入、输出、边界情况和约束是什么。这里写的不是实现细节，而是可观察的行为。

生成需求
把规格文档交给 AI Agent，让它生成一份结构化需求文档。然后你来审查：它是否覆盖了所有内容？是否需要批准或修改？

创建设计文档
AI 将已经批准的需求转化为技术计划，其中包含具体的代码、测试和文档任务。在写下第一行代码之前，你需要先审查这份计划。

实现
AI 根据规格文档写代码，而不是根据一段模糊提示词自由发挥。重试逻辑、幂等处理、超时行为，这些都应该在规格文档里决定，而不是交给模型想象。

生成并运行测试
由于规格文档已经明确了输入、输出和边界情况，测试用例也可以直接从规格文档生成。

让 SDD 真正有效的文档结构

mission.md
说明你正在构建什么，以及为什么要构建它。

tech-stack.md
记录核心技术决策。

roadmap.md
按实现顺序拆分项目阶段。

specs/[feature-name]/plan.md
该功能的编号任务组。

specs/[feature-name]/requirements.md
该功能的范围、关键决策和上下文。

specs/[feature-name]/validation.md
成功标准和合并确认条件。

什么时候用 SDD，什么时候用纯 Vibe Coding

如果是原型、实验、概念验证，或者在这份路线图第 3–4 个月中探索方向，可以使用 Vibe Coding。

如果某个功能需要长期维护、项目有第二位贡献者参与，或者功能行为涉及商业或法律影响，就应该使用 SDD。

折中路径是：用 SDD 管好「宪法」，也就是使命、技术栈和架构；在这些边界之内，用 Vibe Coding 执行具体任务。

资源

Toward Data Science：From Vibe Coding to Spec-Driven Development（免费指南）
链接：https://towardsdatascience.com/from-vibe-coding-to-spec-driven-development/
目前最详细的 SDD 实践者指南之一，包含完整文档结构、plan → implement → validate 循环，以及如何把 spec 工作流自动化为 Claude Code skills。

GitHub Spec Kit（免费，开源）
链接：https://github.com/github/spec-kit
GitHub 官方开源的规格驱动开发工具包。提供模板、specify CLI，以及可与 Claude Code、GitHub Copilot 和 Gemini CLI 配合使用的结构化命令，包括 /specify、/plan 和 /tasks。支持 30 多种编码 Agent。

GitHub Blog：Get Started with Spec-Driven Development（官方免费指南）
链接：https://github.blog/ai-and-ml/generative-ai/spec-driven-development-with-ai-get-started-with-a-new-open-source-toolkit/
GitHub 官方对 Spec Kit 的使用介绍，包括四个阶段：Specify → Plan → Tasks → Implement，如何安装 specify CLI，以及如何用 /speckit.constitution 建立项目治理原则。

JetBrains Course：Spec-Driven Development with Coding Agents（DeepLearning.AI 免费课程）
链接：https://www.deeplearning.ai/courses/spec-driven-development-with-coding-agents/
使这一方法论正式成型的课程。覆盖完整的计划、实现、验证循环，以及如何在 Claude Code 中把 SDD 工作流自动化为可复用技能。

Test Collab：From Vibe Coding to Spec-Driven Development（免费指南）
链接：https://testcollab.com/blog/from-vibe-coding-to-spec-driven-development
不绑定具体工具的 SDD 解释文章，包含真实案例，并说明 CLAUDE.md、Cursor Rules 和 GitHub Copilot PRD 工作流如何实现同一底层模式。

Red Hat：Vibes, Specs, Skills, and Agents; The Four Pillars of AI Coding（免费指南）
链接：https://developers.redhat.com/articles/2026/03/30/vibes-specs-skills-agents-ai-coding
一个更高级的框架：用 vibe 做探索，用 spec 保证精确，用 skill 封装可复用的 Agent 能力，用 agent 执行任务。这是理解专业 AI 辅助开发较完整的心智模型之一。

每个专家级 Vibe Coder 都在使用的 18 条实践

这些实践直接来自 r/ClaudeAI 和 r/PromptEngineering 社区，并结合 2025–2026 年的实践者经验进行了验证。

从详细愿景开始
在打开任何工具之前，先把你想做什么完整写出来。

大量使用 Git 和分支
每一次功能实验都创建一个新分支。

维护一个 instructions 文件夹
建立 /docs 或 /instructions 目录，用 Markdown 文件记录你的架构、组件和决策。

把功能拆成多个阶段
不要一次性要求 AI 做完整功能。把它拆成 3–5 个提示词逐步完成。

上下文过长时，开启新对话
长对话会降低输出质量。开发新功能时，最好重新开始一个会话。

每个提示词都引用具体文件
明确告诉 AI 应该查看哪些文件。

不要塞入过多上下文
只提最相关的文件，不要把所有内容都丢进去。

引用已有组件
当你要求 AI 创建新组件时，指向一个已有组件作为风格参考。

用 Gemini 3.5 Pro 做第二审查者
把生成代码复制给 Gemini，让它检查安全漏洞或不良模式。

始终在服务端验证和清洗数据
永远不要信任客户端提交的数据。

把密钥放在服务端
使用环境变量，绝不要把 API Key 放进前端代码。

显式处理错误
从控制台复制错误信息，然后粘贴给 AI。

如果修复失败三次，就重新审视你的提示词
不要用同一个有问题的提示词要求 AI 尝试第四次。

让 AI 加日志
调试时，不要靠猜。要求 AI 在关键节点添加 console.log。

明确范围
在每个提示词里加入：「不要修改我没有要求修改的任何内容。」

维护一个「Common AI Mistakes」文件
记录 AI 反复犯的错误，并在开始新功能时引用它。

先要计划，不要直接要代码
永远先让 AI 给出计划，经过你批准后再开始实现。

让 AI 解释陌生代码
不要接受你完全看不懂的代码。在继续之前，先让 AI 解释清楚。

第 3 个月里程碑

到这个月结束时，你应该能够：

写出结构化提示词，并在第一次尝试时获得稳定输出；

使用 PRP 框架，在构建任何应用之前先完成规划；

为任意项目设置 Cursor Rules 和 CLAUDE.md；

习惯性应用以上 18 条专家实践；

为自己的项目维护一个可用的「Common AI Mistakes」文件。

第 4 个月：构建真实项目，从想法到上线产品

这个月的目标是：构建 2–3 个完整项目，从想法推进到真实上线 URL。这些项目将成为你的作品集。

教程 Demo 和真实产品之间的差距，正是大多数 Vibe Coder 永久停滞的地方。真实产品有用户，会以意想不到的方式出问题，需要数据库和身份认证，也必须能在移动端正常运行。这个月的重点，就是补上这段差距。

1、真正值得构建的项目

忘掉习惯追踪器，忘掉天气应用。最好的 Vibe Coding 项目，往往是范围很窄、非常垂直，并且能为某一类具体人群解决一个明确痛点的产品。

下面这些是真实想法：有些已经被 2026 年的独立开发者拿来变现，有些已经有人实际做出来了。它们都不是千篇一律的模板项目。

初级：先真正动手做起来（第 3–4 个月）

这些项目流程单一、边界清晰，有真实使用场景，通常可以在一个周末做出来，而且不只是 Demo，而是真的有用。

Reddit Diss Track Generator

这个工具通过 PRAW（Python Reddit API Wrapper）连接 Reddit API，从任意帖子中抓取评论，识别其中最精彩的嘲讽和攻击性表达，再用 LLM 把它们串成歌词，最后通过文本转语音和基础音频编辑输出一个 .wav 文件。

它很奇怪、很好笑、也很适合传播，正是那种容易在 Twitter 上获得关注的项目。

你能学到：第三方 API 集成、LLM 链式调用、音频文件生成。

AI Meeting Brief Generator

在会议开始前，用户输入公司名称和会议目的。工具会抓取该公司官网和 LinkedIn 信息，读取你与对方最近一封邮件往来（通过 Gmail API），然后生成一页会议简报，包括谈话要点、关键风险和建议问题。

你能学到：多源数据抓取、提示词链路、API 认证。

变现方式：面向顾问和客户经理，每月 19 美元。尤其适合每周有 5 次以上客户电话的人。

AI Changelog Writer

这个工具通过 GitHub API 连接一个 GitHub 仓库。每周读取最近的 commit，提取发生了哪些变化，并自动写成一篇清晰、面向客户的更新日志。

开发者通常不喜欢写 changelog，这个工具可以把这件事自动化。

你能学到：GitHub API、结构化 LLM 输出、定时任务。

目标用户非常明确：独立创始人和开发团队。

Freelance Invoice Chaser

这是一个为自由职业者设计的工具，解决他们不想追讨逾期付款的问题。

它可以集成 Stripe，或者使用手动录入的发票数据。系统会按照预设时间表自动发送礼貌但逐步升级的付款提醒邮件。发票逾期越久，语气越坚定，并且会记录所有操作。

你能学到：通过 Resend/Nodemailer 发送邮件、cron 定时任务、Stripe webhook 处理。

这是一类自由职业者一看就会想要的工具。

StickyCanvas：一个不像 Notion 的笔记工具

这是一个真实项目，创作者每天都在使用。

它是一个极简画布，用户可以自由拖动便利贴。没有文件夹、没有标签、没有层级结构。它的全部价值主张就是：足够简单。

没有菜单，没有命令，也没有 Notion 那种复杂性。只有一块画布和一些笔记。

你能学到：拖拽交互、画布交互、本地存储。

这个项目一个周末就可以上线。

中级：能吸引注意力的作品集项目（第 4–5 个月）

这些项目需要数据库、用户认证和真实设计，能够展示你的产品思维。

面向特定行业的垂直 AI 聊天机器人

这不是一个通用聊天机器人，而是一个针对某一类具体业务知识库训练出来的聊天机器人。

选择一个垂直领域：牙科诊所、汽车维修店、房地产中介、瑜伽馆。构建一个能回答预约问题、价格问题和常见问题的聊天机器人，然后把部署服务卖给这类商家。

一些独立开发者反馈，这类垂直项目每月可以从单个细分市场获得 850–3200 美元收入。

你能学到：RAG 管线、Supabase 向量搜索、可嵌入 widget、多租户架构。

Proposal Version Tracker

这是一个面向自由职业者和代理公司的工具，用来追踪发给客户的每一版销售提案。

它可以显示哪一版被打开了、客户看了多久，并在客户重新打开提案时发送通知。客户重新打开提案通常意味着他们又开始认真考虑了。

你可以把它理解为：专门为 proposal 做的 DocuSign analytics。

你能学到：PDF 上传与存储、邮件打开追踪、实时通知、Supabase 数据库设计。

Screenshot-to-React Component Converter

用户上传任意 UI 截图，比如落地页、竞品应用界面，或者他们截下来的 Figma 设计图。

工具会把截图发送给视觉模型，比如 GPT-5.5 或 Claude，然后生成一个干净的 React + Tailwind 组件，尽量匹配原始布局和样式。

你能学到：视觉模型 API、图片上传、多模态模型的结构化输出。

这个工具对开发者真的有用，而且很容易支撑每月 25 美元的定价。

Water Pipeline / Infrastructure Map Tool

这是 Vibe Coding subreddit 上有人真实做过的项目：一个交互式地图工具，让市政或公用事业团队可以绘制水管和流域，添加维修历史、成本和维护日志，并按日期或位置搜索和筛选。

这种定制化运营工具往往有几个特点：垂直、略显无聊、但极其有用。B2B 买家会毫不犹豫地为这类工具付费。

你能学到：使用 Mapbox 或 Leaflet 渲染地图、在 Supabase 中存储地理空间数据、重表单 UI、文件上传。

Gamified Family Chore App

这个项目的创作者一开始并不打算发布它，只是因为自己家里需要，就在一个周末做了出来。一个月后，已经有 100 多个家庭在使用。

这个应用可以把家务分配给家庭成员，完成任务后获得积分，积分可以解锁由家长设置的奖励。技术栈是 FastAPI + PostgreSQL + PWA。

它的经验很简单：为你自己真实遇到的问题构建产品。

这样做出来的东西发布得更快，也更真实。因为你本身就是用户之一，其他真实用户也更容易找到它。

高级：证明真实能力的复杂项目（第 5–6 个月）

这些项目足够复杂，需要合理架构、上下文工程和多会话构建。每一个都可以成为真正的产品，而不是 Demo。

VC Investor CRM

这是一个专门为风险投资人或天使投资人设计的交易追踪 CRM。

它可以追踪创业项目交易、管理关系历史、自动总结对话，并用 LLM 根据自定义投资 thesis 给公司打分。

关键洞察在于：现成 CRM，比如 Salesforce、HubSpot，是为销售团队设计的，而不是为投资人设计的。两者的心智模型完全不同。

为现有工具忽视的某一类特定用户构建产品，是最有可能产生收入的路径之一。

Basketball Management Simulation Game

一个完整的浏览器端篮球经营模拟游戏，真实项目案例是 azario.floot.app。

玩家可以建立自己的篮球队，通过训练计划提升球员能力，在实时市场中与其他玩家交易，并通过实时比分逻辑模拟比赛。

你能学到：复杂状态管理、游戏模拟算法、多用户实时数据、排行榜。

这类项目能展示真正的工程野心。

AI-Powered Speech Therapy App（Aphasio）

这是一个使用 Cursor 构建、面向中风后失语症患者的 iPhone 应用。

应用会提供 AI 生成的语言训练内容，用户练习朗读单词和句子，App 会监听并评估发音，再根据表现动态调整难度。

创作者之所以做这个项目，是因为家人真的需要它。

你能学到：语音识别 API、自适应练习生成、移动端构建（React Native）、进度追踪云端存储。

这是那种真正有意义的项目。

PDF Accessibility Tool for Visual Impairments

这是一个 AI 工具，可以把任意 PDF 转换成对视觉障碍人士真正可访问的版本。

它不只是基础文本提取，而是会把复杂表格和图表改写成通俗语言描述，为嵌入图片生成 alt text，添加合理阅读顺序，并输出可访问的 HTML 或 EPUB 版本。

你能学到：PDF 解析（PyMuPDF 或 pdfplumber）、用于图表描述的多模态 AI、可访问 HTML 输出。

这个方向不仅有 SaaS 变现潜力，也可能获得资助或机构采购。

项目发现资源

r/vibecoding：Show Me Your Awesome Projects（免费，Reddit）
链接：https://www.reddit.com/r/vibecoding/comments/1rl5ccj/show_me_your_awesome_vibe_coded_projects/
真实社区展示，都是已经上线的 Vibe Coding 项目。适合寻找灵感，也能看到项目范围和难度的真实情况。

r/vibecoding：What Is Your Most Unique Vibe Coded Project?（免费，Reddit）
链接：https://www.reddit.com/r/vibecoding/comments/1rxjc3u/what_is_your_most_unique_vibecoded_project/
这里有一些真正奇怪且有创意的项目，包括 diss track generator、PDF 可访问性工具，以及一个 30 天内做出的地理空间数据库。

DodoPaments：30 Profitable Micro SaaS Ideas for 2026（免费指南）
链接：https://dodopayments.com/blogs/micro-saas-ideas-2026
提供 30 个经过验证的 Micro SaaS 想法，包括市场规模、MRR 潜力、启动成本和变现路径。每个项目都适合独立开发者构建。

SuperFrameworks：Vibe Coding Hits a Tipping Point（免费指南）
链接：https://superframeworks.com/articles/vibe-coding-tipping-point-what-founders-need-to-know
列出 7 个具体细分市场，独立开发者已经通过 Vibe Coding 产品每月获得 500–3200 美元收入，并附有实际收入数字。

IdeaProof：50 Micro-SaaS Ideas for Solo Founders in 2026（免费）
链接：https://ideaproof.io/lists/micro-saas-ideas
每个想法都包含技术难度评级、启动成本估算（1000–15000 美元）和具体市场缺口分析。是目前最具可操作性的想法清单之一。

Cursor Forum：Built with Cursor in 2025（免费，社区）
链接：https://forum.cursor.com/t/built-with-cursor-in-2025-share-your-projects/147737
Cursor 官方论坛的项目展示帖。都是真实项目、真实构建者，也会诚实分享困难在哪里。

2、Plan-Review-Fix 循环：专业构建方式

大多数新手 Vibe Coder 采用的是「提示 → 接受 → 再提示 → 再接受」的循环。

这对 20 行代码可能有用，但如果是真实产品里的真实功能，就会灾难性失败。

专业人士使用的是 Plan-Review-Fix 循环，其中有三个不同角色：你、编码 Agent，以及一个独立 AI 审查者。

工作流

先规划。
在写任何代码之前，先让 AI 列出：它将创建或修改哪些文件、会添加哪些函数、需要哪些依赖，以及可能存在的边界情况。

明确告诉它：不要写任何代码，只展示计划。

然后你来审查计划，并进行修改。

实现。
计划批准后，再让 AI 写代码。

审查。
把生成的代码复制出来，粘贴到一个新的 Gemini 3.5 Pro 会话中。选择它是因为它有非常大的上下文窗口。让它扮演资深安全工程师和代码审查者，检查 Bug、安全漏洞、幻觉生成的包名，以及糟糕模式。

修复。
把审查者的发现反馈给编码 Agent，持续迭代，直到结果干净。

资源

ProductTalk：Vibe Coding Best Practices; Avoid the Doom Loop（免费指南）
链接：https://www.producttalk.org/vibe-coding-best-practices/
关于「死亡循环」和 Plan-Review-Fix 循环最详细的指南之一，包含实用案例。

5 Vibe Coding Workflows That Actually Ship Production Code in 2026（免费指南，dev.to）
链接：https://dev.to/dohkoai/5-vibe-coding-workflows-that-actually-ship-production-code-in-2026-1nmn
介绍使用 Claude Code、Cursor 和 Windsurf 交付真实生产代码的实践流程，而不是 Demo。内容覆盖测试驱动方法、上下文加载模式和真实成本数据。

3、每个 Vibe Coder 都必须掌握的安全基础

AI 生成的代码会反复出现一些可预测的安全问题。你不需要成为安全专家，但你必须知道这些模式存在，并在任何产品上线之前养成检查习惯。

Vibe Coder 安全清单

API Key 和密钥
所有密钥都应该放在 .env.local 里。这个文件必须在第一次 push 之前加入 .gitignore。没有例外。

服务端验证
始终在服务端验证和清洗所有用户输入。AI 经常会跳过这一步。

认证模式
Supabase 默认就能正确处理认证。如果你要自定义认证，请使用经过充分验证的成熟库。

CORS 配置
让 AI 解释它生成了哪些 CORS 设置，以及为什么这么设置。错误的 CORS 配置是 AI 常见问题。

依赖审计
在部署前，让 AI 检查是否存在已知漏洞依赖，或者是否出现了幻觉生成的包名。AI 偶尔会编造不存在的包名。

Prompt Injection
如果你的应用会把用户输入传给 LLM，用户就可能尝试劫持系统提示词。你需要阅读 OWASP 指南。

资源

OWASP Top 10 for LLM Apps: Prompt Injection（免费）
链接：https://genai.owasp.org/llmrisk/llm01-prompt-injection/
这是关于 Prompt Injection 的权威参考，也是 LLM 应用中的第一大安全风险。内容覆盖直接和间接注入攻击，以及防御模式。

OWASP API Security Top 10（免费）
链接：https://owasp.org/API-Security/
API 安全风险的权威清单。在上线任何接受用户数据的产品之前，都应该理解这些内容。

Clarifai：Vibe Coding Best Practices and Security（免费指南）
链接：https://www.clarifai.com/blog/vibe-coding-explained
针对 AI 生成代码的分步骤安全清单，并提供具体提示策略，帮助你让 AI 构建得更安全。

Cycode MCP Server：Secure AI Code in Real Time（免费）
链接：https://cycode.com/blog/introducing-cycodes-mcp-server/
Cycode 的 MCP server 可以直接集成到 Cursor 和 Windsurf 中，作为实时安全扫描器，在不离开 Vibe Coding 工作流的情况下检查 AI 生成代码。

4、Supabase：你的全栈后端

Supabase 值得单独拿出来讲，因为它是 Vibe Coder 构建真实产品时最重要的基础设施之一。

它提供 Postgres 数据库、身份认证、文件存储和实时订阅，所有能力都可以通过 JavaScript SDK 调用，而且不需要管理服务器。

资源

Supabase：The Vibe Coder's Guide to Environments（官方免费指南）
链接：https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments
这篇文章专门为 Vibe Coder 写作。内容覆盖如何设置开发环境与生产环境、数据库迁移，以及初学者最严重的错误：直接在真实线上数据上测试。

Supabase YouTube Channel：Quickstart Guides（免费）
链接：https://www.youtube.com/@Supabase
每个主要功能都有简短实用的视频指南，例如认证、数据库、存储、实时功能。每个视频大约 5–10 分钟。

Supabase Migrations Docs（官方免费）
链接：https://supabase.com/docs/guides/deployment/database-migrations
把每一次数据库 schema 变更都当作 migration，而不是直接编辑数据库。这是避免灾难性数据丢失的关键。指南中也包含回滚脚本。

5、编码 Agent 的 9 种失败模式：你的项目会在哪里出问题

哥伦比亚大学 DAPLab 的研究人员发布了迄今为止最严谨的 Vibe Coding 失败模式研究。他们在相同任务中分析了 Cline、Claude、Cursor、Replit 和 v0，最终发现了 9 种关键失败模式。

其中最常见、也最危险的两种是：

静默失败
代码看起来能运行，也没有报错，但实际并没有完成你要求的事情。终端没有红色报错，程序没有崩溃，只是行为错误，而且通常很久之后才会被发现，甚至可能已经进入生产环境。

业务逻辑失败
模型正确实现了某个机制，但误解了真实意图。比如连续打卡计数器在一个你忘记明确说明的条件下被重置；发票总额没有包含本应计入的税费。这类错误对真实产品可能是灾难性的。

研究人员识别出的另外 7 种模式包括：

错误处理缺口
出现类似 try {... } catch (e) {} 的写法，完全吞掉错误，也不记录任何日志。

过度编辑范围
Agent 修改了你没有要求它动的文件，导致其他功能损坏。

陈旧上下文漂移
随着对话变长，模型逐渐忘记你的项目约定。

自我合理化测试 mock
测试只是在测试 AI 自己写出来的 mock，而不是测试真实行为。结果是测试通过率 100%，但实际覆盖率为零。

巨型组件蔓延
一个文件超过 600 行，包含 10 多个 useState，几乎无法维护。

规则盲区
Agent 把你的约束当作偏好，而不是规则。它会遵守这些约束，直到它找到一个理由不遵守。

透明度缺口
当事情失败时，当前工具几乎无法让你看清 Agent 原本想做什么、在哪里出错。

针对规则盲区，研究给出的修复方式是：把你的 CLAUDE.md 和规则文件当成强制合约，而不是建议。

你需要加入明确的失败条件，比如：

如果这张表没有 RLS policy，就停止并询问我，不要继续执行。

6、测试：大多数 Vibe Coder 跳过后都会后悔的技能

如果没有结构化 QA 流程，Vibe Coding 应用积累技术债的速度，大约是传统开发软件的三倍。这一结论来自 ICSE 2026 对 101 个 AI 辅助开发相关来源的元分析。

现实结果是：一个看起来「能用」的 Vibe Coding 应用，如果后续需要专业重构，成本通常会达到 5000–30000 美元。

解决办法不是停止使用 AI，而是让 AI 在写功能的同时写测试。

测试优先的 Vibe Coding 方法

在写功能代码之前，先让 AI 为预期行为写测试。这会迫使你更精确地定义功能行为，也会立刻改善功能代码质量。运行测试，看着它失败。然后让 AI 写出能让测试通过的代码。每次重大变更之后，都让 AI 运行 npm test。失败测试就是防止回归的反馈循环。

70/30 规则

这是一个实用准则，用来判断哪些工作最适合交给 AI。

70% 适合 AI 辅助：
样板代码、CRUD 操作、表单验证、为现有代码写测试、写文档、基于清晰模式重构、格式转换（JSON → TypeScript）、正则表达式、一次性脚本。

30% 应该由人类主导：
系统架构决策、安全关键代码（认证、加密、支付）、复杂竞态条件、新问题领域、性能关键算法、法律与合规逻辑。

如果你 95% 都交给 AI，大概率会发布 Bug。如果你只用 AI 完成 20%，则说明你浪费了大量生产力。

资源

Testomat：8 Best AI Testing Tools for Vibe Coders（免费指南）
链接：https://testomat.io/blog/best-ai-testing-tools-for-vibe-coders/
这是 2026 年关于 Vibe Testing 工具最完整的指南之一，覆盖 Vitest、Playwright 和 AI 原生 QA 工具。

Vibe Testing with Playwright + MCP（免费指南，Tim Deschryver）
链接：https://timdeschryver.dev/blog/vibe-testing-with-playwright
介绍如何在 Cursor 或 VS Code Copilot 中使用 Playwright MCP server，通过自然语言编写并运行浏览器测试。Playwright 错误标签里的「copy as prompt」按钮，可以让你直接把失败测试粘贴给 AI Agent。

AI Vibe Coding Notes from the Basement（免费指南，Awesome Testing）
链接：https://www.awesome-testing.com/2025/04/ai-vibe-coding-notes-from-the-basement
这是关于 TDD-first Vibe Coding 最详细的实践者指南之一。内容包括用 o1 规划、用 Cursor + Sonnet 4.6 执行、持续运行测试作为反馈循环，以及使用 gitingest 把代码库压平成单个文件，供思考模型进行推理。

Playwright Codegen（官方免费）
链接：https://playwright.dev/docs/codegen
运行：

npx playwright codegen

然后像普通用户一样在浏览器里点击你的应用。Playwright 会记录每一次点击，并自动生成 Playwright 测试文件。这是最快写出浏览器测试的方法之一。

Vitest Official Docs（免费）
链接：https://vitest.dev/
这是 2026 年 Vite 系 Next.js 项目的标准单元测试框架。它速度快，兼容 Jest，并且原生支持 TypeScript。

第 4 个月里程碑

到这个月结束时，你应该已经拥有：

2–3 个完整且已部署的项目，并且它们都有真实线上 URL；

至少一个项目具备用户认证和 Supabase 数据库；

每个重要功能都同步或提前写好了测试；

Plan-Review-Fix 工作流已经嵌入你的构建习惯；

安全审查成为每次部署前的标准步骤；

GitHub 主页上至少有 3 个真实仓库。

第 5 个月：上下文工程与 MCP，区分「优秀」和「顶尖」的元技能

这个月的目标是：掌握上下文工程，也就是在正确的时间，向 AI 提供恰到好处的信息，让它能够持续产出高质量、架构一致的结果。

上下文工程，是区分普通 Vibe Coder 和优秀 Vibe Coder 的关键。前者往往会做出混乱、不一致的代码库；后者则能构建干净、可维护的产品。随着项目规模扩大，上下文管理会成为你最重要的能力。

1、上下文工程到底是什么？

上下文工程，是在每次提示词之前和执行过程中，有意识地塑造进入 AI 上下文窗口的信息。

它不是某一个单独技巧，而是一套系统。这个系统包括你的规则文件、项目文档结构、提示词中引用的文件、代码库组织方式，以及你如何处理 AI 的上下文长度限制。

上下文不足的 AI，会生成不一致、过时、甚至互相冲突的代码。上下文优秀的 AI，则能生成完全符合项目模式的代码，理解你的架构，并避开已知错误。

2026 年的上下文工程技术栈

.cursor/rules/ + CLAUDE.md
项目级长期指令，第 3 个月已经讲过。

/docs 或 /instructions 文件夹
用 Markdown 文件记录关键架构决策、组件模式和第三方集成。

功能规格文件
每个主要功能对应一份 Markdown 文件，说明它做什么、如何连接系统其他部分，以及有哪些约束。

示例文件
在提示词中引用现有组件，把它们作为风格参考。

后台开发服务器
将 npm run dev 作为后台任务运行，让 AI 在构建过程中实时看到编译错误和服务端日志。

通过 MCP 进行浏览器自动化
例如 Chrome DevTools MCP 或 Vercel 的 agent browser，让 AI 不需要截图，也能看到真实渲染效果、控制台错误和网络请求。

资源

NXCode：Agentic Engineering; The Complete Guide to AI-First Software Development（免费指南）
链接：https://www.nxcode.io/resources/news/agentic-engineering-complete-guide-vibe-coding-ai-agents-2026
Karpathy 在 2026 年初提出「agentic engineering」一词，用来描述从随意 Vibe Coding 走向专业化 AI 辅助开发的演进。这份指南覆盖完整的 PEV 循环，也就是 Plan → Execute → Verify，上下文架构和质量门禁。发表于 2026 年 3 月。

10 GitHub Repositories to Master Vibe Coding（免费指南，KDnuggets）
链接：https://www.kdnuggets.com/10-github-repositories-to-master-vibe-coding
精选了一批最有用的 GitHub 仓库，覆盖上下文工程、工作流模板、规则手册配置等内容。

Awesome Vibe Coding（免费，GitHub）
链接：https://github.com/filipecalegario/awesome-vibe-coding
目前最完整的 Vibe Coding 参考资料、工具、指南与资源精选清单之一。

2、MCP：Model Context Protocol

MCP，全称 Model Context Protocol，是由 Anthropic 创建的开放标准，用来让 AI 工具连接外部数据源，例如数据库、API、实时数据、外部文档和第三方服务。

现在，MCP 已经被 Cursor 3.0、Claude Code 和 Windsurf 原生支持。其中 Cursor 3.0 可通过 Marketplace 使用。

理解 MCP，意味着你进入了 Vibe Coding 的下一层：Agent 不再只是写代码，而是可以查询你的真实数据、实时查找文档、与第三方服务交互，并在外部系统中执行操作。

MCP 在实际使用中是什么样？

Stripe MCP server
让你的 Agent 可以读取和创建 Stripe 发票。

Supabase MCP
让你的 Agent 在开发过程中查询实时数据库。

Figma MCP
让 Cursor Agent 读取你的设计文件，并据此实现组件。

GitHub MCP
让 Agent 创建 issue、打开 PR、管理工作流。

Qdrant MCP
让 Agent 访问向量数据库，用于构建支持 RAG 的应用。

资源

MCP Official Introduction（Anthropic 官方免费文档）
链接：https://modelcontextprotocol.io/introduction
Model Context Protocol 的官方文档和规范。

Building Your First MCP Server with Vibe Coding（免费指南）
链接：https://www.qpython.com/building-your-first-mcp-server-with-python-and-vibe-coding-pk/
用 Cursor 构建第一个 MCP server 的实操教程，让 AI 能够从外部来源拉取实时上下文。

Build Your MCP Server in 5 Minutes with Vibe Coding（免费指南，Claranet）
链接：https://www.claranet.com/uk/blog/build-your-mcp-server-just-5-minutes-using-vibe-coding-kiro/
最快速的 MCP server 动手教程之一。

Vibe Coding RAG with Qdrant's MCP Server（免费，Qdrant）
链接：https://qdrant.tech/blog/webinar-vibe-coding-rag/
介绍如何使用 Qdrant 的 MCP server，让 Cursor 和 Claude Code 在构建过程中直接访问向量数据库。

Cursor Marketplace（应用内）
链接：https://cursor.com/marketplace
可以浏览并安装预构建 MCP server 插件，包括 AWS、Figma、Linear、Stripe、Vercel、Datadog 等，均可在 Cursor 3.0 中一键安装。

3、Figma to Code：专业 Vibe Coder 使用的设计工作流

如果你希望产品不只是「能用」，而是看起来足够精致，那么 Figma → Code 工作流就是 Vibe Coder 工具箱里杠杆最高的设计能力。

与其用文字描述界面，不如先在 Figma 中做出视觉设计，再通过 Figma MCP，让 AI 直接从设计文件中生成匹配的代码。

工作流

先将 Figma MCP 连接到 Cursor 或 Claude Code。可以在 Cursor Marketplace 中安装 Figma 插件。

然后在提示词中引用 Figma 文件：

研究这个 Figma 文件中的 design tokens。提取调色板、字号和间距，并整理成 Tailwind config。先不要写组件。

等 design tokens 确立后，再引用具体组件：

根据 Figma 设计生成 Navbar 组件。精确匹配间距、字体排版和 hover 状态。使用 Tailwind CSS，只写 TypeScript。

按区块逐步构建，并始终引用 Figma 文件中的尺寸和布局逻辑。

一个关键建议

即便不用 Figma MCP，初学者也可以采用一个更快的替代方式：先用 Canva 做页面草图。

在打开任何构建工具前，花 30 分钟在 Canva 里画一下布局。这会迫使你先回答几个问题：每个页面有什么内容？导航放在哪里？每个区块包含什么？

这样可以在写第一条提示词之前，就提前消除大量不确定性，也能省下后续几个小时的纠错提示。

资源

Figma MCP + Cursor: The New AI Design System Workflow（YouTube，免费）
链接：https://www.youtube.com/watch?v=09VgyFFLrOw
完整演示如何通过 MCP 把 Figma 连接到 Cursor，导入 design tokens，并生成精确符合 Figma 规格的组件。发布于 2025 年 11 月。

Claude Code × Figma MCP: The Designer's Playbook（免费指南，ADPList）
链接：https://adplist.substack.com/p/how-to-build-with-figma-mcp-the-designers
作者以设计师身份进行了 100 天 Vibe Coding 后，总结出一套较顺畅的 Figma → Claude Code → 生产级 React 组件工作流。包含可直接复制使用的提示词模板，用于提取 design tokens 和生成响应式区块。

Figma Make（官方，有免费层级）
链接：https://www.figma.com/solutions/vibe-coding-tool/
Figma 原生 Vibe Coding 工具。可以直接在 Figma 中用自然语言描述 UI 或原型，生成交互式原型，并导出干净代码。可与 Figma MCP 集成，供外部 Agent 使用。

Anima：Vibe Code With Your Figma Design System（有免费层级）
链接：https://www.animaapp.com/blog/design-systems/vibe-code-with-your-figma-design-system/
把 Figma 设计系统导入 Anima，再生成遵循 design tokens 的 React 组件。输出内容可以通过 Anima MCP 交给 Claude Code 或 Cursor 继续处理。

Muzli：Complete Vibe Coding Guide for Designers（免费指南）
链接：https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/
面向非开发者构建 AI 生成产品的完整指南，覆盖设计系统提示词、提示词中的视觉参考，以及如何在 Vibe Coding 组件中保持品牌一致性。

4、为产品加入 AI 功能：Vercel AI SDK

如果你想构建「使用 AI 的产品」，而不只是「用 AI 构建产品」，那么在 Next.js 技术栈中，Vercel AI SDK 是最快、最干净的选择之一。

资源

Vercel AI SDK Documentation（官方免费文档）
链接：https://sdk.vercel.ai/docs
官方参考文档。它通过统一接口支持 20 多家 AI 提供商，包括 OpenAI、Anthropic、Google、Mistral、Groq 等。内置 React hooks，例如 useChat、useCompletion，并支持流式输出、工具调用和结构化生成。

AI SDK V5 Tutorial Series（YouTube，免费）
链接：https://www.youtube.com/playlist?list=PL4cUxeGkcC9h2NkvFCBO4kvA4Y9wiDrIO
一套关于使用 Vercel AI SDK 构建 Next.js AI 应用的多集教程。第 1 集介绍和第 2 集项目配置于 2025 年 8 月发布，覆盖完整搭建流程。

Build a Streaming AI Chat App with Vercel AI SDK and Next.js（免费指南，dev.to）
链接：https://dev.to/nikolasbarwicki/build-a-streaming-ai-chat-app-with-vercel-ai-sdk-and-nextjs-10f6
从零开始构建流式 AI 聊天应用的分步骤代码教程。

这个月可以做什么？

从你第 4 个月做出的项目中选一个，用 Vercel AI SDK 加入一个 AI 功能。例如：给笔记应用加入 AI 自动标签；给习惯追踪器加入一个「询问你的习惯数据」的 AI 助手；根据用户粘贴的文本自动生成 AI flashcards。

5、RAG：让 AI 基于你的文档回答问题

RAG，全称 Retrieval-Augmented Generation，也就是检索增强生成。它是大多数严肃企业级 AI 应用背后的核心能力，例如客服机器人、内部知识库、文档问答工具。

对于想走「AI 产品工程师」路线的人来说，RAG 也是最热门、最有需求的技能之一。

核心概念很简单：不要让 LLM 仅凭训练数据回答问题，而是先从你自己的文档中检索相关片段，再把这些片段放进提示词里，让模型基于你提供的信息回答。

资源

LlamaIndex：Introduction to RAG（官方免费文档）
链接：https://developers.llamaindex.ai/python/framework/understanding/rag/
覆盖五个关键阶段：加载、索引、存储、查询和评估。

LlamaIndex Starter Tutorial（官方免费文档）
链接：https://developers.llamaindex.ai/python/framework/getting_started/starter_example/
用不到 30 行代码构建一个可运行的 RAG 系统。

LangChain Tutorial For Beginners（2026 Guide）（YouTube，免费）
链接：https://www.youtube.com/watch?v=AOQyRiwydyo
一套完整的 2026 年 LangChain 课程，覆盖 Agents、RAG，以及用于基于数据构建 AI Agent 的 ReAct Agent 框架。

Building Efficient RAG Applications with LangChain and LlamaIndex（YouTube，免费）
链接：https://www.youtube.com/watch?v=D7YwcDJ75lQ
通过真实代码案例，对 LangChain 和 LlamaIndex 在 RAG 场景中的使用方式进行横向对比。

How to Choose an AI Agent Framework（LangChain vs. LlamaIndex）（免费指南）
链接：https://workforcenext.in/blog/how-to-choose-ai-agent-framework/
发表于 2026 年 4 月的坦诚拆解。建议是：如果最难的是检索问题，用 LlamaIndex；如果你需要更广泛的生态和生产级编排能力，用 LangChain / LangGraph。

6、Token 成本与预算管理：没人会提前告诉你，直到账单来了

在单次调用层面，低成本模型和前沿模型之间可能有 30 倍的成本差距。

如果你的生产应用每一次请求都调用 GPT-5.5 或 Claude Sonnet 4.6，账单很可能会在你注意到之前，从每月 20 美元膨胀到几百美元。

据称，Uber 曾在 2026 年仅用四个月，就因为大量使用长上下文 Claude Code 会话，耗尽了全年 AI 编程预算。

其中的数学逻辑很简单：上下文长度会线性推高成本。而 Claude Code 会话如果被赋予完整代码库，很快就会积累到 25 万到 50 万 token。

实用成本管理规则

先设置硬性支出上限
在任何面向公众的 AI 功能上线之前，先在 OpenAI 和 Anthropic 后台设置每月额度上限。上线之前就要做，不要等上线之后。

按任务复杂度分流模型
分类、标签、摘要和格式化任务，可以使用 claude-haiku 或 gpt-5.5-mini。只有推理难度较高的任务，才保留给 Sonnet 4.6、Opus 4.6 或 GPT-5.5。

对于简单任务，便宜模型往往能给出几乎相同质量的输出，但成本可能相差 10 倍。

在 Claude Code 中使用 /compact 命令
当上下文变长时，在开始大型任务前手动运行 /compact。Claude Code 会自动压缩上下文历史，通常可减少 60%–80%，显著降低下一次调用的 token 数量。

保持较短上下文窗口
上下文长度每翻一倍，成本大致也会翻一倍。开发新功能时，最好开启新对话，而不是一直延续旧对话。

缓存重复的相同提示词
Anthropic 的 prompt caching 对缓存命中的输入 token 只收取 10% 价格。对于每次调用都会重复的系统提示词或 CLAUDE.md 文件，这会长期累积出明显节省。

添加支出提醒
在月度额度达到 50% 和 80% 时设置账单提醒，避免某个 bug 或循环调用在你发现前跑出意外账单。

资源

MindStudio：AI Agent Token Budget Management in Claude Code（免费指南）
链接：https://www.mindstudio.ai/blog/ai-agent-token-budget-management-claude-code/
详细拆解 Claude Code 如何处理 token 预算，包括硬性上下文限制、在可配置阈值下自动压缩，以及昂贵操作执行前的预算检查。这些模式也可以被应用到任何 LLM 产品中。

HackerNews：The Real Cost of Claude Code（免费，HN 讨论帖）
链接：https://news.ycombinator.com/item?id=47976415
真实工程讨论，围绕 Claude Code 会话中上下文窗口长度如何几乎线性推高成本，并给出具体数字。

HatchWorks：The Real Cost of Vibe Coding in 2026（免费指南）
链接：https://hatchworks.com/blog/gendd/cost-of-vibe-coding/
对 Vibe Coding 总成本较坦诚的估算：表面订阅成本可能是每月 20–200 美元，但如果算上安全修复、技术债和专业重构，成本可能达到 5000–30000 美元。理解这一点，才能判断 QA 和结构化流程到底值得投入多少。

OpenAI Usage Dashboard（官方）
链接：https://platform.openai.com/usage
上线任何公开功能前，在这里设置月度额度。入口在 Billing → Usage Limits。

Anthropic Console（官方）
链接：https://console.anthropic.com/
Claude API 使用额度同样需要在这里设置。

第 5 个月里程碑

到这个月结束时，你应该能够：

从一开始就组织好项目，让 AI 始终获得正确上下文；

使用 MCP 将 Cursor 或 Claude Code 连接到外部数据源；

用 Vercel AI SDK 给已上线产品集成 AI 功能；

构建一个基础 RAG 管线，让 AI 能够基于文档回答问题；

为每一个 AI API 账户设置活跃的成本监控和支出上限；

维护一套干净的 /docs 架构，让任何 AI 工具都能立刻理解项目。

第 6 个月：像专业人士一样部署，并选择你的专业方向

这个月的目标是：让你的项目达到生产级可用状态，并选择自己的发展方向。真正部署、真正监控、真正产生收入，同时找到与你目标匹配的专业化路径。

1、生产部署与环境配置

Demo 和生产级产品之间的部署差距非常大。其中最关键的一点，是将开发环境和生产环境分开。

2026 年推荐部署技术栈

静态网站或落地页
前端部署在 Vercel 或 Netlify，不需要后端。可以从 GitHub 一键部署。

带认证和数据库的全栈应用
前端用 Vercel，后端用 Supabase。这是最推荐给初学者的技术栈。

复杂后端逻辑
前端用 Vercel，后端使用 Supabase，并通过 Edge Functions 处理计算任务。这样可以在不租用服务器的情况下实现扩展。

完全控制服务器
后端使用 Fly.io 或 Railway，前端可搭配任意方案。控制力更强，但复杂度也更高。

资源

Supabase：Vibe Coder's Guide to Environments（官方免费指南）
链接：https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments
生产安全部署的必读内容，覆盖开发环境与生产环境的区分、数据库迁移和回滚策略。

Add Jam：How to Deploy Your Vibe Coded Project（免费指南）
链接：https://addjam.com/blog/2026-04-07/how-to-deploy-your-vibe-coded-project/
面向非技术用户的部署指南，会根据项目类型帮助你选择合适的部署方式，发表于 2026 年 4 月。

Deploy Your Vibe Coding Projects for Free with Vercel and Netlify（YouTube，免费）
链接：https://www.youtube.com/watch?v=85JVKjW-uG0
从 GitHub 部署到 Vercel 和 Netlify 的分步骤教程。

Vercel Deployment Docs（官方免费文档）
链接：https://vercel.com/docs/deployments/overview
Vercel 官方部署文档，包含预览部署、环境变量管理和域名配置。

2、监控你的线上产品

在生产环境里，看不见的问题就无法修复。下面三个工具可以让你完整了解用户正在经历什么，以及你的应用正在做什么。

资源

Langfuse（开源，有免费层级）
链接：https://langfuse.com/
LLM 可观测性平台。它可以追踪每一次 AI 调用：发送了什么 prompt、收到了什么响应、token 用量、延迟、成本和错误情况。支持 OpenAI、Anthropic 和 LangChain。到 2026 年，它已经成为监控 AI 应用的标准工具之一。

How to Monitor Your AI Application with Langfuse（YouTube，免费）
链接：https://www.youtube.com/watch?v=V7nugySdrgw
完整教程，介绍如何使用 OpenTelemetry 在本地和生产环境中配置 Langfuse，发布于 2025 年 3 月。

Langfuse + Sentry Integration Guide（官方免费指南）
链接：https://langfuse.com/docs/observability/sdk/advanced-features
介绍如何把错误监控数据发送到 Sentry，同时用 Langfuse 捕捉 LLM 可观测性数据。一次配置即可形成完整的生产监控技术栈。

Sentry（官方，有免费层级）
链接：https://sentry.io/
应用错误追踪的标准工具。它可以在你的线上应用报错时第一时间通知你，而不是等用户来反馈。

Vercel Analytics（官方，有免费层级）
链接：https://vercel.com/docs/analytics
Vercel 内置的网站分析工具，一键启用。可以查看页面访问量、性能指标和 Core Web Vitals。

3、选择你的方向

到了第 6 个月，你已经具备基础能力。接下来的问题是：你要往哪个方向深入？

这里有三条可行路径，你需要选择最符合自己目标的一条。

方向一：产品构建者，也就是 Indie Hacker

适合人群：独立创始人、创业公司运营者、独立开发者，以及想要构建并销售自己产品的人。

这是 Vibe Coder 最常见的路径。你不是为了找工作，而是为了发布能够产生收入的产品。

2026 年 Indie Hacker 技术栈

Lovable 或 Bolt：用于快速原型开发和早期验证；

Cursor 3.0 + Claude Code：用于正式构建和深度定制；

Supabase：数据库和认证；

Stripe：支付；

Vercel：部署；

PostHog：用户分析。

2026 年值得关注的可变现应用类型

SaaS 微工具
只解决一个非常具体的问题，采用每月 5–25 美元订阅。

AI wrapper
把某种 LLM 能力封装进一个清晰、具体、面向细分市场的 UI。

目录或市场平台
聚合并整理人们正在搜索的信息。

企业内部工具
把企业当前用表格手动完成的某项工作自动化。

资源

Indie Hackers（免费社区）
链接：https://www.indiehackers.com/
真实创始人分享收入数据、构建日志和经验教训。它是了解什么产品真正卖得出去、什么定价有效的高信号信息源之一。

Stripe Docs：Payments Quickstart（官方免费文档）
链接：https://stripe.com/docs/payments/quickstart
官方指南，介绍如何添加 Stripe Checkout，用于一次性付款和订阅。你可以让 AI「为每月 X 美元订阅集成 Stripe Checkout」，然后用这份指南核查它生成的内容。

PostHog Getting Started（官方免费文档）
链接：https://posthog.com/docs
开源产品分析工具。可以追踪用户行为、转化漏斗、留存和功能开关，让你知道什么真正有效。

方向二：AI 产品工程师

适合人群：希望进入初创公司或科技公司，从事 AI 产品开发的人。

这个方向的作品集项目

构建一个「chat with your docs」产品。

用户可以上传 10–20 个 PDF 文件，应用允许他们基于这些文档提问，并获得带引用来源的答案。它应该是一个完整的全栈应用，已经部署、可以分享。

到 2026 年，这是你能向雇主或客户展示的最高信号作品集项目之一。

资源

LlamaIndex：RAG Introduction（官方免费文档）
链接：https://developers.llamaindex.ai/python/framework/understanding/rag/
构建文档问答系统最快的路径之一。

LangChain Academy：Introduction to LangGraph（免费课程）
链接：https://academy.langchain.com/courses/intro-to-langgraph
LangGraph 官方免费课程。LangGraph 是主流 Agent 编排框架之一，课程覆盖状态管理、记忆、人类参与回路和多 Agent 协作。

Vercel AI SDK（官方免费文档）
链接：https://sdk.vercel.ai/docs
可以用很少代码，为任何 Next.js 应用加入流式聊天、结构化生成和工具调用能力。支持 20 多家 AI 提供商。

Vibe Coding to Agentic AI: The Next Evolution of Programming（YouTube，免费）
链接：https://www.youtube.com/watch?v=LHAvPwOLz8U
概述这个领域如何从随意的 Vibe Coding，走向能够自主规划、执行和验证的结构化 Agentic 系统。这也是就业市场正在转向的方向。

MindStudio：What Is Agentic Engineering?（免费指南）
链接：https://www.mindstudio.ai/blog/what-is-agentic-engineering/
清晰解释从 Vibe Coding 到 Agentic Engineering 的转变。到 2026 年，这正是许多雇主正在招聘的能力范式。

方向三：AI 自动化顾问

适合人群：想要立即服务企业的人，包括自由职业者、咨询顾问，或者想建立代理服务公司的人。

企业愿意为 AI 自动化支付真金白银，因为它可以替代昂贵、重复、手动的流程。这是把 Vibe Coding 技能变成收入最快的路径之一。

最常见、也最有价值的自动化场景

AI 邮件分拣与自动回复；

潜在客户筛选和个性化外联；

文档提取和处理；

基于知识库的客服机器人；

CRM 数据补全和清洗；

发票和合同处理。

资源

n8n Documentation（免费，开源）
链接：https://docs.n8n.io/
可视化工作流自动化工具，原生支持 AI 节点。可以将 LLM 连接到 400 多种集成，包括 Slack、Gmail、Notion、HubSpot、Airtable 等。自托管版本完全免费。

n8n Full Course; 6 Hours（YouTube，免费）
链接：https://www.youtube.com/watch?v=QoQBzR1NIqI
完整 n8n 课程，覆盖从初级到高级的 AI 工作流自动化。

Make（原 Integromat，有免费层级）
链接：https://www.make.com/
可视化自动化平台。对于复杂的多步骤工作流，它比 Zapier 更强。

Automation Builders：Vibe Coding to Agentic AI（YouTube，免费）
链接：https://www.youtube.com/watch?v=LHAvPwOLz8U
介绍自动化构建者如何结合 n8n、OpenAI 和 Vibe Coding 工具，搭建端到端企业自动化流程。

这个方向的作品集项目

构建一个端到端的潜在客户筛选和外联自动化流程：

从 CSV 或 Airtable 导入 leads；

使用 LLM 研究每个潜在客户，并根据理想客户画像判断匹配度；

为 leads 打分和排序；

用对方的语气草拟个性化外联信息；

把所有结果和状态、备注写回原始表格。

这是一个真实、可计费的自动化项目，企业确实会为它付费。

加餐：用 Vibe Coding 开发移动应用

前面所有内容默认你在构建 Web 应用。大多数 Vibe Coder 也是这么做的。

但如果你的想法是一个移动应用，也就是用户需要安装到手机上的产品，那么情况会有所不同。在第 1 个月开始之前，值得先了解这个生态。

2026 年移动端 Vibe Coding 的真实状态

移动开发比 Web 开发更难进行 Vibe Coding。原因很具体：React Native 的依赖树更大，也更脆弱。AI 偶尔会生成假设某些包版本兼容的代码，但实际版本可能冲突；iOS 和 Android 模拟器需要本地配置，AI 不能完全替你管理；测试移动端 UI 要么需要真机，要么需要模拟器，无法像 Web 一样直接在浏览器里预览；Expo 大幅简化了流程，但也引入了自己的限制。

如果你想构建移动应用，推荐配置是：

框架：React Native + Expo，使用 managed workflow；

工具链：Expo Router 做导航，基于文件路由，和 Next.js App Router 模式类似；

AI 工具：Claude Code + Cursor，也就是和 Web 开发相同的工具，它们对 React Native 的支持不错；

起始模板：npx create-expo-app 或 create-rn-new，用于生成配置好的脚手架；

预览方式：通过二维码在实体手机上的 Expo Go App 中预览，这是最快的反馈循环。

资源

Vibe Coding a Mobile App from 0 to Market（YouTube，免费）
链接：https://www.youtube.com/watch?v=SzmXEOozpFg
完整演示如何用 Claude Code + Cursor + React Native + Expo Router 从零构建一个健身追踪应用。内容覆盖 Figma-to-spec 工作流、Claude Code 阶段计划，以及如何实时处理 Expo 依赖问题。

Build a React Native App with Vibe Coding in 2026（免费指南）
链接：https://blog.vibecoder.me/build-react-native-app-vibe-coding
分步骤介绍如何设置 Expo 项目、撰写项目 brief，并使用 Claude Code 执行分阶段移动应用构建计划。

React Native Vibe Code SDK（免费，开源）
链接：https://github.com/react-native-vibe-code/react-native-vibe-code-sdk
一个专为通过自然语言提示构建 React Native 和 Expo 应用而设计的开源 IDE。可以理解为移动端开发领域里最接近 Lovable 的工具。

Expo Documentation（官方免费文档）
链接：https://docs.expo.dev/
Expo 配置、Router 和设备 API 的核心参考资料。建议在使用 AI 工具时，同时在浏览器中打开这份文档。

最重要的建议是：每次开始移动端 AI 会话之前，先把相关 Expo 库的 examples 文件夹粘贴到 Google AI Studio 中，让 Gemini 利用大上下文窗口，根据这些 examples 生成文档。然后在提示词中使用这份文档，而不是指望模型知道当前 API。

移动端库的 API 变化很快，而训练数据通常会滞后于现实。

加餐：完整工具地图——2026 年已经存在的所有主要工具

这份指南推荐 Cursor 3.0 和 Claude Code 作为主要工具。但到 2026 年，完整工具版图已经明显扩展，不同工具适合不同场景。下面是更完整的图谱。

终端 / CLI Agent

Claude Code
Anthropic 的终端原生 Agent。最适合全代码库推理和仓库级任务。

Gemini CLI
Google 的开源终端 Agent。可以作为 Claude Code 的免费替代方案，拥有很大的上下文窗口。

OpenCode
社区开源 CLI Agent。可自带模型，成本更灵活。

Factory Droid
自主软件工程 Agent，面向企业 CI/CD 自动化。

其中，Gemini CLI 值得特别说明，因为它完全免费且开源。它使用 Gemini 3.5 Pro 的 100 万 token 上下文窗口，比 Claude Code 更大。

安装方式：

npm install -g @google/gemini-cli

然后运行：

gemini

即可开始使用。你可以把它当作重上下文任务的免费替代方案，也可以用它作为第二审查者，替代第 4 个月工作流中「手动粘贴到 Gemini」的步骤。

OpenAI Codex，也就是新的云端编码 Agent，而不是旧模型，现在也已经可以在 ChatGPT 中作为云编码 Agent 使用，并执行异步任务。它与 Claude Code 的不同之处在于：Codex 运行在云端，而不是本地。你可以通过 ChatGPT 侧边栏访问。

AI 编程 IDE 扩展清单

Cursor 3.0
支持 Agents Window 和并行云端 Agent。免费版 / 每月 20 美元。

Windsurf
具备 Cascade Agent，被 Google 收购后更偏企业场景。免费版 / 每月 15 美元。

GitHub Copilot
几乎无处不在，支持 VS Code、JetBrains、Xcode、Neovim。免费版 / 每月 10 美元。

Cline
开源，自带模型。免费使用，另按 API token 付费。

Google Antigravity
具备多 Agent Manager View，可并行构建。价格待定。

Zed
性能优先，从一开始就原生面向 AI。免费。

Kilo Code
VS Code 插件，开源，支持所有主流提供商。免费。

Continue
开源 Copilot 替代方案，支持 VS Code 和 JetBrains。免费。

资源

DataCamp：Top 15 Vibe Coding Tools to Build Faster in 2026（免费指南）
链接：https://www.datacamp.com/blog/top-vibe-coding-tools-to-build-faster
2026 年最完整的工具对比之一，覆盖 CLI Agent、AI IDE、浏览器构建器和专用工具。它给出的简明建议是：浏览器优先用 v0，编辑器内用 Codex，全能场景用 Cursor，终端优先用 Claude Code。

The Ultimate Vibe Coding Guide（Full Course Tutorial 2026）（YouTube，免费）
链接：https://www.youtube.com/watch?v=KO_vCL1ZhpI
3 小时大师课，一次性覆盖 Cursor、Codex、Antigravity、Claude Code、Lovable、Bolt、Supabase、Vercel、Figma Stitch、v0 和 MCP servers。到 2026 年 5 月，这是最完整的单视频资源之一。

Vibe Coding for Beginners（Full Course 2026）（YouTube，免费）
链接：https://www.youtube.com/watch?v=BpOsHF5Oj_I
介绍如何用 Codex 和 Firebase，从同一套代码库构建 Web 应用、桌面应用和 iOS 应用。发布于 2026 年 5 月。适合想覆盖多平台、但又不想频繁切换技术栈的初学者。

加餐：值得加入的社区

最快的学习，往往发生在那些大家实时分享自己正在构建什么的社区。以下是截至 2026 年中仍然活跃的社区。

Lovable Discord（免费）
链接：https://lovable.dev/community
拥有 16 万多名成员，覆盖各个时区，是 2026 年最活跃的 Vibe Coding 社区之一。提供实时帮助、每周活动，以及上线项目展示频道。

r/vibecoding（免费，Reddit）
链接：https://www.reddit.com/r/vibecoding/
Vibe Coding 社区聚集地。这里有项目展示、工具对比、调试帮助，以及那些你在 YouTube 教程里看不到的真实失败故事。

Cursor Forum（官方免费社区）
链接：https://forum.cursor.com/
Cursor 官方社区，工程团队会在这里阅读和回复。「Built with Cursor」展示帖是寻找真实项目案例和了解实际难点的最佳来源之一。

Build in Public Strategy for Vibe Coders（YouTube，免费）
链接：https://www.youtube.com/watch?v=ke6oxy8Z7C4
面向 Vibe Coder 的公开构建策略指南：发什么内容、什么时候发、如何把一个项目构建过程转化为受众，以及这些受众如何加速你的下一次发布。

Postiv AI：Vibe Coding to SaaS Pipeline（免费指南）
链接：https://postiv.ai/blog/vibe-coding-marketing
覆盖产品完成后的完整流程：验证商业模式、制定发布策略，以及如何利用 LinkedIn 和 X 分发你已经上线的产品。

Karo Zieminski：Vibe Coding Hub 2026（免费，Substack）
链接：https://karozieminski.substack.com/p/vibecoding-resources-hub
收录 15 多篇经过实践者验证的指南，覆盖 Vibe Coding、规格驱动开发和 AI 辅助产品构建，涵盖完整构建者路径：基础、生产、安全、调试和工具选择。它是 Substack 上较完整的单页资源中心之一。

0xMinds：The Complete Guide to AI-Powered Development（免费指南）
链接：https://0xminds.com/blog/guides/vibe-coding-complete-guide-2026
一份完整的 2026 年指南，覆盖采用数据、六阶段构建工作流，也就是构思 → 上下文 → 生成 → 审查 → 优化 → 发布，以及多 Agent 编排模式和可直接使用的基础配置清单。

Augment Code：Vibe Coding vs Spec-Driven Development（免费指南）
链接：https://www.augmentcode.com/guides/vibe-coding-vs-spec-driven-development
提供一个清晰决策框架，帮助判断什么时候适合纯 Vibe Coding，什么时候应该使用规格驱动开发。文章也说明了纯 Vibe Coding 项目常见的「三个月墙」，以及如何识别什么时候该切换模式。

如何真正使用这份路线图

大多数读完这篇文章的人，并不会真正完成它。不是因为内容太难，而是因为他们会把它当成阅读清单，而不是构建计划。

2026 年真正成功的 Vibe Coder，通常有三个共同习惯：

他们发布产品，而不是只学习。
每个月的里程碑都应该以一个已部署项目结束，也就是一个真实可访问的 URL，而不是一门完成的课程。六个不完美但已经发布的产品，胜过二十门已经学完的教程。

他们公开构建。
在 X、LinkedIn 或任何目标用户所在的平台发布你的构建过程。比如：「构建 X 的第 1 天」，以及「我上线了 X，这是我学到的东西」。这个领域最好的机会通常来自可见度，而不是投简历。

他们先变窄，再变宽。
前六个月只选择一个工具，比如 Cursor 或 Claude Code；一个技术栈，比如 Next.js + Supabase + Vercel；以及一个方向，比如产品构建者、AI 工程师或自动化顾问。深度胜过广度。等你真正发布三个东西之后，再扩大范围。

这篇文章由作者基于六个月的笔记和个人实践路径整理而成，并由 AI 模型 Minimax 和 Opus 4.6 编辑完成。

[原文链接]

点击了解律动BlockBeats 在招岗位

欢迎加入律动 BlockBeats 官方社群：

Telegram 订阅群：https://t.me/theblockbeats

Telegram 交流群：https://t.me/BlockBeats_App

Twitter 官方账号：https://twitter.com/BlockBeatsAsia