花叔 Design 使用指南：一句話搞定高保真設計

花叔 Design（huashu-design）是一個 Claude Code skill，讓你在終端里打一句話，就能拿回一份能交付的設計。

它不是 prompt 拼貼，而是把真實設計工作室的工作流翻譯成了 agent 可執行的協議。

它能做什么

一句話概括：用 HTML 做高保真原型、交互 Demo、幻燈片、動畫、設計變體探索 + 設計方向顧問 + 專家評審。

具體七條能力線：

能力 交付物 典型耗時 交互原型 單文件 HTML，真 iPhone 外框，可點擊 10–15 分鐘 演講幻燈片 HTML deck + 可編輯 PPTX 15–25 分鐘 時間軸動畫 MP4（25fps/60fps 插幀）+ GIF + BGM 8–12 分鐘 設計變體 多版本并排對比，Tweaks 實時調參 10 分鐘 信息圖/可視化 印刷級排版，可導 PDF/PNG/SVG 10 分鐘 設計方向顧問 從 20 種設計哲學推薦 3 個方向 5 分鐘 5 維度專家評審 雷達圖 + Keep/Fix/Quick Wins 3 分鐘

此外還有三個「隱藏」實用功能：

• 品牌資產自動搜尋：給品牌名，自動扒 logo、產品圖、色值
• Playwright 自動測試：App 原型做完自動跑點擊測試
• 視頻導出工具鏈：一條命令出 MP4/GIF，不用手動錄屏

我自己是 UI/UX 設計師出身，在 vibe coding 里摸爬滾打了一段時間。

說實話，大部分 AI 生成的設計稿都是「看起來還行，但沒法用」——配色協調但信息層級混亂，排版整齊但沒有品牌辨識度，動畫流暢但完全不符合產品調性。

花叔 Design 不一樣。

它的設計質量之所以高，不是 prompt 寫得好，而是工作流設計得好。

三個讓我眼前一亮的細節：

第一，它會主動問你要品牌資產。

不是隨口一句「你有 logo 嗎」，而是按優先級清單逐項確認：Logo → 產品圖 → UI 截圖 → 色值 → 字體。

這個順序很專業——logo 和產品圖才是品牌識別度的根基，色值和字體反而只是配角。

我幫朋友做 startup 的 pitch deck 時，最痛苦的就是對方只有一張模糊的 logo 截圖，卻指望我做出「大廠感」。

花叔 Design 的「5-10-2-8」素材門檻（搜 5 輪、找 10 個、選 2 個、每個 8 分以上）本質上是在保護設計底線：寧缺毋濫，濫竽充數的素材比沒有更糟。

第二，它有「事實驗證先于假設」的硬約束。

當你讓它給某個具體產品做設計時，它會先 WebSearch 確認產品是否存在、最新版本號、規格參數。

我在 vibe coding 時踩過類似的坑：憑記憶說某款產品「還沒發布」，結果人家已經上架半個月了。

這個約束看似簡單，但執行層面需要很強的自律——畢竟 AI 憑「記憶」瞎編太容易了。

第三，它的 5 維度評審不是走過場。

哲學一致性、視覺層級、細節執行、功能性、創新性——這五個維度覆蓋了設計評審的核心關注點。

尤其「哲學一致性」這一條，很多設計師自己都會忽略：你的排版、配色、動效是否服務于同一個設計敘事？

還是用了一堆時髦但互相沖突的視覺效果？

這個評審框架對 vibe coder 來說尤其有價值，因為非設計背景的人最難判斷的正是「這個設計好不好」，而不是「這個設計有沒有」。

對 vibe coder 來說，這個 skill 意味著什么

如果你跟我一樣是個 vibe coder——但不是設計專業出身，需要用設計來推動項目——花叔 Design 的價值不在于它「能幫你省多少時間」，而在于它能幫你避多少坑。

設計是一個「你不知道你不知道什么」的領域。

你可以讓 AI 生成一百個 landing page，但選哪個、改哪個、怎么讓它看起來像專業團隊做的——這些判斷需要設計知識。

花叔 Design 的作用，相當于在你和 AI 之間加了一層設計總監：它負責提需求（品牌資產協議）、做質檢（5 維度評審）、給方向（設計顧問模式），而你只需要描述「我要什么」。

更實際地說，以下幾個場景它會特別順手：

• 創業 pitch：臨時要做個可點擊的原型給投資人看，你沒有設計師，也沒有 Figma
• 產品發布：要做一段 60 秒發布動畫，你沒有 After Effects 技能，也不想學
• 技術演講：要做一套幻燈片，你希望它看起來不像 PowerPoint 默認模板
• 設計探索：對某個功能有模糊想法，想快速生成幾個視覺方向并排對比

作者的設計理念是「用戶不該記 skill 名稱，只該描述需求」。忘掉那七個功能，記住三種場景：

場景一：需求模糊（最常用）

「做個好看的 XXX，推薦幾個風格讓我選」 → 自動進入設計顧問模式，推 3 個方向給你挑

場景二：有明確想法

「做個 iOS 番茄鐘原型，要能點擊」 「把這段邏輯做成 60 秒動畫，導出 MP4」 「做份 AI 心理學演講 PPT」 → 直接說，skill 自動切換對應專家

場景三：做完了不滿意

「review 這個設計」 → 自動進入 5 維度評審，給雷達圖 + 修復清單

這背后有三個設計考量：

第一，HTML 是統一載體。對花叔來說，HTML 就是設計師的 Photoshop——原型、動畫、幻燈片都是同一個畫布上的不同用法。拆成 7 個等于把同一支筆切成 7 截。

第二，真實設計工作是連續的。典型流程是「方向探索 → 原型驗證 → 發布動畫 → 演講 PPT → 最終評審」。

合在一起，找到的品牌素材可以在所有環節無縫復用。

第三，用戶不該背菜單。你應該像對真實設計師說話一樣——「做個 App 原型」或「把動畫做得更流暢」。

skill 內部自己決定 embody 哪個專家，但用戶體驗始終是在跟「同一位設計師」對話。

兩個最值得學習的協議

核心資產協議（5-10-2-8 原則）涉及具體品牌時，按識別度優先級找素材：Logo > 產品圖 > UI 截圖 > 色值 > 字體。

搜索門檻是「搜 5 輪、找 10 個、選 2 個、每個 8 分以上」。寧缺毋濫，濫竽充數的素材比沒有更糟。

事實驗證先于假設（#0 原則）涉及具體產品/版本時，強制 WebSearch 驗證。

禁止憑記憶斷言「我記得還沒發布」「應該是 vN 版本」。10 秒搜索遠小于 2 小時返工。

安裝

npx skills add alchaincyf/huashu-design

然后直接說話即可觸發，觸發詞包括：做原型、設計 Demo、交互原型、導出 MP4、設計方向、review this design 等。

來源：huashu-design GitHub[1]

參考資料

huashu-design GitHub: https://github.com/alchaincyf/huashu-design