每日热门skill:huashu-design：17000 Star 的AI设计神器，打字就能出交付级作品
一句话总结：在终端里打一句话，3-30分钟拿回一份能交付的专业设计——这不是魔法，是花叔开源的 huashu-design Skill。
一、开篇：设计师的困境与破局
你有没有遇到过这样的场景？
产品经理凌晨两点在群里丢需求：“明天要给客户演示，需要一个产品发布动画，要有科技感，还要有品牌调性。”
你盯着屏幕发呆。打开 Figma？图层面板看得头大。启动 AE？时间轴让你怀疑人生。找设计师同事？人家早就睡了。
设计工具这道门槛，把太多人挡在了外面。
你会写东西，会想问题，但面对那堆图层和面板，忽然就不知道该怎么下手了。不是你不会设计，是你不会用那些工具。
这时候，如果能在终端里打一句话，然后泡杯咖啡，等 AI 把设计做完——听起来像科幻，但 huashu-design 让这成了现实。
二、huashu-design 是什么？
huashu-design是由独立开发者花叔（花生）开源的 Claude Code 设计 Skill，GitHub 星标 17000+，Fork 数 2100+。
它不是 Figma，不是 Keynote，不是 AE。它是一份装进 Agent 的结构化设计知识。
核心定位
在你的终端里打一句话，拿回一份能交付的设计。
3 到 30 分钟，你能拿到：
- 一段产品发布动画（MP4/GIF）
- 一个能点击的 App 原型（HTML）
- 一套能编辑的 PPT（PPTX）
- 一份印刷级的信息图（PDF/PNG）
不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。
三、五大核心能力详解
1. 交互原型（App / Web）
交付物：单文件 HTML · 真 iPhone 机身 · 可点击 · Playwright 验证
典型耗时：10-15 分钟
使用示例：
「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」3 分钟后，你拿到的是一个可以在浏览器里直接交互的高保真原型。不是静态图片，是真能点的按钮、能滑动的页面、能跳转的导航。
2. 演讲幻灯片
交付物：HTML deck + 可编辑 PPTX（真文本框，PPT 里双击可改）
典型耗时：15-25 分钟
使用示例：
「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」注意那个「可编辑 PPTX」——huashu-design 使用 html2pptx.js 读取 DOM 的 computedStyle，逐元素翻译成 PowerPoint 对象。导出的是真文本框，不是截图贴进去的。你可以在 PowerPoint 里继续修改文字、调整排版。
3. 时间轴动画
交付物：MP4（25fps/60fps 插帧）+ GIF + BGM
典型耗时：8-12 分钟
使用示例：
「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」Motion Design 引擎采用 Stage + Sprite 时间片段模型，四条 API 覆盖所有动画需求：useTime、useSprite、interpolate、Easing。一条命令就能导出带背景音乐的 60fps 视频。
4. 设计变体
交付物：3+ 并排对比 · 实时调参
典型耗时：10 分钟
当你不确定哪个设计方向更好时，huashu-design 会并行生成多个版本，让你直观对比选择。
5. 信息图与评审
交付物：印刷级排版 · 可导 PDF/PNG/SVG + 5 维度专家评审报告
典型耗时：10 分钟（信息图）/ 3 分钟（评审）
「帮我对这个设计做一个 5 维度评审」输出包括雷达图 + Keep/Fix/Quick Wins 清单，像有一个资深设计师在帮你把关。
四、技术架构：不是魔法，是结构
huashu-design 的高质量不是靠模型自己「发挥」，而是靠硬约束流程保证的。
1. 品牌资产协议（5 步硬流程）
涉及具体品牌时，Skill 强制执行：
1. 询问 brand guidelines 2. 没有？去搜官方品牌页 3. 下载 SVG 文件或官网 HTML 4. grep 提取色值 5. 固化成 brand-spec.md + CSS 变量关键原则：绝不从模型记忆里猜品牌色。必须从实际资产文件里提取。
花叔做了 A/B 测试：v2（有品牌协议）的稳定性方差比 v1 低5 倍。
2. Junior Designer 工作流
Skill 默认采用「初级设计师」模式：
- 开工前列 assumptions + placeholders + reasoning comments
- 尽早 show 灰色方块给你看
- 填充内容 → variations → Tweaks 三步分别确认
- 交付前 Playwright 自动过一遍浏览器
核心理念：理解错了早改比晚改便宜 100 倍。
3. 反 AI Slop 规则
明确的「不要」清单：
- ❌ 紫渐变
- ❌ Emoji 图标
- ❌ 圆角+左边框强调
- ❌ SVG 画人脸
- ❌ Inter 当 display font
替代方案：text-wrap: pretty + CSS Grid + 精心选择的 serif display font + oklch 色彩空间。
4. 40 种风格库 + 三套顾问逻辑
当需求模糊时，Skill 触发设计方向顾问（Fallback）。三套互补逻辑并行运行：
| 逻辑 | 机制 | 作用 |
|---|---|---|
| 秒数轮盘 | date +%S 取秒数，20 选 1 | 打破模型总偷选极简风格的惯性 |
| 现实参照 | 世界级获奖网站/PPT/iOS 原型 | 把真实设计迁移过来 |
| 最佳设计师 | 预算无上限时最适合的工作室哲学 | 提供设计方向 |
底层弹药是40 种 HTML 原生风格库（网页 20 + PPT 20），按大胆/中性/安静分级。纯 CSS，不需要生图。
5. 完整导出工具链
scripts/ ├── render-video.js # HTML → MP4（Playwright 逐帧录制） ├── convert-formats.sh # MP4 → 60fps 插帧 + GIF（palette 优化） ├── add-music.sh # MP4 + BGM 合成 ├── export_deck_pdf.mjs # HTML deck → PDF ├── export_deck_pptx.mjs # HTML deck → PPTX ├── html2pptx.js # DOM computedStyle → PowerPoint 对象 └── verify.py # Playwright 自动验证五、安装与使用
安装命令
npx skills add alchaincyf/huashu-design跨 Agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。
使用方式
装完直接在终端里说需求：
「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」 「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」 「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」 「帮我对这个设计做一个 5 维度评审」配置品牌资产（可选）
给 Skill 你的品牌资产（logo、色板、UI 截图），它会读懂你的品牌气质。什么都不给，内置的 20 种设计语汇也能兜底到不出 AI slop。
六、适用人群与场景
谁应该用？
| 人群 | 使用场景 |
|---|---|
| 产品经理 | 快速出原型给客户演示，不用等设计师排期 |
| 独立开发者 | 一人团队也要有大厂级的设计交付 |
| 内容创作者 | 制作信息图、演讲 PPT、产品发布视频 |
| 创业者 | pitch deck、品牌物料、营销素材 |
| 后端工程师 | 不想学 Figma，但需要展示前端原型 |
典型使用场景
- 产品发布：制作 Apple 发布会级别的产品宣传片
- 融资路演：快速迭代 pitch deck，多种风格对比
- 内容营销：批量生成信息图、社交媒体素材
- 用户测试：高保真原型做可用性测试
- 内部汇报：数据可视化报告、项目总结 PPT
七、与同类工具对比
| 维度 | huashu-design | Claude Design | Figma | AE |
|---|---|---|---|---|
| 形态 | Skill（终端） | 网页产品 | 图形工具 | 图形工具 |
| 使用方式 | 对话（说话） | GUI（点拖改） | GUI | GUI |
| 配额 | API 消耗，并行不受限 | 订阅 quota | 订阅制 | 订阅制 |
| 交付物 | HTML/MP4/GIF/PPTX/PDF | 画布内 + Figma | 设计文件 | 视频 |
| 动画能力 | Stage+Sprite，60fps | 有限 | 插件扩展 | 专业级 |
| 学习成本 | 极低（会说话就行） | 低 | 高 | 极高 |
| 可编辑性 | PPTX 真文本框 | Figma 原生 | 完全可编辑 | 有限 |
花叔的原话：「Claude Design 是更好的图形工具，huashu-design 是让图形工具这层消失。两条路，不同受众。」
八、局限性与注意事项
花叔自己列了三条局限：
不支持图层级可编辑的 PPTX 到 Figma——产出 HTML，能截图、录屏、导图，不能拖进 Keynote 改文字位置
Framer Motion 级别的复杂动画不行——3D、物理模拟、粒子系统超出边界
完全空白的品牌从零设计质量会掉到 60-65 分——有品牌资产输入时效果最好
这是一个 80 分的 Skill，不是 100 分的产品。
但对不愿意打开图形界面的人，80 分的 Skill 比 100 分的产品好用。
九、关于作者
花叔（alchaincyf）是一位知名的 AI Native Coder 和独立开发者。
- 代表作：小猫补光灯（AppStore 付费榜 Top 1）、《一本书玩转 DeepSeek》、女娲.skill（GitHub 12000+ star）
- 自媒体全平台 30 万+ 粉丝
- 开源的 Skill 总共近 6 万 star
他的宣言：“我一行代码都不会写。但用 AI 做出了 AppStore Top 1 付费产品，写了 9 本技术书。所有产品，全部 AI 写的。我只负责想清楚要做什么。”
这个项目的起源也挺有意思——Anthropic 发布 Claude Design 那天他玩到凌晨四点，几天后发现自己再也没点开过它。不是它不好，是「我宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面」。于是让 agent 拆解 Claude Design 的系统提示词，蒸馏成结构化 spec，写成了这个 Skill。
十、总结与行动号召
核心要点
- 零门槛：会说话就能出设计，不需要学 Figma/AE
- 高质量：大厂级交付标准，不是「AI 做的还行」
- 全栈交付：原型、PPT、动画、信息图一站式解决
- 真可编辑：PPTX 是真文本框，不是截图
- 跨平台：Claude Code、Cursor、Codex、OpenClaw 都能用
立即体验
npx skills add alchaincyf/huashu-design然后在你的 Agent 里说：
「做一份关于 [你的主题] 的 PPT，推荐 3 个风格方向」3 分钟后，你会拿到一份让你惊讶的设计。
设计的未来，不是更复杂的工具，而是让工具这层消失。
huashu-design 已经在这条路上走得很远了。你要不要上车？
参考资料：
- GitHub: GitHub - alchaincyf/huashu-design: Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic · GitHub
- 作者: 花叔（alchaincyf）
- 协议: MIT（2026-05-14 起）