Huashu Design：一個 HTML 原生的設計 skill，運行在 Claude Code 裡

從一句描述到設計交付

Huashu Design 將自己描述為一個用於 Claude Code 的 HTML 原生設計技能，但說明稱它也適用於 Cursor、Trae、Hermes、OpenClaw 或任何能夠使用 Markdown 技能的 agent。其工作方式是，使用者對 agent 說一句話，然後根據交付類型，在 3 到 30 分鐘內，技能會生成一個可點擊的 HTML 應用原型、一個瀏覽器簡報加可編輯的 PPTX、一個帶 BGM 的 MP4 動畫、一個可匯出 PDF/PNG/SVG 的資訊圖，或者一組設計變體。README 將這一過程定位為純粹的對話驅動：沒有按鈕、沒有面板、沒有 Figma 外掛。

驗收花束設計時，應依 README 的安裝入口載入一個實際花束案例，逐項檢查提示詞、圖片素材、版型與匯出結果。把模型版本、輸入圖片尺寸和產出檔案記下來，並對照專案明列的設定檔與授權文字，不把展示圖當成穩定品質保證。 第 1 次檢查應保留實際輸入、輸出與錯誤訊息，讓這個專案的限制能和文件中的能力逐項對照。

安裝方式以及為什麼需要驗證

README 給出的安裝命令是 npx skills add alchaincyf/huashu-design。但文件警告稱，該技能並非單一檔案；它依賴 references/、assets/、scripts/ 和 demos/ 子目錄，這些子目錄包含 99 個被引用的配方、腳本和資源。它稱，如果安裝後這些子目錄缺失，說明 skills CLI 版本太低（≤1.5.15 存在一個錯誤），需要升級到 1.5.19 以上並重新安裝。如果升級不起作用，README 建議使用 git clone 安裝到某個技能目錄，例如 git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design。

驗收花束設計時，應依 README 的安裝入口載入一個實際花束案例，逐項檢查提示詞、圖片素材、版型與匯出結果。把模型版本、輸入圖片尺寸和產出檔案記下來，並對照專案明列的設定檔與授權文字，不把展示圖當成穩定品質保證。 第 2 次檢查應保留實際輸入、輸出與錯誤訊息，讓這個專案的限制能和文件中的能力逐項對照。

核心機制：品牌資產協議

README 將品牌資產協議描述為該技能中最嚴格的規則。當任務涉及特定品牌（Stripe、Linear、Anthropic、DJI 或使用者自己的公司）時，強制要求五個步驟：詢問六種資產類型（標誌、產品照片、UI 截圖、調色板、字型、品牌指南）；搜尋官方管道；按資產類型下載並使用每種資產的三個回退路徑；驗證並提取，例如透過 grep 從真實資產中提取顏色十六進位值；最後凍結一份 brand-spec.md，列出路徑和 CSS 變數。文件稱，該協議經過 A/B 測試（v1 與 v2，各 6 個 agent），v2 將穩定性方差降低了 5 倍；但未提供該測試的詳細資料。

驗收花束設計時，應依 README 的安裝入口載入一個實際花束案例，逐項檢查提示詞、圖片素材、版型與匯出結果。把模型版本、輸入圖片尺寸和產出檔案記下來，並對照專案明列的設定檔與授權文字，不把展示圖當成穩定品質保證。 第 3 次檢查應保留實際輸入、輸出與錯誤訊息，讓這個專案的限制能和文件中的能力逐項對照。

設計方向顧問與初級設計師工作流

當簡報過於模糊而無法執行時，設計方向顧問會介入：它從 5 個流派 × 20 個哲學中推薦 3 個不同的方向，每個方向來自不同流派，並附帶代表作、格式塔關鍵詞和代表性設計師，然後並行生成 3 個視覺演示供使用者選擇。選擇之後，流程繼續進入初級設計師工作流，這是所有任務的預設模式。該工作流要求一次性傳送完整的問題集，等待所有答案後再繼續；在 HTML 中直接寫入假設、佔位符和推理註釋；即使只是灰色塊，也要儘早向使用者展示；在交付前用 Playwright 手動檢查瀏覽器。

