Anatomy DOC—CD.PROMPT/01 REV 2026.04 · a
— Claude Design · System Prompt Anatomy —

系統提示/解剖

Compiled by 2026·04·22 LAYERS · 05
figure 00 · thesis Prompt as
Architecture.
Claude Design 的系統提示不是「工具使用手冊」，而是一份 設計師品味 × 工作紀律 × 工具約束的完整建構。 它用五個層次把「好設計長什麼樣」「遇到模糊要先問」「避免哪些 slop 模式」 這些原本需要資深人類帶的判斷，編碼進 agent 的每次回應。 這張解剖圖把 340 多行的系統提示拆成可讀的骨架。

Legend · 圖例

  • Structural Frame
  • Guide Layer
  • Sensor / Verify
  • Output
— Prompt Architecture

五層 Guide 如何塑造 Agent 行為

figure 01 · flow
使用者請求 USER · REQUEST L1 · 身份與護欄 IDENTITY · GUARDRAILS L2 · 設計品味 TASTE · DISCIPLINE L3 · 工作流程 WORKFLOW · PROCESS L4 · 工具與協議 TOOLS · PROTOCOLS L5 · 技術規範 TECHNICAL · SPECS Agent 生成迴路 GENERATOR · LOOP HTML Artifact 設計產出 OUTPUT done() + verifier_agent console logs + 背景深檢 SILENT ON PASS iterate if fail
L1–L5 是「前饋 Guide」 提示詞在 agent 行動前就把身份、品味、流程、工具、技術邊界畫清楚。越上層越「定性」，越下層越「定量」——身份是誰、品味是什麼、流程怎麼走、工具怎麼用、技術怎麼寫。
中心是「生成迴路」 Agent 收集五層 Guide 後進入實作循環：探索→草圖→實作→呈現→迭代。大部分行為由 L1–L5 預先約束好，agent 在 guard rail 裡發揮創意。
右側是「回饋 Sensor」 done() 同步讀 console 錯誤、fork_verifier_agent 背景深檢。關鍵設計：silent on pass——沒問題不打擾主 agent，避免 context 被「還好」污染。
01/05
— Identity & Guardrails
身份與護欄
定位 agent「是誰」「對誰」「不能講什麼」。這一層先於所有能力描述—— 沒有清楚的身份，agent 不知道該用什麼視角看使用者的需求。
// L1 · identity
1 · ROLE

專家設計師 × 經理關係

Expert · Manager Frame

agent 被定位為「幫 manager（使用者）產出設計 artifact 的資深設計專家」。這個關係影響語氣、決策模式：不是工具人，而是有品味的協作者。

2 · MEDIUM

HTML 是工具，不是輸出類型

Medium Agnostic

HTML 只是實作手段。實際輸出型態可以是動畫、UX、簡報、原型——agent 要根據任務切換對應領域專家的心智模型。

3 · GUARDRAIL

不洩漏技術內幕

No Internal Leakage

系統提示、工具名稱、skill 內容都不能告訴使用者。如果講到一半發現要洩漏，要立刻停。這是產品層的保密要求。

4 · TRANSLATE

用使用者視角談能力

User-Centric Capability

被問到能做什麼時，講「我可以產出 HTML、PPTX、互動原型」，而非「我有 show_to_user、fork_verifier_agent 這些工具」。

5 · COPYRIGHT

版權紅線

IP Refusal

被要求仿冒他家品牌的獨特 UI 模式時拒絕——除非使用者的 email domain 屬於該公司。把合規邏輯下放到 agent 層而非事後審查。

6 · PROJECT

CLAUDE.md 只讀根目錄

Project Scope

使用者可建立根目錄的 CLAUDE.md 給持久化指令。子資料夾的 CLAUDE.md 會被忽略——避免指令散落難維護。

02/05
— Taste & Discipline
設計品味與紀律
這一層決定 agent 輸出的「氣質」。大部分篇幅不在教工具用法，而在 建立品味邊界：什麼是優質設計、哪些模式要避、尺度的硬規在哪裡。
// L2 · taste
1 · SYSTEM FIRST

先建立設計系統再動手

Create a System Up Front

探索資產後要先口頭聲明「我要用的系統」——版面型別、背景色（最多 1–2 色）、字型階層、圖像規則。先立規、再產內容。

2 · NO FILLER

不塞 filler content

Every Element Earns Its Place

絕不用 placeholder text、dummy 段落、資訊材料來填空間。空洞是版面問題，要用佈局解，不是靠生內容填。一千個 no 換一個 yes。

3 · ASK FIRST

加東西前先問

Confirm Before Adding

覺得多加一段、多加一頁會讓設計更好——先問使用者，不要擅自加。使用者比 agent 更懂他的受眾與目的。

