這份文件是一份指南，旨在幫助不僅是經驗豐富的開發者，也包括非開發者，能夠使用「Vibe Coding」來開發應用程式或服務。即使是程式經驗較少的初級開發者或企劃人員，也能透過遵循這些步驟產出穩定的成果。
核心原則：與其讓 AI 直接撰寫程式碼，不如先讓它建立文件（Design.md、ToDo.md），然後再開始開發。
0. 整體流程摘要
[1] 要求建立 Concept.md
↓
[2] 建立 Design.md（UI/UX 參考文件）
↓
[3] 決定技術棧（參考下方的決策樹）
↓
[4] 建立 ToDo.md（模組層級的技術規格 + 開發計畫）
↓
[5] 建立 GitHub 儲存庫並進行初始提交
↓
[6] 將應用程式描述 + Design.md + ToDo.md 傳遞給 Claude Code 或 Grok Build 以開始開發
↓
[7] 重複：按模組實作 → 測試 → commit/push
1. Concept.md — 從一個簡單想法開始的提示
首先，用腦中浮現的 2-3 行文字簡短描述你想製作的應用程式或服務，格式為：「我想做一個像這樣的東西；請建立一個 Concept.md 文件，詳細說明實作它的程序和方法。」
下載產生的文件並將其儲存為 Concept.md。
2. Design.md — 先建立 UI/設計參考文件
如果應用程式有 UI，最好先撰寫 Design.md。也就是說，如果有你想參考的服務或應用程式，或者你已經知道如何自行設計 UI，你可以透過提供在 Figma 等工具中設計的圖片來提出要求。
方法
- 選擇一個你喜歡的實際上線的網站。（例如：linear.app、stripe.com、toss.im 等）
- 指示 Claude 或 Grok「分析該網站的佈局結構、色彩調色盤、字體排印、邊距/間距以及元件樣式，並將其整理成 Design.md。」
提示範例
分析 https://linear.app 的設計，並撰寫一份 Design.md 文件。 你必須包含以下項目： 1. 整體佈局結構（Header/Sidebar/Body/Footer 的位置） 2. 色彩調色盤（主要色、次要色、背景色、文字色的 HEX 色碼） 3. 字體排印（字型種類、尺寸系統、字重） 4. 邊距與間距規則（間距比例尺） 5. 主要元件的樣式，例如按鈕、卡片和輸入表單 6. 深色模式支援與色彩對應
提示
- 如果你有設計 sense，由於產生的 Design.md 內容都是用自然語言描述的，你可以閱讀後直接修改/優化成你想要的方向。這份文件將成為後續所有 UI 實作的標準。
- 如果你只說「做得像這個網站一樣」，每次的結果都會不同。你必須用文件固定下來以維持一致性。
2. 技術棧決策建議樹
根據你想建立的服務類型先決定技術棧。
常見伺服器（後端）原則
- 必須能夠在任何本機環境中直接從 CLI 安裝並執行。
- 語言/執行環境應該是 Node.js 或 Python。
- 對於套件/執行環境，使用經過驗證可在所有作業系統上穩定部署和支援的工具：
- Python → uv
- Node.js → npm
資料庫選擇標準
詳細提示說明（如果你有開發知識）
這個專案是一個網頁應用程式。前端使用 React 配置，並且應該能夠在本機使用
npm run dev立即測試，結構要能穩定部署。後端使用 Node.js 配置，由於需要關聯式資料庫，請使用 MariaDB。包含一個可以在本機開發環境中透過 CLI 直接安裝/執行的設定腳本。檢查這些內容和 Concept.md 文件，撰寫一份 ToDo.md 文件以進行詳細的技術實作。
- 使用此提示附加 Concept.md 文件，或複製並貼上 Concept.md 文件的內容來進行。
但如果我是非開發者，不懂上述內容怎麼辦？
只需像這樣給出整合的指示：
我不確定如何執行這個專案，請推薦一種方式。建議是網頁應用程式比較好，還是作業系統安裝方法在開發時更容易檢查，或者建置成行動應用程式更好。如果可以透過網頁瀏覽器顯示，前端使用 React 配置；如果需要以行動應用程式提供服務，前端使用 Flutter 配置。如果是需要在本機安裝的方法，使用 npm 或 uv 配置，以便能透過 CLI 輕鬆部署和安裝。設定一個能穩定部署的結構。我不確定是否需要後端，但為 Node.js 或部署/安裝設定一個穩定的結構。如果需要資料庫，需要關聯式資料庫時使用 MariaDB，如果只是鍵值資料庫，則在本機開發時使用 AWS DynamoDB，並配置為易於部署到 AWS。如果是可以在本機開發環境中透過 CLI 直接安裝/執行的格式，請包含所有設定腳本。推薦這樣詳細的技術棧，檢查這些內容和 Concept.md 文件，並撰寫一份 ToDo.md 文件以進行詳細的技術實作。
3. 管理後台 — 如果有伺服器則必不可少
你可能不確定這是否是一個有伺服器的服務，但通常最好建立一個，以便開發者可以親自掌握整個應用程式的運行狀態和進度。
- 有伺服器的專案應預設包含管理後台的實作。
- 後台應包含的最低限度項目：
- 伺服器健康檢查
- 關鍵資料狀態（核心指標，如訂閱者數量、已處理案件數量等）
- 最近的錯誤/日誌
- 主要任務的處理進度（批次、佇列等）
提示範例
如果這個服務包含伺服器，請在開發計畫中包含一個管理後台。後台應允許檢查伺服器狀態、核心指標以及最近的日誌/錯誤。將預設管理員帳號設為 'admin'，密碼設為 '12345'，並在管理後台中包含更改密碼的功能。檢查 ToDo.md，如果認為有必要，請將其納入開發計畫。
4. 最終確定 ToDo.md — 模組層級開發計畫
程式設計的基礎是模組化。 如果在撰寫程式碼之前，在 ToDo.md 中加入內容以細分為模組，就可以為將來的維護建立良好的架構。
提示範例
檢查 ToDo.md 文件，並根據以下指南驗證其是否撰寫良好，並修改/補充任何不足的部分。 ToDo.md 要求： 1. 設計整個系統以物件導向設計進行模組化。 2. 明確指定每個模組的角色、輸入/輸出和資料結構，以確保最大程度的封裝。 3. 建立一個實作順序的核取方塊清單（從沒有依賴關係的模組開始）。 4. 包含資料庫 schema 設計。 5. 描述非技術人員何時以及如何輕鬆進行測試。
完成後的 ToDo.md 中需驗證的項目：
- 專案概述（一段）
- 已確認的技術棧（步驟 2 中決策樹的結果）
- 模組清單及各模組的詳細技術規格（非技術人員可能難以理解）
- 模組名稱與角色
- 輸入/輸出（API 端點及請求/回應格式）
- 使用的資料結構 / 資料庫表（或集合）設計
- 與其他模組的依賴關係
- 實作順序（以核取方塊形式，按依賴順序）
- 檢查每個測試方法是否以我能理解的層級撰寫
重要事項
- 你不一定要親自閱讀和審查產生的 ToDo.md。 雖然準備完美似乎會讓事情進展順利，但 Vibe Coding 的核心在於先創造出結果，然後逐步修改以獲得你想要的東西——這才是最寶貴且最有趣的部分。
實作部分：環境設定 → GitHub → 開始 Claude Code 開發
撰寫方式讓即使是第一次安裝開發工具的人也能跟著做。
- 儘管如此，如果它看起來太複雜，你不知道為什麼要使用它，而且覺得無聊透頂，請先到下面的連結聽聽免費課程。
https://nomadcoders.co/git-for-beginners
5. 準備開發環境（只安裝 2 個東西）
我們將安裝兩個東西。
而且你需要一個 GitHub 帳號。在 https://github.com 免費註冊（完成電子郵件驗證）。使用 Claude Code 或 Grok Build 需要 Claude 付費方案（Pro/Max/Team）或 Grok 付費帳號。
5-1. 🪟 Windows 使用者安裝步驟
① 安裝 Git
- 在瀏覽器中前往 https://git-scm.com/download/win → 自動開始下載。
- 執行下載的安裝程式。
- 會出現許多安裝選項；只需保持所有預設值，一直點選「Next」。
- 但是，當出現「Choosing the default editor」畫面時，最好選擇 「Use Visual Studio Code as Git's default editor」（如果你尚未安裝 VS Code，保留預設值即可）。
- 驗證安裝：從開始功能表執行 PowerShell，然後輸入：
git --version
→ 如果出現類似 git version 2.xx.x 的版本號，表示成功。如果沒有，請嘗試關閉並重新開啟 PowerShell。
② 安裝 VS Code
- 前往 https://code.visualstudio.com → 點選 Download for Windows。
- 執行安裝程式 → 一直點選「Next」。但是，在選項畫面中勾選這兩個：
- "Add to PATH"
- "Add 'Open with Code' action to file/directory context menus"
- 安裝完成後執行 VS Code。如果第一個畫面出現韓文語言套件安裝通知，你可以安裝它。
5-2. 🍎 Mac 使用者安裝步驟
① 安裝 Git
- 開啟 終端機：Cmd + Space → 輸入「Terminal」→ Enter。
- 輸入：
git --version
- 如果立即顯示版本號，表示已安裝 → 前往 ②。如果出現安裝指南彈出視窗（「Command Line Developer Tools...」），請點選 「Install」 並等待。（這就是 Git 安裝）。
- 完成後再次使用
git --version驗證。
② 安裝 VS Code
- 前往 https://code.visualstudio.com → 點選 Download for macOS。
- 解壓縮下載的檔案，並將 Visual Studio Code.app 拖曳到 Applications 資料夾。（重要！不要直接從下載資料夾使用它）。
- 從應用程式資料夾執行 VS Code。
5-3. （通用）在 Git 中註冊我的名字 — 僅限首次
此設定是為了在提交中留下「誰進行了此工作」的記錄。在 PowerShell（Windows）或終端機（Mac）中：
git config --global user.name "你的名字" git config --global user.email "你的-github-email@example.com"
輸入與你註冊 GitHub 時相同的電子郵件。
6. 建立 GitHub 儲存庫並使用 VS Code 連接到我的電腦
將「儲存庫」想像成一個容納一個專案的雲端資料夾。流程是：在 GitHub 網站上建立一個空的儲存庫 → 使用 VS Code 將其複製到我的電腦 → 上傳規劃文件 → 將該儲存庫連接到 Claude Code 網頁。
6-1. 在 GitHub 網站上建立儲存庫
- 登入 https://github.comhttps://github.com/)。
- 點選右上角的 + 按鈕 → New repository。
- 如下輸入：
- Repository name：專案名稱（英文，空格用連字號代替。例如：my-first-app）
- 選擇 Private（公司專案必須設為 Private！）
- 勾選「Add a README file」核取方塊 ✅ ← 初學者必須勾選。這會讓下一步（clone）更簡單。
- 點選 Create repository。
- 在建立的儲存庫頁面上，點選綠色的 <> Code 按鈕 → 複製 HTTPS 標籤中的網址。
6-2. 使用 VS Code 複製到我的電腦
- 執行 VS Code。
- Ctrl + Shift + P（Mac 為 Cmd + Shift + P）→ 開啟命令面板。
- 輸入
clone→ 選擇 「Git: Clone」。 - 貼上複製的儲存庫網址並按 Enter。
- 你也可以選擇 「Clone from GitHub」 → 如果瀏覽器開啟並要求 GitHub 登入/授權，請核准。（僅限首次）。
- 選擇一個位置來儲存專案（例如，最好在 Documents 下建立一個 Projects 資料夾）。
- 當複製完成時，右下角會出現一個 「Open」 通知 → 點選它。
- 如果你在左側的檔案總管中看到
README.md，表示成功！🎉 這個資料夾現在是我的電腦和 GitHub 之間連接的工作資料夾。
6-3. 上傳規劃文件 — Concept.md、Design.md、ToDo.md
Claude Code 網頁可以讀取儲存庫內部的檔案。 因此，將規劃文件放入儲存庫等同於「上傳文件」。
- 在 VS Code 檔案總管的空白處按右鍵 → New File → 輸入名稱
Concept.md。 - 貼上你準備好的應用程式描述並儲存（Ctrl+S / Cmd+S）。
- 以相同方式建立並插入
Design.md（如果有 UI）和ToDo.md檔案。 - 現在上傳到 GitHub（commit & push）— 使用 6-4 中的方法。
6-4. 在 VS Code 中提交和推送 — 僅使用滑鼠
- 當你儲存檔案時，VS Code 左側的分支圖示（原始檔控制） 上會出現一個數字徽章。
- 點選該圖示 → 你會看到已變更檔案的清單。
- 在頂部的訊息輸入框中，寫一行關於你做了什麼的說明。（例如：Added planning documents）。
- 點選 ✔ Commit 按鈕 → 儲存在我的電腦上完成。
- 如果出現「There are no staged changes」彈出視窗，請點選 「Yes」 以提交所有內容。
- 然後點選 Sync Changes 按鈕 → 上傳（push）到 GitHub 完成。
- 在 GitHub 網站上重新整理儲存庫，即可看到你剛剛上傳的
Concept.md。現在 Claude Code 網頁也可以讀取這個文件了。
拉取（下載） 也在同一個畫面進行：如果 Claude 在雲端上傳了變更，Sync Changes 按鈕會同時處理下載和上傳。
7. 將儲存庫連接到 Claude Code 網頁並開始開發
現在在瀏覽器中開啟 Claude Code 網頁，並連接你剛剛建立的 GitHub 儲存庫。
7-1. 連接 Claude Code 網頁 ↔ GitHub 儲存庫（僅限首次）
- 存取 https://claude.ai/code → 使用你的 Claude 帳號登入。
- 首次存取時，會出現 Connect GitHub 指南 → 依照指南操作。
- 你將被引導至 GitHub 頁面，並出現 Claude GitHub App 安裝畫面：
- 選擇你的 GitHub 帳號（或組織）。
- 選擇存取範圍：建議選擇 「Only select repositories」，並指定在 6-1 中建立的儲存庫。
- 點選 Install / Authorize。
- 返回 Claude 即完成連接。如果出現環境設定畫面，保持為 Default。
- 開始新的會話（任務）時，從儲存庫選擇清單中選擇你的儲存庫，輸入提示，任務即開始。
7-2. 了解 Claude Code 和 Grok Build 網頁的運作方式（重要！）
Claude Code 和 Grok Build 網頁是在雲端的一台虛擬電腦上運作，而不是在我的電腦上。流程是：
① 我輸入提示
↓
② Claude Code/Grok Build 在雲端複製我的儲存庫並撰寫程式碼
↓
③ 將結果以「新任務分支」的形式推送到 GitHub
↓
④ 我將該分支拉取到我的電腦進行測試，或透過 GitHub 上的 Pull Request 檢查變更
↓
⑤ 如果我滿意，就合併到 main 分支。
- 由於它總是將結果上傳到新分支，而不會直接觸碰 main 分支，所以無需擔心現有程式碼被破壞。（Grok Build 在 main 分支上運作，但可以復原，所以不用擔心犯錯）。
7-4. 開發開始提示
一旦三個文件（Concept.md / Design.md / ToDo.md）在 main 分支中準備就緒，最後在新會話中開始開發。
開發這個專案。根據儲存庫中的以下文件進行： - Concept.md：要開發的應用程式描述 - ToDo.md：模組層級的開發計畫（依此順序實作） - Design.md：設計標準（所有 UI 都遵循此文件）
工作規則： 1. 根據 ToDo.md 中的實作順序，一次處理一個模組。 2. 當一個可測試的單元完成時，透過 README 或回應告訴我如何在我的本機電腦上執行/測試它。由於我是非開發者，請像教導初學者一樣清楚地解釋。 3. 在 ToDo.md 中用核取標記標記已完成的項目。 4. 告訴我任務分支名稱，並用易於記住的提交訊息進行推送。 5. 如果有不清楚的部分，不要猜測；問我。
7-5. 開發期間重複的循環
① 網頁 Claude Code 在任務分支中實作一個模組 → push
↓
② 將該任務分支拉取到我的電腦（VS Code）並直接執行/測試
↓
③ 如果有問題 → 複製整個錯誤訊息並貼到網頁會話中
如果沒有問題 → 「很好，繼續下一個開發」
↓
返回 ① 進行下一個模組
↓
④ 一旦所有功能完成且測試通過
→ 透過 Pull Request 合併到 main 分支
→ 部署始終基於 main
8. 分支 — 在任務分支中測試，並合併到 main 進行部署
8-1. 什麼是分支？
- main 分支 = 始終運作良好的成品展示。部署始終基於
main。 - 任務分支（例如：
claude/feature-login）= 一個複製main而來的施工現場。你可以在這裡隨意建構和破壞；main是安全的。
Claude Code 網頁總是建立一個新的任務分支並推送結果。 因此，你只需要知道三件事：
- 如何檢查我的資料夾目前在哪個分支上。
- 如何將 Claude 推送的任務分支拉取到我的電腦進行測試。
- 完成後如何合併到 main 並部署。
8-2. 檢查你所在的分支
- 查看 VS Code 畫面最左下角的狀態列。分支名稱顯示在分支圖示旁邊。（例如：
main或claude/feature-login）。
8-3. 將 Claude Code/Grok Build 建立的任務分支拉取到我的電腦進行測試
當網頁 Claude Code 說「我已推送到分支 OO」時，將該分支拉到我的電腦進行測試。Grok Build 在網頁畫面右上角有一個「Push to Github」按鈕，按下此按鈕即可推送。
使用 VS Code（僅用滑鼠）：
- 點選左下角的分支名稱 → 開啟分支清單。
- 如果看不到新分支，請在原始檔控制標籤中執行 ... 選單 → Fetch，然後再試一次。
- 從清單中選擇以 origin/claude/... 開頭的 Claude 任務分支 → 你的資料夾將切換到該分支狀態。
8-4. 完成時合併到 main — Pull Request
如果任務分支中的功能已完成且測試通過，請透過 GitHub 網站上的 Pull Request（PR）合併到 main。
- 在 GitHub 上存取你的儲存庫 → 點選 Pull requests 標籤。
- 點選 Claude 建立的 PR。如果沒有，則 New pull request → base:
main，compare: 選擇任務分支 → Create pull request。 - 點選 Merge pull request → Confirm merge → 已反映到
main！ - 將你電腦上的 main 更新到最新版本：
- 點選 VS Code 左下角的分支 → 選擇
main→ 在原始檔控制標籤中點選 Sync Changes。
9. 提示技巧（通用）
Vibe Coding 的品質與提示的品質成正比。
- 指定不要做的事 — 「在我批准之前不要隨意修改程式碼」、「不要新增函式庫，只使用現有的技術棧。」
- 一次一個模組 — 在一個提示中要求整個應用程式會降低品質。根據 ToDo.md 的順序，小批量地提出要求。
- 直接貼上錯誤訊息 — 不要總結錯誤訊息；複製終端機的完整輸出。
- 讓 Claude 在不明確時提問 — 在提示中包含「如果有不清楚的部分，不要猜測；問我。」
- 基於文件進行溝通 — 「像我之前說的」❌ → 「根據 Design.md 的設計」✅。儲存庫中的文件比對話記憶穩定得多。
結束。
正如古老的 Morpheus 所說：
「Neo。我只能為你指出那扇門。你必須自己走過去。」
