前言

「都把 SPEC.md 給準備好了，總可以開始叫 AI 寫程式了吧？！」

別急！你以為準備好 SPEC.md 就可以直接叫 AI 寫程式了嗎？不不不，這是大錯特錯的想法跟流程。

所以先別急著拿著 SPEC.md 去叫 AI 寫程式！

它已經幫你選好技術了，但你點頭了嗎？

首先，要做一個記帳 App 總要決定用什麼技術吧？但身為非工程師的我們，怎麼可能懂 Vue、React、Svelte、Angular、Next.js、Nux...這些有的沒的技術名詞呢？

先別緊張，請你打開昨天的 SPEC.md（你可以參考 GitHub #day9 的範例檔案），往下捲到第 6 節「技術決定」，你會發現一件有趣的事情：

Claude 在訪談過程中，就已經順便幫你把技術給選好了。

像是 Vue 3 + Vite、Tailwind CSS、不裝 Router、不裝 Pinia 等等，甚至連檔案結構都幫你思考好了，但問題來了...你有同意過嗎？你知道這些是什麼嗎？

AI 雖然很聰明，但有時候也很雞婆，而剛好這個雞婆也會讓「AI 會放大你的模糊」成立，畢竟前一篇我們討論把想法扮成規格，根本沒討論過技術選型這件事，但它認為可以先幫你準備，然後又剛剛好「你沒有看到它幫你選的技術」，所以就這樣 SPEC.md 裡面就有了技術選型的結論。

當然，這個決定不一定是錯的（等等你會看到它選得其實不錯？），但「它決定的」跟「你拍板的」這是兩件事情，所以我們今天就是要來把這件事情拍板，確認技術選型。

請你進到 money-note 資料夾啟動 claude，然後輸入：

請你閱讀 SPEC.md
並以這個規格來說，用什麼技術做最合適？
然後給我兩～三個選項，接著說明各自的優缺點，然後給我你的建議。

我有幾個重點考量，我希望...

- 夠簡單
- 夠主流
- 部署容易

Note
如果害怕 AI 亂讀，你可以試著跟 AI 說：「請問當前專案內的 SPEC.md 是什麼內容？請先列出它的章節標題，然後再說明它的內容。」這樣就可以確認它有讀到 SPEC.md。

有趣的地方來了，它自己就會把 SPEC 裡原本的選擇標成「選項 A（SPEC 原案）」，然後才給你替代方案，以我這次的對話來講，它給了三個：

• 選項 A：Vue 3 + Vite + Tailwind（SPEC 原案）
• 選項 B：純 HTML + JS + CSS，單一檔案、不 build
• 選項 C：React + Vite + Tailwind

而且它文件裡面你可以看到這幾個重點：

1. 這個 App 沒有伺服器的任何需求
2. 需要多少反應式的幫忙

看到這邊，我相信你已經充滿疑問了，到底「需要多少反應式的幫忙」是什麼意思？其實這邊技巧沒變，輸入以下 Prompt 就可以請 AI 用白話解釋給你聽：

我看不懂「需要多少反應式的幫忙」這句話，可以用白話解釋給我聽嗎？

它就會告訴你「反應式」指的是「資料一變，畫面自動跟著變」

Note
通常我們會是講「響應式」，但 AI 會把它翻成「反應式」，這是跟 AI 的訓練資料有關，這邊不需要太在意，重點是它有解釋清楚。

看完之後，這邊基本上我還是建議保持原樣，除非你想試著挑戰其他技術面，不然輸入以下 Prompt 就可以請 AI 幫你把決策紀錄補上：

我決定維持選項 A（SPEC 原案），也就是 Vue 3 + Vite + Tailwind。
請在 SPEC.md 的「決策紀錄」補上這一條：技術維持原案，是比較過純 HTML 與 React 之後確認的，其他內容不要動。

把決策記錄下來絕對能夠幫助你過幾天回頭看，甚至幾個月後回頭看，甚至幾年後回頭看，這些都是你在專案中最寶貴的資產。

Note
它列的選項其實也會參考你過往的對話跟背景（它知道我平常就在寫 Vue），所以你實際看到的選項跟理由可能會跟我不一樣，這很正常，重點不是抄我的答案，而是把它給你的理由看懂再點頭。
如果你 Vibe Coding 的不是記帳 App，流程也一樣：丟規格、要選項、看理由，不同需求就會收斂出不同答案。

