huashu-design
alchaincyf/huashu-design加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
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 动画直接交付
很多团队的设计需求远大于设计师的吞吐量。以前只能排队等；现在可以让 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 分钟 |
不只是「方块和箭头」。huashu-design 生成的是精确 iPhone 15 Pro 机身（灵动岛、状态栏、Home Indicator 全部还原），状态驱动的多屏切换，真实图片从 Wikimedia/Met/Unsplash 自动取图，最后用 Playwright 做自动化点击验证。这是一份能直接给投资人演示的产品原型。
传统 HTML→PPT 工具导出的 PPT 里文字是图片，无法编辑。huashu-design 的 html2pptx.js 逐元素读取 DOM 的 computedStyle，翻译成 PowerPoint 对象，写入的是真文本框——双击即可编辑。
Stage + Sprite 时间片段模型，4 个核心 API 覆盖所有动画需求：useTime（时间驱动）、useSprite（精灵帧）、interpolate（插值）、Easing（缓动）。一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。支持最长分钟级宣传片，配音可调用豆包 TTS（可选，云端）。
当用户说「做个好看的 PPT」而不给方向时，huashu-design 触发三套互补逻辑并行：
date +%S 取秒数，20 选 1——打破模型总偷选极简风格的惯性三个 subagent 各出一版真实视觉，摆在你面前让你看着选——不是让你在文字描述里盲选风格。底层是 60 种 HTML 原生风格库（网页 20 + PPT 20 + 信息图 20，纯 CSS 无需生图）作为弹药支撑。
涉及具体品牌时，skill 强制执行 5 步流程：
.com/brand → brand.xxx.com → .com/press 三条兜底）brand-spec.md + CSS 变量A/B 测试结果：v2（加品牌协议）的稳定性方差比 v1 低 5 倍。这不是玄学，是结构化流程的力量。
明确的「不要」清单：
替代方案：text-wrap: pretty + CSS Grid + 精心选择的 serif display font + oklch 色彩空间。
skill 默认采用「初级设计师」模式——不是闷头做大招，而是：
"理解错了早改比晚改便宜 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 显式确认。
跨 agent 通用：Claude Code、Cursor、Codex、OpenClaw、Hermes 均可安装。
2026-04-19 创建，到 2026-09 已获 24,358 stars，同期 forks 2,786。增长曲线陡峭，属于 AI Native Tools 赛道的头部项目。
| 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 是让图形工具这层消失。两条路，不同受众。"
"这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。"
花生是 AI Native Coder、独立开发者、AI 自媒体博主。自述"一行代码都不会写"，但用 AI 做出了 AppStore 付费榜 Top 1 的"小猫补光灯"，写了 9 本技术书，开源的 skill 总共近 6 万 star。
代表作：
自媒体全平台 30 万+ 粉丝。GitHub: https://github.com/alchaincyf