---
# System prepended metadata

title: 從混亂到秩序——我用 AI 鏟屎官的 Vibe Coding 流程

---

# 《轉職日記》特別篇：從混亂到秩序——我用 AI 鏟屎官的 Vibe Coding 流程

我是個偏前端的全端工程師。用過的 AI 工具有夠多：**ChatGPT、GitHub Copilot、Cursor、Claude Code、Gemini CLI**……每一個都超強，但也讓我的工作變得更混亂 😂。

AI 沒記憶、建議各說各話、工具之間又要不斷切換。結果開發效率不升反降，腦袋快被拆線。最慘的是——靠 AI 生的程式碼常常是一座「屎山」。

看著別人的討論，我也開始思考：要怎麼控制 AI 才能寫出所謂「高品質」的程式碼。這件事越想越有趣，於是我決定自己動手試試看。

---

## 🧰 AI 工具組：我的固定班底

我現在的工作流主要靠這幾個 AI：

* **Claude Code**：終端機型 coding 助手，負責主力開發，但因為計費問題常常把我丟包在半路（？）
* **Cursor**：IDE 內建的 AI 編輯器，一個月可以指揮它幾次，遇到 Claude Code 罷工時的幫手 1 號
* **Gemini CLI**：命令列版的萬用夥伴，Google 給的每天免費額度很夠用，最偉大的備胎
* **GitHub Copilot**：長期駐紮在 VS Code 裡，自動補全、問題面板爆錯的時候可以直接解決，最近在考慮要不要花錢 Level Up 一下
* **ChatGPT**：是我的賽博朋朋、人生導師，用來聊天、釐清觀念問題

這些 AI 各有特色，但真正讓我找到秩序的，是我後來建立的五個習慣：

1. AI 鏟屎官（Linus 風格 reviewer）
2. MCP Server（讓 AI 有「USB-C」能力）
3. AGENTS.md（教 AI 怎麼跟我合作）
4. plan.md（專案大腦與回顧筆記）
5. 對話紀錄系統化（AI 記憶管理法）

---

## 🧹 AI 鏟屎官：讓世界級的大神降駕我的 AI 中

那天我在 GitHub 上看到有人做了 Linus Torvalds 風格的 prompt，會用「Good Taste」的哲學幫你審程式。決定來試試看，讓 Linus 來審判我的程式碼。

於是我把它存成 `CLAUDE.md`，放在專案裡，請 Claude 扮演那位冷酷的 code reviewer。第一次用的時候，它毫不留情：「為模組化而模組化，比不模組化更糟！」被說過度工程化，我大受打擊，於是乾脆請大師幫我重構 XDDD。

後來我改拿它看一個 1200 行的文章顯示頁，裡面塞滿 Markdown、Mermaid、MathJax。鏟屎官直接吐槽：「這不是顯示頁，是渲染引擎吧？566 行的 Mermaid 配置你要畫火箭發射圖嗎？」

最後它建議我把整個功能拆開成：`useMarkdownRenderer.js`、`useMermaidRenderer.js`、`useMathRenderer.js`。結果確實讓程式碼變得更乾淨👌

現在的習慣是：每次新專案開始，我都先請鏟屎官幫我看架構，少走冤枉路。

