原文標題：如何在 6 個月內成為專業 Vibe Coder（完整課程 + 資源）
原文作者：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 教程（免费）
链接：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、分支和回滾。

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

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

GitHub 技能（免费，互动式）
链接：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 文件（免費）
連結：https://tailwindcss.com/docs
Tailwind 是一種 utility-first 的 CSS 框架。它的文件品質很高。由於訓練資料密度高，AI 生成 Tailwind 代碼的效果通常優於大多數其他樣式系統。

Supabase 文件: 入門指南（免費）
連結：https://supabase.com/docs/guides/getting-started
Supabase 提供了 Postgres 資料庫、列級安全性策略、身份驗證（電子郵件、社交登錄、一次性密碼）和檔案存儲，所有這些功能都可以通過簡單的 JavaScript SDK 調用。

Vercel 文件: 入門指南（免費）
連結：https://vercel.com/docs/getting-started-with-vercel
將您的 GitHub 存儲庫連接到 Vercel，之後每次推送都將自動部署。整個配置大約只需要 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 (Free, Technically.dev)
Link: https://technically.dev/posts/vibe-coding-tool-comparison
Conducted a head-to-head comparison of Replit, v0, Lovable, and Bolt.

Vibe Coding: Why We Prefer Windsurf Over Lovable and Bolt (Free Guide, Koncile)
Link: https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable
Based on a real-world web project, a team assessment of four tools published in April 2026.

Cursor 3.0: A Full-Scale Rethink

Cursor 3.0 was released on April 2, 2026, marking the most significant update since Anysphere forked it from VS Code in 2023.

It has evolved beyond being merely a tool with AI overlaid on a text editor to becoming a unified workspace for building software with Agents.

New Features of Cursor 3.0

Agents Window
A new standalone interface accessible through Cmd/Ctrl + Shift + P → Agents Window for running multiple AI Agents simultaneously. Agents can run locally, in the cloud, on SSH, or in Git worktrees.

Composer 2
Cursor's in-house programming model designed for multi-file code editing and iterative training.

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：什麼是 Cursor 3？（免費指南）
链接：https://www.datacamp.com/blog/cursor-3
對 Cursor 3.0 每個新功能最完整的文字拆解之一，發表於 2026 年 4 月 7 日。

Cursor 3 改變一切的智能編碼（YouTube，免費，Scrimba）
链接：https://www.youtube.com/watch?v=HTKGyLar8AU
通過真實項目完整演示 Agents Window、Composer 2、內建瀏覽器、並行 Agent 和 Marketplace。

Cursor 教程 2026：在 15 分鐘內學習 AI 編碼（免費指南，NXCode）
链接：https://www.nxcode.io/resources/news/cursor-tutorial-beginners-2026
面向初學者的分步驟指南，涵蓋 Composer、Agent Mode 和 Cloud Agents。

快速構建 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 模式。Claude 會讀取檔案並回答問題，但不會修改任何內容。你可以用這個模式理解專案架構、追蹤資料流、梳理程式庫結構。

Plan：規劃
在 Plan 模式中，讓 Claude 建立一份實現計劃。你需要審查它、細化它，並對不同意的部分提出反駁。只有在確認之後，再說「go ahead」。

Code：編碼
切回 Normal 模式。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 教程 2026（免费指南，dev.to）
链接：https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma
文字教程，涵盖安装、终端配置，以及构建第一个项目。

开始使用 Claude Code：研究者设置指南（免费指南）
链接：https://paulgp.substack.com/p/getting-started-with-claude-code
特别适合理解「要足够具体」这一原则、上下文窗口管理，以及迭代式提示方法。

OpenSaaS.sh：2026 年 Saas 代码 Vibe 的最佳方式（免费指南）
链接：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：互動提示工程教程（免費，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：最終 Vibing 編碼指南（免費，Reddit）
連結：https://www.reddit.com/r/PromptEngineering/comments/1kyboo0/the_ultimate_vibe_coding_guide/
來自活躍 Vibing Coder 的 18 條實戰經驗，包括如何處理 AI 偏移、如何在多個功能之間保持一致性，以及如何建立「Common AI Mistakes」文件。

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

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

