AI AGENT 初探

開始使用你的
Claude Code

第一次接觸 AI Agent?這份指南帶你從零開始——註冊 Claude 帳號、裝好各平台的工具,再到終端機把 Claude Code 安裝起來,準備好你的第一個 AI 助手。

4安裝步驟
全平台網頁 / 手機 / Office / 終端機
0需要的程式基礎
01

註冊與安裝 Claude

Claude 不只是一個聊天網站——它在網頁、手機、Office、終端機都有對應的工具。先把帳號和這幾個入口準備好,後面學什麼都能立刻動手試。照著下面四步走一次即可。

1

註冊並登入 Claude.ai

打開 claude.ai,用 Google 帳號或 Email 註冊,完成驗證後即可登入。這是你的 Claude 主帳號——之後手機 App、Office 外掛、終端機的 Claude Code 全部都用同一個帳號登入,資料與用量是共通的。

網頁瀏覽器免安裝
2

下載 Claude App

把 Claude 帶著走。手機到 App Store(iPhone)或 Google Play(Android)搜尋「Claude」安裝;電腦則到 claude.ai/download 下載 桌面版 App(Mac / Windows 都有)。用同一帳號登入即可。

桌面 App 的好處:可常駐背景、用快捷鍵隨叫隨出,之後手機遠端操控 Claude Code 的推播通知也靠它。

iOSAndroidmacOSWindows
3

安裝 Office 外掛

讓 Claude 直接在 Excel / Word 裡幫你工作。從 Microsoft 的增益集商店(插入 → 取得增益集 / Add-ins)搜尋「Claude」安裝,登入同一帳號後,Claude 會出現在側邊欄,能讀懂目前的試算表或文件、依你的指示填表、整理、改寫。

ExcelWordMicrosoft 365
4

在終端機安裝 Claude Code

這是本系列的主角。Claude Code 是跑在終端機裡的 AI 工程助手,能讀寫你電腦上的檔案、執行指令。官方推薦的「原生安裝」一行指令就搞定,不需要先裝 Node.js、Homebrew 或其他東西。點下方頁籤切換你的系統:

# 1. 開「終端機」(Terminal),貼上這行、按 Enter 安裝
curl -fsSL https://claude.ai/install.sh | bash

# 2. 進你的專案資料夾、啟動 Claude
cd ~/你的專案資料夾
claude
# 1. 開「PowerShell」(不是 CMD),貼上這行、按 Enter 安裝
irm https://claude.ai/install.ps1 | iex

# 2. 進你的專案資料夾、啟動 Claude
cd C:\Users\你的帳號\你的專案資料夾
claude

裝完可先打 claude --version 確認成功。第一次啟動 claude 會跳出瀏覽器要你用 Claude 帳號授權,完成後就能在這個資料夾裡跟它對話、請它幫你寫程式或處理檔案。(原生安裝之後會自動在背景更新,平常不必管。)

Windows 小提醒

Win11 請用 PowerShellWindows Terminal(不是舊版 CMD)——上面那行 irm … | iex 是 PowerShell 專用。若出現 'irm' 不是可辨識的指令,代表你開到了 CMD,換成 PowerShell 再貼一次即可。Win11 打開內建的「終端機」預設開的就是 PowerShell——一眼確認法:看游標前若有 PS(如 PS C:\>)就對了,只有 C:\> 沒 PS 就是 CMD,唯一要避開的是舊的「命令提示字元」。想讓 Claude 能用更完整的 Bash 指令工具,可選擇性加裝 Git for Windows(非必須;不裝會改用 PowerShell 執行指令)。

重要:Claude Code 需要付費方案

Claude Code 需要 Pro / Max / Team / Enterprise 其中一種付費帳號,免費的 Claude.ai 方案不含。裝好、登入後若提示無法使用,多半就是這個原因。

macOS 13+Windows 10/11Linux免裝 Node.js
一個帳號,四個入口

網頁、手機 App、Office 外掛、終端機 Claude Code——這四個都用同一個 Claude 帳號登入,用量也算在同一個訂閱方案上。先把帳號註冊好(步驟 1),其餘三個哪個先裝都行。

02

開始使用 Claude Code

裝好之後,真正的開始很簡單:更新 → 啟動 → 登入。這一段把每天開工會用到的幾個指令講清楚,包含怎麼登出、換成另一個帳號。

