Huashu Design：Agent 的原生 HTML 設計 Skill

作者：Ranger Ramblings

日期：2026年5月7日上午8:15

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

Huashu Design 係一個畀 AI Agent 用嘅設計 Skill，打字就出專業級 HTML 原型、動畫同 PPT。

整理版摘要

呢篇文章介紹咗由花叔（Alchain Hust）開發嘅 Huashu Design，係一個畀 AI 編程 Agent（如 Claude Code、Cursor 等）用嘅原生 HTML 設計 Skill。作者想解決圖形設計工具門檻高、AI 輸出總係「AI 味」太重、品牌一致性保證唔到、跨會話碎片化等問題。整體結論係：你只需打一句話，Agent 就可以喺 3 到 30 分鐘內生成一份可交付嘅專業設計成品，唔再需要開 Figma、AE 或者 Keynote。

呢個 Skill 包含 20 種設計哲學、5 維評審體系、品牌資產協議、動畫引擎，同埋從 HTML 導出 MP4/GIF/PPTX/PDF 嘅完整工具鏈。佢嘅定位唔係另一個圖形工具，而係令圖形工具嗰層消失。文章用咗大量真實案例展示點樣用，例如做 App 原型、產品動畫、設計評審、Tweaks 變體等。作者仲提供埋基礎 Prompt 模板，令讀者可以即刻試玩。

文章深入解釋核心機制，例如品牌資產協議嘅 5 步硬流程：問用戶有冇品牌資產、搜官網、下載 SVG 或截圖、grep 提取色值、固化 spec 做 CSS 變量。仲有設計方向顧問嘅 Fallback 機制，喺需求模糊時從 20 種設計哲學推薦 3 個不同流派嘅方向，並行生成 Demo 畀用戶揀。Motion Design 引擎提供 4 個核心 API（useTime、useSprite、interpolate、Ea…

Huashu Design 係一個畀 AI Agent 用嘅設計 Skill，打字就出原型、動畫、PPT，唔使靠圖形工具。
品牌資產協議強制 5 步提取真實品牌色，防止 AI 亂估，確保一致性。
5 維設計評審輸出雷達圖同 Keep/Fix/Quick Wins，幫手快速迭代設計方案。
對比 Claude Design，Huashu 無 quota 限制，跨 Agent 通用，可導出 MP4 同可編輯 PPTX。
安裝只需一行指令，支援中英文 prompt，適合獨立開發者、PM、設計師快速出貨。

值得記低

連結 github.com

Huashu Design 倉庫

GitHub 開源倉庫，包含完整原始碼同文檔

連結 skill-huasheng.vercel.app

Live Demo Deck

花叔演講「聊聊 skill」的線上 Deck

整理重點

點解要有 Huashu Design？— 現有工具嘅痛點同突破

圖形設計工具門檻高，Figma、AE 需要學習成本，非設計師好難用得起。AI 生成嘅設計成日帶住一股「AI 味」：紫色漸變背景、emoji 圖標、千篇一律嘅圓角卡片——一眼就睇得出係 AI Slop。品牌一致性保證唔到，AI 從記憶亂估品牌色，Logo 變形係家常便飯。跨會話碎片化嚴重，每次都要從頭 prompt，冇辦法形成體系化設計能力。

圖形工具門檻高：Figma、AE 要學，非設計師用唔起
AI 輸出「AI 味」太重：紫漸變、emoji 圖標、圓角卡片成日出現
品牌一致性無法保證：AI 從記憶猜色，顏色唔準、Logo 變形
跨會話碎片化：每次都要從頭 prompt，冇體系化能力
交付格式單一：要 PPT 得手工轉，要視頻得開 AE
設計方向無從下手：需求模糊時 AI 亂做，浪費時間

整理重點

核心能力一覽：一句話搞掂設計

Huashu Design 涵蓋多種交付物，由 App 原型到演講 PPT，再到時間軸動畫同數據可視化，通通可以一句話生成。典型耗時由 5 到 25 分鐘不等，全部係可交付嘅專業級成品。

交互原型（App / Web）：單文件 HTML，真 iPhone 機框，可點擊，Playwright 驗證，10-15 分鐘
演講幻燈片：HTML deck（瀏覽器演講）+ 可編輯 PPTX（真文本框），15-25 分鐘
時間軸動畫：MP4（25fps / 60fps 插幀）+ GIF（palette 優化）+ BGM，8-12 分鐘
設計變體：3+ 並排對比，Tweaks 實時調參，10 分鐘
信息圖 / 數據可視化：印刷級排版，可導 PDF / PNG 300dpi / SVG，10 分鐘
設計方向顧問：5 流派 × 20 種設計哲學，推薦 3 方向，並行生成 Demo，5 分鐘
5 維度專家評審：雷達圖 + Keep/Fix/Quick Wins，3 分鐘

基礎 Prompt 模板好簡單，例如：做一個 AI 番茄鍾 iOS App 原型，需要 4 個核心屏幕，要求真能點擊切換。或者做一份關於「AI 如何改變軟件開發」嘅演講 PPT，推薦 3 個風格方向畀我揀。

1 做一個 App 原型：做一個 AI 番茄鍾 iOS App 原型，4 個屏幕，真能點擊切換
2 做一套幻燈片：做一份「AI 如何改變軟件開發」演講 PPT，推薦 3 個風格方向
3 做一段動畫：把產品核心工作流做成 60 秒宣傳動畫，導出 MP4
4 做一張信息圖：季度數據做成一張雜誌級信息圖，橫向對比 3 個競品

程式內容 bash

npx skills add alchaincyf/huashu-design

整理重點

點樣確保品質？— 品牌協議、評審同反 Slop 規則

品牌資產協議係 Huashu Design 嘅核心，強制 5 步硬流程，令 AI 唔可以從記憶亂估顏色。

1 問用戶：有冇 logo、產品截圖、配色規範、字體
2 搜官方品牌頁：<brand>.com/brand、press.<brand>.com、產品頁
3 下載資產：SVG → 官網 HTML → 產品截圖取色
4 grep 提取色值：從資產文件抓 #xxxxxx，按頻率排序，過濾黑白灰
5 固化 spec：寫 brand-spec.md + CSS 變量 var(--brand-primary)

設計評審係另一個品質把關機制：5 維度（哲學一致性、視覺層級、細節執行、功能性、創新性）各打 0-10 分，輸出雷達圖，仲有 Keep、Fix、Quick Wins 三個清單，幫你唔使靠感覺改設計。

反 AI Slop 規則主動避開 AI 視覺通病，例如禁止使用 emoji 代替圖標，改用 Heroicons / Lucide；禁止紫色漸變背景；強制使用真實產品截圖或 Unsplash 圖片。

禁止紫色漸變背景，改用經過設計嘅配色系統
emoji 代替圖標 → Heroicons / Lucide / SF Symbols
圓角 + 左 border accent 卡片 → 乾淨的 CSS Grid 排版
SVG 手繪人臉 → 真實產品截圖 / Unsplash 圖片
Inter 做 display 字體 → 經過選擇的 serif display（GT Alpina、Freight 等）

整理重點