PRP 框架：先规划，再提示

造成「死循环」最常見的原因，就是在沒有任何規劃的情況下，直接開始開發功能。

AI 寫了一段程式碼，搞壞了一些東西；你讓它修復，它又搞壞了別的東西；然後整個過程不斷螺旋下滑。

解決方法其實很簡單：在寫任何程式碼提示詞之前，先寫計劃。

PRP 框架：產品需求提示

在打開 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 官方標準（免費）
連結：https://llmstxt.org/
官方規範，列出了所有已經發布 llms.txt 檔案的庫和框架。

OpenSaaS：2026 年振碼 SaaS 的最佳方式（免費指南）
連結：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 檔案。

代理请求（基於描述）
AI 根據任務描述判斷何時應用。

手動（@rule-name）
只有當你在提示詞裡明確引用它時才會載入。

良好的規則設定應該包括什麼

一個 .cursor/index.mdc 文件，用來說明專案概況、技術棧和通用約定，建議控制在 100 行以內；

在 .cursor/rules/ 中創建多個獨立的 .mdc 文件，分別對應具體上下文，例如驗證、資料庫模式、UI 元件等；

在專案根目錄放一個 CLAUDE.md 文件，寫入同樣的資訊，供 Claude Code 使用。

資源

Vibe Coding Academy：游標規則完整指南 + 15 個模板（免費指南）
連結：https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide
這是 2026 年關於游標規則最詳細的指南之一，涵蓋 .mdc 格式、四種啟用模式，以及 15 個常見技術棧的可複製模板。

CLAUDE.md 和游標規則：多層級（YouTube，免費）
連結：https://www.youtube.com/watch?v=Ia54BXaci5o
深入講解如何為游標和 Claude Code 設定多層規則，包含真實案例。影片發布於 2025 年中，但現在仍然完全適用。

如何在游標中創建和使用 SKILLS.md（YouTube，免費）
連結：https://www.youtube.com/watch?v=DfLL5_zbWGc
介紹游標的 skills 系統，發布於 2026 年 2 月。內容涵蓋如何創建 .cursor/skills/ 文件，讓代理可以通過斜線命令呼叫。

光标目录（Cursor Directory）（免費，社群）
鏈接：https://cursor.directory/
由社群貢獻的規則文件目錄，涵蓋各種技術棧。選擇與您的技術棧匹配的規則文件，然後進行自定義。

精彩的 CursorRules（Awesome CursorRules）（免費，GitHub）
鏈接：https://github.com/PatrickJS/awesome-cursorrules
一個優質的規則文件精選存儲庫，按框架分類，並持續更新。

同步編碼規則：Cursor、Claude Code 和 Windsurf（免費指南）
鏈接：https://www.concret.io/blog/sync-coding-standards-across-cursor-agentforce-vibes-claude
一種更高級的方法：通過硬鏈接，使一個主規則文件自動同步到所有 AI 工具中。

基於規格的開發：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 课程：基于规范驱动的开发与编码代理（DeepLearning.AI 免费课程）
链接：https://www.deeplearning.ai/courses/spec-driven-development-with-coding-agents/
使这一方法论正式成型的课程。覆盖完整的计划、实现、验证循环，以及如何在 Claude Code 中把 SDD 工作流自动化为可复用技能。

Test Collab：从 Vibes 编码到基于规范驱动的开发（免费指南）
链接：https://testcollab.com/blog/from-vibe-coding-to-spec-driven-development
不绑定具体工具的 SDD 解释文章，包含真实案例，并说明 CLAUDE.md、Cursor Rules 和 GitHub Copilot PRD 工作流如何实现同一底层模式。

Red Hat：Vibes、Specs、Skills 和 Agents；AI 编程的四大支柱（免费指南）
链接：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 組件轉換器