開工前先更新

建議養成的習慣

每次開工前先在終端機跑 claude update,把 Claude Code 更新到最新版——避免踩到舊版 bug,也能第一時間用到新功能。

# 更新到最新版
claude update

啟動 Claude Code

cd 到你要工作的資料夾,再輸入 claude 啟動。Claude 的工作範圍就是你啟動時所在的這個資料夾,它讀寫檔案都以這裡為基準,所以位置要選對。

# 進到專案資料夾並啟動
cd 你的專案資料夾
claude

初次登入

第一次啟動 claude 時,它會跳出瀏覽器要你用 Claude 帳號授權登入(就是你在步驟 1 註冊的那個帳號)。按下允許、回到終端機,看到歡迎畫面就代表登入成功,之後同一台機器不用每次重登。若沒自動跳出,可在 Claude Code 裡輸入 /login 手動觸發。

登出與換帳號

想換成另一個帳號(例如從個人換成公司帳號)時:先 /logout 登出目前帳號,再 /login 重新用另一個帳號登入即可。

切換模型

隨時可用 /model 切換 Claude 的模型——複雜任務用強模型、輕量任務用快又省的模型,兼顧品質與成本。各模型差異與適用情境詳見第 05 章

指令作用
claude update更新到最新版(開工前先跑)
claude在目前資料夾啟動 Claude Code
/login登入;已登入時可用來切換帳號
/logout登出目前帳號
/model切換使用的模型(強 / 快取捨)
小提醒

claude update 是在終端機直接打的指令;/login/logout 這種斜線開頭的是進到 Claude Code 之後在對話框裡打的指令。兩者不一樣,別搞混。

03

調整終端機介面配色

每天要盯著終端機好幾小時,看得順眼才坐得久。這裡有兩層可以調,先搞懂差別就不會白忙:① Claude Code 的內建主題(從預設裡選)、② 終端機本身的配色(你想要的任意 RGB 配色)。

① Claude Code 內建主題

在 Claude Code 裡輸入 /config(或 /theme)即可切換主題。內建有 6 種:

主題說明
dark / light基本的深色 / 淺色模式
dark-daltonized / light-daltonized色盲友善版——調整過色彩讓紅綠等更易分辨
dark-ansi / light-ansi只用終端機自身的 ANSI 配色,跟隨你的終端機主題
最常誤會的一點

Claude Code 的主題是從上面這幾個內建的選不能自訂任意 RGB 配色。如果你想要「我自己那套配色」,那是下面第 ② 層的事——要去終端機本身設定。

② 終端機本身的配色(真正的自訂)

背景色、字體顏色、那套你喜歡的調色盤,全都是終端機程式在管,跟 Claude Code 無關。在哪裡跑 Claude Code,就去那個程式設定:

搭配建議

把終端機本身調成你喜歡的配色後,Claude Code 主題選 dark-ansilight-ansi,它就會融入你的終端機配色、不會自己另搞一套,整體最一致。

04

記憶系統:CLAUDE.md

每次開新對話,Claude 的記憶都是一片空白。要讓它跨對話記住你的規則,靠的是一種叫 CLAUDE.md 的純文字檔——啟動時會自動讀進記憶。把「希望 Claude 每次都遵守的規則」寫進去,它就不會每次都要你重講。

關鍵:在哪開終端機,決定載入哪份規則

Claude Code 會從你開終端機的資料夾,沿著目錄一路往上層,把每一層找到的 CLAUDE.md 全部讀進來。所以同一個原則很重要:「在哪裡開終端機」就決定了這次載入哪些規則。

兩層放法(實務)