對比 Claude Design 同使用限制

Huashu Design 同 Claude Design 最大嘅分別係形態：Claude Design 係一個網頁產品，畀你用瀏覽器點拖改；Huashu 係一個裝入 Agent 嘅 Skill，你只需要用對話操控。

Claude Design：形態係網頁產品，有訂閲 quota 限制，交付物限於畫布內 + Figma，操作靠 GUI
Huashu Design：形態係 Skill，無 quota 限制（只消耗 API），交付物包括 HTML、MP4、GIF、可編輯 PPTX、PDF，操作靠對話
複雜動畫：Claude Design 有限；Huashu 有 Stage + Sprite 時間軸 + 60fps 導出
跨 Agent：Claude Design 僅限 Claude.ai；Huashu 支援 Claude Code、Cursor、Codex CLI、OpenClaw、Hermes、Trae
價格：Claude Design 訂閲制；Huashu 個人免費

使用時要注意：如果安裝後 Agent 冇用 Skill 規則，要檢查 npx skills list；如果品牌色唔啱，要明確提供資產路徑；導出 MP4 冇聲要預裝 ffmpeg；PPTX 唔可以編輯要指定用 html2pptx.js 方式。

項目簡介

Huashu Design 係一個面向 AI 編程 Agent 嘅 原生 HTML 設計 Skill，令你只需喺 Claude Code（或者其他兼容 Agent）入面打一句話，3 到 30 分鐘內就可以拎到一份可交付嘅專業設計成品**。

「打字。回車。一份交到貨嘅設計。」

佢唔係一個圖形界面工具，而係一個裝入 Agent 嘅設計能力包——包含 20 種設計哲學、5 維評審體系、品牌資產協議、動畫引擎、同埋由 HTML 到 MP4/GIF/PPTX/PDF 嘅完整導出工具鏈。

呢個 README 入面嘅每一個演示動畫，都係 huashu-design 自己生成嘅。

解決咩問題？

現有工具嘅痛點

痛點	表現
圖形工具門檻高	Figma、AE 需要學習成本，非設計師用唔起
AI 輸出「AI 味」太重	紫色漸變 / emoji 圖標 / 千篇一律嘅圓角卡片——一眼就睇得出 AI Slop
品牌一致性無辦法保證	AI 從記憶估品牌色，搞到顏色唔準、Logo 變形
跨會話能力碎片化	每次都要從頭 prompt，無辦法形成體系化設計能力
交付格式單一	要 PPT 就要重新人手轉，要視頻就要開 AE
設計方向無從入手	需求模糊嘅時候 AI 憑通用直覺亂咁做，浪費時間
Claude Design 有 quota 限制	訂閲制，並行跑 Agent 有限制，無辦法導出 MP4 / 可編輯 PPTX

Huashu Design 嘅定位

你說一句話 → Agent 讀懂設計意圖 → 生成專業級 HTML 原型/動畫/幻燈片
                 → 自動導出 MP4 / GIF / PPTX / PDF

唔係「AI 做得還算可以」嗰種水平——係睇落好似大廠設計團隊做嘅。

核心能力總覽

能力	交付物	典型耗時
交互原型（App / Web）	單文件 HTML · 真 iPhone 機框 · 可以點擊 · Playwright 驗證	10–15 分鐘
演講幻燈片	HTML deck（瀏覽器演講）+ 可以編輯嘅 PPTX（真文本框）	15–25 分鐘
時間軸動畫	MP4（25fps / 60fps 插幀）+ GIF（palette 優化）+ BGM	8–12 分鐘
設計變體	3+ 並排對比 · Tweaks 實時調參 · 跨維度探索	10 分鐘
信息圖 / 數據可視化	印刷級排版 · 可以導出 PDF / PNG 300dpi / SVG	10 分鐘
設計方向顧問	5 流派 × 20 種設計哲學 · 推薦 3 個方向 · 並行生成 Demo	5 分鐘
5 維度專家評審	雷達圖 + Keep/Fix/Quick Wins · 可以操作嘅修復清單	3 分鐘

安裝方法

一行命令安裝

npx skills add alchaincyf/huashu-design

跨 Agent 通用——Claude Code、Cursor、Codex CLI、OpenClaw、Hermes、Trae，任何支援 markdown skill 嘅 Agent 都可以安裝，唔使額外配置。

注意：SKILL.md 同 references 文檔係用中文寫嘅，但 Agent 係雙語嘅——無論你用中文定係英文問，都可以正常運作。

如何使用

安裝之後，喺 Agent 對話框入面直接講就得，唔需要任何按鈕或者面板操作。

基礎 Prompt 模板

# 做一個 App 原型
做一個 AI 番茄鍾 iOS App 原型，需要 4 個核心屏幕：
主計時頁、任務列表、專注統計、設置，要求真能點擊切換

# 做一套幻燈片
做一份關於「AI 如何改變軟件開發」的演講 PPT，
推薦 3 個風格方向讓我選，然後做成 12 頁 deck

# 做一段動畫
把我們產品的核心工作流做成 60 秒宣傳動畫，
漸進展示 5 個核心步驟，最後品牌 Logo 收尾，導出 MP4

# 做一張信息圖
把這份季度數據做成一張雜誌級信息圖，
橫向對比 3 個競品，印刷級排版，導出 PDF 和 PNG

# 請求設計評審
幫我對這個設計方案做 5 維度專家評審，
給出雷達圖評分和具體改進清單

使用場景

產品團隊

場景：PM 需要一份產品發佈宣傳動畫，但冇設計師資源。

「我們要發佈新版本，主要功能是 AI 智能代碼審查。
幫我做一個 45 秒的產品發佈動畫，展示核心三步流程，
風格參考 Linear 的極簡美學，最後導出帶 BGM 的 MP4」

→ 15 分鐘內得到一個有背景音樂嘅產品宣傳片，可以直接發去推特 / B 站。

獨立開發者

場景：準備 App Store 上架，需要展示核心功能嘅截圖同原型。

「幫我做一個 iPhone 15 Pro 機框的 App 原型，
產品是「聲音日記」——錄音 + AI 轉文字 + 情緒分析，
4 個屏幕：錄音主屏、歷史列表、單條日記詳情、情緒統計圖表，
每個屏幕要放真實的 UI 內容，而不是灰色佔位符」

→ 10 分鐘內得到一個可以點擊演示嘅單文件 HTML 原型。

演講者 / 講師

場景：聽日要做技術分享，需要一套高質素 PPT。

「做一份技術分享 PPT，主題是「大模型 RAG 架構演進」，
受眾是中級工程師，需要 15 頁，包含原理圖、代碼片段、
最佳實踐對比，用科技感深色主題，最後導出可編輯的 PPTX」

→ 20 分鐘內得到一套 HTML 版（可以喺瀏覽器全屏演講）+ 真正可以編輯嘅 PPTX（文字位置可以喺 PowerPoint 入面調整）。

設計師

場景：客戶需求描述得模糊，需要快速探索設計方向。

「客戶是做有機食品電商的，想做一個 App 改版，
需求只知道「要高端、自然、信任感」，
幫我從 20 種設計哲學裏推薦 3 個差異化方向，
每個方向生成一個 Demo 讓客戶選」

