喺 VSCode 入面用 Claude Code
讓 AI 真正落地幫你做嘢
裝好 Claude Code 之後，下一步係將佢嵌入 VSCode。咁樣 AI 可以直接讀寫你電腦嘅檔案，幫你整 landing page、改文案、整理學員名單 — 唔再係淨係「同你傾偈」。
要先裝好 Claude Code 本身。如果未裝 → 睇返上一份教學「Claude Code 安裝教學」
點解唔用 Claude Desktop App，要用 VSCode？
兩個都係用 Claude，但能力差好遠。簡單比較：
🅰️ Desktop App
就好似 ChatGPT — 你問，佢答。檔案要逐個 upload，每次傾偈完就冇曬。
🅱️ VSCode + Claude Code
AI 可以直接睇你整個 workspace folder 嘅所有檔案、改文件、整新頁、跑 script — 真正幫你「做嘢」。
即係話：如果你想 AI 幫你整 landing page、處理 CSV 學員資料、砌自動化流程 — VSCode 版係必須。
PART 1裝 VSCode
VSCode（Visual Studio Code）係 Microsoft 出嘅免費編輯器。雖然係俾程式員設計，但你完全唔需要識 code — 我哋只係用佢做 AI 嘅工作枱。
去官方下載
打開瀏覽器，去：
網站會自動偵測你係 Mac 定 Windows。撳大 button：「Download」。
Mac 用戶：拉去 Applications
下載完係一個 .zip 檔，雙擊解壓，會出 Visual Studio Code.app。
將佢拉去 應用程式 / Applications 資料夾 → 完成。
Windows 用戶：跑 installer
下載完係 VSCodeUserSetup.exe，雙擊。
跟住一直撳「下一步 / Next」就 OK，全部用 default 設定。
第一次打開 VSCode
Mac：去 啟動台 搵 Visual Studio Code 撳開。
Windows：開始功能表 搵 Visual Studio Code。
打開後會見到一個深色背景嘅編輯器。裝 VSCode 完成 ✅
Themes → Color Theme → 揀 「Light+」 變白色。PART 2喺 VSCode 入面開啟 Claude Code
VSCode 裝好喇，而家將 Claude Code 連入去。
打開 Extensions 市場
VSCode 左邊 sidebar 有幾個 icon，搵到呢個四方塊圖案（叫 Extensions）：
- Mac 快捷鍵：⌘ + Shift + X
- Windows 快捷鍵：Ctrl + Shift + X
搜尋 Claude Code
頂部嘅搜尋格打：Claude Code
第一個結果就係 — 出版者顯示 Anthropic（確認係官方）。
撳藍色 button 「Install」。
打開 Claude 對話面板
裝完之後，左邊 sidebar 會多咗一個 Claude 圖示 — 撳佢。
或者用快捷鍵：
- Mac：⌘ + Esc
- Windows：Ctrl + Esc
第一次打開會叫你登入。
登入 Claude 帳號
撳 「Sign in with Claude」，會跳轉去瀏覽器登入頁。
用你之前裝 Claude Code 時嘅同一個帳號登入 → 完成後瀏覽器會話「已連接」→ 返去 VSCode。
你會見到 Claude 嘅對話面板，可以開始打字。✅ 連接成功
PART 3真正開始用
而家最關鍵嘅一步：開一個資料夾俾 Claude「進駐」。
建一個專屬資料夾
喺你桌面（或者任何位置）整個新 folder，可以叫：
AI工作枱 或者 我的Claude工作區
將來所有 AI 整嘅嘢（landing page、文案稿、學員資料）都放呢度。
用 VSCode 打開個 folder
VSCode 頂部 menu：File → Open Folder...
揀返你頭先整嘅 AI工作枱 folder → 撳 「開啟 / Open」。
左邊 sidebar 會見到個 folder 結構（而家係空嘅）。
試你第一個任務
喺右邊 Claude 對話面板，copy 下面呢句貼入去：
幫我整一個簡單嘅 landing page，主題係「免費流量班」，要有 hero 區、3 個 benefit、1 個 CTA button。用 HTML + CSS 寫喺一個 file 入面，叫 landing.html按 Enter 送出。
Claude 會係你個 folder 入面直接建 landing.html 檔。整完之後雙擊個 file 用瀏覽器打開 — 你就見到一個 AI 砌嘅 landing page。
🎯 你而家擁有咩？
你而家有一個 24/7 嘅 AI 助理，可以：
- 直接讀 / 改你 folder 入面任何檔案
- 整新嘅 HTML / 文案 / Excel
- 處理你 download 嘅學員 CSV、回覆紀錄
- 跟你嘅指示一路完善 — 而唔係每次重新解釋
下一步：跟住課程嘅自動化單元，學點樣將呢個工作枱接駁返 ManyChat / Make / GoHighLevel。
常見問題
學生喺呢一步最常 stuck 嘅位。
我喺 Extensions 搵唔到 Claude Code，點算？
確認你 VSCode 已經更新到最新版（VSCode → Check for Updates）。如果仲係搵唔到，去 marketplace.visualstudio.com 搜 Claude Code，直接喺網頁撳 Install — 會自動跳返 VSCode。
裝完 extension 但左邊 sidebar 冇 Claude 圖示？
(1) Quit VSCode 重新打開 (2) 揀 View → Command Palette（⌘/Ctrl + Shift + P）→ 打 Claude Code: Open 強制叫醒佢。
Claude 答嘢但唔幫我建檔案？
99% 係因為你冇 File → Open Folder，Claude 唔知放邊。打開個 folder 先，再問一次。
Claude 會唔會睇晒我電腦所有檔案？會唔會洩漏私隱？
唔會。Claude 只睇到你 用 VSCode 打開嘅 folder 入面嘅嘢，其他位置佢完全冇權限。你可以為唔同 project 開唔同 folder，做到完全分隔。
用 VSCode 對我部電腦會唔會好食 RAM？
VSCode 比 Chrome 仲輕。8GB RAM 嘅電腦 run 都冇問題。如果真係慢，閂咗其他 app（特別係 Photoshop / 大量瀏覽器分頁）就 OK。
我可唔可以用 Cursor / Windsurf 代替 VSCode？
可以，佢哋都 support Claude Code。但呢份教學係以 VSCode 為標準，因為佢免費、最多人用、最穩定。建議你新手階段先用 VSCode，熟手之後想試其他都得。
Mac vs Windows，邊個體驗好啲？
功能 100% 一樣，唔影響你學嘢。揀你而家手上嗰部就 OK。
下一步
返去學員群組 / 課程，跟住睇「砌你第一個 AI 自動化流程」嗰個單元。我會教你點樣用 VSCode + Claude Code 將你嘅內容銀行、學員資料、ManyChat 漏斗連埋一齊。