用戶上傳任意 UI 截圖，例如導向頁、競品應用介面，或者他們截取的 Figma 設計圖。

工具會將截圖發送給視覺模型，例如 GPT-5.5 或 Claude，然後生成一個乾淨的 React + Tailwind 組件，盡量匹配原始佈局和樣式。

你能學到：視覺模型 API、圖片上傳、多模態模型的結構化輸出。

這個工具對開發者真的很有用，而且很容易支撐每月 25 美元的定價。

水管線 / 基礎設施地圖工具

這是 Vibe Coding subreddit 上有人真實做過的項目：一個互動式地圖工具，讓市政或公用事業團隊可以繪製水管和流域，添加維修歷史、成本和維護日誌，並按日期或位置搜索和篩選。

這種定制化運營工具往往有幾個特點：垂直、稍顯無聊、但極其有用。B2B 買家會毫不猶豫地為這類工具付費。

你能學到：使用 Mapbox 或 Leaflet 渲染地圖、在 Supabase 中儲存地理空間資料、重表單 UI、檔案上傳。

遊戲化家庭家務應用程式

這個項目的創作者一開始並不打算發布它，只是因為自己家裡需要，就在一個週末做了出來。一個月後，已經有 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 可讀性工具，針對視覺障礙人士

這是一個 AI 工具，可以將任意 PDF 轉換為對視覺障礙人士真正可訪問的版本。

它不僅僅是基礎文本提取，而是會將複雜表格和圖表改寫成通俗語言描述，為嵌入圖片生成 alt 文本，添加合理閱讀順序，並輸出可訪問的 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 生成器、PDF 可讀性工具，以及一個 30 天內做出的地理空間數據庫。

Dodo支付：2026 年的 30 个有利可图的 Micro SaaS 创意（免费指南）
链接：https://dodopayments.com/blogs/micro-saas-ideas-2026
提供 30 个经过验证的 Micro SaaS 创意，包括市场规模、MRR 潜力、启动成本和变现途径。每个项目都适合独立开发者构建。

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

IdeaProof：2026 年独立创始人的 50 个微型 SaaS 创意（免费）
链接：https://ideaproof.io/lists/micro-saas-ideas
每个创意都包含技术难度评级、启动成本估计（1000 到 15000 美元）和具体市场缺口分析。这是目前最具可行性的创意清单之一。

Cursor 论坛：2025 年使用 Cursor 构建的项目（免费，社区）
链接：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 金鑰和密鑰
所有金鑰都應該放在 .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 最佳实践与安全（免费指南）
链接：https://www.clarifai.com/blog/vibe-coding-explained
针对 AI 生成代码的逐步安全清单，并提供具体提示策略，帮助您确保 AI 构建的安全性。

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

4、Supabase：您的全栈后端

Supabase 值得单独提及，因为它是 Vibe Coder 在构建真实产品时最关键的基础设施之一。

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

资源

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

Supabase YouTube 頻道：快速入門指南（免費）
連結：https://www.youtube.com/@Supabase
每個主要功能都有簡短實用的影片指南，例如驗證、資料庫、儲存、即時功能。每支影片大約 5–10 分鐘。

Supabase 遷移文件（官方免費）
連結：https://supabase.com/docs/guides/deployment/database-migrations
將每次資料庫 schema 變更視為遷移，而非直接編輯資料庫。這是為了避免災難性資料遺失的關鍵。指南中也包含回滾腳本。

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 政策，就停止並詢問我，不要繼續執行。

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 编码笔记（免费指南，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 官方文档（免费）
链接：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 瀏覽器，讓 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 伺服器
讓你的 Agent 可以讀取和創建 Stripe 發票。

Supabase MCP
讓你的 Agent 在開發過程中查詢實時數據庫。

Figma MCP
讓 Cursor Agent 讀取你的設計文件，並據此實現元件。

GitHub MCP
讓 Agent 創建 issue、開啟 PR、管理工作流。

Qdrant MCP
讓 Agent 存取向量數據庫，用於構建支援 RAG 的應用。