→ 5 分鐘內得到 3 個風格完全唔同嘅方向 Demo，客戶直接揀——唔再靠把口溝通。

數據分析師 / 運營

場景：季度彙報，需要將數據做成直觀嘅可視化報告。

「把以下 Q1 數據做成一張雜誌級信息圖：
DAU: 12萬→18萬→23萬, 付費率: 3.2%→4.1%→5.6%,
ARPU: ¥45→¥52→¥61
競品 A/B/C 對比，風格參考 The Economist 的數據版式，
導出 300dpi PNG 和矢量 PDF」

→ 10 分鐘內得到一張印刷級數據圖表，可以直接放入 PPT 或者發佈。

完整使用示例

示例一：iOS App 原型（帶品牌資產）

我有一個應用叫「Muse」，是 AI 驅動的寫作助手。
品牌色是深藍 #1A2744 和金色 #F5C842，我已經有 logo.svg。
幫我做一個 iPhone 15 Pro 原型：
1. 歡迎 / 登錄頁
2. 主編輯器（左側文檔列表 + 右側編輯區）
3. AI 建議浮層（顯示 3 條改寫建議）
4. 個人設置頁

要求：真能點擊切換，狀態欄 + 靈動島正確顯示，
用我提供的品牌色而不是亂猜

Agent 執行流程：

1. 品牌資產協議：讀取 logo.svg → grep 色值 → 寫 brand-spec.md → 固化 CSS 變量
2. 逐屏生成 HTML，<iPhone15Pro> 機框精確包裹
3. 用 Playwright 驗證每個頁面嘅點擊跳轉
4. 交付單文件 HTML（所有屏幕合併）

示例二：產品動畫 + MP4 導出

幫我做一個 30 秒的產品發佈動畫，主題是「Warp 2.0 上線」：
- 0-5s：黑屏 + 終端光標閃爍，逐字打出 "warp 2.0"
- 5-15s：3 個核心功能卡片依次飛入：AI Agent / Drive Sync / Team Collab
- 15-25s：實際界面截圖 zoom in + 高光框
- 25-30s：Logo 收尾 + 品牌色呼吸動畫

導出：MP4 25fps + 60fps 插幀版本 + GIF + 加上 bgm-tech.mp3

自動調用嘅工具鏈：

# Agent 內部依次執行：
node scripts/render-video.js     # HTML → 原始 MP4
bash scripts/convert-formats.sh    # MP4 → 60fps + GIF
bash scripts/add-music.sh       # MP4 + bgm-tech.mp3 → 成片

示例三：5 維度設計評審

幫我評審這個設計方案（附上 screenshot.png）：
- 5 個維度各打 0-10 分
- 輸出雷達圖
- 給出 Keep 列表（做得好要保留的）
- 給出 Fix 列表（必須修改的）
- 給出 Quick Wins（30 分鐘內能改完的優化）

輸出樣例：

哲學一致性：7/10
視覺層級：8/10
細節執行：6/10
功能性：9/10
創新性：5/10

[雷達圖 SVG]

Keep：
 顏色系統剋制統一
 主要操作按鈕的視覺權重清晰

Fix：
 三級標題字號與正文差異太小，層級不明
 圖標風格混用（部分實心部分描邊）

Quick Wins（< 30 min）：
→ h3 字號從 14px 改為 16px，加 font-weight: 600
→ 統一圖標集（全部換 Heroicons 描邊版）
→ 按鈕 padding 從 8px 增到 12px，增加點擊區域

示例四：Tweaks 實時變體

幫我做一個產品落地頁的 3 種配色變體：
- 深色極簡（黑底白字）
- 明亮活潑（白底 + 藍綠漸變 CTA）
- 商務正式（深藍 + 金色 Accent）

要求：左側 Tweaks 面板可以一鍵切換這 3 種方案，
切換實時生效，刷新後也能記住上次選擇

→ 單個 HTML 文件，左側切換面板，localStorage 持久化，拉俾客戶直接喺瀏覽器入面睇 3 種效果。

核心機制詳解

品牌資產協議（5 步硬流程）

涉及具體品牌時強制執行，絕對唔會從記憶估顏色：

步驟	動作
1 · 問	詢問用戶有冇 logo / 產品截圖 / 配色規範 / 字體
2 · 搜官方品牌頁	`<brand>.com/brand` 、`press.<brand>.com`、產品頁
3 · 下載資產	SVG → 官網 HTML 全文 → 產品截圖取色（三條兜底）
4 · grep 提取色值	從實際資產文件入面抓 `#xxxxxx`，按頻率排序，過濾黑白灰
5 · 固化 spec	寫 `brand-spec.md` + CSS 變量 `var(--brand-primary)`

A/B 測試數據：v2 協議（5 步強流程）比起 v1（寬鬆流程）穩定性方差低 5 倍。

設計方向顧問（Fallback 機制）

需求模糊嗰陣觸發，而唔係憑直覺硬做：

5 大流派 × 20 種設計哲學：

• 極簡主義流派：Less is More / Quiet Luxury / Functional Minimalism
• 有機自然流派：Biomorphic / Wabi-Sabi / Earth Material
• 數字未來流派：Cyberpunk / Glassmorphism / Neumorphism
• 經典優雅流派：Swiss Grid / Editorial Serif / Art Deco
• 文化融合流派：Japandi / Bauhaus Digital / Memphis Revival

每次推薦 3 個必須來自唔同流派嘅方向，並行生成 3 個 Demo 俾用戶揀，再進入執行流程。

Motion Design 引擎（Stage + Sprite）

4 個核心 API 覆蓋所有動畫需求：

// useTime：獲取當前時間（0-1 歸一化）
const t = useTime({ duration: 30000 });

// useSprite：時間段內插值
const opacity = useSprite(t, { start: 0, end: 0.5, from: 0, to: 1 });

// interpolate：範圍映射
const x = interpolate(t, [0, 1], [-100, 100]);

// Easing：緩動函數
Easing.easeInOutCubic(t)
Easing.spring(t, { stiffness: 100, damping: 15 })

導出工具鏈：

# HTML → 原始 MP4
node scripts/render-video.js --input animation.html --fps 25 --output out.mp4

# MP4 → 60fps 插幀
bash scripts/convert-formats.sh --input out.mp4 --fps 60

# GIF（palette 優化，文件更小更清晰）
bash scripts/convert-formats.sh --input out.mp4 --format gif

# 加 BGM（6 首場景化配樂）
bash scripts/add-music.sh --video out.mp4 --bgm assets/bgm-tech.mp3

Junior Designer 工作流

默認工作模式，防止「做完先發現方向錯咗」：

1. 先批量問清楚所有問題，等用戶一次性答完再動手
2. HTML 裏先寫 assumptions + placeholder + reasoning 註釋
3. 儘早 show（哪怕只是灰色方塊）→ 等確認 → 再填充
4. 填充內容 → show → 變體 → show → Tweaks → show
5. 用 Playwright 跑一遍，肉眼確認瀏覽器裏真的能用

反 AI Slop 規則

