兩年後再開同一個專案：終於有工具幫你讀 code 了
做網頁這行，最怕的不是從零開始。從零開始反而有種莫名的爽感——一張白紙，結構你說了算，命名也歸你管。
最怕的是打開一個擱了兩年的專案，捲軸拉到第 400 行，心裡第一個浮現的念頭是：「這誰寫的？」
變數叫 tmp2_final_REAL.js，元件之間互相 import 到天荒地老，文件早就不知道塞到哪個雲端硬碟的深處。那種「這 code 是我寫的？我那時候到底在想什麼？」的恍惚，做過的人都懂。
這篇寫給所有網頁設計師和前端工程師——不管你現在主力是 React、Vue、Next.js 還是偶爾回鍋的 jQuery。
我要介紹一個工具，它能做這些事：
- 把整個專案讀進去，變成一個會說人話的知識庫
- 幫你解讀那些看不出邏輯的函式，講成人話
- 幫你重構 legacy code，同時保持功能不變
- 而且全程在你自己電腦上跑，資料不上任何雲端
這個工具叫 OpenClaw，我們在台中辦公室裡暱稱它「鍛碼匠的 AI 副駕駛」。
什麼是 OpenClaw？先把定義講清楚
繼續往下講之前，得先把 OpenClaw 是什麼講明白，否則後面你會越看越困惑。
OpenClaw 是一套在本機運行的 AI 代理框架。它讓你在自己的機器上，架設一個完全私有的 AI 系統——不用註冊帳號、不用綁信用卡、不用把任何檔案丟到別人家。
現在大多數人用 AI 的流程是這樣的：把 code 複製貼到 ChatGPT 視窗，輸入「請幫我重構這段」。你的 code、商業邏輯、變數命名背後的脈絡，全部上傳到 OpenAI 的伺服器，變成訓練資料的一部份——這是他們的條款寫的。
OpenClaw 反過來做：把 AI 帶回家。它內建支援 Ollama，讓你可以在本機跑 Llama、Mistral、Qwen 這類開源模型。所有對話、所有 context，從頭到尾留在你自己的硬碟裡。
對網頁設計公司來說，這件事的意義比想像中大。客戶的程式碼、還沒對外公開的專案架構、你選擇某個技術棧的判斷依據——這些東西本來就不該讓外人看到。
開始之前：把 OpenClaw 跑起來
理論講完了。現在來動手。
前提條件
- Docker Desktop，或任何能跑 container 的環境
- Node.js 18 以上
- 8GB 以上的 RAM，如果想跑 7B 等級的模型
記憶體不夠不是不能跑，只是速度會慢到你開始懷疑電風扇是不是快起飛了。
Step 1：安裝 Ollama
Ollama 是 OpenClaw 的「本地大腦」。它讓你在本機跑各種開源 LLM，沒 GPU 也能勉強跑一些小模型。
## macOS
brew install ollama
## Linux
curl -fsSL https://ollama.com/install.sh | sh
Step 2：下載模型
第一次用，建議從 Qwen 或 Llama 3 開始：
## Qwen 2.5，較輕量，中文表現不錯
ollama pull qwen2.5:7b
## Llama 3，英文能力更強
ollama pull llama3:8b
第一次下載會需要一點時間，取決於你的網速。去泡杯咖啡，或者把洗好的衣服拿去晾，我們等等見。
Step 3：啟動 OpenClaw
OpenClaw 有兩種執行方式：
- Docker 模式：一行指令，環境全包好
- 手動模式：自己設環境變數，比較有彈性
Docker 模式最快：
docker run -d \
--name openclaw \
-p 18789:18789 \
-v ~/openclaw-data:/root/.openclaw \
-e OLLAMA_BASE_URL=http://host.docker.internal:11434 \
openclaw/openclaw:latest
這行指令的重點是 OLLAMA_BASE_URL。OpenClaw 會把你的本地 Ollama 當成模型供應商，但所有推論都在你自己的機器上跑。
Step 4：確認它活著
打開瀏覽器，進入 http://localhost:18789。如果看到 OpenClaw 的介面，恭喜——你的私人 AI 已經上線了。如果畫面一片白，別慌，回去檢查 Docker log，通常是 port 被佔用或 volume 路徑寫錯。
實戰場景一：讓 AI 幫你看懂別人寫的 component
這是最常見、也最痛的情境。
接手一個 Vue 3 專案，打開 OrderManager.vue，800 行，變數叫 arr1、arr2、tempData，裡面還有三四層 Promise.then() 巢狀。咖啡喝了三杯，眼睛看酸了，邏輯大概懂，但細節已經記不起來。
以前的方法：自己一行一行讀，邊讀邊在心裡罵。讀完之後，前 200 行講了什麼已經模糊。
用 OpenClaw 的方法：
1. 把 OpenClaw 的知識庫指向你的專案資料夾
在 OpenClaw 設定頁面，新增一個專案：
- 專案名稱：例如「電商網站 v1」
- 指向路徑：
~/projects/ecommerce-site
2. 把檔案餵給它
把 OrderManager.vue 的程式碼貼進去，然後問：
「這段程式碼的商業邏輯是什麼？特別是 arr1 和 arr2 分別代表什麼資料。」
你會得到類似這樣的回答：
「arr1 是已確認的訂單陣列，arr2 是待處理的退貨申請。流程是：先顯示所有未處理的退貨（從 arr2 篩選），再把已處理完的退貨狀態回寫到 arr1 的對應項目，最後寫進 localStorage。」
重點不是它幫你翻譯 code——重點是它用正常的商業語言，告訴你「你在對什麼資料做什麼事」。這種翻譯能力，在你看別人留下的 code 時，價值連城。
實戰場景二：交接文件的救星
每個網頁設計師都碰過這個地獄場景。
客戶換窗口了，新窗口打電話來：「之前的網站功能，給我一份完整的規格文件。」
你打開專案，沒有文件。Figma 連結過期三個月。Notion 文件停留在 v1.2，但實際程式碼已經跑到 v2.7。整個專案像一間沒人打掃的辦公室，抽屜裡塞滿了便條紙。
這時候讓 OpenClaw 幫你生出文件。
把整個 /src 資料夾加入 OpenClaw 的知識庫，然後問：
「幫我生出這個專案的 API 規格文件，包括所有端點、請求參數和回應格式」
「把這個電商網站的主要頁面功能，用一般業務人員能聽懂的語言描述」
OpenClaw 會掃過所有 component、route、API call，整理成結構化的文件。
它生出來的不是 100% 完美的文件。可能會漏掉一些邊界情況，也可能對你的商業邏輯有少許誤解——這是現階段所有 LLM 的共同限制。但它給你的是一份可以修改的起點，你只需要 review 和補充，而不是從空白頁開始打第一個字。
實戰場景三：重構時的保護傘
想重構，但不敢動，怕改壞了。
傳統流程是這樣的：小心翼翼地改，改完之後手動測試所有功能，心跳加速地按下部署按鈕，出包了再 debug 到半夜。
OpenClaw 的做法：
重構前，把你要動的 module 貼進去，問：
「這段程式碼的主要功能是什麼？有沒有明顯的 side effect 或相依性我需要注意的？」
「如果我要把這個 class component 改成 functional component，邏輯上需要注意哪些地方？」
它會幫你盤點出「高風險區塊」——那些看起來很單純、但其實偷偷摸了好幾個全域變數的地方。
重構後，把新舊兩版一起貼進去：
「新舊兩段程式碼，功能邏輯是否完全一致？列出所有可能有差異的地方」
這種「重構前先請 AI 找風險、重構後再請 AI 做 diff」的雙重確認，是降低上線事故的低成本做法。當然，自動化測試還是得寫——AI 不是萬靈丹，但它能把「明顯會出事的地方」先抓出來。
實戰場景四：技術債的盤點報告
很多小型網站公司的 code 都是「能跑就上線」。
兩年下來，utils.js 累積到 2000 行；有些 function 只被 call 一次，有些命名現在看起來像某種內部玩笑。接手的人打開來，光是決定從哪裡開始整理就得花一個下午。
讓 OpenClaw 幫你跑一次技術債盤點：
「分析這個專案的
/src/utils資料夾，找出那些看起來只被用到一次但體積很大的函式，以及命名不一致的地方。給我一份『優先處理清單』，以影響範圍排序。」
輸出會類似這樣：
| 檔案 | 函式 | 問題 | 建議 |
|---|---|---|---|
utils/api-helper.js | getData_v3_final() | 超過 200 行、只被 call 一次 | 拆分並重命名 |
utils/format.js | fmt() | 沒有 JSDoc、多處使用 | 先補文件再重構 |
它不是幫你重構，而是幫你把「要做什麼」盤點清楚。實際動手的還是你，但方向對了，剩下就是工法的問題。
為什麼本地端 AI 對網頁設計公司特別重要
你可能會問：「用 ChatGPT 也能做這些事，為什麼要繞一圈用 OpenClaw？」
幾個很實際的理由。
第一，資料隱私。 客戶的程式碼、資料庫 schema、還沒發布的新功能——這些東西在法律上很可能已經落在 NDA 的範圍。你把它們貼給任何 SaaS AI，技術上就已經是一次「資料外洩」。OpenClaw 跑在本地，資料從頭到尾沒有離開過你的硬碟，連網路線都不用接。
第二，長期成本。 SaaS AI 的 API 訂閱費，隨著使用量增加，會變成固定的營運成本。OpenClaw 加上 Ollama，只需要機器的運算資源，沒有訂閱費。RAM 就是你唯一要付出的硬體成本。
第三，不受網路限制。 在客戶現場做 demo，網路環境不穩定是常態。這時候本機跑的 AI 就是救星——不用等網路、不用看 API 限流的臉色。
開始建議：從哪裡開始
如果你是第一次接觸 OpenClaw，建議不要一開始就想用它取代所有工作。那樣只會失望，AI 工具最怕的就是期望管理沒做好。
從一個具體的小問題開始：
- 今天先把 Ollama 裝起來，確認模型能跑、回答得出中文
- 找一個你看到會嘆氣的舊檔案，貼給 OpenClaw 問它
- 試一次「幫我生出這段程式碼的文件」
從這些小事開始，你會慢慢抓到 OpenClaw 的定位：它不是幫你寫 code 的工具，而是幫你理解 code、保護 code、記錄 code 的工具。前者是 IDE 的工作，後者才是 AI 真正能補位的部分。
相關文章
如果這篇讓你對本地 AI 工具產生了興趣，以下是鍛碼匠部落格的其他相關文章：
- 讓 AI 記住一切：OpenClaw 知識庫調教與 RAG 進階實戰 — 想把 OpenClaw 的本地知識庫功能用到極致，這篇是進階攻略
- 當 AI 變成破口：Prompt Injection 攻擊的真實威脅與 OpenClaw 資安實踐 — 用本地 AI 的同時，也要了解資安風險
- 2026 AI 封閉與開源 Embedding 模型推薦 — 想優化本地知識庫的語意搜尋能力，這篇告訴你怎麼選對 Embedding 模型
這些文章都是鍛碼匠在實務中研究、測試、整理出來的經驗談。如果你在用 OpenClaw 的過程中卡關，歡迎來跟我們聊聊——我們在台中，隨時有空。
