我逆向了 Claude Design！免費開源！設計邏輯全公開
我逆向了 Claude Design！免費開源！設計邏輯全公開
我昨晚在 X 上發了一則我要開源「Huashu Design」的預告，現在已經有 20 多萬次閱讀了。
讓我比較驚訝的是，我的這則 X 推文和影片內容明明都是中文的，但這則 X 底下卻充斥著各種不同國家使用者的期待👇
這個表達方式也很有趣
甚至還有好幾個日本人和韓國人，看來天下人都苦 Anthropic 久矣。
他們之所以感到這麼興奮，是因為他們看到了我用「Huashu Design」製作的宣傳短片（建議打開聲音享用）👇
所以，我猜你看完之後也會有類似的興奮和期待，真的……有這麼厲害嗎？
OK，我覺得我們可以先回頭聊聊 Claude Design。Anthropic 發布當天，我大概玩到了凌晨四點。
那種興奮感很久沒有過了。讓 AI 直接在對話裡生成完整網頁、生成可點擊的 iOS 原型。就差一步，我就要把 Figma 從 Dock 裡拖出來刪掉了（喔，然後我發現我從來就沒裝過……
但幾天過去了，我發現自己再也沒點開過 Claude Design。
不是它不好。Claude Design 是這個賽道裡目前最成熟的產品：品牌 asset 協議做得很細、組件機制很完善、和 Claude Code 的打通也算順。但我依然用不下去。
不是產品的問題，是我自己。我是一個寧願讓 Agent 在終端機裡幫我幹活，也不願意打開任何圖形介面的人。Claude Design 再好，它依然是一個工具，需要我去操作它。
所以這幾天我做了兩件有點奇怪的事情。
第一件，我讓我的 Agent 拆解了 Claude Design 本身。包括社區流傳出來的那份系統提示詞（System Prompt），包括它的核心組件機制，包括它對品牌 asset 的處理協議。Agent 把這些邏輯蒸餾出來，做成了一份結構化的 spec。
第二件，我把這份 spec，結合我之前做過的所有設計類探索，寫成了一個 skill，直接裝進了我自己的 Claude Code 裡。在耗費了上億 token 不停地測試、迭代、優化之後。
終於！
現在我每次需要設計任何東西，PPT、App 原型、動畫、變體探索，我只在終端機裡說一句話。Agent 會自己補全品牌 asset、自己建立 design spec、自己生成結果。我不需要打開任何介面。
今天把它發布出來，叫 huashu-design。
這篇文章講三件事：我為什麼做這個 skill、它能做什麼（帶一堆案例）、以及它和 Claude Design 的差異在哪裡。
Agent-first vs GUI-first
先說一個我最近越來越堅定的判斷。
Claude Design 的本質，是把設計師塞進了 Claude 裡面。它讓你像和 Canva、和 Figma 對話一樣，用自然語言告訴設計師你想要什麼，它給你生成出來，你再在它的畫布上微調。這是一個更好的圖形工具。
huashu-design 的本質不一樣。它不想做圖形工具，它想讓圖形工具這一層消失。
你告訴 Agent 你要什麼，Agent 自己去讀你的品牌 asset、自己去建 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。流程一模一樣，交付品質也一樣。
方法論 · 品牌 asset 協議是我從 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 · 下載 asset，三條兜底路徑。真實世界裡 SVG logo 經常拿不到，2026 年的官網大多是 Next.js SSR inline SVG，或者 Cloudflare 反爬返回 403。按成功率遞減：獨立 SVG 文件 → 官網 HTML 全文（inline SVG 會藏在裡面）→ 產品截圖取色。前一條失敗立刻走下一條，絕不停。
- Step 4 · grep 提取真實色值。絕對不能從記憶裡猜品牌色。從下載的 asset 裡用正則抓所有
#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 邊界。
- 品牌 asset 完全空白的情況。如果你的需求是「幫我設計一個完全原創的品牌」，而我又拿不到任何參考，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
npx skills add alchaincyf/huashu-design
裝完在 Claude Code 裡直接說「做一份 PPT」、「做個 App 原型」、「做個動畫」就行。
如果你用了，歡迎在評論區告訴我哪裡不夠用。