Huashu Design · 花叔Design：让 AI agent 自己搞定「交付级」设计

故事：从凌晨四点的兴奋，到打字就能出设计

2025 年某个深夜，花叔（alchaincyf）把玩 Anthropic 的 Claude Design 到凌晨四点。几天后发现：再也没有点开过它。不是 Claude Design 不好——它是当时最成熟的设计 AI 产品——而是发现自己根本不愿意打开任何图形界面。"我宁愿让 agent 在终端里帮我干活。" 于是他把 Claude Design 的核心哲学拆解、蒸馏、重构，写成一套 skill，装进了自己的 Claude Code。

这就是 huashu-design 的起源：一个在 AI agent 里运行的 HTML 原生设计 skill，不需要 Figma，不需要 AE，打一句话，拿回一份能交付的设计文件。

打一行字 → agent 自动走完设计流程 → HTML 原型 / PPT / MP4 动画直接交付

---

这个 skill 解决了什么问题

设计师不够用，AI 来凑

很多团队的设计需求远大于设计师的吞吐量。以前只能排队等；现在可以让 AI agent 直接生成高保真原型、可编辑 PPT、动画视频。这意味着设计从「稀缺资源」变成了「按需生产」。

交付物不是草稿，是成品

市面上大多数设计 AI 产出的是「草稿级」内容——配色粗糙、字体随意、排版业余。huashu-design 的目标是把交付物质量拉到「看不出是 AI 做的」。背后是 60 种 HTML 原生风格库、20 条反 AI slop 规则、以及三套设计方向顾问逻辑在共同保证。

不打开图形界面，也能做设计

对于习惯在终端工作的开发者来说，切换到 Figma/Photoshop 本身就是摩擦。huashu-design 让这个摩擦归零——说需求，等结果，中间没有任何图形界面参与。

---

核心能力：六种交付物，从原型到成片

能力	交付物	典型耗时
交互原型	单文件 HTML · iPhone 15 Pro 精确机身 · 真可点击	10–15 分钟
演讲幻灯片	HTML deck（浏览器演讲）+ 可编辑 PPTX（真文本框）	15–25 分钟
Motion Design	MP4（25fps/60fps）+ GIF + BGM 配乐	8–12 分钟
设计变体	3+ 并排对比 · Tweaks 实时调参 · 跨维度探索	10 分钟
信息图	印刷级排版 · 可导 PDF/PNG/SVG	10 分钟
专家评审	雷达图 + Keep/Fix/Quick Wins · 可操作修复清单	3 分钟

交互原型：iOS 原型能做到什么程度

不只是「方块和箭头」。huashu-design 生成的是精确 iPhone 15 Pro 机身（灵动岛、状态栏、Home Indicator 全部还原），状态驱动的多屏切换，真实图片从 Wikimedia/Met/Unsplash 自动取图，最后用 Playwright 做自动化点击验证。这是一份能直接给投资人演示的产品原型。

PPT 导出：真正的可编辑文本框

传统 HTML→PPT 工具导出的 PPT 里文字是图片，无法编辑。huashu-design 的 html2pptx.js 逐元素读取 DOM 的 computedStyle，翻译成 PowerPoint 对象，写入的是真文本框——双击即可编辑。

Motion Design：时间轴驱动的动画引擎

Stage + Sprite 时间片段模型，4 个核心 API 覆盖所有动画需求：useTime（时间驱动）、useSprite（精灵帧）、interpolate（插值）、Easing（缓动）。一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。支持最长分钟级宣传片，配音可调用豆包 TTS（可选，云端）。

设计方向顾问：模糊需求怎么破

当用户说「做个好看的 PPT」而不给方向时，huashu-design 触发三套互补逻辑并行：

• 秒数轮盘：date +%S 取秒数，20 选 1——打破模型总偷选极简风格的惯性
• 现实参照：世界级获奖网站 / PPT / iOS 原型，真实设计迁移
• 最佳设计师：预算无上限时，最适合这个任务的工作室哲学

三个 subagent 各出一版真实视觉，摆在你面前让你看着选——不是让你在文字描述里盲选风格。底层是 60 种 HTML 原生风格库（网页 20 + PPT 20 + 信息图 20，纯 CSS 无需生图）作为弹药支撑。

---

核心机制：不是靠模型「发挥」，是硬约束流程

品牌资产协议（护城河）

涉及具体品牌时，skill 强制执行 5 步流程：

1. 问用户有没有 brand guidelines
2. 搜官方品牌页（.com/brand → brand.xxx.com → .com/press 三条兜底）
3. 下载资产（SVG → 官网 HTML 全文 → 产品截图取色）
4. grep 提取色值，按频率排序，过滤黑白灰
5. 写 brand-spec.md + CSS 变量

