huashu-design 是什麼、怎麼安裝使用：花叔的 HTML 原生設計 Skill（高保真原型、發佈動畫、可編輯 PPT、資訊圖）

本文根據 alchaincyf/huashu-design 倉庫 README 整理，資料核對於 2026-10-11。功能描述多為作者自述，實際效果取決於所用模型。

是什麼

Huashu Design 是 AI 博主花叔（GitHub 用戶名 alchaincyf）做的一個設計技能，README 的口號是「打字。回車。一份能交付的設計。」它的技術路線是 HTML 原生：不依賴 Figma 或 AE，所有產物——原型、動畫、幻燈片、資訊圖——都先用 HTML 做出來，再按需導出成其他格式。README 說幾分鐘到半小時可以產出一段產品發佈動畫、一個能點擊的 App 原型、一套能編輯的 PPT 或一份印刷級的資訊圖，並稱倉庫說明裏展示的動畫都是用這個技能自己做的。

它處理「不出 AI 味」的辦法有兩手：你提供品牌資產（logo、色板、介面截圖）時，按一套固定的「品牌資產協議」讀懂品牌氣質；什麼都不給時，用三套設計方向顧問邏輯加 60 種 HTML 原生風格庫兜底。作者在 README 裏坦率說明，品牌資產協議的思路借鑑了流傳出來的 Claude Design 提示詞。

截至 2026-10-11，GitHub 顯示該倉庫約 2.5 萬 Star，最近一次推送在 2026-09-22。

包含哪些 Skill

一個技能，README 的「能做什麼」列了這些能力：

• 設計方向顧問：需求模糊時給出幾個差異明顯的方向供選擇；
• iOS App 原型：可點擊的高保真原型；
• Motion Design 引擎：產品發佈類動畫，可導出影片；
• HTML Slides → 可編輯 PPTX：先做網頁幻燈片，再轉成能編輯的 PPT；
• Tweaks：實時切換設計變體；
• 資訊圖 / 數據可視化；
• 五維度專家評審：對成品打分並指出問題；
• 以及「初級設計師工作流」等過程約束。

怎麼安裝

bash
npx skills add alchaincyf/huashu-design

裝完先自檢——這是 README 特別強調的一步：這個技能不止一個 SKILL.md，references/、assets/、scripts/、demos/ 四個子目錄缺一不可。如果安裝目錄（如 ~/.claude/skills/huashu-design/）裏只有 SKILL.md，說明 skills CLI 版本太舊（README 稱 1.5.15 及以下有隻同步單個文件的問題，1.5.19 已修復），用 npx skills@latest add alchaincyf/huashu-design 重裝。仍不行就手動克隆：

bash
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design

怎麼用

裝好後在智能體裏直接說需求，例如：

• 「給我們的記帳 App 做一個可以點的 iOS 原型，三個主要頁面」；
• 「做一段 20 秒左右的產品發佈動畫，這是我們的 logo 和主色」；
• 「把這篇文章做成一套幻燈片，再導出成可編輯的 PPTX」；
• 「評審一下剛才這版設計，按五個維度打分」。

適合誰 / 不適合誰

適合：

• 沒有設計師的小團隊、獨立開發者，需要快速拿出像樣的原型和宣傳物料；
• 中文用戶——說明文檔、教學和示例都以中文為主。

不適合：

• 已有成熟設計系統、需要在 Figma 裏協作的設計團隊；
• 期望一次生成就能直接上線的人，成品仍需要人來把關細節。

注意事項

• 許可證變更：README 公告自 2026-05-14 起改為 MIT，個人和商用都免費、無需授權；此前「個人免費、企業商用需授權」的條款已作廢。網上較早的介紹文章可能還寫着舊條款，以倉庫 LICENSE 為準。
• 會執行腳本：導出影片、PPTX 等步驟依賴 scripts/ 裏的腳本和本機環境，安裝前瀏覽一遍。
• 品牌素材：只提供你有權使用的 logo 和素材，不要讓它仿製他人品牌。
• 維護狀態：最近推送 2026-09-22。
• 技能體積較大、引用文件多，加載時會佔用一定上下文。