技能包

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 版本问题,不要编造其他安装器。

二十条设计哲学和五维检查只出现在仓库标题里,本页引用的正文没有列出条目。不要补写哲学名或检查表。

不要补写未出现的技能路径,也不要把“都能装”理解成每个环境步骤都已写明。