所以我們的技術棧就這樣定了：Vue 3 + Vite 負責畫面、Tailwind 負責樣式、LocalStorage 負責存資料，至於部署去哪個空間呢....我們後面章節再來聊。

環境準備

你以為前面準備好就可以直接動工嗎？不！當然是準備開發環境啦～

我個人認為這邊算是許多新手最容易卡住的地方，因為這邊必須額外安裝程式，也就是 Node.js。

所以這邊要請你先打開 Node.js 官方下載頁，下載 LTS 版本（長期支援版，頁面上標著 LTS 的那顆按鈕就對了，版本數字比我文章截圖新是正常的）

Node.js 下載頁面： https://nodejs.org/en/download

接著請你選擇任何一種安裝方式，這邊我就不特別細說了，因為 Windows、macOS、Linux 都不太一樣，請你依照畫面上的指示安裝就可以囉～

除此之外，還要安裝 git 這個工具（所謂的版本控制）：

Git 官方安裝頁： https://git-scm.com/downloads

接下來準備開工之前，我們要先檢查這些工具是不是真的裝好了，畢竟「裝了卻沒生效」是新手死掉最多的地方。

請你打開終端機（如果你還在 Claude Code 裡面，先輸入 /exit 離開，或另外開一個新的終端機視窗），並個別輸入以下指令：

檢查 Node.js 版本：

node -v

檢查 npm 版本：

npm -v

檢查 git 版本：

git --version

重點其實只有一個：三個指令都要能輸出版本號。

只要有任何一個沒反應或噴錯，就先把你輸入的指令跟畫面上的錯誤訊息一起丟給 claude.ai 問，這種環境問題把完整訊息貼過去通常很快就有解，排除後再往下走，因為後面要用到的工具都需要這三個環境。

最後也強烈建議你替瀏覽器安裝 Claude in Chrome 擴充套件，這個擴充套件到時候可以讓 AI 幫你操控瀏覽器去除錯，所以事前準備是很重要的。

請 AI 幫你準備開發環境

接下來呢？難道要像工程師一樣輸入各式各樣的指令嗎？不，不對。

這邊我們直接跟 AI 說：

請幫我基於 SPEC.md 的規格，幫我準備好開發環境，先不要急著開發。

沒錯，就是這麼簡單，過程 AI 應該會詢問你一些問題。

Note
很多時候，我會額外補充強調「先不要急著開發」，因為 AI 很容易雞婆地直接幫你開發，導致你根本還沒準備好環境就開始寫程式，這樣會很容易出錯。

跑完之後你的資料夾裡會多出一堆東西（package.json、src/、node_modules 等等），這些是 Vue 專案的骨架，現在不用逐一認識它們，之後輪到哪個登場時我再介紹哪個。

準備好之後，你可以跟 AI 說：

幫我啟動專案的開發環境，我要預覽專案狀況。

那麼 AI 理論上會跟你說它已經啟動了開發環境，並且給你一個網址，通常 Vue 的開發環境會是 http://localhost:5173/（可能也會有不同？建議依照 AI 回饋的網址為主），你可以把這個網址複製到瀏覽器上，看看專案的狀況。

Note
不同的技術選型，啟動開發環境的方式也會不太一樣，但大致上都是給你一個網址，然後你就可以在瀏覽器上看到專案的狀況。

到目前為止，我們基本的環境搞定啦～

git init：Vibe Coding 的後悔藥

接下來我們稍微介紹一下 Vibe Coding 非常重要的東西，可以說是後悔藥、時光機 — Git。

Git 我認為是所有 Vibe Coding 專案中最重要的工具、一定要掌握的東西，雖然你不需要跟工程師一樣一直打這種指令：

git init
git add -A
git commit -m "功能名稱：簡短描述"

但你會很需要它的「後悔藥」、「時光機」功能。

什麼意思呢？前面 Day 4#結語 就有提到「後悔用 /rewind（或是 Esc 按兩下），要注意它救不了 Bash 造成的變更。」這句話，所以 AI 一旦使用 bash 指令，那麼 /rewind 是救不回來的，而 Git 就可以拯救這件事情，因為所有的行為都會被紀錄在 commit 裡面，想回哪個版本就回哪個版本。

