huashu-design：在 agent 里打一句话，拿回能交付的设计

agent 能替你把一个产品的代码写完，卡住的常常是设计这最后一关：首页自己排嫌丑，等设计师又来不及。huashu-design 是花叔（alchaincyf）开源的 HTML 原生设计 skill，MIT 许可，主要语言 HTML，2026 年 4 月创建，截至 2026-10-23 有 26,004 颗星。把它装进 Claude Code、Codex 或 Cursor 这类 agent，对它打一句话，比如「给葛饰北斋的《富岳三十六景》做一个线上展览网站」，它会先给你六个方向的缩略图让你挑三个，再交出能部署的网页、能点击的 App 原型、能编辑的 PPTX 或印刷级信息图。README 给出的交付耗时是 3 到 30 分钟（作者口径），并且放了一句很硬的话：这篇 README 里的每一页设计，都是这个 skill 自己做的。

核心功能

huashu-design 的核心机制都围着「别让你盲选」这件事转。

• 六个候选挑三个方向：需求模糊时触发设计方向顾问——最佳设计师、同媒介获奖作品（先用脚本截图亲眼看过再动手）、秒数轮盘三套互补逻辑各出两个候选，画成一页缩略图，挑最强、最不一样的三版做成完整稿，没选上的三张作备选。作者说他们做过三轮盲选（内部测试）：前两轮靠强制大隐喻和一堆禁令，一共只赢一道题；第三轮改成「多出选项、不加禁令」，同样的两道题都赢了。
• 84 种带样张的风格库：网页 20、PPT 20、信息图 20、App 12、中文与东亚 12，全部纯 HTML/CSS，不依赖生图，每种配一张样张和源码，放在 assets/style-specimens/ 里当弹药库。

• 五种交付物：单文件 HTML 交互原型（带 iPhone 15 Pro 机身、状态驱动多屏切换、Playwright 自动点击测试）；HTML 演讲 deck 加可编辑 PPTX，html2pptx.js 读 computedStyle 把每个元素翻译成 PowerPoint 对象，导出的是真文本框，PPT 里双击就能改；时间轴动画走 Stage + Sprite 模型，可导 MP4/GIF，60fps 插帧，还能配 BGM；印刷级信息图可导 PDF/PNG/SVG；外加一份 3 分钟的 5 维度专家评审，输出雷达图和 Keep/Fix/Quick Wins 清单。
• 品牌资产协议：涉及具体品牌时强制走 5 步——问用户要 guidelines、搜官方品牌页、下载资产（三条兜底路径）、grep 出全部色值按频率排序、固化成 brand-spec.md 和 CSS 变量。README 的原话是「绝不从记忆猜品牌色」。作者的内部 A/B 测试里，加了这道流程的版本稳定性方差比旧版低 5 倍（各跑 6 个 agent）。
• 越用越懂你的三件套：经验，learn.py 收工时记下你说过的品味原话和教训，记录前会先问你，可以拒绝；外观账本，每笔交付记下底色、色板、字体、版式骨架，下个项目主动避开，专治「单个看都不错、放一起长得像」的单调；设计体检，design_lint.py 只量能核对的事实——图裂了、字小到读不了、对比度不够、控制台报错是红灯，全大写小标签这类顺手模板装饰是黄灯，好不好看归你判断，它不打分。这些记录只存在本机 ~/.huashu-design/，删掉文件夹就全部忘记。

它和作者另外两个 skill 分工明确。huashu-motion 专拍产品发布片，强项是浏览器编辑器里指着画面改稿和本地作曲；huashu-design 的动画引擎只负责把一页设计动起来再导出。按 huashu-motion README 的说法，这条线其实更早：2026 年 4 月 Anthropic 发布 Claude Design 后，作者把它的核心能力逆向成了 skill，就是 huashu-design；10 月 Claude Motion 发布后才有了 huashu-motion。huashu-art-motion 则专管 35 种艺术风格的解说动画。这次 3.0 的 32 秒发布片里，每一页设计由 huashu-design 自己生成，剪辑用的是 huashu-motion——两个 skill 在同一支片子里各干各的活。

README 给了一张能力与耗时表（作者口径，我们没有实测）：

能力	交付物	典型耗时
交互原型	单文件 HTML，可点击，Playwright 验证	10–15 分钟
演讲幻灯片	HTML deck + 可编辑 PPTX	15–25 分钟
时间轴动画	MP4 + GIF + BGM	8–12 分钟
信息图	印刷级排版，可导 PDF/PNG/SVG	10 分钟
5 维度评审	雷达图 + 可操作修复清单	3 分钟

典型使用场景

huashu-design 接的活覆盖了从一句模糊想法到一份成稿的全过程，最适合这几种人：

• 独立开发者和小团队出产品门面：发布页、官网首页、能点给投资人或用户看的 App 原型，全程不用打开 Figma。
• 要把演示稿拿回 PowerPoint 继续改的人：导出的 PPTX 保留真文本框，每页都能双击改字，交给同事接着写也没问题。
• 先看方向再定稿的人：把一句话需求丢进去，先收六个方向的缩略图，选完再等成稿，免得在错误方向上跑满 30 分钟。

快速上手

npx skills add alchaincyf/huashu-design

装完先自检。README 特别提醒这个 skill 不只一个 SKILL.md，references/、assets/、scripts/、demos/ 四个子目录里有 99 处被引用的配方、脚本和素材，缺一不可；旧版 skills CLI（1.5.15 及更早）有只同步单文件的 bug，1.5.19 已修复，发现安装目录里只有 SKILL.md 就先 npm i -g skills@latest 再装一次，或者直接 git clone 到 skills 目录兜底。装好后对 agent 直接说话：「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」。没有按钮，没有面板，也没有 Figma 插件。

小结

huashu-design 适合已经活在终端和 agent 里、懒得为一张发布页打开图形工具的人；需要图层级精细编辑、或者要从零凭空设计一个没有任何品牌资产的界面的人，README 自己承认质量会掉到 60–65 分，这类活它替代不了设计师。三条限制写在 README 的 Limitations 一节：产出是 HTML，不支持图层级可编辑的 PPTX 拖回 Figma 或 Keynote 改文字位置；Framer Motion 级别的 3D、物理和粒子动画超出边界；3 到 30 分钟的耗时和「看起来像大厂设计团队做的」都是作者口径，我们没有实测验证。

协议上有个值得知道的变更：仓库 2026 年 4 月创建时采用「个人免费、商用需授权」，2026-05-14 起改为 MIT，商用限制彻底解除。安全方面，README 声称核心链路（设计、渲染、导出）100% 本地运行、零网络零 key，云能力（豆包 TTS 配音、AI 看片评审）隔离在 scripts/cloud/，要用你自己的 key 且首次调用需 --yes 显式确认；本机的品味记录和外观账本不上传。作者对自己作品的定位倒是很清醒，README 原话：「这是一个 80 分的 skill。」我们核对了仓库元数据、中英文 README 和 SECURITY.md 的声明，没有安装运行。