我逆向了Claude Design！免費開源！
整理版優先睇
逆向 Claude Design 並開源「huashu-design」：一個 agent-first 嘅設計 skill，喺 terminal 一句話生成 PPT、App 原型同動畫
呢篇文章嘅作者係一個好鍾意用 agent 做嘢嘅開發者。佢平時寧願叫 agent 喺 terminal 幫佢搞掂曬，都唔想打開 Figma 或者 Keynote 呢類圖形界面。雖然 Claude Design 係目前最成熟嘅 AI 設計工具，但佢始終係一個要人操作嘅 GUI 產品，所以佢用咗幾日就冇再開過。
為咗解決呢個問題，佢叫自己嘅 agent 拆解咗 Claude Design 嘅系統提示詞同核心組件機制，再結合同自己過去嘅設計探索，整咗一個叫「huashu-design」嘅 skill，直接裝入 Claude Code 入面。從此之後，每次需要設計任何嘢，淨係喺 terminal 講一句話就得，agent 會自動補全品牌資產、自己建立 design spec、自己生成結果，成個過程唔使打開任何界面。作者強調呢個 skill 嘅核心理念係 agent-first，目標係令圖形工具層消失。
作者大方承認核心靈感係從 Claude Design 流出嘅提示詞偷師，然後落成一套 5 步硬流程，包括問用戶、搜官方品牌頁、下載資產、grep 提取色值、固化為 brand-spec.md。佢透過 A/B 測試發現，呢套流程令輸出嘅穩定性方差降低咗 5 倍。作者認為對獨立開發者同內容創作者嚟講，呢個 80 分嘅 skill 比 100 分嘅 Claude Design 更好用，因為唔需要離開 terminal。最後佢開源咗呢…
- huashu-design 係一個 agent-first 嘅設計 skill，用戶只需喺 Claude Code terminal 講一句話，就可以生成 PPT、App 原型、動畫等，全程唔使打開圖形界面。
- 品牌資產協議係核心：5 步硬流程包括問、搜、下載、grep、固化，確保輸出由品牌上下文長出來，而唔係憑空發明。
- 與 Claude Design 嘅最大差異係「誰操作工具」：Claude Design 係俾設計師嘅更好 GUI，huashu-design 係俾 agent 操作，讓 Figma 工作流自然消亡。
- 透過 A/B 測試發現，穩定嘅穩定性先係 skill 嘅真正護城河——v2 嘅方差比 v1 低 5 倍，輸出更加一致可靠。
- 安裝方法好簡單：執行 npx skills add alchaincyf/huashu-design，然後喺 Claude Code 直接講「做份 PPT」或「做個 App 原型」就可以開始用。
huashu-design
一個 agent-first 嘅設計 skill，整合品牌資產協議同自動化生成流程，直接裝入 Claude Code 使用。
點解要整 huashu-design？
作者係一個寧願叫 agent 喺 terminal 做嘢，都唔想打開任何圖形界面嘅人。
寧願叫 agent 做嘢，都唔想打開任何圖形界面
雖然 Claude Design 好成熟，但佢始終係一個要人操作嘅工具，所以佢用咗幾日就冇再開過。
呢個唔係產品問題，係佢自己嘅 workflow 偏好
於是佢做咗兩件奇怪嘅事：叫 agent 拆解 Claude Design 嘅系統提示詞同核心機制，然後將 spec 結合同自己嘅設計探索，寫成一個 skill 裝入 Claude Code。
呢個選擇反映咗作者對未來嘅判斷：Figma 呢類工具唔會被殺死，但會被繞開，就好似 Photoshop 而家已經冇人日常打開一樣。
實戰案例：PPT 同 App 原型
作者用 huashu-design 做咗兩個案例，展示 skill 嘅能力。
第一個係 AI 心理學演講 PPT。佢只係喺 terminal 講咗一句話：「我要做 AI 心理學嘅演講 PPT，內容大綱喺呢個 file 入面。唔知用咩風格，你推薦 4 個差異化方向俾我揀。」
啟動咗設計方向顧問模式
然後 huashu-design 從 20 種預置設計哲學入面揀咗 4 個互相差異最大嘅方向，並行生成咗 4 套 17 頁嘅完整 PPT。
- 北大學術版：剋制 serif 字體、大量留白、信息層級嚴格分明，似學術海報。
- 博爾赫斯文學版：深色背景、金色點綴、引用排版帶書籍感，似小說章節。
- 投行嚴肅版：高對比黑白配色、圖表驅動、右上角有頁碼同版權聲明。
- 禪意極簡版：大塊負空間、一頁一個關鍵字、配色只用米白同墨色，似日本平面設計。
作者最後揀咗北大學術版，但另外 3 套可以留低第時用。成個過程冇打開任何設計軟件。
第二個係 AI 番茄鍾 iOS App 原型。作者又係一句話：「我要做一個 AI 番茄鍾 iOS App 嘅原型，核心係動態時長調整，俾我 4 個核心屏幕，要真係可以點擊切換。」
真係可以點擊切換
十幾分鐘後，一個帶真 iPhone bezel 嘅原型出現，4 個屏幕可以點擊切換：首頁任務選擇、專注倒計時、AI 中斷後重新評估、專注總結。所有細節跟足 iOS 18 標準，底部 Home Indicator 都有畫。
自動跑 Playwright 點擊測試
最特別係 skill 會自動跑 Playwright 點擊測試，確保原型係真係點得鬱。作者仲用同樣方法整咗習慣追蹤、跑步 App、浮世繪博物館等原型，流程一致，品質一致。
品牌資產協議：5 步硬流程
作者大方承認，huashu-design 最核心嘅理念係從 Claude Design 流出嘅提示詞偷師而嚟。
從 Claude Design 流出嘅提示詞偷師
原版提示詞強調「好的高保真設計唔係從白紙開始，而係從已有嘅設計上下文長出來」，但冇話具體點做。作者將呢個哲學落實成一套 5 步硬流程，專門處理「用戶提咗一個品牌名但冇俾資料」嘅情況：
- 1 Step 1 · 問：一句話問清楚有冇 brand guidelines，有就直接俾，冇就去搜。
- 2 Step 2 · 搜官方品牌頁：典型路徑係 <brand>.com/brand 或 brand.<brand>.com，冇就去 <brand>.com/press，通常有最權威嘅 logo 同色值。
- 3 Step 3 · 下載資產，三條兜底路徑：獨立 SVG 文件 → 官網 HTML 全文（inline SVG 收藏在裡面）→ 產品截圖取色，前一條失敗即刻行下一條。
- 4 Step 4 · grep 提取真實色值：從下載嘅資產用正則抓所有 #xxxxxx hex，按頻率排序，過濾黑白灰。注意產品截圖入面可能有用戶演示嘅其他品牌色，要區分。
- 5 Step 5 · 固化為 brand-spec.md：將抽到嘅色值寫成一份 spec 文件放喺項目根目錄，令所有 CSS 變數引用呢份文件。
每一步都有兜底，但絕唔可以靜默跳過。跳過一步，輸出質量就會由 90 分跌到 65 分。
做得到同做唔到嘅嘢
作者好誠實咁列出 skill 嘅能力邊界，唔呃你。
- 做到：PPT（17+頁完整 deck，1920×1080 可直接演示）、App 原型（真 iPhone bezel、可點擊交互、自帶 Playwright 驗證）、動畫 Demo（時間軸驅動、60fps 插幀、可導出 MP4/GIF）、信息圖同數據可視化、設計變體探索（並排對比多方向）、品牌延伸物料（海報、卡片、社交媒體配圖）。
- 做唔到：圖層級可編輯嘅 PPTX（Claude Design 可以導出到 Figma，呢個 skill 只能出 HTML）、複雜嘅 Framer Motion 級別動畫（3D、物理模擬、粒子系統）、品牌資產完全空白嘅情況（fallback 質量會跌到 60-65 分）。
80 分嘅 skill 比 100 分嘅產品好用
作者話呢個係一個 80 分嘅 skill，唔係 100 分嘅產品。但對佢呢啲唔願意打開圖形界面嘅人嚟講，80 分嘅 skill 比 100 分嘅產品好用得多。
Figma 呢代工具唔會被殺死，只會喺某日俾我哋發現：好似好耐冇開過了
最後作者再次感謝 Anthropic 將 Claude Design 嘅提示詞寫得咁清晰，令佢可以二次創作。佢話呢種基於其他產品靈感嘅開源創作，會係 AI 時代嘅新形態。
我尋晚喺X出咗個post話我會開源「Huashu Design」，而家已經有超過20萬人睇過。
令我比較驚訝嘅係，我條X推文同影片內容明明都係中文，但下面充斥住唔同國家嘅用戶嘅期待👇
呢個表達都幾有趣
甚至有幾個日本人同韓國人
佢哋之所以咁興奮，係因為佢哋睇咗我用「Huashu Design」整嘅呢條宣傳短片👇（建議開聲睇）
所以，我估你睇完之後都會有類似嘅興奮同期待，真係…咁犀利？
OK，我覺得我哋可以返轉頭傾下Claude Design。Anthropic發布嗰日，我大概玩到凌晨四點。
嗰種興奮感好耐未試過。AI可以直接喺對話入面生成完整網頁、生成撳得嘅iOS原型。差一步，我就會將Figma由Dock拉出去刪咗佢（哦，然後我發現我從來都冇裝過…）
但係，過咗幾日。我發現自己已經冇再開過Claude Design。
唔係佢唔好。Claude Design係呢個賽道入面目前最成熟嘅產品：品牌資產協議做得好仔細、組件機制好完善、同Claude Code嘅打通都算順。但我依然用唔落去。
唔係產品嘅問題，係我自己。我係一個寧願俾agent喺終端機幫我做嘢，都唔願意打開任何圖形界面嘅人。Claude Design再好，佢依然係一個工具，需要我去操作佢。
所以呢幾日我做咗兩件有啲奇怪嘅事。
第一件，我叫我的agent拆解咗Claude Design本身。包括社區流傳出嚟嗰份系統提示詞、佢嘅核心組件機制、佢對品牌資產嘅處理協議。agent將呢啲邏輯蒸餾出嚟，變咗一份結構化嘅spec。
第二件，我將呢份spec，結合我之前做過嘅所有設計類探索，寫成咗一個skill，直接裝咗入我自己嘅Claude Code度。喺用咗上億Token不停測試、迭代、優化之後。
終於！
而家我每次需要設計任何嘢，PPT、App原型、動畫、變體探索，我只喺終端機講一句說話。agent會自己補全品牌資產、自己建立design spec、自己生成結果。我唔需要打開任何界面。
今日將佢發布出嚟，叫 huashu-design。
呢篇文章講三件事：我點解要整呢個skill、佢可以做啲乜（附大量例子）、以及佢同Claude Design嘅分別喺邊。
Agent-first vs GUI-first
先講一個我最近越嚟越肯定嘅判斷。
Claude Design嘅本質，係將設計師塞咗入Claude入面。佢令你可以好似同Canva、同Figma對話咁，用自然語言話俾設計師聽你想要乜，佢幫你生成出嚟，你再喺佢嘅畫布上微調。呢個係一個更好嘅圖形工具。
huashu-design嘅本質唔同。佢唔想做圖形工具，佢想令圖形工具呢一層消失。
你話俾agent聽你要乜，agent自己去讀你嘅品牌資產、自己去建design spec、自己生成HTML結果、自己行Playwright驗證交付物冇壞。成個過程你唔使打開任何界面。最後你見到嘅係一個可以直接用嘅MP4、一張可以截圖發朋友圈嘅PPT、一個可以俾產品經理演示嘅iOS原型。
呢兩條路嘅分別，唔係「邊個功能更強」，係 由邊個嚟操作工具。
Claude Design係幫Figma呢代工具續命。huashu-design係令Figma呢代工具自然消亡。
我唔係話Figma會俾人殺死。Photoshop都冇俾人殺死，但係今日大部分內容創作者已經唔開PS，佢哋用Canva、用Midjourney、用Remove.bg。PS冇死，但PS嘅工作流被繞開咗。Figma都會經歷同樣嘅事。
我唔係設計師，我係一個令agent幫我做嘢嘅人。真正嘅設計師可能會更鍾意Claude Design，嗰度有熟悉嘅畫布、圖層、組件變體。但對獨立開發者、內容創作者、喺終端機做產品嘅人嚟講，一個裝喺agent裏面嘅skill，比一個裝喺瀏覽器裏面嘅產品更順手。
案例一 · 一次過生成4個設計風格嘅演講PPT
我幾日前要去準備一場關於AI心理學嘅演講。
跟過去嘅習慣，呢啲事我會先開Keynote，然後喺裏面掙扎大半日：到底用咩風格？學術啲定係活潑啲？黑白簡約定係大膽配色？
今次我喺終端機只係講咗一句說話。
「我要做AI心理學嘅演講PPT，內容大綱喺呢個文件度。唔知用咩風格，你推薦4個差異化方向俾我揀。」
huashu-design啓動咗佢嘅 設計方向顧問模式。由20種預設嘅設計哲學裏面（Pentagram嘅信息建築、Field.io嘅運動詩學、Kenya Hara嘅東方極簡、Sagmeister嘅實驗先鋒……），揀出4個互相差異最大嘅方向，然後並行啓動4個agent，各自做咗一套完整嘅演講PPT。
40分鐘後，4套17頁嘅PPT擺咗喺我面前。
北大學術版：剋制嘅serif字體、大量留白、信息層級嚴格分明，好似一篇學術海報。
博爾赫斯文學版：深色背景、金色點綴、引用排版帶有書籍感，每一頁都好似從一本小說裏面撕落嚟嘅一章。
投行嚴肅版：高對比黑白配色、圖表驅動、右上角有頁碼同版權聲明，一眼就知係要俾董事會睇嘅。
禪意極簡版：大塊負空間、一頁一個關鍵字、配色只用米白同一種墨色，似日本平面設計師做嘅海報。
我冇打開任何設計軟件。我唔需要去試嗰20種字體、唔需要去揀配色方案、唔需要自己整版式。agent幫我做曬所有預設工作，我只係需要做一件事： 揀邊一套。
最後我揀咗北大學術版。但另外3套都唔會浪費。博爾赫斯版我可能會留低做下一次讀書分享，投行版可以改成商業匯報PPT。一次生成，多次複用。
呢個體驗喺Claude Design入面都可以做到，只係你要同佢講4次、生成4次、消耗4次token。喺skill度行嘅係API消耗，冇訂閲quota嘅天花板，4個agent並行喺本地嘅Claude Code入面行，可以隨便試。
案例二 · 可點擊嘅iOS App原型
接下來係我幾日試嘅幾個小原型。先講清楚：我自己唔寫code，呢啲原型唔係要上線嘅產品，係用嚟俾skill練習嘅驗證demo，所有交互細節都係agent自己行出嚟嘅。
一個係AI番茄鍾。當然啦，我諗任何獨立開發者都整過番茄鍾。我哋就試下啦。
喺終端機講：「我要做一個AI番茄鍾iOS App嘅原型，核心係動態時長調整，俾我4個核心屏幕，要真係可以㩒嚟切換。」
十幾分鐘後，一個帶真iPhone bezel（唔係嗰啲Web mockup感覺）嘅原型打開咗。4個屏幕：首頁任務選擇、專注中嘅倒數計時、被AI中斷後嘅重新評估、專注總結。每個屏幕嘅tab同掣都可以㩒，狀態自動喺屏幕之間流轉。
我想要嘅所有細節都喺入面：圖標用SF Symbols、字體用SF Pro、按鈕嘅圓角係iOS 18嘅標準值、連底部嘅Home Indicator都有畫。
呢個仲唔係最值得講嘅。最值得講嘅係，佢喺交付前自己行咗一次Playwright點擊測試，確保我㩒每一個掣都唔會白屏或者崩潰。呢個係我喺skill度加嘅一條硬規則：App原型交付前一定要行自動點擊測試，否則一半嘅「可點擊原型」最後都係㩒唔到嘅。
我仲用同樣嘅方法做咗Habit Tracker、Running追蹤App、一個浮世繪主題嘅博物館App。流程一模一樣，交付質量都一樣。
方法論 · 品牌資產協議係我從Anthropic偷師嘅
到呢度我想大大方方承認一件事：huashu-design入面最核心嘅一個理念，係從Claude Design流出嚟嘅提示詞度偷師嘅。
嗰份提示詞入面反覆強調一個核心原則： 好嘅高保真設計唔係由白紙開始，而係由已有嘅設計上下文度生出來。優先讀用戶嘅codebase、讀design system、讀UI kit，顏色優先從品牌系統度拎而唔係憑空發明。
原版prompt只係俾咗呢個哲學，冇俾具體點做。但佢俾嘅已經夠曬——憑空畫hi-fi一定係generic，呢個係 區分65分作品同90分作品嘅分水嶺。
我喺呢個哲學之上，將佢變咗skill入面一套5步硬流程，專係處理「用戶提咗一個品牌名，但冇俾資料」嘅場景：
Step 1 · 問。一句話問清楚：「呢個品牌有冇brand guidelines？有嘅話直接俾我，冇嘅話我去揾。」
Step 2 · 搜官方品牌頁。典型路徑係 <brand>.com/brand 或 brand.<brand>.com，冇就 <brand>.com/press。呢啲頁面通常收埋咗最權威嘅logo同色值。
Step 3 · 下載資產，三條兜底路徑。真實世界入面SVG logo成日拎唔到，2026年嘅官網多數係Next.js SSR inline SVG，或者Cloudflare反爬返403。按成功率遞減：獨立SVG文件 → 官網HTML全文（inline SVG會匿喺入面）→ 產品截圖取色。前一條失敗即刻行下一條，絕對唔停。
Step 4 · grep提取真實色值。絕對唔可以由記憶度估品牌色。由下載嘅資產度用正則捉曬所有 #xxxxxx 嘅6位hex，按頻率排序，過濾黑白灰。呢度有個反直覺嘅點：產品截圖入面成日有用戶演示嘅其他品牌色（例如某個工具嘅截圖入面演示緊喜茶紅），嗰個唔係呢個工具本身嘅色。同時出現兩種強色嗰陣一定要區分。
Step 5 · 固化為 brand-spec.md 。頭四步抽完嘅色值，如果只係留喺記憶體入面，下一頁就會唔記得。一定要寫一份spec文件去項目根目錄，令所有CSS變數引用呢份文件。
呢5步每一步都有兜底，但 絕對唔可以靜默跳過。agent係咪行得通呢個協議，直接決定輸出質量係65分定90分。
我做咗一次v1同v2嘅A/B測試，同一批任務6個agent各跑一次。結果係：v2嘅穩定性方差比v1低5倍。唔係均值高咗好多，係更加穩定。穩定性嘅穩定性，呢個先係skill真正嘅護城河。
我能做啲乜，做唔到啲乜
我唔想扮曬嘢，呢個skill做唔到Claude Design嘅所有能力，我列出差距。
佢做到：PPT（17+頁完整deck，1920×1080可以直接演示）、App原型（真iPhone bezel、可點擊交互、自帶Playwright驗證）、動畫Demo（時間軸驅動、60fps插幀、可導出MP4/GIF、有BGM同自動fade）、信息圖同數據可視化、設計變體探索（並排對比多方向、或者用Tweaks實時調參）、品牌延伸物料（海報、卡片、社交媒體配圖）。
佢做唔到嘅：
圖層級可編輯嘅PPTX。Claude Design可以導出去Figma，我做唔到。我嘅產物係HTML，你可以截圖、可以錄屏、可以導出圖片，但冇得拖入Keynote改一個文字位置。呢個係我嘅skill嘅真實缺點。
複雜嘅Framer Motion級別動畫。我用嘅係React + Babel內聯腳本，做到嘅係「時間軸驅動嘅slide動畫」「60秒以內嘅敍事動畫」。再複雜啲（3D、物理模擬、粒子系統），超出skill嘅邊界。
品牌資產完全空白嘅情況。如果你嘅需求係「幫我設計一個完全原創嘅品牌」，而我又拎唔到任何參考，fallback嘅質量會跌到60-65分。唔係skill嘅問題，係憑空畫hi-fi本來就係last resort。
我做嘅係一個80分嘅skill，唔係一個100分嘅產品。但對唔願意打開圖形界面嘅人嚟講， 80分嘅skill比100分嘅產品好用。
結尾
Figma呢代工具唔會俾人殺死，只會喺某日我哋發現： 好似已經好耐冇開過咁。
就好似Dock入面嗰啲再冇㩒過嘅圖標。
多謝Anthropic將Claude Design嘅提示詞寫得咁清晰，令社區流出嚟嗰份spec夠曬完整，令我有機會將佢嘅精髓吸收咗入自己嘅工作流程。
呢種基於其他產品靈感嘅二次創作，喺agent時代會越嚟越多，呢個都係開源文化喺AI時代嘅新形態。
GitHub：https://github.com/alchaincyf/huashu-design
裝完之後喺Claude Code直接講「做一份PPT」「做個App原型」「做個動畫」就得。
如果你用咗，歡迎喺評論區話俾我聽你覺得邊度好，或者邊部分體驗有待改進嘅。
我昨晚在X上發了條我要開源「Huashu Design」的預告，現在已經20多萬閲讀了。
讓我比較驚訝的是，我的這條X推文和視頻內容明明都是中文的，但這條X底下充斥着各種不同國度用戶的期待👇
這個表達也是很有趣
甚至還有好幾個日本人和韓國人
他們之所以感到這麼興奮，是因為他們看到了我用「Huashu Design」製作的宣傳它自己的這條短片👇（建議打開聲音享用）
所以，我猜你看完之後也會有類似的興奮和期待，真的...這麼厲害嗎？
OK，我覺得我們可以先回頭聊聊Claude Design。Anthropic發佈當天，我大概我玩到了凌晨四點。
那種興奮感很久沒有過了。讓AI直接在對話裏生成完整網頁、生成可點的iOS原型。就差一步，我就要把Figma從Dock裏拖出來刪掉了（哦，然後我發現我從來就沒裝過...
但，幾天過去了。我發現自己再也沒點開過Claude Design。
不是它不好。Claude Design是這個賽道里目前最成熟的產品：品牌資產協議做得很細、組件機制很完善、和Claude Code的打通也算順。但我依然用不下去。
不是產品的問題，是我自己。我是一個寧願讓agent在終端裏幫我幹活，也不願意打開任何圖形界面的人。Claude Design再好，它依然是一個工具，需要我去操作它。
所以這幾天我做了兩件有點奇怪的事情。
第一件，我讓我的agent拆解了Claude Design本身。包括社區流傳出來的那份系統提示詞，包括它的核心組件機制，包括它對品牌資產的處理協議。agent把這些邏輯蒸餾出來，做成了一份結構化的spec。
第二件，我把這份spec，結合我之前做過的所有設計類探索，寫成了一個skill，直接裝進了我自己的Claude Code裏。在耗費了上億Token不停地測試、迭代、優化之後。
終於！
現在我每次需要設計任何東西，PPT、App原型、動畫、變體探索，我只在終端裏說一句話。agent會自己補全品牌資產、自己建立design spec、自己生成結果。我不需要打開任何界面。
今天把它發佈出來，叫 huashu-design。
這篇文章講三件事：我為什麼做這個skill、它能做什麼（帶一堆案例）、以及它和Claude Design的差異在哪裏。
Agent-first vs GUI-first
先說一個我最近越來越堅定的判斷。
Claude Design的本質，是把設計師塞進了Claude裏面。它讓你像和Canva、和Figma對話一樣，用自然語言告訴設計師你想要什麼，它給你生成出來，你再在它的畫布上微調。這是一個更好的圖形工具。
huashu-design的本質不一樣。它不想做圖形工具，它想讓圖形工具這一層消失。
你告訴agent你要什麼，agent自己去讀你的品牌資產、自己去建design spec、自己生成HTML結果、自己跑Playwright驗證交付物沒壞。整個過程你不打開任何界面。最後你看到的是一個能直接用的MP4、一張可以截圖發朋友圈的PPT、一個能給產品經理演示的iOS原型。
這兩條路的差別，不是「哪個功能更強」，是 誰來操作工具。
Claude Design是給Figma這代工具續命。huashu-design是讓Figma這代工具自然消亡。
我不是在說Figma會被殺死。Photoshop也沒有被殺死，但今天大部分內容創作者已經不打開PS了，他們用Canva、用Midjourney、用Remove.bg。PS沒死，但PS的工作流被繞開了。Figma也會經歷同樣的事情。
我不是設計師，我是一個讓agent幫我做東西的人。真正的設計師可能會更喜歡Claude Design，那裏有熟悉的畫布、圖層、組件變體。但對獨立開發者、內容創作者、在終端裏做產品的人來說，一個裝在agent裏的skill，比一個裝在瀏覽器裏的產品更順手。
案例一 · 一次生成4個設計風格的演講PPT
我前幾天要去準備一場關於AI心理學的演講。
按過去的習慣，這種事我會先打開Keynote，然後在裏面掙扎大半天：到底用什麼風格？學術一點還是活潑一點？黑白簡約還是大膽配色？
這次我在終端裏只說了一句話。
「我要做AI心理學的演講PPT，內容大綱在這個文件裏。不知道用什麼風格，你推薦4個差異化方向給我選。」
huashu-design啓動了它的 設計方向顧問模式。從20種預置的設計哲學裏（Pentagram的信息建築、Field.io的運動詩學、Kenya Hara的東方極簡、Sagmeister的實驗先鋒……），挑出4個互相差異最大的方向，然後並行啓動4個agent，各自做了一套完整的演講PPT。
40分鐘後，4套17頁的PPT擺在我面前。
北大學術版：剋制的serif字體、大量留白、信息層級嚴格分明，像一篇學術海報。
博爾赫斯文學版：深色背景、金色點綴、引用排版帶有書籍感，每一頁都像是從一本小說裏撕下來的一章。
投行嚴肅版：高對比黑白配色、圖表驅動、右上角帶頁碼和版權聲明，一眼就知道是要給董事會看的。
禪意極簡版：大塊負空間、一頁一個關鍵字、配色只用米白和一種墨色，像日本平面設計師做的海報。
我沒打開任何設計軟件。我不需要去試那20種字體、不需要去挑配色方案、不需要自己搭版式。agent幫我做了所有的預設工作，我只需要做一件事： 選哪一套。
最後我選了北大學術版。但另外3套也不會浪費。博爾赫斯版我可能留着做下一次讀書分享，投行版可以改成商單的彙報PPT。一次生成，多次複用。
這個體驗在Claude Design裏也能做，只是你需要跟它說4次、生成4次、消耗4次token。在skill裏走的是API消耗，沒有訂閲quota的天花板，4個agent並行在本地的Claude Code裏跑，可以隨便試。
案例二 · 可點擊的iOS App原型
接下來是我這幾天測的幾個小原型。先說清楚：我自己不寫代碼，這些原型不是要上線的產品，是讓skill拉練的驗證demo，所有交互細節都是agent自己跑出來的。
一個是AI番茄鍾。當然了，我想任何獨立開發者都搞過番茄鍾。我們就試試吧。
在終端裏說：「我要做一個AI番茄鍾iOS App的原型，核心是動態時長調整，給我4個核心屏幕，要真的可以點擊切換。」
十幾分鍾後，一個帶真iPhone bezel（不是那種Web mockup感）的原型打開了。4個屏幕：首頁任務選擇、專注中的倒計時、被AI中斷後的重新評估、專注總結。每個屏幕的tab和按鈕都可以點，狀態自動在屏幕之間流轉。
我想要的所有細節都在裏面：圖標用的是SF Symbols、字體是SF Pro、按鈕的圓角是iOS 18的標準值、連底部的Home Indicator都畫了。
這還不是最值得說的。最值得說的是，它在交付前自己跑了一遍Playwright點擊測試，確保我點每一個按鈕都不會導致白屏或崩潰。這是我在skill里加的一條硬規則：App原型交付前必須跑自動點擊測試，否則一半的「可點擊原型」最後都是不能點的。
我還用同樣的方式做了Habit Tracker、Running追蹤App、一個浮世繪主題的博物館App。流程一模一樣，交付質量也一樣。
方法論 · 品牌資產協議是我從Anthropic偷來的
到這裏我想大大方方承認一件事：huashu-design裏最核心的一個理念，是從Claude Design流傳出來的提示詞裏偷師的。
那份提示詞裏反覆強調一個核心原則： 好的高保真設計不是從白紙開始，而是從已有的設計上下文長出來。優先讀用戶的codebase、讀design system、讀UI kit，顏色優先從品牌系統裏拿而不是憑空發明。
原版prompt只給了這個哲學，沒有給具體怎麼做。但它給的已經夠了——憑空畫hi-fi一定是generic的，這是 區分65分作品和90分作品的分水嶺。
我在這個哲學之上，把它落成了skill裏的一套5步硬流程，專門處理「用戶提了一個品牌名，但沒給資料」的場景：
Step 1 · 問。一句話問清楚：「這個品牌有brand guidelines嗎？有的話直接給我，沒有的話我去搜。」
Step 2 · 搜官方品牌頁。典型路徑是 <brand>.com/brand 或 brand.<brand>.com，沒有就 <brand>.com/press。這些頁面一般藏着最權威的logo和色值。
Step 3 · 下載資產，三條兜底路徑。真實世界裏SVG logo經常拿不到，2026年的官網大多是Next.js SSR inline SVG，或者Cloudflare反爬返回403。按成功率遞減：獨立SVG文件 → 官網HTML全文（inline SVG會藏在裏面）→ 產品截圖取色。前一條失敗立刻走下一條，絕不停。
Step 4 · grep提取真實色值。絕對不能從記憶裏猜品牌色。從下載的資產裏用正則抓所有 #xxxxxx 的6位hex，按頻率排序，過濾黑白灰。這裏有個反直覺的點：產品截圖裏常有用戶演示的其他品牌色（比如某個工具的截圖裏在演示喜茶紅），那不是這個工具本身的色。同時出現兩種強色時必須區分。
Step 5 · 固化為 brand-spec.md 。前四步抽完的色值，如果只留在內存裏，下一頁就忘。必須寫一份spec文件到項目根目錄，讓所有CSS變量引用這份文件。
這5步每一步都有兜底，但 絕不可以靜默跳過。agent是否走通這個協議，直接決定輸出質量是65分還是90分。
我做了一次v1和v2的A/B測試，同一批任務6個agent各跑一遍。結果是：v2的穩定性方差比v1低5倍。不是均值變高了很多，是更加穩定。穩定性的穩定性，這才是skill真正的護城河。
我能做什麼，做不到什麼
我不想裝，這個skill做不到Claude Design的所有能力，把差距列出來。
它能做：PPT（17+頁完整deck，1920×1080可直接演示）、App原型（真iPhone bezel、可點擊交互、自帶Playwright驗證）、動畫Demo（時間軸驅動、60fps插幀、可導出MP4/GIF、帶BGM和自動fade）、信息圖和數據可視化、設計變體探索（並排對比多方向、或者用Tweaks實時調參）、品牌延伸物料（海報、卡片、社交媒體配圖）。
它做不到的：
圖層級可編輯的PPTX。Claude Design能導出到Figma，我做不到。我的產物是HTML，你可以截圖、可以錄屏、可以導出圖片，但沒法拖進Keynote改一個文字位置。這是我的skill的真實缺點。
複雜的Framer Motion級別動畫。我用的是React + Babel內聯腳本，能做的是「時間軸驅動的slide動畫」「60秒以內的敍事動畫」。再複雜的（3D、物理模擬、粒子系統），超出skill邊界。
品牌資產完全空白的情況。如果你的需求是「幫我設計一個完全原創的品牌」，而我又拿不到任何參考，fallback的質量會掉到60-65分。不是skill的問題，是憑空畫hi-fi本來就是last resort。
我做的是一個80分的skill，不是一個100分的產品。但對不願意打開圖形界面的人， 80分的skill比100分的產品好用。
結尾
Figma這代工具不會被殺死，只會在某一天被我們發現： 好像已經很久沒打開過了。
就像Dock裏那些再也沒點開過的圖標。
感謝Anthropic把Claude Design的提示詞寫得那麼清晰，讓社區流傳出來的那份spec足夠完整，讓我有機會把它的精髓吸收進自己的工作流。
這種基於其他產品靈感的二次創作，在agent時代會越來越多，這也是開源文化在AI時代的新形態。
GitHub：https://github.com/alchaincyf/huashu-design
裝完在Claude Code裏直接說「做一份PPT」「做個App原型」「做個動畫」就行。
如果你用了，歡迎在評論區告訴我你覺得哪裏好，或者哪部分體驗有待提升的。