Huashu Design 教學：Claude Design 被開源？怎麼裝怎麼用
2026 年 4 月 17 日，Anthropic 推出 Claude Design，讓使用者直接在瀏覽器裡用 AI 做設計。
四天後的 4 月 20 日，中國獨立開發者花叔在 X 上發了一支 40 秒的影片，標題就一句話：「我逆向了 Claude Design」，隔天他把程式碼放上 GitHub，48 小時內拿到 662 顆星。
截至 2026 年 4 月底，這個叫 Huashu Design 的專案已經衝破一萬顆星，它不是一個 App，不是一個網站，是一個裝在 Claude Code 裡面的 Skill，用一行指令安裝，用打字就能做出簡報、App 原型、動畫影片，而且個人使用免費。
Huashu Design 是一個開源的 AI 設計 Skill，安裝在 Claude Code 裡，讓開發者用自然語言指令產出交付等級的設計成品。這篇文章幫你搞懂它到底是什麼、跟官方 Claude Design 差在哪、怎麼裝、怎麼用，以及它適不適合你。
Huashu Design 是什麼？跟 Claude Design 差在哪？
Huashu Design 是一個安裝在 Claude Code 裡的開源設計 Skill，讓你用打字取代開設計軟體，做出可交付的原型、簡報和動畫。它跟 Claude Design 最根本的差異在定位：一個在終端機裡跑（Agent-first），一個在瀏覽器裡跑（GUI-first）。
什麼是 Claude Code Skill？
Skill 是 Claude Code 的擴充功能，用一份 Markdown 檔案（SKILL.md）定義一組指令、規則和設計資源，安裝後 Claude Code 會自動載入這些知識，像是多了一個專業設計師的腦袋。你不需要學任何新工具，只要照平常用 Claude Code 的方式打字下指令就好。
講白了，Skill 就是一份設計師的操作手冊，只是讀手冊的不是人，是 AI。
Agent-first 跟 GUI-first 的差異是什麼？
Claude Design 是 GUI-first：你在瀏覽器裡看到畫布，可以用滑鼠拖拉、調整參數、即時預覽。Huashu Design 是 Agent-first：你在終端機裡打字描述你要什麼，AI 自己去做，做完給你一個可以打開的 HTML 檔案。
Claude Design 是讓設計師用 AI 加速，Huashu Design 是讓不會設計的開發者也能產出像樣的設計。
兩條路，不同受眾。
花叔是誰？為什麼他能四天就做出來？
花叔（X 帳號 @AlchainHust）是中國的獨立開發者，在 Bilibili、YouTube、小紅書合計超過 30 萬粉絲。他之前做過登上 App Store 付費排行榜第一名的小貓補光燈 App，也寫過 GitHub 上超過 12,000 星的女媧 Skill（一個可以自動生成其他 Skill 的 meta-skill）。
從小貓補光燈到 GitHub 萬星開發者
花叔不是大公司的工程師，是一個人幹所有事的獨立開發者。他之前最出名的作品是小貓補光燈，一個拍照補光的 App，登上中國 App Store 付費榜第一名。後來他開始專注在 AI 開發工具領域，寫了 Claude Code 橘皮書（75 頁，目前最完整的中文 Claude Code 技術參考），還做了一個叫女媧的 meta-skill，可以自動生成其他 Skill，在 GitHub 上拿到超過 12,000 星。
他每個月自掏腰包花超過 200 美元的 Claude API 費用，處理了數十億 tokens，就為了打磨這些 Skill 的品質。
他真的逆向了 Claude Design 嗎？
花叔自己承認，他只借用了 Claude Design 裡品牌素材協定（Brand Asset Protocol）的概念，其他所有程式碼都是從頭寫的。裡面沒有任何 Anthropic 的程式碼，整個技術方向也完全不同，一個走 GUI，一個走終端機。
所以嚴格來說，逆向是行銷話術。他用這兩個字當標題，在 X 上拿到了病毒式傳播，但技術上更準確的說法是：他把 Claude Design 的設計哲學抽出來，重新包裝成一個終端機能跑的 Skill。
Huashu Design 能做什麼？七大功能完整拆解
Huashu Design 能做七件事：可點擊的 App 原型、HTML 簡報（可匯出 PPTX）、MP4/GIF 動畫、設計變體比較、資訊圖表、設計方向建議，以及五維度專家評審。以下是每個功能的細節和所需時間。
| 功能 | 產出格式 | 所需時間 |
|---|---|---|
| 可點擊的 App 原型 | 單檔 HTML，含裝置外框和導航 | 10-15 分鐘 |
| HTML 簡報 | HTML + 可編輯 PPTX | 15-25 分鐘 |
| 動畫影片 | MP4（25/60fps）+ GIF + 背景音樂 | 8-12 分鐘 |
| 設計變體比較 | 3+ 方案並排比較 | 10 分鐘 |
| 資訊圖表 | PDF / PNG / SVG（印刷品質） | 10 分鐘 |
| 設計方向顧問 | 5 流派 × 20 哲學，產出 3 個 demo | 5 分鐘 |
| 五維度專家評審 | 雷達圖 + 改善清單 | 3 分鐘 |
App 原型和簡報怎麼做？
App 原型是 Huashu Design 最實用的功能之一。你只要打一句 “做一個番茄鐘 App 原型，四個畫面，可以點擊”，它就會生成一個單檔 HTML，裡面包含 iPhone 15 Pro 的外框、畫面之間的點擊導航、還有轉場動畫，大概 10 到 15 分鐘完成。
簡報也是類似邏輯。你描述主題和風格，它生成 HTML 格式的投影片，支援匯出成可編輯的 PPTX，讓你在 PowerPoint 或 Keynote 裡繼續改。做一份 17 頁以上的簡報大約 15 到 25 分鐘。
動畫影片和資訊圖表呢？
動畫是 Huashu Design 跟 Claude Design 拉開差距的功能。Claude Design 不能匯出影片，Huashu Design 可以。它用自己的 Stage + Sprite 動畫引擎，先用 HTML 做 25fps 的動畫，再用 ffmpeg 插值到 60fps，還能加背景音樂（內建 6 首場景配樂），最後匯出 MP4 和 GIF。一段 15 秒的動畫在 M2 MacBook Pro 上大約 40 秒就能算完。
資訊圖表方面，它能產出印刷品質的排版，匯出 PDF、PNG、SVG 格式，適合拿來做社群貼文或報告用的視覺化圖表。
設計變體比較怎麼用？
描述一個設計需求，Huashu Design 同時產出三個以上的不同風格版本並排比較，讓你直觀看到哪個方向更適合你的產品。你可以用文字即時調整參數（顏色、字體、排版密度），所有版本同步更新，整個過程大約 10 分鐘。適合在確定設計方向前快速做視覺探索，比開 Figma 試錯快很多。
怎麼安裝 Huashu Design？
一行指令：npx skills add alchaincyf/huashu-design。前提是你已經有 Claude Code 和 Node.js 環境，如果要用動畫匯出功能還需要安裝 ffmpeg。
安裝前需要什麼環境？
三個前提：
第一，Claude Code，Anthropic 的 CLI 工具，你需要有 API key 或訂閱方案才能用。第二，Node.js，因為安裝指令 npx 需要它。第三，ffmpeg，只有動畫匯出功能需要，macOS 用 brew install ffmpeg 安裝，如果你只做原型和簡報，可以先跳過。
裝好之後第一次怎麼用？
安裝完成後，在你的專案目錄裡打開 Claude Code，它會自動載入 Huashu Design 的 Skill。接下來你就像平常跟 Claude Code 對話一樣，只是它多了設計能力。
幾個你可以直接複製貼上試試的指令：
“做一個 iOS 番茄鐘 App 原型，四個畫面，可以點擊”、”做一份關於 AI 心理學的簡報，給我三個風格方向選”、”把這段邏輯做成 60 秒動畫，匯出 MP4 和 GIF”、”給這個設計做五維度專家評審”。
Huashu Design 的 20 種設計哲學是什麼？
Huashu Design 內建 20 種設計哲學，分成 5 個流派。當你的設計需求不明確時，它的設計方向顧問功能會從不同流派各挑一種，做出三個並排的視覺 demo 讓你選。
五大流派怎麼分？
第一是資訊建築派，代表是 Pentagram 和 Stamen Design，擅長用數據驅動的視覺系統把複雜資訊變簡單。第二是動態詩學派，代表是 Locomotive 和 Active Theory，專攻有節奏感的動態設計。第三是極簡秩序派，代表是 Experimental Jetset 和 Müller-Brockmann，走瑞士風格的網格系統。第四是實驗前衛派，代表是 Zach Lieberman 和 Ash Thorp，偏向藝術性的視覺實驗。第五是東方哲學派，代表是 Takram 和原研哉，用留白和克制表達設計意圖。
你不需要認識這些設計師。系統會根據你的需求自動配對，你只需要從三個 demo 裡選一個你喜歡的方向。
五維度專家評審怎麼用？
做完設計後，你可以叫 Huashu Design 用五個維度幫你打分（每項 0 到 10 分）：哲學一致性、視覺層次、執行細節、功能性、創新性。它會產出一張雷達圖加上一份保留、修正、快速改善的具體清單，整個過程大約 3 分鐘。
這個功能的價值不在分數本身，而在它幫你把模糊的直覺變成具體的改善方向，讓你知道下一步該改什麼。
Huashu Design 的三大進階工作模式
除了七種交付功能，Huashu Design 還內建三種工作模式，用來處理品牌素材不齊、需求不清楚、或需要分階段迭代的情境。這三個模式是讓產出品質穩定的關鍵，不只是功能，而是 AI 設計的工作方法論。
品牌資產協議（Brand Asset Protocol）
每次設計之前，Huashu Design 強制執行五步品牌素材提取：詢問品牌資料 → 搜尋官方網站 → 下載素材 → 用 grep 找色票十六碼 → 用 CSS 變數統一編碼。這確保你的 Logo、色彩、字體都是從官方來源提取，而不是 AI 自己猜測或用預設樣式。有品牌素材的情況下，設計品質從 60 分直接拉到 80 分以上。
初級設計師工作流（Junior Designer Workflow）
需求不明確時，Huashu Design 不會一次做完，而是先展示假設和佔位設計，請你確認方向後再細化。流程是假設先行 → 展示雛形 → 批量收集反饋 → 一次性完成。適合不知道自己想要什麼的狀態，也適合第一次做某類型設計的情境。這個模式避免了「AI 猜一個方向做完，你不喜歡又要重做」的浪費。
設計方向顧問（Fallback Advisor Mode）
需求模糊或沒有明確風格偏好時，Huashu Design 會啟動備援顧問模式：從 20 種設計哲學中各挑一種，同時做出三個視覺方向完全不同的 demo，讓你看圖說話而不是用文字描述你想要什麼。這個模式搭配五大設計流派（資訊建築派、動態詩學派、極簡秩序派、實驗前衛派、東方哲學派）的 20 種設計理念，整個過程大約 5 分鐘。
Huashu Design 跟 Claude Design 完整比較：該選哪個？
Claude Design 是更好的設計工具，Huashu Design 是更省的設計方案。如果你是設計師、需要團隊協作、預算充足，用 Claude Design。如果你是獨立開發者、想省 token、需要匯出影片，用 Huashu Design。
| 比較項目 | Claude Design | Huashu Design |
|---|---|---|
| 介面 | 瀏覽器 GUI，可拖拉調整 | 終端機，打字指令 |
| 費用模式 | 獨立設計配額（跟對話額度分開） | Claude Code 一般 token 額度 |
| 影片匯出 | 不支援 | MP4 / GIF / 60fps |
| PPTX 匯出 | 支援 | 支援 |
| 團隊協作 | 支援 | 不支援 |
| 即時視覺調整 | 滑鼠拖拉 + 參數滑桿 | 用文字描述修改 |
| 設計系統持久化 | 原生支援 | 需手動提取 |
| 支援的 Agent | 僅 Claude.ai | Claude Code / Cursor / Codex 等多種 |
| 自動化驗證 | 視覺預覽 | Playwright 自動測試 |
| 授權 | 訂閱制（Pro/Max/Team） | 個人免費，商用需授權 |
品質差多少？
根據實測比較，Huashu Design 的產出品質大約是 Claude Design 的 80% 到 90%。Claude Design 在字體配色的精準度、即時調整的流暢度上明顯更好。但 Huashu Design 在沒有品牌素材的情況下也能做到 60 到 65 分的基本水準，有品牌素材（Logo、色票、產品圖）的話可以拉到 80 分以上。
花叔自己的定位也很清楚：「這是 80 分的 Skill，不是 100 分的產品。」
成本差多少？
這是兩者最關鍵的差異。Claude Design 用的是獨立的設計配額，跟你的對話配額分開計算。根據實測，一個完整的設計專案（Landing page + 設計系統 + 簡報）可能吃掉 Claude Design 週配額的 51%。
同樣的專案用 Huashu Design 做，走的是 Claude Code 的一般 token 額度，大約消耗 290K tokens，相當於 20X 方案週額度的 2%。
同一個設計專案，Claude Design 吃掉你一半的週配額，Huashu Design 只用 2%，成本差距大約 15 到 25 倍。對獨立開發者來說，這個差距直接決定了你一週能做幾個設計方案。
Huashu Design 有什麼限制？
三個主要限制：不能匯出 Figma 可編輯的格式、不支援 3D 或物理動畫、商業使用需要作者授權。搞清楚這些限制，才能判斷它適不適合你的場景。
技術上做不到什麼？
第一，匯出的 PPTX 可以在 PowerPoint 裡編輯文字和排版，但不能像 Figma 那樣拖拉圖層，如果你的下游流程依賴 Figma，這會是一個斷點。第二，動畫只支援 2D，3D 場景、粒子特效、物理模擬都做不到。第三，沒有品牌素材的情況下，設計品質會明顯下降，所以使用前最好準備好你的 Logo、色票和產品截圖。第四，沒有 GUI，所有調整都得用文字描述，沒辦法用滑鼠直接拖動元素。
授權條款要注意什麼？
Huashu Design 不是 MIT 或 Apache 授權，它用的是自訂授權條款。個人使用完全免費，學習、研究、side project、個人社群發文都可以。但以下情況需要花叔的書面授權：公司內部工具整合、用它幫客戶做設計交付、把它整合進你的產品、任何企業專案。
如果你是獨立開發者做自己的 side project，完全不用擔心授權問題。如果你是在公司裡用，先確認這一點。
結論：Huashu Design 適合誰？
如果你是獨立開發者，不會用 Figma 但需要像樣的設計成品，Huashu Design 幾乎是目前最好的選擇。一行指令安裝，用打字就能產出簡報、原型、動畫，而且個人使用免費。
如果你是專業設計師，或者你的團隊需要即時協作和精細的視覺調整，Claude Design 還是更好的工具。它的 GUI 介面、即時調整、設計系統持久化，都是 Huashu Design 做不到的。
選哪個不是二選一的問題。你可以用 Claude Design 做最終交付的精修，用 Huashu Design 做前期的快速發想和方向探索，兩者並不衝突。
花叔用四天時間證明了一件事：當 AI 設計工具的核心知識可以被包進一個 SKILL.md 檔案裡，設計這件事就從買哪個產品變成了載入哪個 Skill。Huashu Design 推出後的同一週，GitHub 上出現了四個 Claude Design 相關的開源專案，合計超過 8,000 星。這不是一個工具的故事，是 AI 設計工具從產品走向可載入技能的轉折點。
推薦閱讀
科技翰林院怎麼用 Claude Code 終端機？8 個實戰設定全公開
OpenClaw 龍蝦 4 月更新：有 Claude Code 還需要裝龍蝦嗎？
ChatGPT Image 2.0 解析：完整六支官方影片帶你看懂設計師未來
參考資料
GitHub (2026). “alchaincyf/huashu-design: HTML-native design skill for Claude Code”
Popular AI Tools (2026). “Huashu Design vs Claude Design”
Developers Digest (2026). “The Claude Design Moment: AI Design Skills Just Got Their Breakout Week”
FAQ
Huashu Design 是免費的嗎？
個人使用完全免費，包括學習、研究、side project 和個人社群發文。但商業使用（公司內部工具、客戶交付、產品整合）需要花叔的書面授權，授權費用需要直接聯繫作者洽談。
Huashu Design 跟 Claude Design 品質差多少？
根據實測比較，Huashu Design 的產出品質大約是 Claude Design 的 80% 到 90%。有品牌素材（Logo、色票、產品圖）的情況下品質更高，沒有素材時基本水準約 60 到 65 分。但 Huashu Design 的 token 成本只有 Claude Design 的 5% 到 7%。
不會寫程式可以用 Huashu Design 嗎？
你需要會用 Claude Code（Anthropic 的終端機工具），這代表你至少要能打開終端機、輸入指令、安裝 Node.js。不需要會寫程式碼，但如果你從來沒用過終端機，學習門檻會比直接用 Claude Design 的瀏覽器介面高。
Huashu Design 可以匯出什麼格式？
支援 HTML（互動原型和簡報）、PPTX（可在 PowerPoint 和 Keynote 編輯）、MP4 和 GIF（動畫影片，支援 60fps 和背景音樂）、PDF、PNG、SVG（資訊圖表和視覺化）。Claude Design 不支援影片匯出，這是 Huashu Design 的獨特優勢。
Huashu Design 除了 Claude Code 還支援哪些 AI 工具？
Huashu Design 是 Agent-agnostic 的設計 Skill，除了 Claude Code 之外，也支援 Cursor、Codex、Trae、Hermes、OpenClaw 等任何支援 Markdown Skill 格式的 AI 編碼工具。你可以在自己習慣的開發環境裡使用。
Huashu Design 的 Anti AI-Slop 規則是什麼？
Huashu Design 內建一套反 AI 設計俗套的規則，禁止使用紫色漸層、emoji 圖標、左邊色條的圓角卡片、SVG 人物剪影、Inter 字體等常見的 AI 生成設計特徵。它強制使用 CSS Grid、有意識選擇的襯線字體、oklch 色彩空間，讓產出不會一看就知道是 AI 做的。