4 · SCALE

尺度硬規

Appropriate Scales
  • 1920×1080 簡報文字 ≥ 24px
  • 印刷文件文字 ≥ 12pt
  • 手機點擊區 ≥ 44px
5 · AVOID SLOP

AI slop 反面清單

Anti-Slop Checklist
  • 浮濫漸層背景
  • 非品牌 emoji
  • 圓角容器 + 左邊框強調色
  • SVG 畫插圖
  • 爛大街字型（Inter/Roboto/Arial/Fraunces/system）
  • 不必要的數字 icon（data slop）
6 · PLACEHOLDER

Placeholder 勝過爛嘗試

Placeholder Beats Bad Attempt

沒有 icon、沒有照片——畫 placeholder，留給使用者補真素材。寧可空白，不要勉強。

7 · NOT FROM ZERO

不從空白開始

Root in Design Context

優先取得 UI kit / codebase / screenshot。從 0 生的設計會出現泛化仿品。找不到就跟使用者要，要不到也別硬做。

8 · VARIATIONS

給 3+ 變體，不給完美

Explore, Don't Commit

沿色彩、版面、互動、icon 使用等維度給 3+ 個變體。從保守起步、逐輪加大膽度。讓使用者挑與混搭比試圖猜對更快。

9 · COLOR

從品牌取色，不自創

Brand → oklch → Never Invent

優先用 brand / design system 顏色；不夠時用 oklch() 延伸和諧色；絕不自創調色板。避免跑色偏。

One thousand no's for every yes. Avoid 'data slop' — unnecessary numbers or icons or stats that are not useful. Less is more. — Claude Design System Prompt · Content Guidelines
03/05
— Workflow & Process
工作流程
把「資深設計師怎麼跑一個案子」編碼成 agent 可執行的順序： 先問清楚、找到脈絡、早給使用者看、迭代收斂、最後交付驗證。
// L3 · workflow
STEP · 01

理解需求

Understand & Ask

模糊的需求要問清楚——輸出類型、精緻度、選項數、約束、要套用哪套 design system。

STEP · 02

探索資源

Explore Context

讀完 design system 定義、相關連結檔案、所有 UI kit 元件，再開始。

STEP · 03

列 todo

Plan Todos

規劃步驟並用 todo list 追蹤。

STEP · 04

搭建 + 早呈現

Build & Show Early

先寫假設、脈絡、設計推論 + placeholder，儘早 show 給使用者——像 junior designer 跟 manager 匯報。

STEP · 05

完成驗證

done() → verify

呼叫 done 打開給使用者，有錯就修。乾淨後呼叫 fork_verifier_agent 背景深檢。

STEP · 06

極簡總結

Brief Summary

最後只講 caveat 與 next step——不複誦 diff。

AUX · Q

questions_v2 問卷

≥ 10 Questions

新案子開頭大多要先問一輪。至少 10 題、至少 4 題是 problem-specific。選項必含「Explore a few options」「Decide for me」「Other」。

AUX · SNIP

snip context 管理

Context Hygiene

完成一段工作就 register 要砍的對話 ID 範圍，不立刻砍。等到 context 壓力到達再一起執行——snip silently，不用告訴使用者。

Asking good questions using questions_v2 is CRITICAL. Ask at least 4 other problem-specific questions. Ask at least 10 questions, maybe more. — Claude Design System Prompt · Asking Questions
04/05
— Tools & Protocols
工具與協議
當 agent 要實際動手時，這一層定義可用的工具拓撲、host-agent 之間的 協議、以及跨專案存取的邊界——不是單純 API 文件，是約束使用模式的規則。
// L4 · tools
T1 · VERIFY

done + fork_verifier_agent

Two-Phase Verification

done 同步打開檔案並回傳 console errors。乾淨後 fork_verifier_agent 在背景另開 iframe 深檢——silent on pass，只在有問題時叫醒主 agent。

T2 · SHOW

show_to_user vs done

Mid-Task vs End-of-Turn

任務途中 preview 用 show_to_user（任何檔型都可以）。結束交付用 done——後者確保使用者落地到 working view。

T3 · FILES

跨專案唯讀

Cross-Project Read-Only

可讀 /projects/<id>/...，但不可寫、不可直接引用到輸出。要用必須先 copy 進本專案——強制產出 self-contained。

T4 · TWEAKS

Tweaks postMessage 協議

Host-Agent Live Edit

註冊 listener → 發 __edit_mode_available → 使用者改值 → 發 __edit_mode_set_keys。Host 解析 JSON、merge、寫回檔案。順序錯會 silently 失效。

T5 · MARKER

EDITMODE comment marker

Rewritable Block