主動避開 AI 視覺通病：

禁止	替代
紫色漸變背景	經過設計嘅配色系統
emoji 替代圖標	Heroicons / Lucide / SF Symbols
圓角 + 左 border accent 卡片	乾淨嘅 CSS Grid 排版
SVG 手繪人臉	真實產品截圖 / Unsplash 圖片
Inter 作 display 字體	經過選擇嘅 serif display（GT Alpina、Freight 等）
CSS 剪影代替產品圖	強制尋找或 AI 生成真實產品圖
Lorem Ipsum	真實或符合語境嘅內容

倉庫結構

huashu-design/
├── SKILL.md           # 主文檔（Agent 讀的核心規則，中文）
├── README.md           # 英文 README
├── README.zh.md         # 中文 README（本文檔參考源）
│
├── assets/            # Starter 組件庫
│  ├── animations.jsx      # Stage + Sprite + Easing + interpolate
│  ├── ios_frame.jsx       # iPhone 15 Pro 精確機框（靈動島 / 狀態欄）
│  ├── android_frame.jsx     # Android 機框
│  ├── macos_window.jsx     # macOS 窗口
│  ├── browser_window.jsx    # 瀏覽器窗口
│  ├── deck_stage.js       # HTML 幻燈片引擎
│  ├── deck_index.html      # 多文件 deck 拼接器
│  ├── design_canvas.jsx     # 並排變體展示
│  ├── showcases/        # 24 個預製樣例（8 場景 × 3 風格）
│  ├── sfx/           # 音效素材庫
│  ├── bgm-tech.mp3       # 科技感 BGM
│  ├── bgm-educational.mp3    # 教育 / 教程 BGM
│  ├── bgm-ad.mp3        # 廣告 / 產品宣傳 BGM
│  ├── bgm-tutorial.mp3     # 操作教程 BGM
│  └── personal-asset-index.example.json # 個人資產索引模板
│
├── references/          # 深入子文檔（按任務類型分）
│  ├── design-styles.md     # 20 種設計哲學詳細庫
│  ├── animation-pitfalls.md   # 動畫常見坑與規避
│  ├── animation-best-practices.md
│  ├── slide-decks.md      # 幻燈片製作詳細規範
│  ├── editable-pptx.md     # 可編輯 PPTX 導出規範
│  ├── critique-guide.md     # 5 維評審詳細標準
│  ├── video-export.md      # 視頻導出完整流程
│  ├── tweaks-system.md     # Tweaks 實時變體系統
│  ├── cinematic-patterns.md   # 電影感動畫模式庫
│  ├── audio-design-rules.md   # 音效設計規則
│  ├── content-guidelines.md   # 內容寫作規範
│  ├── verification.md      # 事實核查規則
│  ├── workflow.md        # 工作流詳細說明
│  ├── react-setup.md      # React 組件配置
│  └── scene-templates.md    # 場景模板庫
│
├── scripts/           # 導出工具鏈
│  ├── render-video.js      # HTML → MP4
│  ├── convert-formats.sh    # MP4 → 60fps + GIF
│  ├── add-music.sh       # MP4 + BGM 合成
│  ├── export_deck_pdf.mjs    # Deck → PDF
│  ├── export_deck_pptx.mjs   # Deck → PPTX
│  ├── html2pptx.js       # DOM → 真文本框 PPTX
│  └── verify.py         # 交付物驗證
│
└── demos/            # 能力演示（c* = capability，w* = workflow）

同 Claude Design 嘅對比

	Claude Design	Huashu Design
形態	網頁產品（瀏覽器入面用）	Skill（Claude Code 入面用）
配額	訂閲 quota 限制	API 消耗，並行跑 Agent 唔受限制
交付物	畫布內 + 可以導出 Figma	HTML / MP4 / GIF / 可以編輯嘅 PPTX / PDF
操作方式	GUI（點、拖、改）	對話（講嘢等 Agent 做完）
複雜動畫	有限	Stage + Sprite 時間軸 + 60fps 導出
跨 Agent	僅限 Claude.ai	Claude Code / Cursor / Codex / OpenClaw / Hermes
價格	訂閲制	個人免費

核心差異：Claude Design 係更好嘅圖形工具，Huashu Design 係令圖形工具呢層消失。

已知限制

限制	說明
唔支援 Figma 級圖層編輯	輸出係 HTML，可以截圖 / 錄屏 / 導圖，但無辦法喺 Keynote 入面拖動文字位置
唔支援物理模擬類動畫	3D 渲染、粒子系統、布料模擬超出 Skill 嘅範圍
全新品牌效果會下降	完全冇任何品牌資產嗰陣，由零開始做高保真，質素大約 60-65 分
超長內容處理能力有限	50 頁以上嘅 deck 或者超長動畫，Agent 上下文可能唔夠

呢個係一個 80 分嘅 Skill，唔係 100 分嘅產品。對唔願意打開圖形界面嘅人來講，80 分嘅 Skill 比 100 分嘅產品好用。

常見問題同解決方案

Q1：安裝之後 Agent 冇使用 Skill 入面嘅規則

原因：Skill 冇正確加載，或者 Agent 唔支援 skills.sh 協議。

解決：

# 確認安裝成功
npx skills list

# 如果列表裏沒有 alchaincyf/huashu-design，重新安裝
npx skills add alchaincyf/huashu-design

# 重啓 Claude Code 後，明確在 prompt 裏激活
「使用 huashu-design skill，幫我做一個...」

Q2：生成嘅品牌色唔啱 / Logo 變形

原因：Agent 從「記憶」入面估品牌色，而唔係從實際資產提取。

解決：喺 prompt 入面明確提供資產：

「我的品牌色是 #2D6BE4（主色）和 #FF6B35（強調色），
Logo 文件在 ./assets/logo.svg，
請先讀取這個 SVG 文件，從裏面 grep 顏色，
再開始設計，不要猜顏色」

或者觸發品牌協議嘅完整 5 步流程：

「我要做 Stripe 風格的設計，請先執行品牌資產協議，
去官網抓取真實色值，不要從記憶推斷」

Q3：導出嘅 MP4 冇聲音

原因：add-music.sh 依賴 ffmpeg，需要預先安裝。

解決：

# macOS
brew install ffmpeg

# Ubuntu / Debian
sudo apt-get install ffmpeg

# Windows
# 從 https://ffmpeg.org/download.html 下載，添加到 PATH

# 驗證安裝
ffmpeg -version

Q4：PPTX 導出之後喺 PowerPoint 入面打開係圖片，唔可以編輯文字

原因：export_deck_pptx.mjs 用嘅係截圖嵌入方式，而唔係 html2pptx.js 嘅 DOM 翻譯方式。

解決：喺 prompt 入面明確指定：

「導出可編輯的 PPTX，要求文字框在 PowerPoint 裏
雙擊可以改文字，不是截圖嵌入，
使用 html2pptx.js 的 DOM 翻譯方式」

Q5：原型點擊冇反應 / 頁面跳轉錯誤

原因：Agent 生成嘅 HTML 狀態跳轉邏輯有 Bug，或者 Playwright 驗證冇通過。

