Claude Design 會扣哪邊的 Token?用一張圖搞懂!
這份網頁把你原本的問答文件,重新整理成一套「看得懂、按得動、可以照著做」的教學。核心口訣是:不要只看功能名字叫 Design、Code 或 API;要看你從哪個入口登入、是否貼 API Key、是否啟用 usage credits。
✅ 最重要的校正結論
把原文件的核心問答,整理成最安全、最不容易誤會的版本。
Claude.ai / Windows App / Design
你在 claude.ai、Claude Windows App、Design、Artifacts 裡面請 Claude 產生 UI、HTML、React、SVG、PowerShell,通常吃的是 Claude 方案使用量,不會因為你有 API 錢包就自動扣 API。
Anthropic API Key
把 API Key 貼到 Lovable、Cursor、VS Code 擴充、Google Apps Script、自己的程式或外部工具時,才會依模型、input/output token、工具使用量計入 API 成本。
Claude Code 不是一句話講完
Claude Code 可在 Terminal、IDE、Desktop、Web 等地方使用。若用 Pro/Max 登入,與 Claude 共享方案使用量;若改用 Console / API credits,才可能按 API rates 額外計費。
Usage credits 是「超出後續用」
若你開啟 usage credits,達到方案使用限制後可選擇繼續工作,後續用量會依標準 API rates 收費。它不是把 Pro 變成無限免費,而是付費續航。
Cloudflare 不等於 Claude Token
Cloudflare Pages / Workers 主要是部署與網域服務。只有你的程式、部署流程或第三方工具主動呼叫 Anthropic API Key,才會產生 Anthropic API 用量。
🧭 互動判斷器:我現在會扣哪裡?
選情境或貼網址,右邊會立刻用白話告訴你扣款來源與該去哪裡查。
🛤️ 最適合新手的學習路線
不要從 token 名詞開始背,先照這條路線學,會比較不混亂。
🧠 心智圖:把所有名詞放回正確位置
點節點會顯示白話說明與你該做的下一步。
🍧 Claude 額度判斷
核心不是功能名稱,而是帳務入口:方案額度、API Key、usage credits、或 Claude Code 登入與切換選項。
🌳 樹狀圖:扣款判斷流程
這張樹狀圖就是你以後看到新工具時的判斷 SOP。
- 我正在用 Claude 相關功能先分入口
- claude.ai / AppDesign / Chat / Artifacts
- 方案使用量長對話會更快達上限
- 可開 usage credits超出後付費續用
- 第三方工具 / 程式有貼 API Key
- API token 成本Console Usage / Cost
- Key 安全風險外流要重建
- Claude CodeAgent 代操
- Pro / Max 登入共享方案用量
- Console / API credits按 API rates
- claude.ai / AppDesign / Chat / Artifacts
📚 深化教學:從名詞到操作
每個分頁都是一個實戰觀念,適合照順序讀。
🎠 不要看名字
- Design 不是一定免費,也不是一定 API。
- Code 不是一定 CLI,也可能只是聊天吐程式碼。
- API 不是你有錢包就自動扣,要真的被呼叫才會扣。
🍰 看三個關鍵
- 在哪個入口使用?
- 有沒有貼 API Key?
- 有沒有啟用 usage credits 或 Console 計費?
🧃 消耗大戶
- 長對話、長文件、大量程式碼。
- Design / UI / React / SVG。
- Agent 讀多檔、跑工具、反覆錯誤修正。
| 情境 | 通常扣哪裡 | 你該怎麼做 |
|---|---|---|
| claude.ai/design | Claude 方案使用量 | 放心用,但長對話要定期開新對話 |
| Windows App 聊天寫程式 | Claude 方案使用量 | 你手動複製到 PowerShell,不代表 CLI 代操 |
| Artifacts / 檔案建立 | 同方案使用限制 | UI / 程式碼檔通常比純文字更吃用量 |
| 達上限後開 usage credits | 後續按 API rates | 設定 spending cap 與 alerts,避免無感超支 |
| Console 位置 | 看什麼 | 判斷方法 |
|---|---|---|
| API Keys | Last used at / Cost | 判斷哪把 Key 最近被使用、花多少 |
| Usage | Token / request 變化 | 對照你使用第三方工具的時間 |
| Cost | 實際金額 | 比 token 更直覺,適合每次測試後檢查 |
| Logs | 逐筆請求 | 若有開啟,可查模型、時間、狀態與異常呼叫 |
| Rate limits | 速率與使用層級 | 高頻工具若卡住,可能不是沒錢,而是限流 |
🧑💻 它是什麼
- Agentic coding assistant。
- 可讀 codebase、改檔、跑命令、整合開發工具。
- 可在 Terminal、IDE、Desktop、Web 使用。
🧾 怎麼計費
- Pro/Max 方案可涵蓋 Claude Code。
- Claude 與 Claude Code 使用量共享。
- 切 Console/API credits 則可能按 API rates。
🔍 怎麼確認
- /status 看帳號與連線。
- /usage 或 /cost 看用量。
- claude auth status 可查 CLI 登入狀態。
切上下文
設計到一個穩定版後,把「目前完整程式碼+下一步需求」搬到新對話,斷開前面沉重歷史。
先計畫再改
大改前先要求列出會碰哪些檔案、改什麼、風險在哪,確認後再修改。
限制輸出
要求只輸出要替換的 CSS、只改某個區塊、不要每次重吐完整檔。
測一次查一次
外接 API Key 後,第一次測試完立刻到 Console 看 Usage / Cost,建立成本感。
⚡ 消耗風險雷達
點選風險卡,立即顯示原因與處理方式。
⌨️ 指令中心:相關指令全部集中
可搜尋、可分類、可一鍵複製。包含 Windows 安裝、CLI、Slash commands、費用檢查、Design 省額度提示詞。
Windows PowerShell 安裝 Claude Code
在 PowerShell 視窗使用;如果看到 PS C:\ 就是 PowerShell。
irm https://claude.ai/install.ps1 | iex
Windows CMD 安裝 Claude Code
在命令提示字元使用;如果沒有 PS 前綴通常是 CMD。
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
WinGet 安裝與更新
winget install Anthropic.ClaudeCode winget upgrade Anthropic.ClaudeCode
macOS / Linux / WSL 安裝
curl -fsSL https://claude.ai/install.sh | bash
版本、更新、健康檢查
claude --version claude -v claude update claude doctor
登入、登出、帳號狀態
用 subscription 登入與用 console/API 計費是不同路線。
claude auth login claude auth login --console claude auth status claude auth status --text claude auth logout
進入專案並啟動
cd C:\Users\YourName\your-project claude
單次任務 / 管線輸入
claude "explain this project" claude -p "explain this function" cat logs.txt | claude -p "explain the error"
續接、命名、回到先前任務
claude -c claude --continue claude -r "auth-refactor" claude --resume claude -n "my-feature-work"
基本 Slash 指令
/help /clear /exit /quit /copy /export
用量與帳務 Slash 指令
/status /usage /cost /stats /usage-credits /privacy-settings
控制成本與上下文
/context /compact 請保留目前 UI 架構與待辦重點 /plan fix the auth bug /model /effort low /effort high
專案設定與記憶
/init /memory /config /settings /permissions /allowed-tools
檢查、驗證、Review
/diff /code-review /code-review high --fix /security-review /review /verify /run
Agent / 背景任務
/agents /background /bg /tasks /fork 幫我檢查登入流程風險 /batch migrate src/ from old UI to new UI
背景 Agent CLI 管理
claude agents claude agents --json claude attach 7c5dcf5d claude logs 7c5dcf5d claude stop 7c5dcf5d claude daemon status claude daemon stop --any
Remote / Desktop / Teleport
/desktop /remote-control /rc claude remote-control claude remote-control --name "My Project" claude --remote-control "My Project" /teleport claude --teleport
工具、目錄、排程
/add-dir ../shared /cd C:\Users\YourName\another-project /mcp /ide /chrome /schedule 每週一檢查專案依賴更新 /loop 5m check if the deploy finished
安全與預算限制 flags
claude --permission-mode plan claude -p --max-turns 3 "check for type errors" claude -p --max-budget-usd 5.00 "review this repo" claude --tools "Read,Edit" claude --disallowedTools "Bash(rm *)"
疑難排解與乾淨模式
claude --safe-mode claude --debug "api,mcp" claude --debug-file ./claude-debug.log claude --bare -p "explain this file"
Design 省額度:新對話接手提示詞
這是目前已定案的完整程式碼與設計方向。 請從這個版本繼續修改,不要回顧舊對話。 本次只做:〔填入單一目標〕。 請先列出會改哪些區塊,等我確認後再輸出修改版。
Claude Code:大改前先計畫
Before changing anything, list the files you'll touch and what you'll do in each. Do not edit files yet. Wait for my approval.
Design 微調:只改 CSS
請只修改 CSS 視覺樣式,不要改 HTML 結構與 JavaScript 邏輯。 請用條列說明改了哪裡,並只輸出需要替換的 CSS 區塊。
API 對帳提示詞
請幫我判斷這次操作會消耗 Claude Pro/Max 方案額度、API 錢包,還是 Claude Code/Usage credits。 我的操作情境是:〔貼上網址、工具名稱、是否貼 API Key、是否使用 Claude Code、是否看到 usage credits 提示〕。 請用表格列出判斷依據與我要去哪裡查看用量。
新手交給 Claude Code 的安全啟動提示詞
你現在先不要修改任何檔案。 請先掃描專案結構,說明這個專案做什麼、主要入口檔案在哪裡、可能會消耗較多 token 的大型檔案有哪些。 接著列出三個最小修改步驟,等我確認後再執行。
Cloudflare 不扣 Claude Token 的檢查
1. Cloudflare Pages / Workers 本身是部署平台 2. 檢查是否有 ANTHROPIC_API_KEY 環境變數 3. 檢查 Workers / 後端是否呼叫 Anthropic API 4. 檢查第三方工具是否綁定同一把 API Key 5. 到 Console → Usage / Cost 對照時間
🧺 實作前檢查表
每次要大量改 UI、用 Claude Code、或把 API Key 交給工具前,先打勾確認。
🎯 3 題小測驗
點答案,立即顯示解釋。
1. 你在 https://claude.ai/design#recent 裡做網頁 UI,通常扣哪裡?
2. 你把 Anthropic API Key 貼到 Lovable / Cursor,並讓它產生程式碼,通常扣哪裡?
3. Claude Code 一定永遠直接扣 API 錢包嗎?
🔎 官方與查證來源
本頁以你提供的文件為基礎,並用官方文件做校正。外部連結會在新分頁開啟。