作者：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 提示詞到底如何工作

新手提示詞和高手提示詞之間的區別，幾乎完全在於結構。

新手會說：

高手會說：

前者可能生成一個能用的組件，也可能破壞其他文件，或者引入與當前代碼庫不一致的模式。後者則更可能生成一個真正可運行、且符合項目結構的組件。

一個好的提示詞通常包含四個部分：

目標：這個功能到底要做什麼？
上下文：哪些文件相關？當前項目里已經有什麼？
約束：哪些地方不能改？應該遵循什麼既有模式？
輸出格式：最終結果應該是什麼樣？

資源

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 和規則文件當成強制合約，而不是建議。

你需要加入明確的失敗條件，比如：

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 文件：

等 design tokens 確立後，再引用具體組件：

按區塊逐步構建，並始終引用 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 編輯完成。

來源：金色財經

發佈者對本文章的內容承擔全部責任
在投資加密貨幣前，請務必深入研究，理解相關風險，並謹慎評估自己的風險承受能力。不要因為短期高回報的誘惑而忽視潛在的重大損失。