GitHub 6300 星！huashu-design：在終端打一句話，拿回一份大廠級設計稿
整理版優先睇
用一句話喺終端生成大廠級設計稿——huashu-design 係一個畀 AI Agent 用嘅設計 Skill，支援原型、PPT、動畫等，上線一週攞 6300 星。
呢篇文章介紹嘅 huashu-design，係由花叔（alchaincyf）開發嘅一個 AI Agent 設計 Skill。花叔同時係女媧.skill 嘅作者，佢留意到用 AI 生成前端頁面時，功能可以行得鬱，但視覺效果成日好差——好似 2015 年嘅 Bootstrap 模板，顏色唔啱、間距亂、字體隨緣。問題唔喺 Claude 本身，而係佢冇一套設計規範。為咗解決呢個問題，花叔整咗 huashu-design，等開發者可以喺終端打一句話，就得到大廠級嘅設計稿。
呢個 Skill 嘅能力非常全面：交互原型、演講 PPT、時間軸動畫、設計變體、信息圖、設計方向顧問同 5 維度專家評審，全部都可以一句話觸發。輸出係單文件 HTML，零依賴，雙擊就睇到，仲可以導出 PDF、PNG、MP4、PPTX 等格式。裝咗之後，無論你用 Claude Code、Cursor、Codex 定其他 Agent，都可以直接用。整體上，huashu-design 係一個畀普通人用得嘅設計團隊，唔使等設計師排期，自己搞掂曬。
- huashu-design 係一個跨 Agent 嘅設計 Skill，安裝後只需一句話即可生成交付級設計，能力涵蓋交互原型、PPT、動畫等。
- 設計方向顧問模式會從 5 流派 × 20 種設計哲學推薦 3 個方向，並即時生成 Demo 畀你對比選擇。
- 所有輸出係單文件 HTML，零依賴，可直接瀏覽器打開，並可導出為 PDF、PNG、MP4、PPTX 等多種格式。
- 相比 Claude Design，huashu-design 提供更穩定嘅風格控制、品牌適配、自檢機制同動畫導出。
- 實際工作流包括：講需求、揀方向、生成完整稿件、評審修改、導出，成個過程 15-25 分鐘搞掂。
huashu-design GitHub 倉庫
項目地址，包含完整文檔同安裝說明
安裝指令
用 npx skills add alchaincyf/huashu-design 安裝，跨 Agent 通用（Claude Code、Cursor、Codex 等）
背景：AI 做設計嘅樽頸
你用 Claude Code 寫過前端頁面咩？功能係行得鬱，但視覺效果……點講呢，好似 2015 年嘅 Bootstrap 模板。顏色唔搭、間距混亂、字體隨緣。你想叫佢「靚啲」，佢就畀你一堆漸變同陰影，仲樣衰咗。
呢個唔係 Claude 嘅問題，係佢 冇設計規範。就好似一個全棧工程師——啲碼寫得好，但叫佢做 UI，佢只會用默認樣式。
能力一覽：一句話做到嘅嘢
- 交互原型（App/Web）：單文件 HTML，真 iPhone 機身，可點擊，Playwright 自動驗證，10-15 分鐘。
- 演講幻燈片：HTML deck（瀏覽器演講）+ 可編輯 PPTX，15-25 分鐘。
- 時間軸動畫：MP4（25fps/60fps 插幀）+ GIF + BGM，8-12 分鐘。
- 設計變體：3+ 並排對比，Tweaks 實時調參，10 分鐘。
- 信息圖 / 可視化：印刷級排版，可導 PDF/PNG/SVG，10 分鐘。
- 設計方向顧問：5 流派 × 20 種設計哲學，推薦 3 方向，5 分鐘。
- 5 維度專家評審：雷達圖 + Keep/Fix/Quick Wins 清單，3 分鐘。
冇錯，佢唔止做靜態頁面——重可以做可點擊嘅 App 原型，帶真實 iPhone 15 Pro 機身框架、靈動島、狀態欄、Home Indicator。佢重可以做帶 BGM 嘅產品發佈動畫，導出 MP4 同 GIF。
點解揀 HTML 原生輸出？
huashu-design 所有輸出都係單文件 HTML——唔係 Figma 檔，唔係 PSD，唔係 Sketch，就係一個 HTML 文件。點解？
- 1 AI 最擅長生成 HTML。大模型喺 HTML/CSS/JS 嘅訓練數據最充足，生成質量最高。叫佢生成 Figma 或 PSD 格式，質量會大跌。
- 2 單文件即係零依賴。一個 HTML 檔案，雙擊就喺瀏覽器開到。唔使裝 Figma，唔使下載字體包，唔使任何環境。Send 畀客，客雙擊就睇到。
- 3 可以直接變成代碼。如果你做 App 原型，呢個 HTML 原型可以直接做前端開發嘅參考——選擇器、佈局、動畫都係真實 CSS，唔係設計稿入面嘅圖片。
- 4 可以導出做任何格式。HTML → PDF（打印級）、HTML → PNG/SVG（信息圖）、HTML → MP4/GIF（動畫）、HTML → PPTX（演講）。一個源文件，多種輸出。
實際工作流：做一份 PPT 嘅步驟
- 1 第一步：講需求。直接話「做一份新產品 AI 助手嘅發佈演講 PPT，大概 8 頁」。
- 2 第二步：揀方向。huashu-design 會生成 3 個風格方向嘅 Demo——極簡白底、深色科技感、雜誌風——畀你揀。
- 3 第三步：生成完整 PPT。按你揀嘅方向生成完整 8 頁，每頁有真實內容、排版、配圖位置。
- 4 第四步：評審。叫佢「幫我評審呢個 PPT」，佢會做 5 維度打分，畀 Keep / Fix / Quick Wins 清單。
- 5 第五步：修改同導出。根據評審修改，然後導出 PPTX 格式——文本框保留，你可以喺 PowerPoint 繼續改。
成個過程大約 15-25 分鐘。由一句話開始，到一份可編輯嘅 PPT 完成，中間唔使開 Figma 或者 PowerPoint。
你用過 Claude Code 嚟寫前端頁面未？
功能係行得鬱嘅，但係視覺效果……點講好呢，好似 2015 年嘅 Bootstrap 模板咁。顏色唔襯、間距亂曬、字體求其。你想令佢「靚啲」，佢就幫你加一堆漸變同陰影，搞到仲衰。
呢個唔係 Claude 嘅問題，而係佢冇設計規範。就好似一個全棧工程師——寫 Code 好叻，但係叫佢做 UI，佢淨係會用預設樣式。
huashu-design 呢個工具就係解決呢個問題嘅。
項目地址：https://github.com/alchaincyf/huashu-design[1]
佢係一個俾 AI Agent 用嘅設計 Skill——裝咗之後，你喺終端打一句話，AI 就可以輸出交付級嘅設計成果。唔係「AI 做到算係咁」嗰種水準，而係睇落似大廠設計團隊整出嚟嘅。
上線唔夠一個禮拜，已經有 6300 粒星。嚟自花叔（alchaincyf），佢亦係女媧.skill 嘅作者。
佢究竟做到啲乜
先睇能力清單：
| 能力 | 交付物 | 典型需時 |
|---|---|---|
| 交互原型（App/Web） | 單檔案 HTML，真 iPhone 邊框，可以㩒，用 Playwright 自動驗證 | 10-15 分鐘 |
| 演講投影片 | HTML 簡報（瀏覽器演講）+ 可編輯嘅 PPTX | 15-25 分鐘 |
| 時間軸動畫 | MP4（25fps/60fps 插格）+ GIF + BGM | 8-12 分鐘 |
| 設計變體 | 3 個或以上並排對比，即時調校參數 | 10 分鐘 |
| 資訊圖表/數據可視化 | 印刷級排版，可以匯出 PDF/PNG/SVG | 10 分鐘 |
| 設計方向顧問 | 5 個流派 × 20 種設計哲學，推薦 3 個方向 | 5 分鐘 |
| 5 維度專家評審 | 雷達圖 + Keep/Fix/Quick Wins 清單 | 3 分鐘 |
你冇睇錯——佢唔止整靜態頁面。佢整到可以㩒嘅 App 原型，有真實 iPhone 15 Pro 嘅機身框架、靈動島、狀態列、Home Indicator。佢整到有背景音樂嘅產品發佈動畫，匯出 MP4 同 GIF。佢整到可編輯嘅 PPT，文字框保留，你拎到 PPTX 仲可以繼續改。
呢啲全部都係一句話觸發嘅。
安裝
一行指令：
npx skills add alchaincyf/huashu-design
跨 Agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都裝到。
裝完之後直接講：
做一份 AI 心理學的演講 PPT，推薦 3 個風格方向讓我選
做個 AI 番茄鍾 iOS 原型，4 個核心屏幕要真能點擊
把這段邏輯做成 60 秒動畫，導出 MP4 和 GIF
幫我對這個設計做一個 5 維度評審
冇按鈕、冇面板、冇 Figma 插件。喺終端打字就得。
唔知要咩風格？設計方向顧問幫你揀
呢個係 huashu-design 最體貼嘅功能之一。
你可能知道自己要做一份 PPT，但係唔肯定要咩風格。係極簡主義？係賽博朋克？係日式侘寂？定係瑞士國際主義？
直接講「我唔肯定要咩風格」，huashu-design 就會啟動設計方向顧問模式：
由 5 個流派 × 20 種設計哲學入面揀出 3 個唔同嘅方向 為每個方向同時生成一個 Demo 俾你對比揀
你揀咗之後，佢會跟住你揀嘅方向繼續深入做。如果 3 個都唔滿意，佢會再推薦 3 個。
呢個就好似你去甲方提案——先出 3 個方向俾客揀，揀定咗先再深入做。只不過出方向嘅速度係 5 分鐘。
品牌適配
如果你自己有品牌資產——標誌、色板、UI 截圖——直接掉俾佢。huashu-design 會讀得明你品牌嘅氣質，所有設計輸出會自動配合你嘅品牌風格。
乜都唔俾都冇問題。內置嘅 20 種設計語彙夠曬用，保證輸出唔會變成「AI slop」（即係一睇就知係 AI 生成嘅 cheap 設計）。
5 維度專家評審
做完設計之後，你可以叫 huashu-design 對自己嘅作品做一次專家評審：
幫我對這個設計做一個 5 維度評審
佢會由 5 個維度打分，生成雷達圖，並俾出具體嘅修改建議：
Keep — 做得好嘅地方，保留 Fix — 需要修正嘅問題 Quick Wins — 簡單調整就可以大幅提升嘅地方
每一條建議都係可行嘅，唔係空泛嘅「可以再優化下配色」。
同 Claude Design 嘅分別
你可能聽過 Claude Design——Claude 官方嘅設計能力。huashu-design 同佢有咩關係？
簡單講：Claude Design 係底層能力，huashu-design 係喺佢之上建立嘅約束系統 + 工作流程。
Claude Design 做到好多嘢，但係佢每次都「發揮創意」——你可能會得到完全唔同風格嘅輸出。huashu-design 俾咗佢一套嚴格嘅設計規範同工作流程，確保輸出品質穩定、風格可控。
| 維度 | 原生 Claude Design | huashu-design |
|---|---|---|
| 風格一致性 | 每次唔同 | 可控 |
| 設計方向選擇 | 自己決定 | 3 方向對比選擇 |
| 品牌適配 | 要手動描述 | 掉素材自動適配 |
| 自檢機制 | 無 | 5 維度專家評審 |
| 動畫匯出 | 有限 | MP4 + GIF + BGM |
| PPTX 匯出 | 不支持 | 可編輯文字框保留 |
| Playwright 驗證 | 無 | 原型自動點擊測試 |
點解揀 HTML 原生
呢個係一個值得深入討論嘅設計決定。
huashu-design 嘅所有輸出都係單檔案 HTML。唔係 Figma 檔案，唔係 PSD，唔係 Sketch——就係一個 HTML 檔案。
點解？
1. AI 最擅長生成 HTML。 大模型喺 HTML/CSS/JS 上面嘅訓練數據最充足，生成品質最高。叫佢生成 Figma 格式或者 PSD 格式，品質會大打折扣。
2. 單檔案代表零依賴。 一個 HTML 檔案，雙擊就可以喺瀏覽器打開。唔使安裝 Figma，唔使下載字型包，唔需要任何環境。Send 畀客，客雙擊就睇到。
3. 可以直接變成 Code。 如果你做緊 App 原型，呢個 HTML 原型可以直接做前端開發嘅參考——選擇器、佈局、動畫全部都係真實嘅 CSS，唔係設計稿入面嘅圖片。
4. 可以匯出做任何格式。 HTML → PDF（打印級）、HTML → PNG/SVG（資訊圖表）、HTML → MP4/GIF（動畫）、HTML → PPTX（演講）。一個來源檔案，多種輸出。
實際工作流程
以做一份產品發佈 PPT 為例：
第一步：講需求
做一份我們新產品 AI 助手的發佈演講 PPT，大概 8 頁
第二步：揀方向
huashu-design 會生成 3 個風格方向嘅 Demo 俾你揀。例如：
方向 A：極簡白底，大字標題，以數據可視化為主 方向 B：深色科技感，漸變背景，動態元素 方向 C：雜誌風，圖文混排，夠曬留白
你揀一個。
第三步：生成完整 PPT
AI 跟住你揀嘅方向生成完整嘅 8 頁 PPT。每頁都有真實嘅內容、排版、配圖位置。
第四步：評審
幫我評審一下這個 PPT
5 維度打分 + 修改建議。
第五步：修改同匯出
根據評審結果修改，然後匯出 PPTX 格式——文字框保留，你可以喺 PowerPoint 入面繼續編輯。
成個過程 15-25 分鐘。
動畫能力
呢個係 huashu-design 最令人驚艷嘅部分。
傳統做產品宣傳動畫，你需要 After Effects 或者 Motion，需要專業嘅動畫師，需要幾日到幾星期嘅時間。
huashu-design 嘅做法：
把我們產品的核心功能做成 60 秒的宣傳動畫，導出 MP4
佢會生成帶時間軸嘅 HTML 動畫，然後自動錄製做 MP4（25fps 或者 60fps 插格）同 GIF（調色板優化）。可以加背景音樂。
README 裏面嘅每一個動畫——包括嗰個 25 秒嘅 Hero 動畫——都係 huashu-design 自己整嘅。唔係 After Effects，唔係 Figma，就係一句 prompt。
邊個啱用
產品經理：快啲出原型俾開發同老細睇，唔使等設計師排期。
創業者：融資 PPT、產品宣傳頁、One-pager，自己搞掂。
開發者：項目 README 入面嘅效果圖、技術 Blog 嘅資訊圖表、開源項目嘅宣傳動畫。
市場團隊：產品發佈素材、社交媒體圖片、活動海報。
任何需要設計但係請唔起設計師嘅人——huashu-design 就係你嘅設計團隊。
開始行動
npx skills add alchaincyf/huashu-design喺 Claude Code 入面講：「做一份 xxx 嘅 PPT」 揀一個風格方向 拎到交付級設計稿
項目地址：https://github.com/alchaincyf/huashu-design[2]
引用連結
[1]https://github.com/alchaincyf/huashu-design
[2]https://github.com/alchaincyf/huashu-design
你用 Claude Code 寫過前端頁面嗎？
功能是能跑的，但視覺效果……怎麼說呢，像是 2015 年的 Bootstrap 模板。顏色不搭、間距混亂、字體隨緣。你想讓它「好看一點」，它就給你加一堆漸變和陰影，看起來更糟了。
這不是 Claude 的問題，是它沒有設計規範。就像一個全棧工程師——代碼寫得好，但讓他做 UI，他只會用默認樣式。
huashu-design 解決的就是這個問題。
項目地址：https://github.com/alchaincyf/huashu-design[1]
它是一個給 AI Agent 用的設計 Skill——安裝之後，你在終端打一句話，AI 就能輸出交付級的設計成果。不是「AI 做的還行」那種水平，是看起來像大廠設計團隊做的。
上線不到一週，6300 星。來自花叔（alchaincyf），同時也是女媧.skill 的作者。
它到底能做什麼
先看能力清單：
| 能力 | 交付物 | 典型耗時 |
|---|---|---|
| 交互原型（App/Web） | 單文件 HTML，真 iPhone bezel，可點擊，Playwright 自動驗證 | 10-15 分鐘 |
| 演講幻燈片 | HTML deck（瀏覽器演講）+ 可編輯 PPTX | 15-25 分鐘 |
| 時間軸動畫 | MP4（25fps/60fps 插幀）+ GIF + BGM | 8-12 分鐘 |
| 設計變體 | 3+ 並排對比，Tweaks 實時調參 | 10 分鐘 |
| 信息圖/可視化 | 印刷級排版，可導 PDF/PNG/SVG | 10 分鐘 |
| 設計方向顧問 | 5 流派 × 20 種設計哲學，推薦 3 方向 | 5 分鐘 |
| 5 維度專家評審 | 雷達圖 + Keep/Fix/Quick Wins 清單 | 3 分鐘 |
你沒看錯——它不只是做靜態頁面。它能做可點擊的 App 原型，帶真實 iPhone 15 Pro 的機身框架、靈動島、狀態欄、Home Indicator。它能做帶 BGM 的產品發佈動畫，導出 MP4 和 GIF。它能做可編輯的 PPT，文本框保留，你拿到 PPTX 還能繼續改。
這些全是一句話觸發的。
安裝
一行命令：
npx skills add alchaincyf/huashu-design
跨 Agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能裝。
裝完之後直接說話：
做一份 AI 心理學的演講 PPT，推薦 3 個風格方向讓我選
做個 AI 番茄鍾 iOS 原型，4 個核心屏幕要真能點擊
把這段邏輯做成 60 秒動畫，導出 MP4 和 GIF
幫我對這個設計做一個 5 維度評審
沒有按鈕、沒有面板、沒有 Figma 插件。終端打字就行。
不知道要什麼風格？設計方向顧問幫你選
這是 huashu-design 最貼心的功能之一。
你可能知道自己要做一份 PPT，但不確定要什麼風格。是極簡主義？是賽博朋克？是日式侘寂？還是瑞士國際主義？
直接說「我不確定要什麼風格」，huashu-design 會啓動設計方向顧問模式：
從 5 個流派 × 20 種設計哲學裏挑出 3 個差異化方向 為每個方向並行生成一個 Demo 讓你對比選擇
你選了之後，它按你選的方向繼續深入做。如果 3 個都不滿意，它再推薦 3 個。
這就像你去甲方提案——先出 3 個方向給客戶選，選定了再深入做。只不過出方向的速度是 5 分鐘。
品牌適配
如果你有自己的品牌資產——logo、色板、UI 截圖——直接扔給它。huashu-design 會讀懂你的品牌氣質，所有設計輸出自動適配你的品牌風格。
什麼都不給也沒關係。內置的 20 種設計語彙足以兜底，保證輸出不會變成「AI slop」（那種一眼就能看出是 AI 生成的廉價設計）。
5 維度專家評審
做完設計之後，你可以讓 huashu-design 對自己的作品做一次專家評審：
幫我對這個設計做一個 5 維度評審
它會從 5 個維度打分，生成雷達圖，並給出具體的修改建議：
Keep — 做得好的地方，保留 Fix — 需要修復的問題 Quick Wins — 簡單調整就能大幅提升的地方
每條建議都是可操作的，不是空洞的「可以再優化一下配色」。
和 Claude Design 的區別
你可能聽說過 Claude Design——Claude 官方的設計能力。huashu-design 和它是什麼關係？
簡單說：Claude Design 是底層能力，huashu-design 是在它基礎上建立的約束系統 + 工作流。
Claude Design 能做很多事，但它每次都會「發揮創意」——你可能得到完全不同風格的輸出。huashu-design 給了它一套嚴格的設計規範和工作流程，確保輸出質量穩定、風格可控。
| 維度 | 原生 Claude Design | huashu-design |
|---|---|---|
| 風格一致性 | 每次不同 | 可控 |
| 設計方向選擇 | 自己決定 | 3 方向對比選擇 |
| 品牌適配 | 需要手動描述 | 扔素材自動適配 |
| 自檢機制 | 無 | 5 維度專家評審 |
| 動畫導出 | 有限 | MP4 + GIF + BGM |
| PPTX 導出 | 不支持 | 可編輯文本框保留 |
| Playwright 驗證 | 無 | 原型自動點擊測試 |
為什麼是 HTML 原生
這是一個值得深入聊的設計決策。
huashu-design 的所有輸出都是單文件 HTML。不是 Figma 文件，不是 PSD，不是 Sketch——就是一個 HTML 文件。
為什麼？
1. AI 最擅長生成 HTML。 大模型在 HTML/CSS/JS 上的訓練數據最充足，生成質量最高。讓它生成 Figma 格式或 PSD 格式，質量會大幅下降。
2. 單文件意味着零依賴。 一個 HTML 文件，雙擊就能在瀏覽器裏打開。不需要安裝 Figma，不需要下載字體包，不需要任何環境。發給客戶，客戶雙擊就能看。
3. 可以直接變成代碼。 如果你做的是 App 原型，這個 HTML 原型可以直接作為前端開發的參考——選擇器、佈局、動畫都是真實的 CSS，不是設計稿裏的圖片。
4. 可以導出為任何格式。 HTML → PDF（打印級）、HTML → PNG/SVG（信息圖）、HTML → MP4/GIF（動畫）、HTML → PPTX（演講）。一個源文件，多種輸出。
實際工作流
以做一份產品發佈 PPT 為例：
第一步：說需求
做一份我們新產品 AI 助手的發佈演講 PPT，大概 8 頁
第二步：選方向
huashu-design 會生成 3 個風格方向的 Demo 讓你選。比如：
方向 A：極簡白底，大字標題，數據可視化為主 方向 B：深色科技感，漸變背景，動態元素 方向 C：雜誌風，圖文混排，留白充足
你選一個。
第三步：生成完整 PPT
AI 按你選的方向生成完整的 8 頁 PPT。每頁都有真實的內容、排版、配圖位置。
第四步：評審
幫我評審一下這個 PPT
5 維度打分 + 修改建議。
第五步：修改和導出
根據評審結果修改，然後導出 PPTX 格式——文本框保留，你可以在 PowerPoint 裏繼續編輯。
整個過程 15-25 分鐘。
動畫能力
這是 huashu-design 最讓人驚豔的部分。
傳統做產品宣傳動畫，你需要 After Effects 或 Motion，需要專業的動畫師，需要幾天到幾周的時間。
huashu-design 的做法：
把我們產品的核心功能做成 60 秒的宣傳動畫，導出 MP4
它會生成帶時間軸的 HTML 動畫，然後自動錄製為 MP4（25fps 或 60fps 插幀）和 GIF（調色板優化）。可以加背景音樂。
README 裏的每一個動畫——包括那個 25 秒的 Hero 動畫——都是 huashu-design 自己做的。不是 After Effects，不是 Figma，就是一句話 prompt。
誰應該用
產品經理：快速出原型給開發和老闆看，不用等設計師排期。
創業者：融資 PPT、產品宣傳頁、one-pager，自己搞定。
開發者：項目 README 裏的效果圖、技術博客的信息圖、開源項目的宣傳動畫。
市場團隊：產品發佈素材、社交媒體圖片、活動海報。
任何需要設計但請不起設計師的人——huashu-design 就是你的設計團隊。
開始行動
npx skills add alchaincyf/huashu-design在 Claude Code 裏說：「做一份 xxx 的 PPT」 選一個風格方向 拿到交付級設計稿
項目地址：https://github.com/alchaincyf/huashu-design[2]
引用連結
[1]https://github.com/alchaincyf/huashu-design
[2]https://github.com/alchaincyf/huashu-design