層級放哪放什麼
大政策上層資料夾的 CLAUDE.md(或全域 ~/.claude/CLAUDE.md跨所有專案都適用的規則,例如「要裝哪些 skill」、慣用語氣、時區
專案規則各專案資料夾內的 CLAUDE.md只屬於這個專案的背景、慣例與待辦
為什麼要這樣分?一個會踩的坑

Claude 還有一套「專案自動記憶」,存放位置是用資料夾路徑當索引的。一旦你把工作資料夾改名或搬位置,路徑就變了,Claude 會對應不到原本那份記憶(尤其非 git 專案)。
解法:真正重要、想長期保留的規則,寫進 CLAUDE.md 檔案——它是放在資料夾裡的實體檔,會跟著資料夾一起搬,不怕路徑變動。大政策則放在穩定不動的上層位置,更保險。

一句話記住

大政策放上層、穩定不動CLAUDE.md;專案規則放專案資料夾內CLAUDE.md。在哪開終端機,就載入到哪一層。

真實案例:CLAUDE.md 讓它「自動照規矩做事」

一個校園網路管理的實例,看 CLAUDE.md 怎麼省下「每次都要重講規則」的工:

平常在一個資料夾裡,放著日常網路盤點的檔案——全校 IP 配置表(CSV)網管交接記憶(md),還有一份 CLAUDE.md,裡面寫好配發原則(例如:避開保留位址與網段的頭尾、優先給連續空號)。

某天衛生所行動醫院臨時來要 4 個空的 IP。打開 Claude Code,只說一句「行動醫院需要 4 個空的 IP,幫我找出來、做一張可列印的配置表」——它就讀 CSV 比對出未配發的 IP、自動依 CLAUDE.md 的配發原則挑掉頭尾、選出 4 個,再產出一張可直接列印成 A4 的 HTML 配置表

這案例的關鍵

整個過程沒人提醒它「要避開頭尾」——因為這條規則早就寫在 CLAUDE.md 裡,它啟動時自動載入、自動遵守。這就是 CLAUDE.md 的價值:把「每次都要交代的規矩」寫一次,之後它自己照做。查資料 → 依規則判斷 → 產出可直接交付的成品,全程一句自然語言串完。

05

模型差異與用量監控

選對模型:強、平衡、快省

Claude 有不同等級的模型,差別在能力 vs 速度/花費的取捨。複雜任務用強模型、輕量任務用快模型,品質與成本就能兼顧。

模型特性適合的任務
Fable 5目前最強的旗艦,推理與「規劃」能力頂尖——也最貴(約 Opus 的兩倍價)最艱難的長時程、複雜 agentic 任務(新手日常通常用不到)
Opus日常最強主力、推理深(Claude Code 預設)複雜架構決策、難題、多步推理
Sonnet能力與花費平衡、比 Opus 省多數日常寫程式、一般任務
Haiku最快、最省輕量、重複、簡單的小任務

相對成本由貴到省:Fable 5 > Opus > Sonnet > Haiku。隨時用 /model 切換,或在 /config 設成預設。

新手別被選項嚇到

Claude Code 預設就是 Opus,多數情況直接用就很好。Fable 5 是「天花板級」、最貴,留給最硬的任務——日常通常用不到;想省錢或求快再往 Sonnet、Haiku 走。一句話:不確定就用預設的 Opus,需要再調。

Fast mode 小技巧

在 Opus 上輸入 /fast 可開啟快速模式——輸出更快但仍是 Opus、不會降級成小模型,兼顧品質與速度。

查用量:/usage

在 Claude Code 裡輸入 /usage,會打開一個畫面顯示目前的用量:本次 session 的 token 與估算花費;訂閱方案(Pro/Max/Team)還會看到方案額度的使用比例、活動統計,以及用量是花在哪些 skill/子代理/plugin/MCP 上。在畫面中按 d / w 可切換看最近 24 小時 / 7 天

讓用量常駐在狀態列

/usage 是「打開來查」;如果你想像現在這樣隨時瞄一眼,可以把用量放進底部狀態列常駐顯示。最簡單的做法——用 /statusline 加一句白話描述,Claude 會自動幫你產生腳本、寫進設定:

# 在 Claude Code 裡輸入,用白話描述你要顯示什麼
/statusline 顯示模型名稱、context 使用百分比和進度條

它會把腳本存到 ~/.claude/ 並更新 settings.json,之後狀態列就會持續顯示模型、context 用量、花費等資訊(可顯示的欄位包含 context 百分比、本 session 估算花費等)。想移除就再輸入 /statusline 清除狀態列

兩者差在哪

/usage = 主動打開一個完整畫面查方案額度與明細;狀態列 = 常駐底部,邊做邊瞄目前這次對話的 context/花費。兩個搭配用:平常看狀態列,要看方案剩多少額度時開 /usage

06

Context 管理與 /clear

Claude 在一次對話裡,會把整段聊天記錄都放在它的「context 視窗」(短期記憶)。對話越長,這個視窗越滿——回應變慢、花費變高,快塞滿時 Claude 還會自動把舊內容摘要壓縮,細節可能因此糊掉。所以「適時清理 context」是用得順不順的關鍵。

/clear — 清空,重新開始

當你切換到不相關的新任務時,輸入 /clear 把目前對話清空、context 歸零。留著上一個任務的舊內容只會拖慢速度、增加花費,又容易讓 Claude 被無關脈絡干擾。換題目就清,是最該養成的習慣。

/compact — 壓縮,但保留脈絡

如果你還想延續同一件事、但對話已經很長,用 /compact 讓 Claude 把前面的內容摘要壓縮、騰出空間又不完全失憶。還能指定保留重點,例如 /compact 著重在程式碼修改和 API 用法。(其實接近滿的時候系統也會自動壓縮。)

收尾習慣:clear 前先存進度(/clear-prep

這裡有個容易忽略的陷阱:/clear 一下去,這次對話的進展就沒了。但別忘了 section 04 講的——CLAUDE.md 會跨對話留存。所以正確的收尾順序是:先把進度寫進專案的 CLAUDE.md,再 /clear,下次開新對話就能無縫接上。

/clear-prep 就是為此做的自訂指令:清空前先自動把這次 session 的進展、決定、待辦寫進當前專案的 CLAUDE.md。(這類 / 開頭的自訂指令你可以自己做一個——把固定流程包成一句指令。)

# 收尾的正確順序
/clear-prep   # 1. 先把這次進度寫進專案 CLAUDE.md
/clear        # 2. 再清空 context,乾淨地結束
一句話記住

換不相關的任務 → /clear 重來;同一件事太長 → /compact 壓縮;要結束、想保留進度 → 先 /clear-prep 寫進 CLAUDE.md/clear

補充:想反悔回上一步?

如果是「Claude 改錯了想退回」而不是清空,連按兩次 Esc 或輸入 /rewind,可把對話與檔案還原到先前的檢查點。

07

用 Obsidian 建立數位大腦

Obsidian 是一款本機優先的筆記軟體:你的筆記就是電腦上一個資料夾裡的一堆 .md 純文字檔(這個資料夾叫 Vault 庫)。把筆記、記帳、行程、靈感都收進來,就是你的「數位大腦」。

為什麼 Obsidian 跟 Claude Code 是絕配

因為 Vault 就是一個放滿 markdown 的資料夾——正好是 Claude Code 最會處理的東西。在 Vault 開終端機,Claude 就能直接讀寫、整理、產出你的筆記。你的數位大腦從此不只是「存資料的地方」,而是「Claude 能動手操作的對象」。

安裝與建立 Vault

把附件集中到 attachments

貼進筆記的圖片、PDF、帳單照片這些「附件」,預設會散落各處。建議統一收進一個 attachments 資料夾——整齊,Claude 也好找(就像這台示範電腦的設定)。步驟:

之後所有貼進來的附件都會自動進到 Vault 裡的 attachments 資料夾,一目了然。

交給 Claude Code 操作

把 Vault 準備好之後,cd 進這個資料夾、啟動 claude,你的數位大腦就接上 AI 了。常見玩法:

小提醒

數位大腦是你最重要的資產,記得定期備份整個 Vault 資料夾(連同 attachments)。純檔案、好備份、換電腦直接搬整個資料夾就好——這正是本機優先的好處。

08

Skill 與 Plugin 的差別

想幫 Claude Code 加裝新能力時,最常被搞混的就是這兩個詞。一句話分清楚:Skill 是「一個能力」,Plugin 是「一包能力」。而最關鍵的誤會是——裝 skill 不一定要用 /plugin,要看它是怎麼發布的。

Skill — 單一能力(一個 SKILL.md)

一個 skill 本質就是一個 SKILL.md 檔。放進 ~/.claude/skills/<名稱>/(全域)或專案的 .claude/skills/,Claude Code 啟動時自動偵測載入,不需要任何安裝指令。需要時 Claude 自己會用,或你用 /<名稱> 直接叫它。「裸 skill」的取得方式:

Plugin — 一包能力(套組)

Plugin 是更大的整合單位,可以一次打包多個 skills、斜線指令、hooks、MCP 連接,附一份 plugin.json 說明檔,上架到 marketplace(市集)。要用 /plugin 這個管理介面去搜尋安裝。裝一個 plugin = 批次裝進一整組能力。(plugin 裡的 skill 會帶命名空間,叫起來像 /外掛名:skill名。)

Skill(裸)Plugin
是什麼單一能力,一個 SKILL.md能力套組,可含多個 skill+指令+hooks+MCP
怎麼裝放進 skills 資料夾即可(npx skills add 或 git clone)/plugin 從 marketplace 安裝
需要 /plugin 嗎不需要需要
適合個人、快速、單一功能分享給團隊/社群、有版本管理

以 frontend-design 為例(走 Plugin 這條路)

Frontend Design 是 Anthropic 官方出的能力,讓 Claude 產出的網頁跳脫「AI slop」(紫色漸層、Inter 字體、千篇一律的卡片),改成有設計意圖的版型、配色、層次。它是以 plugin 發布的,所以走 /plugin 安裝:

# 在 Claude Code 裡輸入,開啟外掛管理介面
/plugin
# → 在官方 marketplace 瀏覽,找到 frontend-design → 安裝

# 安裝後不必重開,直接重新載入
/reload-plugins
怎麼確認裝好了

~/.claude/ 底下有沒有出現對應資料夾,或用 /help 看技能清單有沒有列出來——有就成功,下次對話自動納入。
你正在看的這頁,整體設計就是靠 frontend-design 做出來的。

告訴它你要的「風格」——丟網址或截圖

裝好 frontend-design 之後,最快讓成品貼近你心中樣子的方法,就是給它一個參考對象。你不必會講設計術語,直接給範本就好:

小訣竅

可以一次給兩三個參考並分別說明各取什麼:「版面參考 A、配色參考 B、字體像 C」。給的方向越具體,來回修改的次數就越少。

進階:拿現成的「設計系統」直接餵給它

不想憑空形容、也懶得找截圖?推薦一個專為 AI agent 做的資源:Refero Styles。它收錄了 2,000+ 個知名產品網站(Apple、Linear、Stripe、Anthropic…)的設計系統,每個都附一份 DESIGN.md——把色彩、字體、間距、元件規則整理成可讀的文字檔。挑一個你喜歡的風格、複製它的 DESIGN.md貼給 Claude Code,它就能照那套設計語言做。比丟截圖更精準,因為規則是白紙黑字寫明的——這又是一次「用文字規則餵 agent」的實例。

實戰:讓它從無到有,做出一頁主題網站

把前面學的全串起來——這裡用「教育部 AI 人才方舟計畫(簡稱 AI 方舟)」當題目,看 Claude Code 怎麼一條龍從零幫你生出成品。你只要給主題,再在每一步幫忙確認、修正就好:

1

自己上網搜集資料

跟它說「幫我查教育部 AI 人才方舟計畫」,它會用內建的搜尋能力上網查計畫目標、子計畫、推動期程,自己彙整重點並附上來源——你不必先準備素材。

2

先產出 Markdown 草稿

請它把整理好的內容寫成一份 .md 檔——條列重點、排好大綱。純文字好檢視、好改,先在這一步把內容對不對確認清楚,別急著美化。

3

變成一頁式網頁 (HTML)

內容定了,再請它套上設計(搭 frontend-design)做成一頁式 HTML,捲動就能瀏覽——這就是給人「閱讀」用的版本。

4

轉成簡報式網頁

要上台報告?再叫它把同一份內容改成一頁一頁、可左右切換的簡報式 HTML(像投影片),換個形式直接拿來投影。

5

部署上線、拿到網址

最後接 第 09 章,把成品部署到 Vercel/Cloudflare Pages,得到一個公開網址,分享或投影都行。

為什麼先 md 再 html

先對內容、再美化」最省力:純 Markdown 階段你能專心看資料正不正確、邏輯順不順,確認後才進設計。一開始就糾結排版,等內容大改時版面又得跟著重來一次。

幫網頁加上動畫:anime.js 與 Lottie

先釐清一個容易混的點:frontend-design 是裝在「Claude」上的 skill(管整體設計);而 anime.js 和 Lottie 是「前端動畫庫」——不是裝在 Claude,而是引入到你的網頁裡。要讓畫面動起來就靠這兩個,引入一行、動畫邏輯交給 Claude 寫。

順便認識一個詞:Hero(主視覺)

Hero 是網頁設計的業界術語,指頁面第一眼看到的最上方主視覺區塊(大標題+一句說明+主圖/按鈕,佔滿首屏,負責 3 秒內抓住人)。最常見的「Hero 動效」就是它載入時標題、按鈕依序淡入上滑。跟設計師或 Claude 溝通時講「Hero 區」或「主視覺」最通——說「幫 hero 加個進場動效」它就懂你要首屏那塊。(你現在看的這頁開頭大標+卡片浮現,就是 hero 動效。)

anime.js——做互動、進場、數字遞增這類「程式即時運算」的動效。你不用自己處理引入,直接跟 Claude 說「用 anime.js 幫這個網頁加個進場動畫」,它就會把該載入的東西接好、把動畫寫好。

Lottie——播放複雜的現成插畫/吉祥物動畫(設計師做好的)。重點:它不適合手寫,正確流程是「去現成庫挑檔,再讓 Claude 嵌進來」:

1

到 LottieFiles 挑動畫

lottiefiles.com,搜尋你要的主題(機器人、loading、icon…),免費/付費都有。

2

下載 .json 檔

挑好後下載 Lottie JSON(.json)檔。(若只拿得到 .lottie 也行,那是壓縮包,Claude 能自己解開。)

3

把檔丟給 Claude

直接把 .json 檔拖進對話框,說「把這個 Lottie 放到網頁上」。Claude 會自己引入播放器、把檔接好,必要時還能幫你去掉白底、調尺寸——你完全不用碰程式碼。

4

跟網頁一起上線

接第 09 章部署,動畫就活在你的網站上了。

動效的選用原則

簡單動效(淡入、彈跳、進場、數字遞增)→ 用 CSS/anime.js 就好,輕又好維護;複雜插畫/吉祥物才用 Lottie 現成檔別手寫 Lottie——它是「複雜動畫的播放器」,不是拿來自己刻的。

不想每次下令?寫進 CLAUDE.md(回扣第 04 章)

不必每次都交代「用 anime.js」。把動效偏好寫進 第 04 章CLAUDE.md,例如一句「網頁動效優先用 CSS/anime.js,複雜插畫才用現成 Lottie、不手寫」。Claude 每次啟動自動載入,之後你只要說「加個動畫」,它就會自己照這套選工具——規範寫一次、長期生效。這也是為什麼你只要講「需求」、不必每次指定工具:講需求它自己選,寫進 CLAUDE.md 連選法都固定。

把下面這段直接複製進你的 CLAUDE.md(第 04 章),之後 agent 做網頁就會自動照這套選動效工具,你不必再每次解釋:

動效工具預設:簡單效果用 CSS/Animate.css、客製互動用 anime.js、
複雜插畫用現成 Lottie 檔;勿手寫 Lottie JSON。
注意:你餵給 agent 的是「白話規則」,不是程式碼

有沒有發現——這份教材從頭到尾沒叫你貼任何 <script> 或寫程式?那些「引入哪個庫、怎麼接」的實作細節,通通是 Claude 的工作。你要練的是:用自然語言把需求和偏好講清楚(像上面這段規則),剩下交給它。這才是用 AI Agent 的正確姿勢。

* 想看 Animate.css / anime.js / Lottie 三種動畫實際差在哪?這裡有一頁實測對比(可重播的範例+對照表)→ 三種網頁動畫方式對比

09

把網頁部署上線

網頁在你電腦上做好了,怎麼讓別人也能打開?這一步叫「部署(deploy)」——把檔案放上一個會給你公開網址的服務。對新手最友善、又免費的選擇是 Vercel。而且整個過程不用你動手,交給 Claude Code 就好。

讓 Claude 自己裝好工具

部署要用到 Vercel CLI(一個命令列工具),但你不必先自己去裝。直接跟 Claude 說「幫我把這個網頁部署到 Vercel」,它會自己把工具裝起來、帶你登入、再完成部署。背後跑的大致是這幾行:

# 1. 安裝 Vercel CLI(Claude 會自己跑,你不用先裝)
npm install -g vercel

# 2. 第一次要登入(會跳出瀏覽器授權,用 GitHub / Email 都行)
vercel login

# 3. 在網頁專案資料夾裡部署
vercel          # 產生一個預覽網址
vercel --prod   # 正式上線到你的主網址

跑完它會回給你一個 https://你的專案.vercel.app 的網址,丟給任何人都能打開。

兩條路:直接上傳,還是先過 GitHub?

同樣是上線,有兩種做法,差在你要不要版本紀錄與自動更新

情況怎麼做
直接上傳
(最快)
在資料夾裡直接 vercel,CLI 把當下的檔案傳上去就給網址。適合:單檔/純靜態網頁、個人小專案、只想快速給個預覽連結、一次性分享。
先過 GitHub
(可長期維護)
先把專案推上 GitHub repo,再到 Vercel 連結這個 repo。之後每次 git push,Vercel 就自動重新部署適合:要長期維護、多人協作、想保留改版歷史、或希望「改完一推就自動上線」——這就是我們平常在做的那套
怎麼選

只是要快速給個網址看看 → 直接 vercel 上傳就好。
持續更新、不想弄丟、想要 push 就自動上線 → 先把專案放 GitHub,再讓 Vercel 接它。拿不定主意時跟 Claude 講你的情況,它會幫你選並把流程跑完。

上線前一定要檢查

部署=把檔案公開到網路上。傳之前先確認資料夾裡沒有夾帶金鑰、密碼、.env 或私人資料——尤其推到公開 GitHub repo 時更要顧。不確定就請 Claude 幫你看一遍要不要加進 .gitignore

* 另一個熱門選擇是 Cloudflare Pages——免費額度更大、流量大或想長期省成本時很適合,同樣能連 GitHub 自動部署,只是上手沒 Vercel 那麼順。新手想最快看到成果,先用 Vercel 就好,之後再依需求評估。

10

好用小技巧合輯

最後收幾個讓你用得更快、更省、更順手的小技巧。

省錢省時 ★

命中快取(Hit Cache)

每次請求,Claude 會把對話前段固定不變的內容(系統提示、CLAUDE.md、已讀檔案)做成快取。下次開頭一樣就「命中」,又快又省(快取讀取約原價 1/10)。提高命中率三招:① 固定的大內容放前面、會變的放後面;② 別回頭改前面已送出的內容(一改後面全失效);③ 連續操作集中在同一 session(快取存活約 5 分鐘,逾時要重建)。

手機也能用

遠端操控

從手機或任何瀏覽器,續控本機正在跑的 session——終端機輸入 claude remote-control,或現有 session 打 /remote-control,掃 QR code 連線。Claude 全程在你自己機器上跑、不上雲。裝 Claude App 還能收「做完了」的推播。

收尾保命

記得 /clear-prep

結束或要清空前,先 /clear-prep 把這次的進度寫進專案 CLAUDE.md,再 /clear。對話會清掉、但 CLAUDE.md 會留,下次無縫接上。清空前先收尾,別讓進度白做。

先想再做

Plan Mode 計畫模式

動工前按 Shift+Tab 切到計畫模式(或打 /plan)。這是唯讀狀態,Claude 只研究、提出方案給你確認,不會直接改檔案——複雜任務先規劃再執行,少走冤枉路。

不只是文字

直接貼圖片 / PDF

截圖、照片、PDF 直接拖進或貼進對話框,Claude 看得懂——丟錯誤畫面請它除錯、丟設計稿請它照做、丟帳單請它讀數字。一圖勝過一段描述。

保持最新 ★

養成 claude update 的習慣

Claude Code 更新很勤,幾乎天天有新功能與修補。原生安裝雖然會自動在背景更新,但開工前手動跑一次 claude update 最保險——第一時間用到新功能、也避開舊版 bug。覺得哪裡怪怪的、或想確認版本,先 claude updateclaude doctor 檢查,往往問題就自己解決了。

讓它回頭體檢你 ★

用 /insights 聽聽 Claude 給你的建議

輸入 /insights,Claude 會分析你近期的使用情況——你常用它處理哪些專案領域、慣常的互動模式、以及最常卡關的摩擦點在哪,整理成一份報告,並回頭建議你「怎麼把指令下得更精準、把工作流調得更順」。與其自己瞎猜哪裡能更好,不如讓它幫你做一次使用體檢,照著建議微調,下次就更省力。

進階・小心使用 ⚠️

最大權限模式(跳過所有確認)

平常 Claude 每次要動檔案、跑指令都會先問你同意。啟動時加上 --dangerously-skip-permissions(俗稱 YOLO 模式)會跳過所有確認、全自動執行——很快,但代價是 Claude 能不經詢問就執行任何指令

claude --dangerously-skip-permissions

安全界線:只在你信任的任務、而且最好是隔離或可丟棄的環境(容器、測試資料夾、沒有機密的目錄)使用。在有重要檔案、正式環境或牽涉金鑰/帳密的地方開。

想要折衷?按 Shift+Tab 切到「自動接受編輯」模式——只自動套用檔案修改、不自動跑危險指令,日常更安全。

11

進階玩法:養一隻 24/7 的 Agent

當你開始信任 Claude Code,下一步是讓它不關機——跑在一台全天開著的機器上,變成隨時待命的個人助理。你正在看的這頁背後,就有一隻這樣的 Agent 長駐在 VPS 上運作。

① 部署在 VPS 或 Mac mini,全年無休

把 Claude Code 裝在一台不關機的機器上,它就能 24 小時待命:

讓它無人值守也不出包

關鍵在 第 04 章CLAUDE.md:把鐵則寫死(時區、輸出格式、哪些事絕對不能碰),它半夜自動跑時才不會走鐘。再搭 第 09 章的安全觀念——放隔離環境、限制權限、金鑰存檔案、不寫進對話。

② 多代理交叉查核:雙驗 / 三驗

單一 AI 難免有盲點或幻覺。進階玩法是把同一個問題派給多隻不同家的 Agent 各自獨立作答、再交叉比對——用「會議室裡多人覆核」取代「單人說了算」。

調度子代理(subagents)

除了跨廠牌,Claude Code 自己也能派出多個子代理並行分工——一隻查資料、一隻寫程式、一隻覆核,主代理彙整結果。複雜任務拆給多隻平行跑,又快又能互相把關。

代價要先知道

多代理=多份用量、多份花費,整體速度還會被最慢那隻拖累。重要、要求高正確度的判斷(投資、法規、對外發布)才值得動用雙驗/三驗;日常小事用單一 Agent 就夠。

常見術語速查

學 Claude Code 與 AI Agent 一路上會反覆撞到這些詞,這裡用一句白話講清楚(前面章節提過的也收進來,方便回查)。

術語白話解釋
AI Agent能自己規劃步驟、使用工具、執行多步任務的 AI,不只是一問一答的聊天機器人。Claude Code 就是一個 agent。
LLM大型語言模型(Large Language Model),AI 的「大腦」本體,例如 Claude、GPT;模型有強弱與快慢之分(見第 05 章)。
Token模型處理文字的最小單位(約一個詞或幾個字),用量與費用都以 token 計算。
Context(脈絡視窗)AI 一次對話能「記住」的內容總量;越長越滿、回應越慢越貴(見第 06 章)。
Prompt(提示詞)你給 AI 的指令或問題。把 prompt 講清楚,是用好 AI 的核心功夫。
CLI命令列介面(Command-Line Interface)——在終端機打文字指令操作的方式。Claude Code 就是個 CLI 工具。
斜線指令在 Claude Code 裡用 / 開頭的指令,如 /clear/model/usage/insights
CLAUDE.md放在專案或家目錄、Claude 啟動時自動讀進記憶的規則檔(見第 04 章)。
Skill單一能力(一個 SKILL.md),放進 skills 資料夾就自動載入,例如 frontend-design(見第 08 章)。
Plugin一包能力,可含多個 skill+指令+hooks+MCP,用 /plugin 從市集安裝(見第 08 章)。
MCPModel Context Protocol——讓 Claude 連接外部工具與資料的標準協定。接上它,Claude 就能讀 Gmail、查資料庫、用設計素材庫等。提供這些能力的服務端叫「MCP server」。
Hook(掛鉤)特定事件自動觸發的腳本,例如「每次改完檔自動跑測試」「Claude 結束時發通知」。把固定動作自動化、不必每次手動。
Subagent(子代理)主 agent 派出去並行分工的小 agent——一隻查資料、一隻寫程式、一隻覆核(見第 11 章)。
Slash / MCP / Hook 的關係一句話收束:Skill=單一能力、Plugin=能力套組、MCP=對外連接、Hook=事件自動化,四者常被混為一談,記住各自的定位就不會亂。