技能包

Huashu Design:一句話拿到可交付的 HTML 設計

適合要在助手裡生成可點擊原型或可演講投影片的人,前提是用官方 npx 安裝,並先確認安裝目錄含子目錄而不是只有 SKILL.md。

官方來源 · huashu-design

安裝

npx skills add alchaincyf/huashu-design

適合誰

適合想在助手裡用一句話拿到可交付設計的人。官方寫明:在你的 agent 裡打一句話,拿回一份能交付的設計。倉庫標題把它定位為 HTML 原生的設計 skill,覆蓋高擬真原型、投影片、動畫,以及二十條設計哲學、五維檢查和 MP4 匯出。

更合適的人,是已經有一句話需求(做一個可點擊原型,或一副能演講的投影片),並且能在本機執行 npx skills add 的人。不適合只想口頭聊聊、卻不打算檢查安裝目錄是否完整的人。

開始前要能執行官方安裝命令。官方寫明跨 agent 通用,並說若干環境都能裝;不要把那份名單理解成互斥範圍。

3 分鐘完成第一次嘗試

只走 npx 主路徑。第一次先驗證安裝完整,再決定要不要生成檔案。

前置條件:本機已有 npm/npx。第一次不要匯出 MP4,也不要對未確認的路徑寫檔。

安裝位置:在工作區執行:

npx skills add alchaincyf/huashu-design

裝完按原文看一眼安裝目錄,例如 ~/.claude/skills/huashu-design/。如果只有 SKILL.md、沒有那幾個子目錄,說明 skills CLI 太舊(≤1.5.15 有只同步單檔的缺陷,已在 1.5.19 修復)。先升級 CLI 再繼續,不要手補子目錄。

官方倉庫:

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

低風險觸發:目錄完整後,用一句話讓助手做互動原型檢查準備,而不是先匯出影片。原文對互動原型的交付是:單檔 HTML、真 iPhone bezel、可點擊,並用 Playwright 驗證,大約 10–15 分鐘。生成前先確認 HTML 落在哪個路徑;生成後先本機打開並完成 Playwright 驗證,再當作可交付。

成功訊號:安裝目錄裡不只有 SKILL.md,並且你還沒有寫出未確認的匯出檔。

使用案例

案例一:可點擊的 App / Web 互動原型。交付為單檔 HTML,帶真 iPhone bezel,可點擊,並用 Playwright 驗證。適合已經有一屏流程、想先看高擬真原型的人。先確認輸出路徑,再生成;驗證通過前不要傳給別人。

案例二:演講投影片。原文寫:HTML deck(瀏覽器演講)加上可編輯 PPTX(文字框保留),大約 15–25 分鐘。適合已經有大綱、需要能講也能改字的人。PPTX 是寫入檔案,生成前確認儲存位置;生成後先在本機打開核對文字框,再分發。

使用邊界

時間軸動畫會匯出 MP4(25fps / 60fps 插幀)、GIF(palette 最佳化)和 BGM,大約 8–12 分鐘。檔案更大,不要當第一次嘗試。

安裝命令只有 npx skills add alchaincyf/huashu-design。目錄不完整時,原文只指向 CLI 版本問題,不要編造其他安裝程式。

二十條設計哲學和五維檢查只出現在倉庫標題裡,本頁引用的正文沒有列出條目。不要補寫哲學名或檢查表。

不要補寫未出現的技能路徑,也不要把「都能裝」理解成每個環境步驟都已寫明。