解決：

「請用 Playwright 驗證一下這個原型的所有點擊跳轉：
1. 打開 prototype.html
2. 點擊首頁的「開始」按鈕，確認跳到第 2 屏
3. 點擊底部 Tab 的每一項，確認對應內容出現
4. 如果有任何跳轉失敗，直接修復再驗證」

Q6：動畫卡頓 / 幀率唔穩定

原因：動畫入面有大量複雜 CSS 計算或者未優化嘅重繪。

解決：

「這個動畫在瀏覽器裏有卡頓，請檢查：
1. 是否有 top/left 定位動畫（改用 transform）
2. 是否有觸發 layout 的屬性變化（width/height）
3. 是否所有動畫元素都加了 will-change: transform
4. 使用 animation-best-practices.md 裏的規則優化」

Q7：生成效果有「AI Slop」嘅感覺（紫漸變 / emoji 圖標）

原因：提示詞太過寬泛，冇約束設計語言。

解決：提供更具體嘅風格參照：

「風格參考 Linear 的極簡暗色系：
- 不要紫色漸變背景
- 圖標用 Lucide（描邊風格，不用 emoji）
- 字體用 Inter 做正文，Söhne 做標題
- 主色 #5E6AD2，背景 #0F0F0F，卡片 #1A1A1A
- 圓角統一用 6px，不要大圓角
- 反 AI Slop 規則全部執行」

Q8：GIF 文件太大 / 畫質差

原因：默認 palette 參數未優化。

解決：

# 手動指定高質量參數
bash scripts/convert-formats.sh \
 --input animation.mp4 \
 --format gif \
 --fps 15 \
 --width 800 \
 --palette-colors 256 \
 --dither floyd_steinberg

進階使用技巧

技巧一：俾 Agent 提供個人資產索引

參考 assets/personal-asset-index.example.json，建立自己嘅資產索引文件：

{
 "brand": {
  "name": "MyApp",
  "logo": "./assets/logo.svg",
  "colors": {
   "primary": "#2D6BE4",
   "accent": "#FF6B35",
   "background": "#FAFAFA"
  },
  "fonts": ["Inter", "GT Alpina"],
  "screenshots": ["./assets/app-screenshot-1.png"]
 }
}

然後喺 prompt 開頭引用：

「請先讀取 ./assets/personal-asset-index.json，
瞭解我的品牌資產，再開始設計」

技巧二：並行生成多個方向

「幫我並行生成 3 個不同風格的落地頁 Demo：
1. 方向 A：極簡日系（參考 Muji）
2. 方向 B：科技感暗色（參考 Vercel）
3. 方向 C：温暖有機（參考 Notion）

三個 Demo 同時生成，完成後展示在同一個 design_canvas.jsx 裏並排對比」

技巧三：Cinematic 動畫模式

使用 references/cinematic-patterns.md 入面嘅模式做電影感動畫：

「做一個產品 Hero 動畫，使用 cinematic-patterns.md 裏的
「Terminal Typewriter」+ 「Card Cascade」+ 「Brand Reveal」模式，
總時長 25 秒，導出帶 BGM 的 MP4」

技巧四：事實核查先行（Principle #0）

當設計涉及真實產品或者數據嗰陣，Agent 會先用 WebSearch 驗證：

「幫我做一張 DJI Osmo Pocket 4 的產品對比信息圖，對比 Pocket 3，包含規格參數、價格、核心功能差異」

→ Agent 會先搜索確認 Pocket 4 係咪存在（防止幻覺），再做設計。

延伸資源

• 作者官網 huasheng.ai^[3]
• Live Demo：「聊聊 skill」演講 Deck^[4]
• 作者 X / Twitter @AlchainHust^[2]
• YouTube 頻道（花叔）^[5]
• B 站（花叔）^[6]
• 提交 Issue^[7]
• 同作者另一個 12k star 項目：Nuwa.skill^[8]

文檔基於 alchaincyf/huashu-design^[9]（ 12k，上線 16 日）整理，結合 README.zh.md、README.md、倉庫結構同 SKILL.md 核心規則綜合撰寫。

引用連結

[1] alchaincyf@gmail.com: mailto:alchaincyf@gmail.com
[2] X / Twitter @AlchainHust: https://x.com/AlchainHust
[3] 作者官網 huasheng.ai: https://www.huasheng.ai
[4] Live Demo：「聊聊 skill」演講 Deck: https://skill-huasheng.vercel.app
[5] YouTube 頻道（花叔）: https://www.youtube.com/@Alchain
[6] B 站（花叔）: https://space.bilibili.com/14097567
[7] 提交 Issue: https://github.com/alchaincyf/huashu-design/issues
[8] 同作者另一個 12k star 項目：Nuwa.skill: https://github.com/alchaincyf/nuwa
[9] alchaincyf/huashu-design: https://github.com/alchaincyf/huashu-design

項目簡介

Huashu Design 是一個面向 AI 編程 Agent 的 原生 HTML 設計 Skill，讓你只需在 Claude Code（或其他兼容 Agent）裏打一句話，3 到 30 分鐘內就能拿到一份可交付的專業設計成品**。

「打字。回車。一份能交付的設計。」

它不是一個圖形界面工具，而是一個裝進 Agent 的設計能力包——包含 20 種設計哲學、5 維評審體系、品牌資產協議、動畫引擎、以及從 HTML 到 MP4/GIF/PPTX/PDF 的完整導出工具鏈。

這個 README 裏的每一個演示動畫，都是 huashu-design 自己生成的。

解決什麼問題？

現有工具的痛點

痛點	表現
圖形工具門檻高	Figma、AE 需要學習成本，非設計師用不起來
AI 輸出"AI 味"太重	紫色漸變 / emoji 圖標 / 千篇一律的圓角卡片——一眼 AI Slop
品牌一致性無法保證	AI 從記憶猜品牌色，導致顏色不準、Logo 變形
跨會話能力碎片化	每次都要從頭 prompt，無法形成體系化設計能力
交付格式單一	要 PPT 得重新手工轉，要視頻得開 AE
設計方向無從下手	需求模糊時 AI 憑通用直覺亂做，浪費時間
Claude Design 有 quota 限制	訂閲制，並行跑 Agent 受限，無法導出 MP4 / 可編輯 PPTX

Huashu Design 的定位

你說一句話 → Agent 讀懂設計意圖 → 生成專業級 HTML 原型/動畫/幻燈片
                 → 自動導出 MP4 / GIF / PPTX / PDF

不是「AI 做的還行」那種水平——是看起來像大廠設計團隊做的。

核心能力總覽

能力	交付物	典型耗時
交互原型（App / Web）	單文件 HTML · 真 iPhone 機框 · 可點擊 · Playwright 驗證	10–15 min
演講幻燈片	HTML deck（瀏覽器演講）+ 可編輯 PPTX（真文本框）	15–25 min
時間軸動畫	MP4（25fps / 60fps 插幀）+ GIF（palette 優化）+ BGM	8–12 min
設計變體	3+ 並排對比 · Tweaks 實時調參 · 跨維度探索	10 min
信息圖 / 數據可視化	印刷級排版 · 可導 PDF / PNG 300dpi / SVG	10 min
設計方向顧問	5 流派 × 20 種設計哲學 · 推薦 3 方向 · 並行生成 Demo	5 min
5 維度專家評審	雷達圖 + Keep/Fix/Quick Wins · 可操作修復清單	3 min