資源

MCP 官方介紹（Anthropic 官方免費文件）
連結：https://modelcontextprotocol.io/introduction
Model Context Protocol 的官方文件和規範。

使用 Vibe Coding 搭建你的第一个 MCP 服务器（免费指南）
链接：https://www.qpython.com/building-your-first-mcp-server-with-python-and-vibe-coding-pk/
通过使用 Cursor 构建第一个 MCP 服务器的实际操作教程，使 AI 能够从外部源实时检索上下文。

使用 Vibe Coding 在 5 分钟内构建 MCP 服务器（免费指南，Claranet）
链接：https://www.claranet.com/uk/blog/build-your-mcp-server-just-5-minutes-using-vibe-coding-kiro/
其中之一最快的 MCP 服务器实操教程。

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

Cursor 市场（应用内）
链接：https://cursor.com/marketplace
您可以浏览并安装预先构建的 MCP 服务器插件，包括 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：設計師攻略（免費指南，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：與您的 Figma 設計系統一起 Vibe Code（有免費層級）
鏈接：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：設計師的完整 Vibing Coding 指南（免費指南）
鏈接：https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/
針對非開發人員打造 AI 生成產品的完整指南，涵蓋設計系統提示詞、提示詞中的視覺參考，以及如何在 Vibing Coding 元件中保持品牌一致性。

4、為產品加入 AI 功能：Vercel AI SDK

如果您想要構建「使用 AI 的產品」，而不僅僅是「用 AI 構建產品」，那麼在 Next.js 技術棧中，Vercel AI SDK 是最快、最乾淨的選擇之一。

資源

Vercel AI SDK 文件（官方免費文檔）
鏈接：https://sdk.vercel.ai/docs
官方參考文檔。它通過統一接口支持 20 多家 AI 提供商，包括 OpenAI、Anthropic、Google、Mistral、Groq 等。內建 React hooks，例如 useChat、useCompletion，並支持流式輸出、工具調用和結構化生成。

AI SDK V5 教程系列（YouTube，免費）
鏈接：https://www.youtube.com/playlist?list=PL4cUxeGkcC9h2NkvFCBO4kvA4Y9wiDrIO
一套關於使用 Vercel AI SDK 構建 Next.js AI 應用的多集教程。第 1 集介紹和第 2 集項目配置於 2025 年 8 月發布，涵蓋完整搭建流程。

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

这个月可以做什么？

从您在第四个月创建的项目中选择一个，在其中使用 Vercel AI SDK 添加 AI 功能。例如：为笔记应用添加 AI 自动标签；为习惯追踪器添加一个“询问您的习惯数据”的 AI 助手；根据用户粘贴的文本自动生成 AI 知识卡片。

5、RAG：根据您的文档使 AI 回答问题

RAG 是检索增强生成（Retrieval-Augmented Generation）的缩写。这是大多数专业企业级 AI 应用的核心能力，例如客服机器人、内部知识库和文档问答工具。

对于希望成为“AI 产品工程师”的人来说，RAG 也是最热门且需求量很大的技能之一。

其核心概念非常简单：不要让大型语言模型仅基于训练数据回答问题，而是首先从您自己的文档中检索相关片段，然后将这些片段放入提示中，使模型能够基于您提供的信息进行回答。

资源

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

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

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

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

如何选择 AI Agent 框架（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 使用仪表板（官方）
链接：https://platform.openai.com/usage
在发布任何公开功能之前，请在此处设置每月配额。入口在计费 → 使用限制。

Anthropic 控制台（官方）
链接：https://console.anthropic.com/
同样需要在此处设置 Claude API 使用配额。

第 5 个月里程碑

到达本月底，您应该能够：

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

使用 MCP 将游标或 Claude 代码连接到外部数据源；

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

构建一个基本的 RAG 管道，使 AI 能够根据文档回答问题；

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

维护一套清晰的 /docs 结构，使任何 AI 工具都能立即理解项目。

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

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

1、生产部署与环境配置