先前分別初始化建立了 my-refrigerator 專案、安裝並設定好 Claude Code CLI，也第一次讓 Claude Code 使用我們建立的 Skill。今天正式開始建立專案的基礎環境，包含專案初始化、Git 版本控制，以及最終要使用的 GitHub Pages 部署環境。

這次的目標很明確：我們希望打造一個可以在手機上使用的「智慧冰箱」Web App，因此前端會使用 Vue，程式碼放在 GitHub Repository，最後透過 GitHub Pages 將網站部署到網路上。這樣的架構成本低，也非常適合個人專案與 AI 開發練習。

首先是專案初始化。我們可以讓 Claude Code 協助檢查目前環境，並依照專案需求建立 Vue 專案。這時候可以再次使用 Day16、Day17 建立的 Skill，例如要求 Claude：

「請依照目前專案的 Frontend Skill，初始化 Vue 3 + TypeScript 專案。」

這句話看起來很簡單，但背後其實已經包含了前幾天建立的 AI 開發流程。Claude Code 不只是收到一個 Prompt，而是需要參考專案 Context 與 Skill，再依照規則完成工作。

完成初始化後，專案通常會出現 package.json、src、public 等基本結構。接著可以先啟動開發環境，確認 Vue 專案能正常執行，再進行下一個階段。

第二步是建立 Git 版本控制。Git 對 AI 輔助開發尤其重要，因為 Claude Code 可能一次修改多個檔案。如果沒有版本控制，一旦 AI 做出不符合預期的修改，就很難追蹤到底改了什麼。

因此，每完成一個具有意義的功能，就應該建立清楚的 Commit。例如：

git add .
git commit -m "chore: initialize Vue project"

之後再將本地專案推送到 GitHub Repository。這樣不但可以保存開發歷程，也方便之後使用 git diff 檢查 Claude Code 到底修改了哪些內容。

第三步就是 GitHub Pages。因為 my-refrigerator 是前端 Web App，我們可以利用 GitHub Pages 免費提供靜態網站託管。完成部署後，就可以直接透過網址開啟自己的網站，甚至在手機瀏覽器中使用。

這裡也可以讓 Claude Code 協助建立 GitHub Actions Workflow。例如每次 Push 到主要分支後，自動執行：

Push
  ↓
GitHub Actions
  ↓
npm install
  ↓
npm run build
  ↓
Deploy
  ↓
GitHub Pages

這就是最基本的 CI/CD 概念。未來我們只需要專心修改程式並 Push，GitHub Actions 就能自動完成建置與部署。

不過，在這個階段還有一件重要的事情：**不要把敏感資訊放進 Git Repository。**例如 API Key、密碼、Access Token 等，都不應該直接寫進 Vue 程式碼或 Commit 到 GitHub。這也是後面加入 AI、資料庫與 MCP 時必須特別注意的安全問題。

今天完成之後，my-refrigerator 就正式從一個想法變成一個可以持續開發與部署的專案：

Vue 負責前端、Git 負責版本控制、GitHub 負責程式碼管理、GitHub Pages 負責網站部署，而 Claude Code 則協助我們完成整個開發流程。

更重要的是，從今天開始，每一次修改都可以被記錄、檢查與回復。這會讓接下來的 AI 輔助開發更加安全。

下一步，我們就可以開始真正設計 my-refrigerator 的核心——資料庫與資料模型，思考「冰箱裡的食材」到底應該如何被記錄。