Claude Code 設計師完整指南:Agentic Loop、CLAUDE.md、五大功能與實戰場景
2026年5月23日 下午 3:40
AI 設計AI TOOLS · CLAUDE CODE · 2026
QUICK ANSWER
Claude Code 是 Anthropic 推出的 agentic coding 工具，把 Claude 直接放進你的終端機、IDE、桌面 app 跟瀏覽器，讓它能讀整個 codebase、規劃、改多檔案、跑指令、開 PR。一行 curl 安裝，Claude Pro $17 美金/月起就含在訂閱裡，設計師用它做小工具、轉 Figma、自動化任務都很順手。
Claude Code 這半年炸開了。半個矽谷的工程師都在做同一件事：把它接進自己的 repo，給一句話，讓它自己 plan、自己寫、自己跑測試、自己開 PR。Notion 的共同創辦人 Simon Last 公開講過，他現在大部分的工作就是「讓盡可能多的 Claude Code 實例同時忙起來」。
這不是「ChatGPT 在 IDE 裡多開一個分頁」的下一個版本。是另一個姿態：你不再對 AI 描述任務、貼程式碼、再把回答貼回 IDE──你 cd 進專案，打一句話，接下來那二十分鐘是 agent 在動手。
我在設計圈深耕快十年，看過設計工具一輪輪換代。但這一年發生的事比較罕見──Claude Code 不只是工程師的工具，設計師的工作邊界也被它往外推了一截。這篇換個切角寫。
幾天前我寫過一篇 Claude Code 完整教學，那篇是全景介紹──三種介面、2026 五月剛升級的新功能、能做什麼怎麼裝。這篇是另一條切角：從設計師的視角講，什麼是 agentic loop、CLAUDE.md 怎麼寫、五大核心功能怎麼搭、可以拿來解掉哪些真實的設計師問題。兩篇可以對著看。
CHAPTER 01 · WHAT IS IT
Claude Code 到底是什麼？
簡單一句話：Claude Code 是 Anthropic 自家的 agentic coding 工具，讓 Claude 模型能在你的開發環境裡讀檔、改檔、執行指令、串接其他工具。它不是聊天機器人，是 agent──你給一個目標，它自己決定要看哪些檔案、寫哪些程式碼、執行哪些指令來達成。
它的本體是一個 CLI──終端機指令。但 Anthropic 為了讓它在不同情境都能用，做了五種「介面」(surface):
SURFACE 01
Terminal CLI
本體，功能最全，適合長期重度使用
SURFACE 02
VS Code / JetBrains
IDE 內嵌，看 diff 跟 @-mention 檔案最直觀
SURFACE 03
Desktop App
可視化介面，管多個平行任務、視覺 diff
SURFACE 04
Web / iOS
瀏覽器跑長任務，沒本機也能動
SURFACE 05
Slack 整合
在頻道 @Claude 丟 bug，它直接給你 PR
五種介面背後是同一個引擎，所以你在 terminal 寫的 CLAUDE.md、裝的 MCP、設定的 hook，五個地方都通用。手機路上想到一個 task,Slack 丟一句，回家在 IDE 看 PR 已經開好。
CHAPTER 02 · WHY IT MATTERS
設計師為什麼也要知道？
我寫到這裡心裡有個聲音：「Riven,Claude Code 是工程師工具，你寫給設計師看幹嘛？」這聲音半年前是對的。但這半年我自己用下來，改觀了。
三件事讓設計師沒辦法假裝這個工具不存在：
「你不會被 AI 取代──你會被會用 AI 的同行取代。」這話講了三年，直到 Claude Code 出來，才第一次有具體的證據在台面上。
第一件，UI 工程師會把你的 Figma 直接餵給 Claude Code。過去 designer-developer handoff 是設計師最後一個被算進工時的環節。現在工程師貼 Figma 截圖或 export 給 Claude Code，二十分鐘出一個能跑的 React component。你的標註越精準、design token 越乾淨，他生得越準。換句話說──你設計的「可實作度」會被放大量化檢視。
第二件，你的個人專案不再需要工程師。VTuber 直播工具、Portfolio 網站、IG 輪播自動產生器、設計系統檢查工具──過去這些都是「想做但找不到工程師合作」的卡點。現在你裝完 Claude Code，給它一句話，跑兩小時拿一個堪用的 prototype。我自己這幾個月做的批次裁切工具、設計系統 token 同步腳本、IG 文案分發 script，全部都是這樣搞出來的。
第三件，設計系統的維運會被它接走。大型設計系統最痛的不是設計，是「設計改完之後，跨平台 token、icon set、文件、Storybook 全部要同步更新」這件煩死人的事。Claude Code 接 MCP、設好 hook，這層雜活幾乎可以自動跑。設計師留下來的時間，終於可以拿去想設計。
CHAPTER 03 · HOW IT WORKS
它怎麼運作？Agentic Loop 解釋
傳統的 AI 寫 code 體驗是這樣的：你問問題、AI 回答、你複製貼到編輯器、跑一下、有錯回來再問。整段流程的「動手」由你扛。
Claude Code 是另一條路。它跑的是 Anthropic 講的 agentic loop──模型拿到目標，自己決定要用哪個工具(讀檔、寫檔、跑 bash、查網)，工具回傳結果，模型看結果，再決定下一步，迴圈跑到任務完成或卡住為止。
AGENTIC LOOP 四步驟
01
理解目標
讀你的描述，看 CLAUDE.md，掃過 repo 結構
02
擬計畫
列出要動的檔案、執行順序、驗證方式
03
用工具動手
讀檔、改檔、跑 test、執行 bash、查文件
04
看結果再修
看 test 過了沒、build 對了沒，沒對就回到 03
關鍵字在「自己決定」這四個字。你不告訴它「先讀 A 檔再改 B 檔再跑 test」──你只說「修 auth 模組的 bug，順便補測試」。它自己排順序、自己跑、自己驗，只在需要你確認(刪檔、執行 production 指令)的時候停下來問。
這個差別，實際用過一次就回不去了。
CHAPTER 04 · GETTING STARTED
怎麼安裝跟開始用？
安裝是一行指令的事。下面是各作業系統的指令，選一個丟進終端機就好。
MACOS / LINUX / WSL
curl -fsSL https://claude.ai/install.sh | bash
WINDOWS POWERSHELL
irm https://claude.ai/install.ps1 | iex
MAC USER 也可以 HOMEBREW
brew install --cask claude-code
裝好之後，在任何專案資料夾跑一行就開始：
cd your-project
claude
第一次會跳出登入頁，用你的 Claude 帳號登進去就好(Pro / Max / Team / Enterprise 都可以，API key 也支援)。登完之後直接打字描述你要做什麼。
幾個第一次用就值得知道的小事：
先讓它「了解這個 repo」。新開的 session 第一句話，可以丟「analyze this codebase and give me an overview」。它會自己 map 過一輪，你接下來的提問就有上下文。
Plan mode 是好朋友。不確定它會做什麼？用 plan mode 讓它先講完整計畫，你點頭再讓它動。對新手特別重要。
永遠先 git commit 再讓它跑。它有 checkpoint 機制，但 git 是更外層的保險。我自己的習慣是每跑大任務前 commit 一個 wip 點，出包直接 reset。
CHAPTER 05 · IN PRACTICE
設計師可以拿來做什麼？
講案例最直接。下面這些是我自己這半年實際拿 Claude Code 解掉的任務，不是 demo 等級的「你看它好強」，是真的在用、有交付物的事。
把 SVG icon 集做成 React 元件庫。過去要請工程師幫忙，現在丟一個資料夾的 SVG 給 Claude Code，跟它說「把這些做成 React component，每個 export 一個，要支援 size prop 跟 color prop」。十分鐘出一個能用的 npm 結構。
設計系統 token 一致性檢查。給它一份 design token JSON 跟一個前端 repo，叫它「掃過 CSS，標出沒用 token 的硬寫色碼」。一個下午掃完三十幾個檔案，還幫你重寫。
IG 輪播圖批次裁切跟壓字。給它一份 Figma export 出來的 9 張 1080×1350，叫它寫一個 Python 腳本，自動掃資料夾、套字、壓 logo、輸出。寫完還幫你打包成 CLI 工具。
部落格內容自動化。我自己的 daily 設計情報系統就是這樣搭起來的──Claude Code 接 RSS、抓內容、翻譯、生 cover image、發到部落格，全部跑在背景。設計師寫 prompt、工程的部分交給 agent。
Portfolio 重做。給它一個 Figma 設計、指定要用 Next.js + Tailwind，半天就有可上線的版本。後續調整再用對話迭代。
▼ 官方影片：深入 Claude Code 進階用法
Anthropic 官方頻道 @claude 講 Beyond the basics with Claude Code──新手熟悉 CLI 後值得看一遍
CHAPTER 06 · CORE FEATURES
五個核心功能，搞懂等於會用
Claude Code 表面是 CLI，底下有五個功能撐起整套系統。下面分別講重點，不需要一次全學，但要知道它們存在。
FEATURE 01
CLAUDE.md
放在專案根目錄的記憶檔。每次開 session 自動讀。把專案 stack、coding 風格、不要碰的檔案寫進去，Claude 就會遵守。
FEATURE 02
Skills
把重複的 workflow 包成 skill，像團隊共用的 SOP。例如 /review-pr、/deploy-staging，團隊內部共享。
FEATURE 03
Hooks
在特定動作前後跑你指定的指令。改完檔案自動 lint、commit 前自動跑 test、寫完 PR 自動跑 build。
FEATURE 04
MCP
Model Context Protocol。讓 Claude Code 接外部系統：GitHub、Notion、Slack、PostgreSQL、Sentry。連通之後它可以直接讀你的 Issue、查 log、改 ticket。
FEATURE 05
Subagents
把大任務拆成多個並行 agent。主 agent 排計畫，subagent 各跑各的，結果合回來。大型 refactor、跨模組任務的解法。
剛入門只要先碰 CLAUDE.md 就有 80% 的效果。專案根目錄寫一份，把你想讓 Claude 知道的事──專案是做什麼的、用什麼 stack、有哪些 convention、別碰哪些檔案──全部講清楚。Claude Code 的爸爸 Boris Cherny 自己講過一條鐵則：每次 Claude 做錯，就在 CLAUDE.md 加一條規則，這檔案會慢慢長成你的專案 institutional knowledge。
CHAPTER 07 · LIMITS & PRICING
價格、限制、注意事項
Claude Code 沒有獨立費用──它含在所有 Claude 訂閱方案裡。換句話說，你只要訂了 Claude.ai,Claude Code 就是免費附贈。
CLAUDE PRO
$17
USD / 月(年繳)
小型專案、設計師個人用最划算的入門
MAX 5x
$100
USD / 月
每天用、中型 codebase，大概是這層
MAX 20x
$200
USD / 月
重度用戶、跑 Opus 4.7、長時間 session
Pro 方案是每 5 小時一個 rolling window 的用量限額，跟 Claude.ai 共用。設計師日常用沒問題，跑大型 refactor 或長時間 session 可能會撞牆。
幾個踩坑前要知道的事：
永遠用 git branch 跟 checkpoint。Claude Code 直接操作你的檔案系統。雖然有內建 permission 系統(刪檔、跑 production 指令會先問你)，但人會手快點下 yes。2026 年公開過幾個案例：有人讓 agent 在 production 上跑 autonomous 模式，被它把整個資料庫清光。最起碼，在 git branch 上工作、跑大任務前 commit 一個 wip 點。
CLAUDE.md 不要寫太長。每次 session 都會載入整份。寫超過 200 行就會吃掉太多 context budget,Claude 還沒開始做事就先讀完一本小說。重點是「精準的規則」，不是「完整的文件」。長文件用 reference──寫「處理金流時先讀 docs/payment-architecture.md」，需要時才載。
不能取代資深工程師判斷。它寫 code 很快，但商業邏輯、架構決策、安全考量還是要人看過。把它當「會打字打很快的初階工程師」比「資深架構師」更安全。
CHAPTER 08 · TAKEAWAYS
寫到最後，我自己的觀點
我這幾年看設計圈接觸 AI 工具的姿態，大概可以分三波。第一波是「我先觀望」，第二波是「我來試試」，第三波是「我把它接進我的工作流」。每波之間隔大概一年。
Claude Code 這款工具，我覺得設計師值得直接跳到第三波。理由不是它有多神，是它把「能不能自己 ship 工具」這件事的門檻降得太低。過去設計師個人專案最大的卡點是「我有想法，但找不到工程師合作」,Claude Code 直接把這個卡點削掉。
這不等於設計師要變成工程師。它等於設計師多了一個「可以自己跑實驗」的能力。想驗證 portfolio 改版假設？自己 ship 一版。想做 IG 自動化？自己寫。想試試 Threads 排程？自己接 API。中間那段「我要去學寫 code 嗎」的心理負擔，被 Claude Code 接走了。
未來不是「工程師會用 AI、設計師不會用」，是「會用 agent 的人跟不會用的人」。
最後給還沒裝的人一個務實建議：今天就裝。隨便挑一個你拖了很久沒做的小工具任務(批次重新命名檔案、自動把 Figma export 整理成資料夾、寫一個 IG 文案產生器)，花一個小時跑一遍，你會比讀完十篇文章更有感。
我這半年用 Claude Code 做的所有實驗，從失敗到成功，大部分都寫在 RAR 設計攻略 AI 設計分類頁，有興趣可以翻翻。AI 工具更新太快，單篇文章半年就過時，我會持續更新。
FAQ
常見問題
Q:Claude Code 跟 ChatGPT、Cursor 比起來差在哪？
ChatGPT 是聊天介面，你問它答、你貼程式碼進去再貼回 IDE。Cursor / Windsurf 是 fork 自 VS Code 的編輯器，把 AI 內嵌成側邊欄，主要是補全跟 chat。Claude Code 不一樣，它是 agent──你給目標，它自己決定執行步驟，自己讀檔、改檔、跑指令。差別在於誰在動手：前兩者你動手，Claude Code 它動手。
Q:完全不會寫 code 的設計師能用嗎？
能用，但會卡。Claude Code 適合「至少看得懂程式碼結構」的人。你不一定要會寫，但要能讀──知道 React component 跟 CSS 的差別、能看 git diff、看到 error message 知道大概問題在哪。完全沒底子的話，建議先用 Claude.ai 的 Artifacts 培養感覺，再升級到 Claude Code。
Q:免費版能用嗎？還是一定要付費？
Claude 免費版不能用 Claude Code，需要 Pro 以上方案，或者用 Claude Console 的 API key(按 token 計費)。Pro 年繳是每月 $17 美金，大概是 Cursor Pro 那一掛的價位。設計師個人專案一個月用一兩次的話，API key 按量計費可能更便宜。
Q:CLAUDE.md 到底要寫什麼？
五件事：1) 專案是做什麼的(一兩句話)、2) 用什麼 stack(框架、語言、套件)、3) 重要的 convention(命名規則、檔案結構)、4) 別碰的檔案/資料夾、5) 跑測試/build 的指令。寫到 100 行內就夠，寫越多 Claude 抓重點越差。每次它做錯，加一條規則進去，慢慢累積。
Q:Claude Code 安全嗎？會不會把我的 repo 弄壞？
有風險，但可控。Claude Code 預設會在執行刪檔、跑 production 指令、改 protected paths 時跳出來問你。但 autonomous 模式(--dangerously-skip-permissions 或 auto mode)就會自己跑。最佳實踐是：總是在 git branch 上工作、跑大任務前 commit 一個 wip 點、不要在 production 環境給它真實 credentials。
Q:設計師最該先學的功能是什麼？
CLAUDE.md。其他都是進階。你先在專案根目錄寫一份 CLAUDE.md，把 Claude 該知道的事講清楚，90% 的效果就出來了。Skills、Hooks、MCP、Subagents 是長期累積之後才會用到的進階武器。
Q:中文支援得好嗎？
完全沒問題。你用中文跟它對話、中文寫 CLAUDE.md、中文要求 commit message 都可以。Claude 系列模型本來就是多語言原生支援，繁體中文、簡體、日文、英文混用都接得住。
