Huashu Design 是花叔 Huashu 做的 HTML 原生设计 Skill，当前版本为 3.0。它不提供画布，也不要求打开 Figma，而是在 Claude Code、Codex、Cursor 等 Agent 里接一句需求，直接产出网页、App 原型、HTML 幻灯片、可编辑 PPTX、信息图或短片。项目自 2026 年 5 月起改用 MIT 许可，商用不再需要单独授权。
设计方向先摆出来，再动手
需求模糊时，Agent 不会凭空挑一种风格就开做。3.0 的流程是先用三套互补逻辑各出两个候选：按“最佳设计师”的思维做一版，找同媒介的获奖作品当现实参照，再从风格库里按当前秒数随机抽一版。六个候选先画成缩略图，挑出最强、差异最大的三版做成真实视觉，剩下三张作为备选。底层风格库有 84 种，其中网页、PPT、信息图各 20 种，App 12 种，中文与东亚 12 种，每种都有样张和 HTML 源码。
品牌资产不靠记忆猜
涉及具体品牌时，Skill 会强制执行五步：先问有没有品牌规范，再搜官网的品牌页和新闻页，下载 SVG、HTML 或产品截图，从资产里提取色值并按频率排序，最后写成 brand-spec.md 和 CSS 变量。所有页面引用变量，而不是让模型凭印象说“主色大概是蓝色”。这套约束来自 Claude Design 公开提示词的影响，作者在 README 里也直接承认了这一点。
交付物覆盖到可编辑文件
交互原型是单文件 HTML，带 iPhone 机身、状态切换和可点击屏幕，并能用 Playwright 自动点一遍。幻灯片先做 HTML deck，再用 html2pptx.js 读取 DOM 的计算样式，逐元素翻译成 PowerPoint 对象，导出的是可双击修改的文本框，而不是整页图片。时间轴动画通过 Stage、Sprite 和 useTime 等 API 编排，一条命令导出 MP4、GIF、60fps 插帧和带 BGM 的版本。信息图可以导 PDF 矢量、300dpi PNG 或 SVG。
安装与一次发布材料
npx skills add alchaincyf/huashu-design |
安装后先检查目录，references/、assets/、scripts/、demos/ 四个子目录都应存在；旧版 skills CLI 曾只同步 SKILL.md，缺文件时升级 CLI 或直接 git clone 到 skills 目录。接着可以直接说“做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选”或“做个番茄钟 iOS 原型，四个核心屏幕要能点击”。
假设要发布一个小工具，先用同一份品牌规范生成落地页和发布 deck，再让 Agent 从 deck 导出一版可编辑 PPTX 给同事改文案。设计体检会检查图片是否裂开、字号是否过小、对比度是否足够和控制台是否报错；外观账本记录这次用了什么底色、色板和版式，下个项目会主动避开重复。
和 Claude Design、Figma 的差别
Claude Design 是在浏览器里操作的图形产品，配额跟订阅走，交付偏画布和 Figma；Huashu Design 是对话式 Skill，交付 HTML、MP4、GIF、PPTX 和 PDF，可以并行跑 Agent，不受网页产品的配额限制。它不打算替代 Figma 的图层编辑，也不支持把 PPTX 再导回 Figma 做图层级修改。两者更像“让图形工具消失”与“把图形工具做得更好”两条路。
限制与适合的人
README 自己列出的边界很明确：没有 Framer Motion 级别的复杂动画，3D、物理模拟和粒子系统超出范围；完全空白的品牌从零设计，质量可能掉到 60 到 65 分；产出仍需要人的审美判断。HTML 结果可以截图、录屏或导图，但不能直接拖进 Keynote 修改文字位置，需要预留人工调整时间。核心设计、渲染和导出在本地运行，但可选配音和看片评审会调用外部 API，用之前要看清配置。
适合需要快速做高保真原型、发布材料、演示 deck 和信息图的设计师、独立开发者与小团队。已经有一整套成熟品牌系统、需要多人实时协作和精细图层控制时，专业设计工具仍更合适。
入口
仓库：https://github.com/alchaincyf/huashu-design 。README 内有 3.0 案例、安装说明和 YouTube 上手教程，未提供统一的在线 Demo。许可证为 MIT。本文按官方 README、发布说明和仓库元数据整理，未在本机完整实测。