Huashu Design 开源：打字回车拿到能交付的设计，PPT 还能导出可编辑 PPTX
Anthropic 发布 Claude Design 那天，无数人熬夜到凌晨四点体验那种「在对话框里直接生成完整网页」的快感。
但几天后，大多数人发现自己再也没点开过它——不是产品不好，而是对于那些宁愿死在终端里也不想打开图形界面的人来说，它依然是个需要手动操作的工具。
于是有人拿起「手术刀」，对这款产品进行了深度的逻辑剥离，把从 Claude Design 系统提示词里蒸馏出来的精髓，结合多年设计类探索，写成了一个能直接装在 Claude Code 里的 Skill。
这就是Huashu Design——一个让你在 agent 里打一句话，3 到 30 分钟就能拿回一份能交付的设计的开源项目。
项目简介
Huashu Design的 slogan 很直接：「打字。回车。一份能交付的设计。」
不是那种紫渐变、emoji 图标、圆角加左边框 accent 的典型 AI Slop 水平——是看起来像 Stripe、Linear、Anthropic 那种大厂设计团队做出来的东西。
你看到它 README 里的每一个动画，都是它自己做的。不是 Figma，不是 AE，就是一句话 prompt + skill 跑通。
它到底能做什么？
| 能力 | 交付物 | 典型耗时 |
|---|---|---|
交互原型（App / Web） | 单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证 | 10–15 min |
演讲幻灯片 | HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留） | 15–25 min |
时间轴动画 | MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM | 8–12 min |
设计变体 | 3+ 并排对比 · Tweaks 实时调参 · 跨维度探索 | 10 min |
信息图 / 可视化 | 印刷级排版 · 可导 PDF/PNG/SVG | 10 min |
设计方向顾问 | 5 流派 × 20 种设计哲学 · 推荐 3 方向 · 并行生成 Demo | 5 min |
5 维度专家评审 | 雷达图 + Keep/Fix/Quick Wins · 可操作修复清单 | 3 min |
真·可点击的 iOS 原型
不是那种 Web 模拟感，而是带有精确 iPhone 15 Pro 边框的原型——灵动岛、状态栏、Home Indicator 一个都不能少。
更硬核的是，它在交付前会自己跑一遍 Playwright 自动化点击测试。如果按钮点不动或者页面白屏，它会自我修正后再交付。
HTML 幻灯片 → 可编辑 PPTX
生成的是真正的可编辑 PPTX，不是图片糊在画布上。html2pptx.js会读取 DOM 的 computedStyle，逐元素翻译成 PowerPoint 对象，文本框在 PPT 里双击就能改。
60fps 动效视频
Stage + Sprite 时间片段模型，useTime/useSprite/interpolate/Easing四个 API 就能覆盖绝大多数动画需求。一条命令导出 MP4、GIF、60fps 插帧，还能带背景音乐。
设计方向顾问
当你描述模糊到无法着手时，它会从 5 流派 × 20 种设计哲学里推荐 3 个必须来自不同流派的差异化方向，并行生成 3 个 Demo 让你选。选定后再往下做，避免南辕北辙。
5 维度专家评审
哲学一致性、视觉层级、细节执行、功能性、创新性各 0–10 分，雷达图可视化，输出 Keep、Fix、Quick Wins 清单。
核心护城河
这是 Huashu Design 里最硬的一段规则。涉及具体品牌（Stripe、Linear、Anthropic、自家公司等）时强制执行 5 步：
| 步骤 | 动作 | 目的 |
|---|---|---|
| 1 · 问 | 用户有 brand guidelines 吗？ | 尊重已有资源 |
| 2 · 搜官方品牌页 | <brand>.com/brand·brand.<brand>.com·<brand>.com/press | 抓权威色值 |
| 3 · 下载资产 | SVG 文件 → 官网 HTML 全文 → 产品截图取色 | 三条兜底，前一条失败立刻走下一条 |
| 4 · grep 提取色值 | 从资产里抓所有#xxxxxx，按频率排序，过滤黑白灰 | 绝不从记忆猜品牌色 |
| 5 · 固化 spec | 写brand-spec.md+ CSS 变量，所有 HTML 引用var(--brand-*) | 不固化就会忘 |
| A/B 测试（v1 vs v2，各跑 6 agent）：v2 的稳定性方差比 v1 低 5 倍。稳定性的稳定性，这才是 skill 真正的护城河。 |
装上就能用
一句话安装：
npx skills add alchaincyf/huashu-design
然后在 Claude Code、Cursor、Trae、Codex 等任何支持 skill 的 agent 里直接说话：
「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」
「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」
「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」
「帮我对这个设计做一个 5 维度评审」
没有按钮、没有面板、没有 Figma 插件，整个交互都通过对话完成。
和 Claude Design 的关系
作者大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。
那份提示词反复强调好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来。这个原则是 65 分作品和 90 分作品的分水岭。
但两者定位差异很大：
| Claude Design | huashu-design | |
|---|---|---|
| 形态 | 网页产品（浏览器里用） | skill（Claude Code 里用） |
| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 |
| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF |
| 操作方式 | GUI（点、拖、改） | 对话（说话、等 agent 做完） |
| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 |
| 跨 agent | 专属 Claude.ai | 任意 skill 兼容 agent |
| Claude Design 是更好的图形工具，huashu-design 是让图形工具这层消失。两条路，不同受众。 |
最后的话
设计工具正在从 GUI-first（图形界面优先）转向 Agent-first（智能体优先）。
Huashu Design 展示了一个可能性：未来你不需要打开 Figma，不需要掌握 After Effects，只需要和 agent 说话，就能拿到一份能直接交付的设计。
如果你不想为了一张海报或一份 PPT 去学复杂的设计软件，这个技能包值得装个试试。
GitHub：https://github.com/alchaincyf/huashu-design