安裝方法

一行命令安裝

npx skills add alchaincyf/huashu-design

跨 Agent 通用——Claude Code、Cursor、Codex CLI、OpenClaw、Hermes、Trae，任意支持 markdown skill 的 Agent 均可安裝，無需額外配置。

注意：SKILL.md 和 references 文檔以中文寫成，但 Agent 是雙語的——無論你用中文還是英文提問，都能正常工作。

如何使用

安裝後，在 Agent 對話框裏直接說話即可，無需任何按鈕或面板操作。

基礎 Prompt 模板

# 做一個 App 原型
做一個 AI 番茄鍾 iOS App 原型，需要 4 個核心屏幕：
主計時頁、任務列表、專注統計、設置，要求真能點擊切換

# 做一套幻燈片
做一份關於「AI 如何改變軟件開發」的演講 PPT，
推薦 3 個風格方向讓我選，然後做成 12 頁 deck

# 做一段動畫
把我們產品的核心工作流做成 60 秒宣傳動畫，
漸進展示 5 個核心步驟，最後品牌 Logo 收尾，導出 MP4

# 做一張信息圖
把這份季度數據做成一張雜誌級信息圖，
橫向對比 3 個競品，印刷級排版，導出 PDF 和 PNG

# 請求設計評審
幫我對這個設計方案做 5 維度專家評審，
給出雷達圖評分和具體改進清單

使用場景

產品團隊

場景：PM 需要一份產品發佈宣傳動畫，但沒有設計師資源。

「我們要發佈新版本，主要功能是 AI 智能代碼審查。
幫我做一個 45 秒的產品發佈動畫，展示核心三步流程，
風格參考 Linear 的極簡美學，最後導出帶 BGM 的 MP4」

→ 15 分鐘內得到一個帶背景音樂的產品宣傳片，可直接發推特 / B 站。

獨立開發者

場景：做 App Store 上架，需要展示核心功能的截圖和原型。

「幫我做一個 iPhone 15 Pro 機框的 App 原型，
產品是「聲音日記」——錄音 + AI 轉文字 + 情緒分析，
4 個屏幕：錄音主屏、歷史列表、單條日記詳情、情緒統計圖表，
每個屏幕要放真實的 UI 內容，而不是灰色佔位符」

→ 10 分鐘內得到一個可以點擊演示的單文件 HTML 原型。

演講者 / 講師

場景：明天要做技術分享，需要一套高質量 PPT。

「做一份技術分享 PPT，主題是「大模型 RAG 架構演進」，
受眾是中級工程師，需要 15 頁，包含原理圖、代碼片段、
最佳實踐對比，用科技感深色主題，最後導出可編輯的 PPTX」

→ 20 分鐘內得到一套 HTML 版（可在瀏覽器全屏演講）+ 真正可編輯的 PPTX（文字位置可在 PowerPoint 裏調整）。

設計師

場景：客戶需求描述模糊，需要快速探索設計方向。

「客戶是做有機食品電商的，想做一個 App 改版，
需求只知道「要高端、自然、信任感」，
幫我從 20 種設計哲學裏推薦 3 個差異化方向，
每個方向生成一個 Demo 讓客戶選」

→ 5 分鐘內得到 3 個風格完全不同的方向 Demo，客戶直接指——不再靠嘴皮子溝通。

數據分析師 / 運營

場景：季度彙報，需要把數據做成直觀的可視化報告。

「把以下 Q1 數據做成一張雜誌級信息圖：
DAU: 12萬→18萬→23萬, 付費率: 3.2%→4.1%→5.6%,
ARPU: ¥45→¥52→¥61
競品 A/B/C 對比，風格參考 The Economist 的數據版式，
導出 300dpi PNG 和矢量 PDF」

→ 10 分鐘內得到一張印刷級數據圖表，可直接放進 PPT 或發佈。

完整使用示例

示例一：iOS App 原型（帶品牌資產）

我有一個應用叫「Muse」，是 AI 驅動的寫作助手。
品牌色是深藍 #1A2744 和金色 #F5C842，我已經有 logo.svg。
幫我做一個 iPhone 15 Pro 原型：
1. 歡迎 / 登錄頁
2. 主編輯器（左側文檔列表 + 右側編輯區）
3. AI 建議浮層（顯示 3 條改寫建議）
4. 個人設置頁

要求：真能點擊切換，狀態欄 + 靈動島正確顯示，
用我提供的品牌色而不是亂猜

Agent 執行流程：

1. 品牌資產協議：讀取 logo.svg → grep 色值 → 寫 brand-spec.md → 固化 CSS 變量
2. 逐屏生成 HTML，<iPhone15Pro> 機框精確包裹
3. 用 Playwright 驗證每個頁面的點擊跳轉
4. 交付單文件 HTML（所有屏幕合併）

示例二：產品動畫 + MP4 導出

幫我做一個 30 秒的產品發佈動畫，主題是「Warp 2.0 上線」：
- 0-5s：黑屏 + 終端光標閃爍，逐字打出 "warp 2.0"
- 5-15s：3 個核心功能卡片依次飛入：AI Agent / Drive Sync / Team Collab
- 15-25s：實際界面截圖 zoom in + 高光框
- 25-30s：Logo 收尾 + 品牌色呼吸動畫

導出：MP4 25fps + 60fps 插幀版本 + GIF + 加上 bgm-tech.mp3

自動調用的工具鏈：

# Agent 內部依次執行：
node scripts/render-video.js     # HTML → 原始 MP4
bash scripts/convert-formats.sh    # MP4 → 60fps + GIF
bash scripts/add-music.sh       # MP4 + bgm-tech.mp3 → 成片

示例三：5 維度設計評審

幫我評審這個設計方案（附上 screenshot.png）：
- 5 個維度各打 0-10 分
- 輸出雷達圖
- 給出 Keep 列表（做得好要保留的）
- 給出 Fix 列表（必須修改的）
- 給出 Quick Wins（30 分鐘內能改完的優化）

輸出樣例：

哲學一致性：7/10
視覺層級：8/10
細節執行：6/10
功能性：9/10
創新性：5/10

[雷達圖 SVG]

Keep：
 顏色系統剋制統一
 主要操作按鈕的視覺權重清晰

Fix：
 三級標題字號與正文差異太小，層級不明
 圖標風格混用（部分實心部分描邊）

Quick Wins（< 30 min）：
→ h3 字號從 14px 改為 16px，加 font-weight: 600
→ 統一圖標集（全部換 Heroicons 描邊版）
→ 按鈕 padding 從 8px 增到 12px，增加點擊區域

示例四：Tweaks 實時變體

幫我做一個產品落地頁的 3 種配色變體：
- 深色極簡（黑底白字）
- 明亮活潑（白底 + 藍綠漸變 CTA）
- 商務正式（深藍 + 金色 Accent）

