花叔把 Claude Design 逆向成了 Claude Code Skill：Huashu Design 正式開源
Claude Design 發布三天後，花叔把它的設計能力「逆向」成 Claude Code skill 並免費開源。Huashu Design 不依賴付費的 Claude Design，任何 Claude Code 使用者都能用 HTML-native 的方式做高保真原型、幻灯片、動畫，含 20 種設計哲學和 5 維度評審。
目錄+
2026-04-17，Anthropic Labs 發布 Claude Design research preview——一個由 Claude Opus 4.7 驅動、只對付費訂閱者開放的 AI 設計工具，可以從 codebase / Figma 抽取設計系統、生成可互動原型、輸出 HTML/React 代碼。
三天後，花叔（@AlchainHust）在 X 上宣告：「我逆向了 Claude Design！明天 12:00 正式免費開源 Huashu Design。」
2026-04-21，Huashu Design 正式開源，作為 alchaincyf/huashu-skills 的一部份，以 MIT 授權釋出。
Huashu Design 是什麼
先說清楚「逆向」的含義。Claude Design 本身沒有公開 source code，花叔的做法不是反編譯程式碼，而是研究 Claude Design 的能力邊界與設計方法論，再把這些能力「蒸餾」成 Claude Code 可以執行的 skill。結果是：不需要 Claude Design 的付費訂閱，普通的 Claude Code 使用者一樣能做類似的事。
根據花叔的 GitHub profile 與 huashu-skills 文件描述，Huashu Design 的能力如下：
- HTML-native 設計：在 Claude Code 裡用純 HTML 做高保真原型、幻灯片、動畫、信息圖
- 20 種設計哲學預設：覆蓋不同風格的設計語言，從 Swiss Design 到日系到極簡主義
- 5 維度專家評審：生成設計成果後自動做多維度評估
- 苹果發布會級動畫導出：支援動畫輸出，可導出 MP4
- Agent-agnostic：不綁 Claude，設計上兼容多 agent 使用場景
簡單說：Huashu Design 把 Claude Design 想解決的問題——「讓 AI 直接幫你做高保真設計成品」——用一個開源 skill 的形式，帶進了任何能跑 Claude Code 的環境。
花叔的開源記錄：這不是第一次
如果你不熟悉花叔，這個 context 很重要。
花叔（GitHub: alchaincyf）是一個不會寫代碼的 AI Native Coder——他自己的 GitHub bio 第一句話就是「我不会写代码。一行都不会。」但他用 AI 做出了 AppStore 付費榜 Top 1 的產品（小貓補光燈），寫了 9 本 AI 技術書，30 萬+ 粉絲。
他最近的開源記錄（截至 2026-04-21）：
| Repo | Stars |
|---|---|
| nuwa-skill（女娲，蒸餾任何人思維方式） | 13.6k |
| zhangxuefeng-skill（張雪峰認知框架） | 6.3k |
| darwin-skill（讓 Skill 自主進化） | 1.5k |
| huashu-design（本篇主角） | 2.5k（開源初期） |
（來源：alchaincyf GitHub profile，數據截至 2026-04-21）
nuwa-skill 兩週拿到 9,000 star，不做任何推廣。這個背景說明：Huashu Design 不是一個實驗性的 side project，是花叔生產流水線裡真實在跑的工具，然後被他開源出來。
為什麼這件事值得關注
Claude Design 發布後三天就被「逆向」並免費開源，這個速度說明了一件事：
Anthropic Labs 產品的真正壁壘，從來不是功能本身，而是官方集成的深度和使用體驗的打磨。
Claude Design 的差異化在哪裡？
- 直接從 GitHub repo / Figma 抽取設計系統，自動應用到新項目
- 在 Claude.ai 原生環境裡的多人協作
- 無縫 handoff 到 Claude Code 繼續開發
- 與 Pro/Max/Team 計畫的配額整合
這些是花叔一個 skill 很難完全複製的東西。Huashu Design 更像是：沒有付費訂閱也能進入這個設計工作流的入口，而不是 Claude Design 的完整替代品。
但對絕大多數個人開發者和小團隊來說，入口就夠了。如果你已經在用 Claude Code，跑一個 /install-skill 的成本比每月多付訂閱費低得多。
實際怎麼用
在 Claude Code 裡安裝：
npx skills add alchaincyf/huashu-design
或在 Claude Code 中執行：
/install-skill huashu-design
然後就可以在 Claude Code 的對話裡直接調用設計流程——描述你要做什麼（一頁 landing page、一份简报、一个信息图），選擇設計哲學，Claude 在 HTML 裡組出來，你審，它改。
全部在 Claude Code 裡發生，不需要另開 Claude Design 的頁面。
一個觀察
Claude Design 發布當天，Anthropic 的 announcement 強調的是「設計系統提取」和「從 codebase 自動應用 brand style」。這確實是一個讓設計工作流更連貫的有意思方向。
但花叔的做法提醒我們：AI 時代的「工具護城河」比過去淺很多。一個足夠理解工具能力邊界的人，三天內就能把核心用法封裝成一個免費 skill。
Anthropic 不會因此放慢 Claude Design 的開發——他們在賭的是原生整合帶來的使用體驗差距。但花叔這個動作，等於把「Claude Code 裡做設計」這件事的門檻，從付費訂閱降到了 MIT 授權免費使用。
對想試的人來說，這是一個值得花半小時裝起來試試的工具。