A/B 测试结果：v2（加品牌协议）的稳定性方差比 v1 低 5 倍。这不是玄学，是结构化流程的力量。

反 AI slop 规则

明确的「不要」清单：

• ❌ 紫渐变
• ❌ emoji 图标
• ❌ 圆角+左边框强调
• ❌ SVG 画人脸
• ❌ Inter 做 display font

替代方案：text-wrap: pretty + CSS Grid + 精心选择的 serif display font + oklch 色彩空间。

Junior Designer 工作流

skill 默认采用「初级设计师」模式——不是闷头做大招，而是：

1. 开工前列 assumptions + placeholders + reasoning comments
2. 尽早 show 给你看（哪怕只是灰色方块）
3. 填充内容 → variations → Tweaks 三步分别确认
4. 交付前 Playwright 自动过浏览器

"理解错了早改比晚改便宜 100 倍。"

---

技术架构

目录结构

huashu-design/
├── SKILL.md            # 主文档（65KB，给 agent 读的核心规则集）
├── assets/            # 预制组件库
│   ├── animations.jsx # Stage + Sprite + Easing + interpolate
│   ├── ios_frame.jsx  # iPhone 15 Pro 精确机身
│   ├── deck_stage.js  # HTML 幻灯片引擎
│   └── showcases/     # 24 个预制样例
├── references/        # 32 个子文档（深度按需读取）
│   ├── design-styles.md    # 60 种风格库
│   ├── animation-pitfalls.md
│   ├── gsap-recipes.md
│   └── ...
├── scripts/           # 导出工具链
│   ├── render-video.js     # HTML → MP4
│   ├── html2pptx.js       # HTML → 可编辑 PPTX
│   ├── export_deck_pdf.mjs
│   └── verify.py
└── demos/            # 9 个能力演示（含中英双版 GIF/MP4/HTML）

依赖

{
  "pdf-lib": "^1.17.1",
  "playwright": "^1.59.1",
  "pptxgenjs": "^4.0.1",
  "sharp": "^0.34.5"
}

Node.js 驱动，Python 仅用于少量脚本。核心链路（设计→渲染→导出）100% 本地运行，零网络零 key。云能力（豆包 TTS、AI 看片评审）全部隔离在 scripts/cloud/，完全可选，首次调用需 --yes 显式确认。

支持的 AI Agent

跨 agent 通用：Claude Code、Cursor、Codex、OpenClaw、Hermes 均可安装。

---

Star 趋势

2026-04-19 创建，到 2026-09 已获 24,358 stars，同期 forks 2,786。增长曲线陡峭，属于 AI Native Tools 赛道的头部项目。

---

与 Claude Design 的关系

	Claude Design	huashu-design
形态	网页产品（浏览器里用）	skill（agent 里用）
配额	订阅 quota	API 消耗，并行跑 agent 不受限
交付物	画布内 + 可导 Figma	HTML / MP4 / GIF / 可编辑 PPTX / PDF
操作方式	GUI（点、拖、改）	对话（说话，等 agent 做完）
复杂动画	有限	Stage + Sprite 时间轴，60fps 导出
跨 agent	专属 Claude.ai	任意 skill 兼容 agent

花叔的总结："Claude Design 是更好的图形工具，huashu-design 是让图形工具这层消失。两条路，不同受众。"

---

局限与边界

• ❌ 不支持图层级可编辑的 PPTX 到 Figma。产出 HTML，可截图、录屏、导图，但无法拖进 Keynote 改文字位置。
• ❌ Framer Motion 级别的复杂动画不行。3D、物理模拟、粒子系统超出 skill 边界。
• ❌ 完全空白的品牌从零设计质量会掉到 60–65 分。凭空画 hi-fi 本来就是 last resort。

"这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。"

---

作者：花叔

花生是 AI Native Coder、独立开发者、AI 自媒体博主。自述"一行代码都不会写"，但用 AI 做出了 AppStore 付费榜 Top 1 的"小猫补光灯"，写了 9 本技术书，开源的 skill 总共近 6 万 star。

代表作：

• 女娲 .skill：蒸馏任何人的思维方式（32.5k stars）
• huashu-design（24.1k stars）
• 张雪峰 .skill：高考/考研/职业规划认知框架（10.3k stars）
• darwin-skill：让 skill 无限进化的系统（6k stars）

自媒体全平台 30 万+ 粉丝。GitHub: https://github.com/alchaincyf