我們能從Claude Design提示詞中學到什麼
整理版優先睇
Claude Design嘅系統提示詞揭示咗點樣將通用AI模型塑造成專業設計師，重點係角色定位、工作流程同負面清單。
呢篇文章係關於Anthropic Labs推出嘅Claude Design，一個透過對話同Claude Opus 4.7共同創作設計嘅工具。作者從被公開嘅系統提示詞入面，拆解出頂層設計思維，想帶出嘅係：呢套提示詞唔係教AI做設計，而係用角色定位、流程約束同負面清單，將一個「乜都識啲」嘅通用模型，變成一個喺特定領域似人類專家咁工作嘅專業設計師。
作者指出，傳統設計工具（例如Figma）嘅股價下跌，反映嘅可能係範式轉變：唔係令設計師做得更快，而係令唔識設計嘅人都做到設計，同時只會執行嘅設計師會逐漸被淘汰。佢認為我哋正處於一個歷史分水嶺，就好似編程圈嘅Claude Code時刻，設計圈都迎來咗Claude Design時刻。
整體結論係：呢份提示詞入面嘅思維方式——先定角色、畀AI畫邊界、唔好憑空想像、提前講清唔可以犯嘅錯、開頭多問結尾少講——唔單止適用於設計，仲可以應用喺其他領域嘅AI協作，係一種高質量嘅人機協作框架。
- 角色定位係第一性原理：將Claude定位為「用HTML做畫布嘅設計師」，而唔係「會寫code嘅AI助手」，輸出質量截然不同。
- 六步工作流程：開頭至少問10條問題釐清需求，結尾用工具驗證而唔自己check，體現成熟協作者姿態。
- 上下文為首要依據：設計之前必須蒐集用戶嘅代碼、設計系統、截圖等真實資產，避免AI憑數據腦補。
- 先建立系統再動筆：喺畫第一個像素前就定好顏色、字型、版式等規範，確保設計一致性。
- 技術紅線同AI Slop負面清單：例如禁止scrollIntoView、唔用emoji、唔重用styles變數名等，避免靜默失敗同低質視覺效果。
Claude Design提示詞可閲讀網頁版（附原版下載）
作者用Claude Opus 4.7將系統提示詞生成咗一個閲讀體驗更好嘅網頁版本，底部可以下載原版提示詞。
角色定位：設計師為本，HTML只係畫筆
整份提示詞嘅第一性原理係：「用戶係經理，你係為佢出活嘅設計師。」Claude唔係「會寫code嘅AI助手」，而係「啱好用HTML做畫布嘅多領域設計師」。佢會根據任務切換身份：做動畫時係motion designer，做原型時係UX設計師，做幻燈片時係presentation designer。明確避免Web設計套路，除非真係做緊網頁。
同AI協作時，唔好話「幫我寫個頁面」，而係「作為一名UX設計師，為我設計一個……」。角色定位決定輸出質量。
六步工作流：開頭多問，結尾少講
從理解需求到交付驗證，每一步都有明確職責：理解需求（主動追問輸出形式、保真度、要幾版、約束條件、設計系統）、探索資源（讀曬設計系統定義同相關文件）、規劃（拆成Todo排好順序）、搭建結構（建好目錄，複製資產）、完成驗證（用done同fork_verifier_agent做質量把關）、極簡總結（只講注意事項同下一步）。開頭多問，將模糊需求問成可執行方案；結尾少講，將驗證交畀工具。
上下文係首要依據，從零開始係最後選擇
「從零開始做高保真設計係最後嘅選擇。」提示詞反覆強調：好設計唔會憑空生出來。動手之前，必須主動揾用戶嘅代碼倉、Figma、截圖，同埋已有嘅UI Kit、設計系統、同領域嘅現有產品。揾唔到？主動問用戶要，而唔係腦補一套。
呢個係對抗AI最大嘅陷阱：憑訓練數據腦補，而唔係基於真實項目定製。
先建系統，再動筆
「Create a system up front.」喺畫第一個像素之前，先將系統講出來：排版規則、配色方案、版式節奏、組件清單、留白規範。關鍵規範包括：顏色優先品牌色，唔夠用OKLCH調和諧；字號方面，1920×1080幻燈片正文≥24px，打印文檔≥12pt，移動端可點區≥44px；版式用1-2個背景色就夠，用全出血圖、不同色塊嘅章節首頁製造視覺節奏。CSS友軍包括text-wrap:pretty、CSS Grid等高級效果。
Tweaks、技術紅線同交付驗證
Tweaks係工具欄上嘅開關，開啟後會喺原型入面露出可調控件：顏色、字號、間距、文案、版式、特性開關。持久化機制用const TWEAK_DEFAULTS標記，並且順序一定要啱：先註冊message監聽，再postMessage('__edit_mode_available')，否則用戶個toggle撳咗似冇撳。
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"primaryColor": "#D97757",
"fontSize": 16,
"dark": false
}/*EDITMODE-END*/;技術紅線包括：必須釘版本加integrity hash、唔好用styles呢個通用變數名（會撞名）、Babel多文件要顯式掛到window、文件唔過1000行、禁止scrollIntoView、公式統一用$$...$$。另外要遠離AI Slop：唔好用濫用漸變、emoji、圓角容器加左側色條嗰種卡片、用爛大街字體等。每個元素都要掙得自己嘅位置，覺得空係版式問題，唔係要塞內容。
交付驗證方面，收尾流程切分得好乾脆：先done(path)將文件推到用戶tab，有錯就修；然後fork_verifier_agent()，喺後台截圖、跑JS、查佈局。唔好自己自檢，將呢份髒活交畀驗證agent。固定尺寸內容（例如Decks）直接用deck_stage.js起步組件，佢已經將縮放、鍵盤導航、頁碼、speaker notes、localStorage續看、打印PDF全部做好。
近日一篇 Claude Design 的推文，Figma 和 Adobe 股價又跌了。
一句話總結Claude Design ： Anthropic Labs 推出的視覺協作工具，讓你通過對話與 Claude Opus 4.7 共同創建設計、原型、幻燈片等視覺作品——自動應用你的設計系統，支持從文本/代碼庫/文件導入，可通過對話/行內評論/直接編輯優化，最終導出為 HTML/PDF/PPTX 或直接交付給 Claude Code 開發。
https://www.anthropic.com/news/claude-design-anthropic-labs
打敗傳統的，往往不是更好的同類，而是全新的範式。
另一方面，Claude 最近頻繁的舉動越來越不像一個底層的大模型公司了。就像賣鏟子的人突然自己開始揮舞鏟子，這一次，也揮向了 Lovable 和 V0 這類基於大模型快速生成設計的工具。
Claude Design 究竟好用嗎，來自推特博主 @jerrod_lew 使用 Claude Design 和 Opus 4.7 設計了個人儀表盤
也有設計師不屑一顧， @uiux_harshit 表示“如果你重視你的產品，你就會聘請設計師” （下圖他做的對比）
人類的品味是不是真的失去效果了呢？Claude Design 是不是意味着對設計的又一次顛覆？而現在，Claude Design 的系統提示詞已經被扒出來了。我覺得值得關注的恰恰是：這份提示詞裏藴含着什麼頂層設計思維？是否對我們的設計思考帶來什麼啓發？
拆解系統提示詞
為了更好地實驗這個效果，我用這套提示詞，讓 Claude Opus 4.7 自己把這套提示詞生成了一個可以閲讀的網頁版本。
可以訪問這個地址觀看 https://claude.zeroyue.com/ 比本文內容閲讀體驗更好👇
01. 角色定位：先是設計師，HTML 只是畫筆
“用戶是經理，你是為他出活的設計師。”
這是整份提示詞的第一性原理。
Claude 不是“會寫代碼的 AI 助手”，而是“恰好用 HTML 作畫布的多領域設計師”。
它會根據任務切換身份：
做動畫時，它是 motion designer
做原型時，它是 UX 設計師
做幻燈片時，它是 presentation designer
明確避免 Web 設計套路，除非你真的在做網頁。
給你的啓發：
和 AI 協作時，別說“幫我寫個頁面”，而是“作為一名 UX 設計師，為我設計一個……”。角色定位決定輸出質量。
02. 六步工作流：開頭多問，結尾少說
從理解需求到交付驗證，每一步都有明確職責：
1. 理解需求 — 主動追問：輸出形式、保真度、要幾版、約束條件、設計系統
2. 探索資源 — 讀完設計系統的完整定義和所有相關文件
3. 規劃 — 拆成 Todo，排好順序再動手
4. 搭建結構 — 建好目錄，把要用的資產複製進來
5. 完成驗證 — 用 done 和 fork_verifier_agent 做質量把關
6. 極簡總結 — 只說注意事項和下一步，不囉嗦
注意第 1 步和第 6 步的對稱：
開頭多問，把模糊需求問成可執行方案；結尾少說，把驗證交給工具。
這是成熟協作者的姿態。
03. 上下文是首要依據，而從零開始是最後選擇
“從零開始做高保真設計是最後的選擇。”
提示詞反覆強調：好設計不會憑空生出來。
動手之前，必須主動找：
用戶的代碼倉/Figma/截圖
已有的 UI Kit、設計系統
同領域的現有產品
找不到？主動問用戶要，而不是腦補一套。
✅ 該做的事
列資產清單：先
list、再讀組件、再讀樣式 token把品牌色、間距、圓角、字體棧“原值搬運”
素材沒有就畫佔位，佔位勝過糟糕的真品
❌ 不要做的事
跳過資產探索，靠記憶“大概是這樣”地復刻
批量複製超過 20 個文件的資源目錄
用截圖當唯一參考 — 能拿到代碼就別隻看圖
這是在對抗 AI 最大的陷阱：憑訓練數據腦補，而非基於真實項目定製。
04. 先建系統，再動筆
“Create a system up front.”
在畫第一個像素之前，先把系統說出來：
排版規則、配色方案、版式節奏、組件清單、留白規範。
關鍵規範
顏色： 優先用品牌色；不夠用時，用 OKLCH 調出與現有色板和諧的新色
字號：
1920×1080 幻燈片正文 ≥ 24px
打印文檔 ≥ 12pt
移動端可點區 ≥ 44px
版式： 1-2 個背景色就夠，用全出血圖、不同色塊的章節首頁製造視覺節奏
CSS 友軍：text-wrap: pretty、CSS Grid、高級 CSS 效果 — 是你的朋友
05. 提問的藝術：至少問 10 個問題
問得好，是設計師最被低估的能力。
什麼時候問
給份 PRD 讓做 deck → 問受眾、語氣、長度
“做 6 張關於黃油歷史的 slide” → 太空，必須問
“為外賣 App 做 onboarding 原型” → 問一大堆
什麼時候不問
“用這份 PRD 給工程全員做 10 分鐘 deck” → 信息夠了，直接做
“把這份截圖變成可交互原型” → 行為清晰就別問
提問清單（至少 10 條）
先確認起點和上下文：UI Kit/設計系統/代碼庫
問要不要做多版本，針對哪些維度做
問 tweaks 想探索什麼：UX 新穎性？視覺？動畫？文案？
問用戶最在意：流程、文案、視覺哪一項
再加 4 條以上“問題特異性”的問題
心法：寧可問多，不可問少。
06. Tweaks：把可調性交還給用戶
Tweaks 是工具欄上的開關，開啓後會在原型裏露出可調控件：顏色、字號、間距、文案、版式、特性開關。
持久化機制
⚠️ CRITICAL
順序絕不能錯：
必須先註冊 message 監聽，再向父窗口 postMessage('__edit_mode_available')。
否則用戶的 toggle 點了像沒點 — 這是典型的靜默失敗。
默認行為：
就算用戶沒要 tweaks，也主動加幾個 — “暴露給用戶一些他們沒想到的可能性。”
07. 技術紅線：最容易“沉默崩潰”的地方
看似工程細節，卻是最容易出問題的地方。
1. 必須釘版本 + integrity hash
不能寫 react @18 這種半浮動版本，也不能省略 SHA384 完整性校驗。
2. 不要給 styles 起重名 ⚠️
NEVER write const styles = { ... }。
如果導入兩個組件都用了同名 styles，會直接互相沖撞。
一律用組件名前綴：terminalStyles、cardStyles。
3. Babel 多文件不共享作用域
每個<script type="text/babel">都是獨立作用域。
想在文件之間共享組件，顯式掛到 window:
4. 其他約束
文件不要超過 1000 行 — 太長就拆
禁止
scrollIntoView— 它會把整個 web 應用頂飛公式統一用
$$...$$— 單$不渲染
08. 遠離 AI Slop：一眼看出是 AI 做的
“AI Slop”指那種一眼能看出“這是 AI 做的”的爛俗痕跡，也叫AI泔水。
❌ 提示詞點名勸退
濫用漸變背景
使用 emoji（除非品牌就用）
圓角容器+左側色條 accent 的“那種卡片”
用 SVG 現畫“圖像”，寧可用佔位
用爛大街的字體： Inter/Roboto/Arial/Fraunces/system fonts
無意義的統計數字、裝飾性 icon、信息堆疊（“data slop”）
✅ 提示詞推薦姿態
“One thousand no’s for every yes” — 少即是多
每一個元素都要“掙得自己的位置”
覺得空，是版式問題，不是要塞內容
想加新版塊、新圖、新文案？先問用戶，別擅自加
09. 交付與驗證：保證用戶落地的那一幀不會崩
“始終保證用戶落地的那一幀不會崩。”
收尾流程被切分得很乾脆：
1. done(path) — 把文件推到用戶的 tab，返回控制枱錯誤。有錯就修，再調 done
2. fork_verifier_agent() — 乾淨後再 fork 一個驗證 agent，在後台截圖、跑 JS、查佈局
心法：“不要自己去自檢” — 把這份髒活交給驗證 agent。
固定尺寸的內容（Decks 等）
幻燈片不要手工擼。
直接用 deck_stage.js 起步組件 — 它已經把縮放、鍵盤/觸屏導航、頁碼、speaker notes、localStorage 續看、打印成 PDF 全做好了。
一圖流理解
總結頂層設計——五個核心思考
看完這 9 條，再往上抽一層，會發現整套系統藏着 5 個對設計工作的啓發：
1. 先定角色，再談工具 — 你想讓 AI 成為誰？
別說“幫我做個設計”，而是說“作為一名 UX 設計師，幫我……”。
給 AI 一個明確的身份，它才知道該關注什麼、該問什麼、該如何取捨。
就像你找人幫忙，說“我需要一個設計師”和“我需要一個會 PS 的人”，來的人做事方式完全不同。
2. 給 AI 畫邊界，它才能做得更好
AI 什麼都能做一點，但什麼都做不精。
與其讓它自由發揮，不如告訴它：只能用這幾個顏色、只能用這套組件、必須先問清楚再動手。
就像給孩子玩具，100 個玩具他不知道玩什麼，3 個玩具反而能玩出花樣。
3. 好設計不是憑空想出來的
永遠別讓 AI“從零開始”做設計。
先給它看你現有的設計系統、品牌色、已有頁面，讓它基於這些做延伸。
AI 最大的問題是：它會憑記憶腦補一套“看起來像那麼回事”的東西，但和你的項目完全不搭。
就像裝修，你得先給設計師看你家現有的風格，而不是讓他隨便想一套。
4. 提前說清楚“不能犯的錯”
有些錯誤不會報錯，但會讓用戶體驗直接崩掉。
把這些“看起來沒問題、用起來就炸”的坑提前告訴 AI，用大寫、加粗、重複說。
比如：兩個文件不能用同一個名字、某個操作必須先做 A 再做 B。
就像開車前告訴新手：“這個路口必須提前變道，不然來不及。”
5. 開頭多問，結尾少說 — 把時間花在刀刃上
設計開始前，至少問 10 個問題：給誰看？要達到什麼效果？有哪些限制？
問清楚了，後面就能一氣呵成。
設計做完後，別自己反覆檢查，交給工具或其他人驗證。
就像寫文章：開頭多想想寫給誰、想說什麼；寫完後找別人幫你挑錯，別自己反覆改到天荒地老。
寫在最後
這套提示詞不是在教 AI“怎麼做設計”。
而是在用角色定位+流程約束+負面清單，把一個“什麼都會一點”的通用模型，塑造成一個“在特定領域像人類專家一樣工作”的專業設計師。
Figma 股價跌了，可能只反映了表層衝擊。
真正的衝擊是：當 Anthropic 自己的設計師都不再主要用 Figma，別的科技公司還會繼續主要用嗎？
範式轉變已經發生。
不是讓設計師“做得更快”，而是讓不會設計的人也能做設計 + 只會執行的設計師逐漸淘汰。
正如編程圈 Claude Code 時刻，設計圈也迎來了 Claude Design 時刻。
而我們剛好站在這個歷史的分水嶺上，繼續見證。
最後再次推薦查看AI自己設計的說明版本，末尾有原版的整套提示詞下載
https://claude.zeroyue.com/
近日一篇 Claude Design 的推文，Figma 和 Adobe 股價又跌了。
一句話總結Claude Design ： Anthropic Labs 推出的視覺協作工具，讓你通過對話與 Claude Opus 4.7 共同創建設計、原型、幻燈片等視覺作品——自動應用你的設計系統，支持從文本/代碼庫/文件導入，可通過對話/行內評論/直接編輯優化，最終導出為 HTML/PDF/PPTX 或直接交付給 Claude Code 開發。
https://www.anthropic.com/news/claude-design-anthropic-labs
打敗傳統的，往往不是更好的同類，而是全新的範式。
另一方面，Claude 最近頻繁的舉動越來越不像一個底層的大模型公司了。就像賣鏟子的人突然自己開始揮舞鏟子，這一次，也揮向了 Lovable 和 V0 這類基於大模型快速生成設計的工具。
Claude Design 究竟好用嗎，來自推特博主 @jerrod_lew 使用 Claude Design 和 Opus 4.7 設計了個人儀表盤
也有設計師不屑一顧， @uiux_harshit 表示“如果你重視你的產品，你就會聘請設計師” （下圖他做的對比）
人類的品味是不是真的失去效果了呢？Claude Design 是不是意味着對設計的又一次顛覆？而現在，Claude Design 的系統提示詞已經被扒出來了。我覺得值得關注的恰恰是：這份提示詞裏藴含着什麼頂層設計思維？是否對我們的設計思考帶來什麼啓發？
拆解系統提示詞
為了更好地實驗這個效果，我用這套提示詞，讓 Claude Opus 4.7 自己把這套提示詞生成了一個可以閲讀的網頁版本。
可以訪問這個地址觀看 https://claude.zeroyue.com/ 比本文內容閲讀體驗更好👇
01. 角色定位：先是設計師，HTML 只是畫筆
“用戶是經理，你是為他出活的設計師。”
這是整份提示詞的第一性原理。
Claude 不是“會寫代碼的 AI 助手”，而是“恰好用 HTML 作畫布的多領域設計師”。
它會根據任務切換身份：
做動畫時，它是 motion designer
做原型時，它是 UX 設計師
做幻燈片時，它是 presentation designer
明確避免 Web 設計套路，除非你真的在做網頁。
給你的啓發：
和 AI 協作時，別說“幫我寫個頁面”，而是“作為一名 UX 設計師，為我設計一個……”。角色定位決定輸出質量。
02. 六步工作流：開頭多問，結尾少說
從理解需求到交付驗證，每一步都有明確職責：
1. 理解需求 — 主動追問：輸出形式、保真度、要幾版、約束條件、設計系統
2. 探索資源 — 讀完設計系統的完整定義和所有相關文件
3. 規劃 — 拆成 Todo，排好順序再動手
4. 搭建結構 — 建好目錄，把要用的資產複製進來
5. 完成驗證 — 用 done 和 fork_verifier_agent 做質量把關
6. 極簡總結 — 只說注意事項和下一步，不囉嗦
注意第 1 步和第 6 步的對稱：
開頭多問，把模糊需求問成可執行方案；結尾少說，把驗證交給工具。
這是成熟協作者的姿態。
03. 上下文是首要依據，而從零開始是最後選擇
“從零開始做高保真設計是最後的選擇。”
提示詞反覆強調：好設計不會憑空生出來。
動手之前，必須主動找：
用戶的代碼倉/Figma/截圖
已有的 UI Kit、設計系統
同領域的現有產品
找不到？主動問用戶要，而不是腦補一套。
✅ 該做的事
列資產清單：先
list、再讀組件、再讀樣式 token把品牌色、間距、圓角、字體棧“原值搬運”
素材沒有就畫佔位，佔位勝過糟糕的真品
❌ 不要做的事
跳過資產探索，靠記憶“大概是這樣”地復刻
批量複製超過 20 個文件的資源目錄
用截圖當唯一參考 — 能拿到代碼就別隻看圖
這是在對抗 AI 最大的陷阱：憑訓練數據腦補，而非基於真實項目定製。
04. 先建系統，再動筆
“Create a system up front.”
在畫第一個像素之前，先把系統說出來：
排版規則、配色方案、版式節奏、組件清單、留白規範。
關鍵規範
顏色： 優先用品牌色；不夠用時，用 OKLCH 調出與現有色板和諧的新色
字號：
1920×1080 幻燈片正文 ≥ 24px
打印文檔 ≥ 12pt
移動端可點區 ≥ 44px
版式： 1-2 個背景色就夠，用全出血圖、不同色塊的章節首頁製造視覺節奏
CSS 友軍：text-wrap: pretty、CSS Grid、高級 CSS 效果 — 是你的朋友
05. 提問的藝術：至少問 10 個問題
問得好，是設計師最被低估的能力。
什麼時候問
給份 PRD 讓做 deck → 問受眾、語氣、長度
“做 6 張關於黃油歷史的 slide” → 太空，必須問
“為外賣 App 做 onboarding 原型” → 問一大堆
什麼時候不問
“用這份 PRD 給工程全員做 10 分鐘 deck” → 信息夠了，直接做
“把這份截圖變成可交互原型” → 行為清晰就別問
提問清單（至少 10 條）
先確認起點和上下文：UI Kit/設計系統/代碼庫
問要不要做多版本，針對哪些維度做
問 tweaks 想探索什麼：UX 新穎性？視覺？動畫？文案？
問用戶最在意：流程、文案、視覺哪一項
再加 4 條以上“問題特異性”的問題
心法：寧可問多，不可問少。
06. Tweaks：把可調性交還給用戶
Tweaks 是工具欄上的開關，開啓後會在原型裏露出可調控件：顏色、字號、間距、文案、版式、特性開關。
持久化機制
⚠️ CRITICAL
順序絕不能錯：
必須先註冊 message 監聽，再向父窗口 postMessage('__edit_mode_available')。
否則用戶的 toggle 點了像沒點 — 這是典型的靜默失敗。
默認行為：
就算用戶沒要 tweaks，也主動加幾個 — “暴露給用戶一些他們沒想到的可能性。”
07. 技術紅線：最容易“沉默崩潰”的地方
看似工程細節，卻是最容易出問題的地方。
1. 必須釘版本 + integrity hash
不能寫 react @18 這種半浮動版本，也不能省略 SHA384 完整性校驗。
2. 不要給 styles 起重名 ⚠️
NEVER write const styles = { ... }。
如果導入兩個組件都用了同名 styles，會直接互相沖撞。
一律用組件名前綴：terminalStyles、cardStyles。
3. Babel 多文件不共享作用域
每個<script type="text/babel">都是獨立作用域。
想在文件之間共享組件，顯式掛到 window:
4. 其他約束
文件不要超過 1000 行 — 太長就拆
禁止
scrollIntoView— 它會把整個 web 應用頂飛公式統一用
$$...$$— 單$不渲染
08. 遠離 AI Slop：一眼看出是 AI 做的
“AI Slop”指那種一眼能看出“這是 AI 做的”的爛俗痕跡，也叫AI泔水。
❌ 提示詞點名勸退
濫用漸變背景
使用 emoji（除非品牌就用）
圓角容器+左側色條 accent 的“那種卡片”
用 SVG 現畫“圖像”，寧可用佔位
用爛大街的字體： Inter/Roboto/Arial/Fraunces/system fonts
無意義的統計數字、裝飾性 icon、信息堆疊（“data slop”）
✅ 提示詞推薦姿態
“One thousand no’s for every yes” — 少即是多
每一個元素都要“掙得自己的位置”
覺得空，是版式問題，不是要塞內容
想加新版塊、新圖、新文案？先問用戶，別擅自加
09. 交付與驗證：保證用戶落地的那一幀不會崩
“始終保證用戶落地的那一幀不會崩。”
收尾流程被切分得很乾脆：
1. done(path) — 把文件推到用戶的 tab，返回控制枱錯誤。有錯就修，再調 done
2. fork_verifier_agent() — 乾淨後再 fork 一個驗證 agent，在後台截圖、跑 JS、查佈局
心法：“不要自己去自檢” — 把這份髒活交給驗證 agent。
固定尺寸的內容（Decks 等）
幻燈片不要手工擼。
直接用 deck_stage.js 起步組件 — 它已經把縮放、鍵盤/觸屏導航、頁碼、speaker notes、localStorage 續看、打印成 PDF 全做好了。
一圖流理解
總結頂層設計——五個核心思考
看完這 9 條，再往上抽一層，會發現整套系統藏着 5 個對設計工作的啓發：
1. 先定角色，再談工具 — 你想讓 AI 成為誰？
別說“幫我做個設計”，而是說“作為一名 UX 設計師，幫我……”。
給 AI 一個明確的身份，它才知道該關注什麼、該問什麼、該如何取捨。
就像你找人幫忙，說“我需要一個設計師”和“我需要一個會 PS 的人”，來的人做事方式完全不同。
2. 給 AI 畫邊界，它才能做得更好
AI 什麼都能做一點，但什麼都做不精。
與其讓它自由發揮，不如告訴它：只能用這幾個顏色、只能用這套組件、必須先問清楚再動手。
就像給孩子玩具，100 個玩具他不知道玩什麼，3 個玩具反而能玩出花樣。
3. 好設計不是憑空想出來的
永遠別讓 AI“從零開始”做設計。
先給它看你現有的設計系統、品牌色、已有頁面，讓它基於這些做延伸。
AI 最大的問題是：它會憑記憶腦補一套“看起來像那麼回事”的東西，但和你的項目完全不搭。
就像裝修，你得先給設計師看你家現有的風格，而不是讓他隨便想一套。
4. 提前說清楚“不能犯的錯”
有些錯誤不會報錯，但會讓用戶體驗直接崩掉。
把這些“看起來沒問題、用起來就炸”的坑提前告訴 AI，用大寫、加粗、重複說。
比如：兩個文件不能用同一個名字、某個操作必須先做 A 再做 B。
就像開車前告訴新手：“這個路口必須提前變道，不然來不及。”
5. 開頭多問，結尾少說 — 把時間花在刀刃上
設計開始前，至少問 10 個問題：給誰看？要達到什麼效果？有哪些限制？
問清楚了，後面就能一氣呵成。
設計做完後，別自己反覆檢查，交給工具或其他人驗證。
就像寫文章：開頭多想想寫給誰、想說什麼；寫完後找別人幫你挑錯，別自己反覆改到天荒地老。
寫在最後
這套提示詞不是在教 AI“怎麼做設計”。
而是在用角色定位+流程約束+負面清單，把一個“什麼都會一點”的通用模型，塑造成一個“在特定領域像人類專家一樣工作”的專業設計師。
Figma 股價跌了，可能只反映了表層衝擊。
真正的衝擊是：當 Anthropic 自己的設計師都不再主要用 Figma，別的科技公司還會繼續主要用嗎？
範式轉變已經發生。
不是讓設計師“做得更快”，而是讓不會設計的人也能做設計 + 只會執行的設計師逐漸淘汰。
正如編程圈 Claude Code 時刻，設計圈也迎來了 Claude Design 時刻。
而我們剛好站在這個歷史的分水嶺上，繼續見證。
最後再次推薦查看AI自己設計的說明版本，末尾有原版的整套提示詞下載
https://claude.zeroyue.com/