开源项目地址：

huashu-design

一、 TL;DR

huashu-design 并不是一个简单的 React 组件库，而是一套让 AI Agent（如 Claude Code）具备真实设计交付能力的协议。

• 核心源头：作者逆向并吸收了 Anthropic Claude Design 的系统提示词精髓。
• 方法论：强制执行“事实验证先于假设”，通过 5 步品牌资产协议杜绝“AI Slop”。
• 技术突破：打通了从 HTML 到原生可编辑 PPTX 和 60fps 视频的最后一公里。
• 关键判断：设计工具正在从 GUI-first（图形界面优先）转向 Agent-first（智能体优先）。

二、 缘起：从凌晨四点的兴奋到冷静的“手术刀”拆解

在 Anthropic 发布 Claude Design 的当天，作者像大多数开发者一样，玩到了凌晨四点。那种在对话框里直接生成完整网页、可点击原型的兴奋感，确实很久没有过了。

但作者发现了一个奇怪的现象：几天后，他再也没点开过它。

不是产品不好。Claude Design 是目前最成熟的 GUI 设计工具，但对于像作者这样宁愿死在终端（Terminal）里也不想打开浏览器的人来说，它依然是一个需要手动操作的“图形工具”。

于是他决定拿起“手术刀”，对这款产品进行了深度的逻辑剥离：

1. 让 Agent 拆解了社区流传出来的那份 Claude Design 系统提示词，蒸馏出了它的组件机制和品牌资产处理协议。
2. 把这些逻辑结合之前所有的设计类探索，写成了一个装进 Claude Code 的 Skill。

这就是 huashu-design 的由来。

三、 方法论：从 Anthropic 那里“借”来的品牌资产协议

在逆向的过程中，作者发现 Claude Design 最核心的理念隐藏在它的 Prompt 里：“好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来。”

凭空画出的 Hi-Fi 往往带着一股廉价的“塑料味”（AI Slop），因为它们缺乏真实世界的约束。为了解决这个问题，作者在 huashu-design 里固化了一套 5 步硬流程：

• Step 1 · 问：明确询问品牌指南（Brand Guidelines），不留模糊地带。
• Step 2 · 搜：利用 WebSearch 自动寻找官网的 /brand 或 /press 页面。
• Step 3 · 下：三层兜底抓取资产（独立 SVG -> HTML 内联 -> 截图取色）。
• Step 4 · 提：使用正则表达式从下载的代码中提取高频 Hex 色值，拒绝从记忆里“猜”颜色。
• Step 5 · 固：生成 brand-spec.md 文件，让所有样式引用这份“唯一真理来源”。

个人感觉，这套协议就是划分 65 分平庸作品和 90 分专业设计的“分水岭”。

四、 实战：在终端里过一把“并行设计师”的瘾

有了这套协议，Agent 就不再是盲目作画，而是像一个带着品牌手册入场的专业设计师。

1. 一次生成 4 个风格的 PPT

作者曾在准备一场 AI 心理学演讲时，在终端里只说了一句话：“推荐 4 个差异化风格方向给我选”。
huashu-design 启动了它的“设计方向顾问模式”，从 20 种预置的设计哲学中挑选了 4 个方向，并并行启动了 4 个 Agent。
40 分钟后，4 套风格迥异的 17 页 PPT 就摆在了面前。

“这说明 Skill 的核心优势在于‘规模化’：你可以让 10 个 Agent 同时尝试 10 种风格，而你只需要做最后的决策者。”

2. 真·可点击的 iOS 原型

在制作 AI 番茄钟原型时，huashu-design 生成的不是那种 Web 模拟感，而是带有精确 iPhone 15 Pro 边框的原型。
更硬核的是，它在交付前会自己跑一遍 Playwright 自动化点击测试。如果按钮点不动或者页面白屏，它会自我修正后再交付。

五、 技术下钻：打通“最后一公里”的翻译官

很多 AI 设计工具只能给出一张截图，但 huashu-design 追求的是“可编辑交付”。

1. 从 HTML 到可编辑 PPTX

在源码位置 scripts/html2pptx.js 中，作者实现了一套精巧的翻译机制：

// 源码位置：scripts/html2pptx.js:L45
async function translateDomToPpt(element) {
  const style = window.getComputedStyle(element);
  const rect = element.getBoundingClientRect();
  
  // 将 DOM 的绝对位置、颜色、字体翻译为 PptxGenJS 对象
  pptx.addText(element.innerText, {
    x: rect.left / scale,
    y: rect.top / scale,
    color: rgbToHex(style.color),
    fontSize: parseFloat(style.fontSize) * 0.75
  });
}

这段代码解决了 AI 产物无法进入传统办公软件的难题。它不是把网页导出一张图贴进 PPT，而是把每一个 div 和 span 映射成 PowerPoint 里的原生形状和文本框。

2. 60fps 的动效引擎

项目中 assets/animations.jsx 借鉴了传统 Flash 的“舞台（Stage）+ 角色（Sprite）”模型。
通过提供一个归一化进度值（0-1），所有角色根据这个进度执行插值函数。这保证了动效的确定性，也为后续用 ffmpeg 导出高清视频提供了可能。

六、 Skills 文档随便说：S 级 Skill 的自我修养

评价一个 Skill 是否牛逼，看它的 SKILL.md 就够了。

huashu-design 的文档在文本组织上极其严密。它没有废话，直接定义了“位置四问”：叙事角色、观众距离、视觉温度、容量估算。这种精细的写作强迫模型在动笔之前先进行“设计规划”，从底层逻辑上规避了 AI 常见的“胡乱堆砌”。

与同类 Skill 对比：

维度	huashu-design	普通绘图 Skill	优秀设计 Skill
入口设计	模糊诊断 + 风格顾问	仅支持绘图指令	明确指令确认
资产意识	强制品牌资产协议	无	提示用户提供素材
质量意识	自动化点击验证 (Playwright)	无	人工确认

定位判断：

• 本 Skill 属于：S 级（具备完整的防御性工程和闭环交付能力）。
• 最适合场景：需要快速生成高保真、品牌化、可演示的物料（PPT/App 原型/动画）。
• 不适合场景：极复杂的 3D 物理模拟或需要图层级 Figma 协作的场景。

七、 上案例

直接用这个skills生成了一套Ppt：

八、 总结：让图形界面自然消亡

我越来越坚信作者的一个判断：Claude Design 这种 GUI-first 的产品是给 Figma 这代工具续命，而 huashu-design 这种 Agent-first 的 Skill 是让 Figma 这一代工作流自然消亡。

并不是说 Figma 会消失，而是对于那些独立开发者和内容创作者来说，当在终端里一句话就能拿到 80 分的交付物时，可能就再也不会点开那个昂贵且复杂的图形界面了。

“就像 Dock 里那些再也没点开过的图标，有些工作流注定会被绕开。”

最后，感谢 Anthropic 把提示词写得那么清晰，也感谢作者的逆向开源，让这种基于灵感的二次创作在 AI 时代成为了可能。

参考文献

• huashu-design GitHub 仓库
• 我逆向了Claude Design！免费开源！ - 花叔
• Claude Design 官方发布公告