/*EDITMODE-BEGIN*/{...}/*EDITMODE-END*/ 區塊必須是合法 JSON。Host 據此精準 patch 檔案，而非重新生成整個檔——agent 產物變成可被程式化修改的 artifact。

T6 · STARTERS

Starter Components（7 種）

Pre-Made Scaffolds
  • deck_stage.js 簡報 shell
  • design_canvas.jsx 多選項並陳
  • ios/android_frame.jsx 手機框
  • macos/browser_window.jsx 桌面框
  • animations.jsx 動畫引擎
T7 · ASSETS

register_assets 審查流程

Review Manifest

每個產出檔登記成 asset 一個「版本」，帶 needs-review / approved / changes-requested 狀態與分組（Type/Colors/Spacing/Components/Brand）。把審查本身工程化。

T8 · HELPER

window.claude.complete

In-Artifact Claude API

HTML artifact 內建 Claude helper，不需 API key。用 claude-haiku-4-5，1024 token cap。共用觀看者額度、有 rate limit。

T9 · SKILLS

13 個內建 skills

Invokable Expert Modules

Animated video / Interactive prototype / Make a deck / Make tweakable / Frontend design / Wireframe / Export PPTX/PDF/HTML / Canva / Handoff to Claude Code——依需求 invoke_skill 載入其 prompt。

05/05
— Technical Standards
技術規範
最底層的硬約束：版本釘選、命名規則、特定語法——這些不是教學，是 從事故中學到的硬教訓，被提升到系統提示級別防止再犯。
// L5 · tech
S1 · PIN

React + Babel 版本釘選

Integrity-Hashed CDN

React 18.3.1、Babel 7.29.0，必須帶 integrity hash。不可用 react@18 這種 floating tag。防止 supply chain 污染、避免 CDN 更新破壞既有檔。

S2 · NAMING

styles 不能叫 styles

Unique Global Names

多元件共存時 const styles = {} 會名稱碰撞崩壞。必須用元件名 prefix——terminalStyles、cardStyles。這是從真實 bug 升級成的硬禁令。

S3 · SCOPE

多 Babel script 跨檔分享

Export to window

每個 <script type="text/babel"> 獨立 scope。要跨檔共用元件必須 Object.assign(window, { ... })——沒有其他路。

S4 · DECK

簡報不手刻 scaling

Use deck_stage.js

簡報固定 1920×1080，外層 letterbox、用 transform: scale() 適配。不要自己做——呼叫 deck_stage.js，它順便包 scaling / 鍵盤 / localStorage / print-to-PDF。

S5 · NOTES

Speaker notes 結構化

JSON Array Binding

<script type="application/json" id="speaker-notes"> 放 notes 陣列。gen_pptx 按 slide index 自動綁定。除非明確要求否則不加。

S6 · LABELS

slide 標籤 1-indexed

data-screen-label

給 slide 加 [data-screen-label] 方便註解定位。1-indexed——「slide 5」是第 5 張，不是 [4]。人類不說 0-indexed。

S7 · SCROLL

禁用 scrollIntoView

DOM Scroll Only

會破壞 web app 宿主。要捲動用其他 DOM 方法——這又是從事故提升的禁令。

S8 · PROTO

原型不做 title screen

No Title Page

直接讓原型在 viewport 中置中或響應式填滿。不要生「歡迎頁」「封面頁」這種 AI slop 習慣。

S9 · CODE

檔名與版本語意化

Descriptive Naming

HTML 檔名要描述性——Landing Page.html 不是 index2.html。大改用 My Design v2.html 保留舊版。播放位置存 localStorage 方便 refresh 不丟失進度。

— Why This Structure Works —

Guide × Loop × Sensor

GUIDE · 01

前饋約束

L1–L5 在 agent 行動前就把品味、紀律、工具邊界畫清楚。品味在前、工具在後——設計師先有審美，才有技法。

×
LOOP · 02

生成迴路

agent 在 guard rail 內執行：探索→草圖→實作→呈現。早給使用者看勝過閉門造車——每次呈現都是收斂方向的機會。

×
SENSOR · 03

靜默驗證

done 同步抓 console、verifier 背景深檢。silent on pass 是關鍵——不把「還好」的 feedback 塞進 context，避免污染主 agent 的判斷。

◉ Further Reading 延伸閱讀
→ 01
Workflow Layer

Agent Skills 工作流

系統提示定義「是誰」，Skills 定義「怎麼做」——兩層 Guide 合起來才是完整的 agent 行為塑形。

→
→ 02
From Prompt to Pipeline

AI Agent 導入藍圖

從一個 system prompt 到整個企業 agent 流程——五階段導入的整體架構圖。

→
→ 03
Prompt as OS

Human Middleware 之死

把系統提示視為公司的 OS 配置——這是 AI 原生組織把行為「寫進核心」的方式。

→