驗收花束設計時，應依 README 的安裝入口載入一個實際花束案例，逐項檢查提示詞、圖片素材、版型與匯出結果。把模型版本、輸入圖片尺寸和產出檔案記下來，並對照專案明列的設定檔與授權文字，不把展示圖當成穩定品質保證。 第 4 次檢查應保留實際輸入、輸出與錯誤訊息，讓這個專案的限制能和文件中的能力逐項對照。

事實核查優先與反 AI 低質規則

README 中的原則 #0 將事實核查優先描述為最高優先順序的規則，是在一次真實失敗之後新增的。當任務提到特定產品、技術或事件（例如「DJI Pocket 4」、「Nano Banana Pro」、「Gemini 3 Pro」）時，第一個動作必須是透過 WebSearch 確認其存在、釋出狀態、當前版本和規格。文件稱，不應依賴訓練語料庫中的記憶。對於視覺輸出，反 AI 低質規則針對的是常見的 AI 輸出視覺特徵：紫色漸變、表情符號圖示、圓角加左邊框強調、SVG 人物、用 Inter 作為展示字型，以及用 CSS 剪影代替真實產品照片。取而代之的是 text-wrap: pretty、CSS Grid、仔細選擇的襯線展示字型和 oklch 顏色。

驗收花束設計時，應依 README 的安裝入口載入一個實際花束案例，逐項檢查提示詞、圖片素材、版型與匯出結果。把模型版本、輸入圖片尺寸和產出檔案記下來，並對照專案明列的設定檔與授權文字，不把展示圖當成穩定品質保證。 第 5 次檢查應保留實際輸入、輸出與錯誤訊息，讓這個專案的限制能和文件中的能力逐項對照。

匯出工具鏈和交付物

該技能的輸出包括單一檔案 HTML 原型、帶真實文字框架的可編輯 PPTX（透過 html2pptx.js 從 DOM 計算樣式）、MP4（25fps，可插值到 60fps）、調色板最佳化的 GIF 以及 PDF/PNG/SVG 匯出。倉庫結構列出了這些腳本：render-video.js（HTML 到 MP4）、convert-formats.sh（MP4 到 60fps 加 GIF）、add-music.sh（MP4 加 BGM）、export_deck_pdf.mjs、export_deck_pptx.mjs 和 verify.py。README 聲稱，核心管線（設計、渲染、匯出）100% 在本機執行，零網路呼叫，但雲功能（如 Doubao TTS 旁白和 AI 影片審查）隔離在 scripts/cloud/ 中，需要使用者自己的 API 金鑰，並要求顯式的 --yes 同意。文件稱，每個出站主機和憑證接觸點都在 SECURITY.md 中宣告，但該檔案未包含在提供的材料中。

定位、侷限性與授權

README 將 huashu-design 與 Anthropic 的 Claude Design 進行了對比，承認品牌資產協議的想法來源於 Anthropic 為 Claude Design 編寫的系統提示。區別在於形式：Claude Design 是基於瀏覽器的產品，有配額和 GUI；huashu-design 是安裝在 Claude Code 中的技能，使用 API 使用量和對話介面，輸出 HTML、MP4、GIF、可編輯 PPTX 和 PDF。它列出了侷限性：沒有可編輯圖層的 PPTX 到 Figma 往返，Framer-Motion 級別的複雜動畫超出範圍，並且在沒有品牌資產的情況下，設計品質會下降到 60-65 分。該倉庫於 2026-05-14 重新授權為 MIT，允許用於任何目的，包括商業用途，無需事先授權或通知。授權文字提供了標準的 MIT 條款，未對安全性、支援或適用性做出任何承諾。

編輯結論

Huashu Design 將設計過程定位為與 agent 的對話，而不是圖形使用者介面。其倉庫描述了從品牌資產收集到專家評審的工作流程，所有這些都基於一個技能檔案加輔助引用。然而，任何生產使用都需要通過 SECURITY.md 進行獨立驗證，該檔案在倉庫元資料中未列出，且 README 未包含該檔案的文字。 適合先按 huashu-design README 的具體入口做小規模檢查，不適合把文件未說明的相容性或效能當成承諾；先觀察 huashu-design 的實際輸入、輸出與錯誤訊息，再決定是否納入工作流程。

官方來源

1. Official README
2. Project repository
3. Release notes