说一句话输出可点击的 App 原型、能演讲的 PPT、带 BGM 的 MP4 动画

huashu-design 是开源的HTML 原生设计 Skill，装进 Claude Code 后，一句话就能输出可点击的 App 原型、能演讲的 PPT、带 BGM 的 MP4 动画、印刷级信息图——不是”AI 做的还行”那种水平，是看起来像大厂设计团队做的。

你不需要打开 Figma，不需要学 AE，不需要找设计师。打字，回车，一份能交付的设计。

能做什么

核心特性

1. 品牌资产协议（最硬的规则）

涉及具体品牌（Stripe、Linear、Anthropic、你自己的公司）时，强制执行 5 步：

1. 1. 问用户有没有 brand guidelines
2. 2. 搜官方品牌页抓权威色值
3. 3. 下载 SVG/截图取色（三条兜底）
4. 4. grep 提取所有色值，按频率排序，过滤黑白灰
5. 5. 写 brand-spec.md + CSS 变量，固化下来

绝不从记忆猜品牌色——这是 65 分作品和 90 分作品的分水岭。

2. 设计方向顾问（需求模糊时的救命功能）

需求说不清楚？不用硬想——Skill 自动进入 Fallback 模式：

• • 从 5 大流派 × 20 种设计哲学里推荐 3 个差异化方向
• • 每个方向配代表作、气质关键词、代表设计师
• • 并行生成 3 个视觉 Demo 让你选
• • 选定后再进入正式制作流程

3. Motion Design 引擎

• • Stage + Sprite 时间片段模型
• • useTime / useSprite / interpolate / Easing 四个 API 覆盖所有动画需求
• • 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片
• • 内置 6 首场景化背景音乐

4. HTML Slides → 可编辑 PPTX

• • 浏览器里演讲的 HTML deck
• • html2pptx.js 读 DOM 的 computedStyle，逐元素翻译成 PowerPoint 对象
• • 导出的是真文本框，不是图片铺底，可以在 PPT 里继续编辑

5. 反 AI Slop 规则

内置规则主动避免”一眼 AI”的视觉最大公约数：

• • ❌ 紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display
• • ✅ text-wrap: pretty + CSS Grid + 精心选择的 serif display + oklch 色彩

6. 5 维度专家评审

• • 哲学一致性 / 视觉层级 / 细节执行 / 功能性 / 创新性，各 0-10 分
• • 雷达图可视化
• • 输出 Keep / Fix / Quick Wins 可操作清单

7. Junior Designer 工作流

• • 开工前一次性发问题清单，等批量答完再动手
• • HTML 里先写 assumptions + placeholders + reasoning comments
• • 尽早 show 给你（哪怕只是灰色方块），理解错了早改比晚改便宜 100 倍
• • 交付前用 Playwright 肉眼过一遍浏览器

安装方法

npx skills add alchaincyf/huashu-design

跨 agent 通用：Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。

使用示例

做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选
做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击
把这段逻辑做成 60 秒动画，导出 MP4 和 GIF
帮我对这个设计做一个 5 维度评审

没有按钮，没有面板，没有 Figma 插件。说人话就行。

和 Claude Design 的关系

作者花叔的原话：Claude Design 是更好的图形工具，huashu-design 是让图形工具这层消失。

使用须知

❗️ 个人使用免费，企业商用需联系作者获得授权。

• • ✅ 个人学习、研究、创作、副业、写文章——随便用
• • ❌ 公司内部工具链、对外交付、商业产品——需授权

资源链接

• • GitHub 仓库：https://github.com/alchaincyf/huashu-design