要求：左側 Tweaks 面板可以一鍵切換這 3 種方案，
切換實時生效，刷新後也能記住上次選擇

→ 單個 HTML 文件，左側切換面板，localStorage 持久化，拖給客戶直接在瀏覽器裏看 3 種效果。

核心機制詳解

品牌資產協議（5 步硬流程）

涉及具體品牌時強制執行，絕不從記憶猜顏色：

步驟	動作
1 · 問	詢問用戶是否有 logo / 產品截圖 / 配色規範 / 字體
2 · 搜官方品牌頁	`<brand>.com/brand` 、`press.<brand>.com`、產品頁
3 · 下載資產	SVG → 官網 HTML 全文 → 產品截圖取色（三條兜底）
4 · grep 提取色值	從實際資產文件裏抓 `#xxxxxx`，按頻率排序，過濾黑白灰
5 · 固化 spec	寫 `brand-spec.md` + CSS 變量 `var(--brand-primary)`

A/B 測試數據：v2 協議（5 步強流程）比 v1（寬鬆流程）穩定性方差低 5 倍。

設計方向顧問（Fallback 機制）

需求模糊時觸發，而不是憑直覺硬做：

5 大流派 × 20 種設計哲學：

• 極簡主義流派：Less is More / Quiet Luxury / Functional Minimalism
• 有機自然流派：Biomorphic / Wabi-Sabi / Earth Material
• 數字未來流派：Cyberpunk / Glassmorphism / Neumorphism
• 經典優雅流派：Swiss Grid / Editorial Serif / Art Deco
• 文化融合流派：Japandi / Bauhaus Digital / Memphis Revival

每次推薦 3 個必須來自不同流派的方向，並行生成 3 個 Demo 讓用戶選，再進入執行流程。

Motion Design 引擎（Stage + Sprite）

4 個核心 API 覆蓋所有動畫需求：

// useTime：獲取當前時間（0-1 歸一化）
const t = useTime({ duration: 30000 });

// useSprite：時間段內插值
const opacity = useSprite(t, { start: 0, end: 0.5, from: 0, to: 1 });

// interpolate：範圍映射
const x = interpolate(t, [0, 1], [-100, 100]);

// Easing：緩動函數
Easing.easeInOutCubic(t)
Easing.spring(t, { stiffness: 100, damping: 15 })

導出工具鏈：

# HTML → 原始 MP4
node scripts/render-video.js --input animation.html --fps 25 --output out.mp4

# MP4 → 60fps 插幀
bash scripts/convert-formats.sh --input out.mp4 --fps 60

# GIF（palette 優化，文件更小更清晰）
bash scripts/convert-formats.sh --input out.mp4 --format gif

# 加 BGM（6 首場景化配樂）
bash scripts/add-music.sh --video out.mp4 --bgm assets/bgm-tech.mp3

Junior Designer 工作流

默認工作模式，防止「做完才發現方向錯了」：

1. 先批量問清楚所有問題，等用戶一次性答完再動手
2. HTML 裏先寫 assumptions + placeholder + reasoning 註釋
3. 儘早 show（哪怕只是灰色方塊）→ 等確認 → 再填充
4. 填充內容 → show → 變體 → show → Tweaks → show
5. 用 Playwright 跑一遍，肉眼確認瀏覽器裏真的能用

反 AI Slop 規則

主動避開 AI 視覺通病：

禁止	替代
紫色漸變背景	經過設計的配色系統
emoji 替代圖標	Heroicons / Lucide / SF Symbols
圓角 + 左 border accent 卡片	乾淨的 CSS Grid 排版
SVG 手繪人臉	真實產品截圖 / Unsplash 圖片
Inter 作 display 字體	經過選擇的 serif display（GT Alpina、Freight 等）
CSS 剪影代替產品圖	強制尋找或 AI 生成真實產品圖
Lorem Ipsum	真實或符合語境的內容

倉庫結構

huashu-design/
├── SKILL.md           # 主文檔（Agent 讀的核心規則，中文）
├── README.md           # 英文 README
├── README.zh.md         # 中文 README（本文檔參考源）
│
├── assets/            # Starter 組件庫
│  ├── animations.jsx      # Stage + Sprite + Easing + interpolate
│  ├── ios_frame.jsx       # iPhone 15 Pro 精確機框（靈動島 / 狀態欄）
│  ├── android_frame.jsx     # Android 機框
│  ├── macos_window.jsx     # macOS 窗口
│  ├── browser_window.jsx    # 瀏覽器窗口
│  ├── deck_stage.js       # HTML 幻燈片引擎
│  ├── deck_index.html      # 多文件 deck 拼接器
│  ├── design_canvas.jsx     # 並排變體展示
│  ├── showcases/        # 24 個預製樣例（8 場景 × 3 風格）
│  ├── sfx/           # 音效素材庫
│  ├── bgm-tech.mp3       # 科技感 BGM
│  ├── bgm-educational.mp3    # 教育 / 教程 BGM
│  ├── bgm-ad.mp3        # 廣告 / 產品宣傳 BGM
│  ├── bgm-tutorial.mp3     # 操作教程 BGM
│  └── personal-asset-index.example.json # 個人資產索引模板
│
├── references/          # 深入子文檔（按任務類型分）
│  ├── design-styles.md     # 20 種設計哲學詳細庫
│  ├── animation-pitfalls.md   # 動畫常見坑與規避
│  ├── animation-best-practices.md
│  ├── slide-decks.md      # 幻燈片製作詳細規範
│  ├── editable-pptx.md     # 可編輯 PPTX 導出規範
│  ├── critique-guide.md     # 5 維評審詳細標準
│  ├── video-export.md      # 視頻導出完整流程
│  ├── tweaks-system.md     # Tweaks 實時變體系統
│  ├── cinematic-patterns.md   # 電影感動畫模式庫
│  ├── audio-design-rules.md   # 音效設計規則
│  ├── content-guidelines.md   # 內容寫作規範
│  ├── verification.md      # 事實核查規則
│  ├── workflow.md        # 工作流詳細說明
│  ├── react-setup.md      # React 組件配置
│  └── scene-templates.md    # 場景模板庫
│
├── scripts/           # 導出工具鏈
│  ├── render-video.js      # HTML → MP4
│  ├── convert-formats.sh    # MP4 → 60fps + GIF
│  ├── add-music.sh       # MP4 + BGM 合成
│  ├── export_deck_pdf.mjs    # Deck → PDF
│  ├── export_deck_pptx.mjs   # Deck → PPTX
│  ├── html2pptx.js       # DOM → 真文本框 PPTX
│  └── verify.py         # 交付物驗證
│
└── demos/            # 能力演示（c* = capability，w* = workflow）

與 Claude Design 的對比

	Claude Design	Huashu Design
形態	網頁產品（瀏覽器裏用）	Skill（Claude Code 裏用）
配額	訂閲 quota 限制	API 消耗，並行跑 Agent 不受限
交付物	畫布內 + 可導 Figma	HTML / MP4 / GIF / 可編輯 PPTX / PDF
操作方式	GUI（點、拖、改）	對話（說話等 Agent 做完）
複雜動畫	有限	Stage + Sprite 時間軸 + 60fps 導出
跨 Agent	僅限 Claude.ai	Claude Code / Cursor / Codex / OpenClaw / Hermes
價格	訂閲制	個人免費

