前段时间，花叔（Alchain）在 GitHub 上开源了一个项目叫 huashu-design。上线两个多月，拿了 20000+ star，2500+ fork。
这是个什么东西？一句话概括：它是一套给 AI 用的设计 skill，让 Claude Code 能在命令行里直接产出能交付的设计——交互原型、幻灯片、动画视频、信息图、设计评审，全是可用的 HTML 原生实现，不是 mockup 也不是图片，是真的可以点、可以播放、可以导出的东西。
读完它的 SKILL.md 和整个工程结构之后，我觉得这个东西值得认真写一篇。
目前 AI 做设计的局面大概是这样的：
- •• Figma 插件能帮你出一张 UI mockup，但要把它变成可交互的原型，还是得人来串。
- •• Midjourney 能给你一张漂亮的图，但你没法把它当应用点。
- •• V0、Bolt 这类工具能生成 React 页面，但偏开发思维，不带设计方法论。
huashu-design 走了一条不同的路：它不是给设计师用的 AI 工具，它是给 AI 本身装上的「设计能力」。安装之后，AI agent 就有了设计思维——不是「生成一个登录页」，而是「分析品牌、评估场景、选风格、出三版对比、用 Playwright 自检、导出交付物」。
它的目标不是 100 分的专业设计，而是80 分的可交付设计——够快、够用、够专业，而且不需要设计师介入。
七个核心能力
huashu-design 能做什么？我按交付物类型把它的能力梳理了一遍：
1. 交互原型
输入一句话，输出一个单文件 HTML。市面上大部分 AI 原型生成器输出的是静态 mockup，但 huashu-design 的产品是可点击的——按钮能按、页面能切、表单能填。它还内嵌了 iPhone 15 Pro 的 bezel 组件，做 iOS 应用原型直接套壳。
2. 演讲幻灯片
这是它最重的能力之一。生成的 HTML deck 能直接在浏览器里做演讲（类似 Keynote 的播放模式），同时还能导出成可编辑的 PPTX。PPTX 的导出方式是读取 DOM 的 computedStyle，翻译成 PowerPoint 对象——文本框是真正的文本框，不是截图。
3. 时间轴动画
从一段脚本逻辑直接出动画视频。支持 25fps 和 60fps 两档，能加 BGM，能导出 MP4 和 GIF。它有一套精简的动画引擎——只需要四个 API（useTime、useSprite、interpolate、Easing），就能驱动整个动画。
4. 设计变体探索
这是它的杀手级体验。你用自然语言说「做个 AI 番茄钟的界面」，它不是出一版，而是出 3 版以上的并排对比，并且支持 Tweaks（实时调参）——你可以说「把第二版的蓝色换成暖色调」，它立刻刷新。这种交互方式让非设计师也能做设计探索。
5. 信息图与可视化
印刷级排版，能导出 PDF、PNG、SVG 和 300dpi 位图。用 CSS Grid 和 text-wrap: pretty 做杂志级排版，oklch 色彩空间做色彩管理，出来的东西可以直接放进汇报材料。
6. 设计方向顾问
当你的需求模糊到「我也不知道要什么风格」的时候，它会启动三套并行逻辑：一是用秒数轮盘随机选一个风格（打破模型总选极简风的惯性），二是参照世界级获奖设计找对应参照，三是选一位最适合的设计工作室作为哲学指导。它内置了 40 种 HTML 原生风格，按大胆 / 中性 / 安静三级分类。
7. 5 维度设计评审
输入一个设计，它从信息层级、视觉一致性、动效质量、可访问性、品牌一致性五个维度打分，输出雷达图和 Keep / Fix / Quick Wins 清单。用 Playwright 做自动截图和交互验证，不是只靠「看代码」就给意见。
怎么用？
安装就一行：
npx skills add alchaincyf/huashu-design
安装之后，在 Claude Code（或者其他支持 skill 的 agent）里直接说话就行。给几个实际的 prompt 例子：
「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」
「做个 AI 番茄钟的 iOS 原型，4 个核心屏幕要真能点击」
「把这段产品逻辑做成 60 秒的解说动画，导出 MP4 和 GIF」
「这个设计帮我做个 5 维度评审，告诉我哪里可以改」
有意思的是，它是 agent-agnostic 的——不锁定 Claude Code，Cursor、Codex、OpenClaw、Hermes，任何支持 skill 机制的 agent 都能装。
三个值得说的设计决策
读它的 SKILL.md 时，有几个设计决策让我印象深刻。
品牌资产协议：绝不靠记忆猜颜色
这是它最「硬核」的一条规则。涉及具体品牌时，AI 不能从记忆里凭感觉取色，必须走一个 5 步硬流程：
- 1. 先问用户有没有 brand guidelines
- 3. 如果搜不到，下载 SVG 转 HTML 再截图取色
- 5. 固化到
brand-spec.md 和 CSS 变量
花叔自己在 README 里写了一句：「A/B 测试显示，v2 的稳定性方差比 v1 低了 5 倍。」这背后是大量的 token 消耗——取一个色值可能要花几百条上下文，但为了品牌一致性，他选择不省。
设计方向顾问：AI 也有「设计直觉」
用户给模糊需求时，最省事的做法是 AI 直接出一个「干净、现代」的方案——就是社交媒体上泛滥的那种蓝紫渐变圆角大卡片。但 huashu-design 不这么做。
它的三套并行逻辑里，最妙的是「秒数轮盘」：用 date +%S 取当前秒数，20 种风格随机选 1 种——从 brutalist 到 swiss-modern 到 vaporwave，完全打破模型偏好的惯性。等于是给 AI 装了一个「随机灵感开关」。
反 AI slop：拒绝视觉最大公约数
huashu-design 明确禁止了一系列「AI 视觉习惯」：紫渐变、emoji 图标、圆角+左侧边框强调色、SVG 画人脸、Inter 字体做标题。这些是当前 AI 生图的视觉最大公约数，出现在任何 AI 产出物里都会立刻被识别为「AI 做的」。
这是 AI 设计领域一个有趣的 Meta 问题：工具越强，「AI 味」越重。huashu-design 选择主动对抗这种趋同。
技术栈一览
它的技术栈相当务实：
| |
|---|
| |
| CSS Grid + text-wrap: pretty |
| |
| 自研 Stage + Sprite 引擎（4 API） |
| Playwright 截图 + 控制台错误 + 点击测试 |
| |
| html2pptx.js（读 DOM computedStyle → PowerPoint 对象） |
| Wikimedia/Met/Unsplash 公共领域取图 |
没有 Figma API，没有 Canvas 框架，没有 React。它就是靠浏览器原生能力和一堆精密的约束规则，让 LLM 的代码生成能力发挥到设计领域。
局限和边界
花叔在 README 里明确写了它的局限，坦率程度少见：
- •• 不支持图层级可编辑的 Figma 导出——产出是 HTML，要进 Figma 需要截图或录屏
- •• 不支持复杂动画——Framer Motion 级别的复杂动效（3D、物理模拟、粒子系统）超出边界
- •• 从零做品牌设计会打折——没有现成品牌资产时，质量会降到 60-65 分
- •• 定位是 80 分的 skill——不是 100 分的产品，适合快速出稿而非最终交付
这些局限是有意为之的。它不求做最全的，而是做一个真正能用、能加速工作流的工具。
作者是谁？
作者花叔（Alchain）是一个中文 AI 圈的老面孔。全平台 30 万+ 粉丝，做过几个影响力不小的项目：小猫补光灯（曾登 AppStore 付费榜 Top 1）、《一本书玩转 DeepSeek》、女娲 .skill（GitHub 12000+ star）。
huashu-design 是他对「AI + 设计」这个方向的最新思考。从女娲到花叔设计，能看出他在 agent 时代的一条清晰路径：不做 AI 工具，做 AI 的能力插件。
总结
huashu-design 做的事情本质上很简单：给 LLM 装上一个设计部门。
它不是设计师的替代品，而是「没有设计师的团队」的平替方案。它的真正价值不在于生成的图好不好看，而在于它用一套结构化的规则（品牌资产协议、三套逻辑顾问、反 AI slop），把设计从「靠审美」变成了一个可复现、可迭代、可交付的工作流。
在这个「人人都在给 AI 做工具」的时代，花叔选择了另一个方向：给 AI 做能力。这个思路，可能比任何单一工具走得更远。
#huashu-design #花叔设计 #AI设计 #ClaudeCode #开源
关注我，了解更多AI产品