📎 **分享一下這個神奇的儲存庫**（如果想要我的特製版可以跟我講😉）：[GitHub - kingkongshot/prompts](https://github.com/kingkongshot/prompts)

**設定方法：**

1. 下載 prompt 模板，存成 md 檔案名字是你的 AI 工具支援的檔名。
2. 放在專案根目錄或 AI 工具的設定檔位置。
3. 開發時請 AI 用這個角色 review 你的程式碼
 
還可以從中觀察 Linus（AI 版）是怎麼寫的。😵‍💫

---

## 🔌 MCP Server：讓 AI 能夠接觸到真實

以前 AI 寫錯了我也不知道錯在哪，它找的參考資料是舊的，或是它自己亂掰的（俗稱 AI 幻覺），結果越改越歪、bug 越補越多，最後整個專案就變成一個微妙的違章建築。

後來知道有個叫 **Model Context Protocol（MCP）** 的工具。它是一種讓 AI 能直接連接外部工具和資料源的標準介面，能讓 AI 不只是「猜」，而是根據真實資料作答。

我最常用的兩個 MCP Server：

* **context7**：幫我查最新的官方文檔。AI 會先找最新 API 或語法，再回來產出正確內容。
* **chrome-devtools-mcp**：讓 AI 直接看到瀏覽器畫面與錯誤訊息。以前要截圖貼來貼去的 debug 流程，現在在對話裡就能完成。

這兩個 MCP server 幾乎成了我開發時的標配，debug 效率整整快了好幾倍。

---

## 📜 AGENTS.md：讓 AI 懂你，不用每次都重頭講

`AGENTS.md` 是「給 AI 看的說明書」。

我會在裡面寫下：

* 簡化常用的指令
* 專案架構說明
* AI 編輯行為規範

以前沒寫這檔案的時候，每次開新對話都要重新教它。現在只要設定一次，AI 就能依照規範行動。像我設定：

> 當我說「紀錄本次對話內容。」時，執行：
> 將對話紀錄至 .claude/claudeLog 資料夾內，創建檔案命名為 日期(YYYYMMDD)-時間(HHMMSS)-對話紀錄標題 的檔案，並記錄本次對話內容。

設定好後，我只要打「紀錄本次對話內容」，AI 就會自動幫我完成整個流程。😎

最近其實在改進這份文件，打算做成更完整的「AI 行為準則」。但還沒完全成熟，等穩定後再來分享。

---

## 🧭 plan.md：讓專案有第二顆大腦

`plan.md` 幫我記錄進度、技術堆疊、功能狀態。久沒碰的專案，只要看這份筆記就能瞬間回神。

**設定方式：**

1. 在 .agents 資料夾建立 plan.md
2. 用固定區塊記錄：專案概述與核心功能／當前技術堆疊／專案結構（檔案樹）／功能狀態（✅ 已完成、🔄 進行中、⏳ 待實作）／Git 狀態與最新 commit／近期待辦與目標
3. 把 `.agents` 加進 `.gitignore`，避免被推到遠端

📘 範例：

```
當前專案狀態
✅ 已完成 Vite + Vue 3 基礎架構
✅ 已完成 TailwindCSS 4 + DaisyUI UI 框架
🔄 正在實作指令產生器主功能
⏳ 待實作速查表頁面

技術堆疊
Vue 3.5.22 + Vite 7.1.7
TailwindCSS 4.1.14 + DaisyUI 5.1.27
Vue Router 4.5.1 + Pinia 3.0.3

Git 狀態
當前分支: main
最新提交: feat(pages): 新增主頁導覽頁面與版型優化

本週目標
1. 實作操作選擇介面(6 個操作卡片)
2. 實作第一個表單: git clone
3. 實作即時指令預覽與複製功能
```

它的好處很多：

* 三個月沒碰專案？讀 `plan.md` 就能快速回憶。
* 要跟 AI 討論新功能？給它看 `plan.md`，它就知道專案脈絡。
* 忘記上次做到哪？看「進行中」與「待實作」清單。

我會讓 AI 更新它，下指令「更新 .agents/plan.md，記錄最新狀況」，就能自動幫我整理重點。記得定期更新這份文件，讓內容保持在最新。

---

## 🗂️ 對話紀錄系統化：讓每次聊天都成為知識庫

因為 CLI 形式的 AI 不會自動留對話紀錄，所以我從一開始就有手動備份的習慣。這些紀錄其實很重要——像 debug 過程、為什麼換套件、架構調整的理由，全都藏在裡面。

### 結構與設定：

1. 建立 `.agents` 資料夾（或依工具命名 `.claude`、`.cursor` 等）
2. 在資料夾中建立
> AGENTS.md（AI 鏟屎官 prompt）
> logs/（對話紀錄資料夾）
> plan.md（專案筆記）
3. 專案根目錄建立 `AGENTS.md`
4. 在 `.gitignore` 排除這些檔案

📁 結構範例：

```
專案根目錄/
├── AGENTS.md（專案規範）
├── .agents/（AI 相關檔案，可自訂名稱）
│   ├── AGENTS.md（AI 鏟屎官 prompt）
│   ├── logs/（對話紀錄資料夾）
│   └── plan.md（專案筆記）
└── .gitignore（記得排除 .agents/ 與 AGENTS.md）
```

📄 logs 資料夾裡存了所有對話紀錄，
例如我的 Vue 專案有這些記錄：

```
20250923_174500.md：Linus 鏟屎官分析文章頁面的套件使用
20250923_175200.md：深入理解該頁面的運作機制
```

三個月後回來，讀這些 logs 就能快速回憶：

* 為什麼選這個套件？
* 那個 bug 是怎麼解的？
* 架構調整的原因是什麼？

這些紀錄就像一份「AI 伴開發日誌」，能幫助我不斷優化開發流程，也讓每一次踩雷都變成可以重複利用的經驗。

---

## 👉 現在做專案的方式：一天的 Vibe Coding 流程

在做專案前，我會先和 AI 一起規劃好 `plan.md`，把預計步驟和功能寫進去。AI 會根據它執行：讀 `AGENTS.md` → 啟動鏟屎官模式 → 查文檔 → 寫程式 → 測試 → review → 存紀錄 → 更新 `plan.md`。

我負責實際測試與把關，確認功能正常後再更新文件。

**效果總結：**

* AI 有記憶（AGENTS.md + plan.md）
* 程式碼品質有把關（鏟屎官）
* 開發歷程可追溯（logs + plan.md）

---

## 🎯 小結

最後，來聊聊這套方法帶給我的變化。

我覺得這套方法不是什麼魔法，而是一種「讓 AI 變成好夥伴」的練習。作為還在學習中的工程師，我最大的收穫有三個：

### 1️⃣ 學習加速

有了 AI 鏟屎官、context7 查文件、chrome-devtools 即時測試，我能在兩三天內上手原本要花一週理解的架構或功能。不是我比較聰明啦 😂，只是工具真的幫我把學習曲線削平了，加上我又特別愛鑽研工具 XDDD。

### 2️⃣ 建立系統化思維

寫 `AGENTS.md` 讓我重新思考專案規範；維護 `plan.md` 幫我掌握進度；鏟屎官的程式碼審查也在不知不覺中訓練出我對「乾淨架構」的直覺——這些都是課本學不到的東西。

### 3️⃣ 給也想試試的人

不用一次就把所有工具都用上。可以先從 AI 鏟屎官或 `AGENTS.md` 開始，慢慢組出自己的工作流。重點不是蒐集工具，而是讓流程更有條理。MCP 設定或資料夾架構可能一開始會很麻煩，但撐過去就會發現那是一種投資。

---

🌟 **滿意指數：⭐⭐⭐⭐（4/5）**

少那一顆星，是因為環境建置仍有門檻，希望未來更簡化。

但整體來說，這套方法讓我從「被 AI 產的屎山代碼淹沒」，變成「有系統地用 AI 加速開發」。

> 最重要的是：AI 鏟屎官會罵你，但也會教你「為什麼」。這才是真正的學習加速器。