核心差異：Claude Design 是更好的圖形工具，Huashu Design 是讓圖形工具這層消失。

已知限制

限制	說明
不支持 Figma 級圖層編輯	輸出是 HTML，可截圖 / 錄屏 / 導圖，但無法在 Keynote 裏拖動文字位置
不支持物理模擬類動畫	3D 渲染、粒子系統、布料模擬超出 Skill 邊界
全新品牌效果會下降	完全沒有任何品牌資產時，從空白做高保真，質量約在 60-65 分
超長內容處理能力有限	50 頁以上的 deck 或超長動畫，Agent 上下文可能不夠

這是一個 80 分的 Skill，不是 100 分的產品。對不願意打開圖形界面的人，80 分的 Skill 比 100 分的產品好用。

常見問題與解決方案

Q1：安裝後 Agent 沒有使用 Skill 裏的規則

原因：Skill 沒有正確加載，或 Agent 不支持 skills.sh 協議。

解決：

# 確認安裝成功
npx skills list

# 如果列表裏沒有 alchaincyf/huashu-design，重新安裝
npx skills add alchaincyf/huashu-design

# 重啓 Claude Code 後，明確在 prompt 裏激活
「使用 huashu-design skill，幫我做一個...」

Q2：生成的品牌色不對 / Logo 變形

原因：Agent 從"記憶"裏猜品牌色，而不是從實際資產提取。

解決：在 prompt 裏明確提供資產：

「我的品牌色是 #2D6BE4（主色）和 #FF6B35（強調色），
Logo 文件在 ./assets/logo.svg，
請先讀取這個 SVG 文件，從裏面 grep 顏色，
再開始設計，不要猜顏色」

或者觸發品牌協議的完整 5 步流程：

「我要做 Stripe 風格的設計，請先執行品牌資產協議，
去官網抓取真實色值，不要從記憶推斷」

Q3：導出的 MP4 沒有聲音

原因：add-music.sh 依賴 ffmpeg，需要預先安裝。

解決：

# macOS
brew install ffmpeg

# Ubuntu / Debian
sudo apt-get install ffmpeg

# Windows
# 從 https://ffmpeg.org/download.html 下載，添加到 PATH

# 驗證安裝
ffmpeg -version

Q4：PPTX 導出後在 PowerPoint 裏打開是圖片，不能編輯文字

原因：export_deck_pptx.mjs 用的是截圖嵌入方式，而不是 html2pptx.js 的 DOM 翻譯方式。

解決：在 prompt 裏明確指定：

「導出可編輯的 PPTX，要求文字框在 PowerPoint 裏
雙擊可以改文字，不是截圖嵌入，
使用 html2pptx.js 的 DOM 翻譯方式」

Q5：原型點擊沒反應 / 頁面跳轉錯誤

原因：Agent 生成的 HTML 狀態跳轉邏輯有 Bug，或 Playwright 驗證沒有通過。

解決：

「請用 Playwright 驗證一下這個原型的所有點擊跳轉：
1. 打開 prototype.html
2. 點擊首頁的「開始」按鈕，確認跳到第 2 屏
3. 點擊底部 Tab 的每一項，確認對應內容出現
4. 如果有任何跳轉失敗，直接修復再驗證」

Q6：動畫卡頓 / 幀率不穩定

原因：動畫裏有大量複雜 CSS 計算或未優化的重繪。

解決：

「這個動畫在瀏覽器裏有卡頓，請檢查：
1. 是否有 top/left 定位動畫（改用 transform）
2. 是否有觸發 layout 的屬性變化（width/height）
3. 是否所有動畫元素都加了 will-change: transform
4. 使用 animation-best-practices.md 裏的規則優化」

Q7：生成效果有「AI Slop」感（紫漸變 / emoji 圖標）

原因：提示詞過於寬泛，沒有約束設計語言。

解決：提供更具體的風格參照：

「風格參考 Linear 的極簡暗色系：
- 不要紫色漸變背景
- 圖標用 Lucide（描邊風格，不用 emoji）
- 字體用 Inter 做正文，Söhne 做標題
- 主色 #5E6AD2，背景 #0F0F0F，卡片 #1A1A1A
- 圓角統一用 6px，不要大圓角
- 反 AI Slop 規則全部執行」

Q8：GIF 文件太大 / 畫質差

原因：默認 palette 參數未優化。

解決：

# 手動指定高質量參數
bash scripts/convert-formats.sh \
 --input animation.mp4 \
 --format gif \
 --fps 15 \
 --width 800 \
 --palette-colors 256 \
 --dither floyd_steinberg

進階使用技巧

技巧一：給 Agent 提供個人資產索引

參考 assets/personal-asset-index.example.json，建立自己的資產索引文件：

{
 "brand": {
  "name": "MyApp",
  "logo": "./assets/logo.svg",
  "colors": {
   "primary": "#2D6BE4",
   "accent": "#FF6B35",
   "background": "#FAFAFA"
  },
  "fonts": ["Inter", "GT Alpina"],
  "screenshots": ["./assets/app-screenshot-1.png"]
 }
}

然後在 prompt 開頭引用：

「請先讀取 ./assets/personal-asset-index.json，
瞭解我的品牌資產，再開始設計」

技巧二：並行生成多個方向

「幫我並行生成 3 個不同風格的落地頁 Demo：
1. 方向 A：極簡日系（參考 Muji）
2. 方向 B：科技感暗色（參考 Vercel）
3. 方向 C：温暖有機（參考 Notion）

三個 Demo 同時生成，完成後展示在同一個 design_canvas.jsx 裏並排對比」

技巧三：Cinematic 動畫模式

使用 references/cinematic-patterns.md 裏的模式做電影感動畫：

「做一個產品 Hero 動畫，使用 cinematic-patterns.md 裏的
「Terminal Typewriter」+ 「Card Cascade」+ 「Brand Reveal」模式，
總時長 25 秒，導出帶 BGM 的 MP4」

技巧四：事實核查先行（Principle #0）

當設計涉及真實產品或數據時，Agent 會先用 WebSearch 驗證：

「幫我做一張 DJI Osmo Pocket 4 的產品對比信息圖，對比 Pocket 3，包含規格參數、價格、核心功能差異」

→ Agent 會先搜索確認 Pocket 4 是否存在（防止幻覺），再做設計。

延伸資源

• 作者官網 huasheng.ai^[3]
• Live Demo：「聊聊 skill」演講 Deck^[4]
• 作者 X / Twitter @AlchainHust^[2]
• YouTube 頻道（花叔）^[5]
• B 站（花叔）^[6]
• 提交 Issue^[7]
• 同作者另一個 12k star 項目：Nuwa.skill^[8]

文檔基於 alchaincyf/huashu-design^[9]（ 12k，上線 16 天）整理，結合 README.zh.md、README.md、倉庫結構及 SKILL.md 核心規則綜合撰寫。