今天，就要真正讓 Claude Code 進入這個專案，從「認識 AI 開發工具」進入「讓 AI 參與實際開發」的階段。

在開始之前，第一件事情就是準備好 Claude Code CLI 的開發環境。Claude Code CLI 是一個可以直接在終端機中使用的 AI 開發工具，開發者可以在專案目錄裡啟動 Claude，讓它讀取專案內容、分析程式碼、修改檔案，以及協助執行開發任務。

首先，需要確認自己的開發環境已經具備必要的工具，例如 Terminal、Git，以及後續 Vue 專案會使用到的 Node.js 與 npm。完成基本環境準備後，再依照 Claude Code 官方文件的安裝方式安裝 CLI。安裝完成後，可以透過終端機確認 Claude Code 是否能正常啟動。

接著，進入我們的 my-refrigerator 專案目錄，再啟動 Claude Code。這裡有一個很重要的觀念：在哪一個目錄啟動 Claude Code，會直接影響它理解目前專案 Context 的方式。

因此，不要隨便在其他資料夾啟動，而是應該先進入：

my-refrigerator/

再開始工作。

進入 Claude Code 後，這次不要急著請它寫程式。我們可以先讓它做一件事情：

「請先了解這個專案，閱讀 CLAUDE.md 與相關 Skill，告訴我目前你理解到的專案規則。」

這就是今天最重要的練習——使用 Skill。

昨天我們建立了 SKILL.md，今天第一次讓 Claude Code 真正使用它。假設我們建立的是 Frontend Skill，其中規定專案使用 Vue 3、TypeScript、Composition API，以及元件的檔案結構，那麼 Claude Code 在後續建立頁面或元件時，就可以參考這些規則。

這和每次重新輸入 Prompt 有很大的差別。

例如沒有 Skill 時，我可能需要一直告訴 AI：

「請使用 Vue 3。」

「請使用 Composition API。」

「請使用 TypeScript。」

「Component 放在 components 資料夾。」

但有了 Skill 之後，這些規則可以被整理成專案的一部分。AI 每次執行相關任務時，都可以依照既定規範工作。

接著可以進行一個很簡單的測試：

「請根據目前專案的 Frontend Skill，規劃 my-refrigerator 首頁的元件結構，先不要修改任何檔案。」

這個 Prompt 很適合當作第一個練習，因為我們還沒有要求 AI 寫程式，而是先觀察它是否真的理解 Skill。

如果 Claude Code 提出的架構符合我們的預期，就代表目前的 Context 與 Skill 基本上運作正常；如果發現它理解錯誤，也正好可以回頭修改 SKILL.md。這就是使用 Skill 很重要的一個觀念：

Skill 不是寫完就結束，而是透過實際開發持續修正。

當我們開始開發 my-refrigerator 後，可能會發現某些規則沒有寫清楚，例如手機版 UI 要採用 Mobile First、資料存取方式要統一、元件命名需要遵循某種格式。這些經驗都可以逐步補回 Skill，讓 Claude Code 越來越符合這個專案的開發方式。

因此，今天真正的成果並不只是「成功安裝 Claude Code CLI」，而是完成了第一個完整循環：

安裝 Claude Code → 進入 my-refrigerator → 載入專案 Context → 使用 SKILL.md → 驗證 AI 是否理解專案規則。

從這一天開始，我們不再只是單純「問 AI 寫程式」，而是開始建立一套屬於自己的 AI Native Development Workflow。

而下一步，就是讓 Claude Code 正式開始幫我們建立 my-refrigerator 的專案架構。