Note
你可以把「commit」理解成遊戲的「存檔點」，每次 commit 都是完整的存檔點，想回哪個版本就回哪個版本。

但我們需要對 Git 做什麼呢？答案是不用。

因為下這些指令的人，一樣是由 AI 來負責，並非由我們人類來操作，因此你只需要確認有安裝好 Git，並跟 AI 說：

請務必把我的程式碼使用 git init 初始化。

這樣就準備好啦～

Note
這邊要注意，我們今天只有「初始化」，還沒有做出任何 commit（存檔點）唷。
第一個存檔點會在明天做完第一個功能、驗收通過之後才出現，這也剛好呼應了等等要寫進 CLAUDE.md 的開發規則：驗收完才 commit。

AI 憲法：CLAUDE.md

最後我們必須認識一個東西，也就是 CLAUDE.md。

這個東西非常非常的重要 x 3 次，為什麼重要呢？其實原因很簡單，因為 CLAUDE.md 本身會在每一次對話中被自動載入，這就像是專案的憲法一樣，裡面寫著專案的規則、技術棧、指令慣例等等。

前面章節中，我們只要輸入 /clear 或者開啟一個新的對話視窗，就會發生我們所期望的設定全部消失的問題，但只要你搭配 CLAUDE.md 之後，你所期望的設定/規則，例如...

- 你只能回覆我繁體中文
- ...

這時候這個規則就會被重新自動載入，這樣就不會再發生「忘記設定」的問題。

Note
CLAUDE.md 會建議控制在 250 行以內，並且放置一些 AI 無法透過閱讀程式碼就知道的規則，例如「只能回覆我繁體中文」這種類似的規則。

建立的方式也很簡單，通常有兩種方式：

• 手動新增： 在專案的根目錄新增一個名為 CLAUDE.md 的檔案，並把規則寫進去。
• 使用內建指令 /init：它會掃你的專案自動生成一份 CLAUDE.md，生成的版本通常偏向描述現況，我們手工把「開發規則」加進去。

兩者哪一個比較好呢？如果你是一個小新手，那我會建議直接使用 /init 會比較簡單一點，如果你本身有一定的經驗，那麼可以選擇手動新增，因為這樣可以更精準地控制 CLAUDE.md 的內容。

這邊我就直接給你 /init 生成的 CLAUDE.md 內容給你參考，當然通常你應該會取得一份「英文版本」的 CLAUDE.md，你可以請 AI 幫你改成繁體中文，或者你也可以直接把下面的內容複製貼上到 CLAUDE.md（day9#CLAUDE.md） 裡面也可以。

那這邊其實還有一點內容我們要做一下小加工，也就是定義一個簡易的開發流程，請你把底下 Prompt 丟給 AI 就搞定了：

請幫我加入以下開發規則到 CLAUDE.md 裡面，並且每次對話都要遵守這個規則：

- 每個功能驗收完就 commit 一次，commit message 以「功能名稱：簡短描述」為格式
- commit message 請使用繁體中文

今天小挑戰

一樣今天有個小挑戰要給你，試著去確認以下幾件事情：

• node -v、npm -v、git --version 都可以看到版本號。
• 請 AI 啟動伺服器，並且可以在瀏覽器看到畫面而非「無法連上這個網站」或是錯誤畫面。
• SPEC.md 與 CLAUDE.md 都在 money-note/ 根目錄

很簡單吧？如果有問題的話，你都可以反覆往前觀看的章節，或是把畫面截圖丟給 AI 問它，通常它都可以幫你解決。

結語

最後總結一下我們今天做的事情。

基本上就跟打木樁一樣，做了三件重點事情：

1. 技術選型：AI 替你選的也要攤開來比較、聽懂理由再補拍板；夠主流對 Vibe Coding 是加分項。
2. git init：是很重要的後悔藥、時光機。
3. CLAUDE.md：專案憲法，把無法透過閱讀程式碼就知道的規則寫進去，並且每次對話都會自動載入。

那麼我們今天就到這邊結束，剩下的明天見～