双剑合璧！轻松一句话生成专业设计稿，开启高效创作之旅！|svg|人工智能模型|动画|幻灯片|时间轴|编程|设计稿

在你的 agent 里打一句话，拿回一份能交付的设计。

3 到 30 分钟，你能 ship 一段产品发布动画、一个能点击的 App 原型、一套能编辑的 PPT、一份印刷级的信息图。

不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。给 skill 你的品牌资产（logo、色板、UI 截图），它会读懂你的品牌气质；什么都不给，内置的 20 种设计语汇也能兜底到不出 AI slop。

你看到这篇 README 里的每一个动画，都是 huashu-design 自己做的。不是 Figma，不是 AE，就是一句话 prompt + skill 跑通。下次产品发布要做宣传片？现在你也能做。

跨 agent 通用——Claude Code、OpenCode、Cursor、Codex、OpenClaw、Hermes 都能装。

是什么

huashu-design 是一个Agent-Agnostic 的设计技能包，本质上是给 AI Agent 看的结构化设计规范 + HTML Starter Components。

装好后，你对 Agent 说一句话，它就会在终端里生成：

能点击的 iOS/Android App 原型（单文件 HTML）
带 Speaker Notes 的演讲幻灯片（可导出 PPTX）
25fps / 60fps 动画视轨（MP4 + GIF + BGM）
设计变体对比（Tweaks 实时调参）
印刷级信息图（PDF/PNG/SVG）
专家级 5 维度设计评审报告

它的底层媒介是HTML + React + Babel，不是让设计师用——是让 AI 用 HTML 作为渲染管道，产出设计师要的质量。

能做什么

能力

交付物

典型耗时

交互原型（App / Web）

单文件 HTML · 真 iPhone bezel · 可点击

10‑15 min

演讲幻灯片

HTML deck + 可编辑 PPTX（真文本框）

15‑25 min

时间轴动画

MP4（25fps / 60fps 插帧）+ GIF + BGM

8‑12 min

设计变体

3+ 并排对比 · Tweaks 实时调参

10 min

信息图 / 可视化

印刷级排版 · 可导 PDF/PNG/SVG

10 min

设计方向顾问

5流派×20种哲学 · 推荐3方向 · 并行 Demo

5 min

5维度专家评审

雷达图 + Keep/Fix/Quick Wins 清单

3 min

Demo 画廊

设计方向顾问

模糊需求时的 fallback：从 5 流派 × 20 种设计哲学里挑 3 个差异化方向，并行生成 3 个 Demo 让你选。

iOS App 原型

iPhone 15 Pro 精确机身（灵动岛 / 状态栏 / Home Indicator）· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。

Motion Design 引擎

Stage + Sprite 时间片段模型 · useTime / useSprite / interpolate / Easing 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。

HTML Slides → 可编辑 PPTX

HTML deck 浏览器演讲 · html2pptx.js 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是真文本框，不是图片铺底。

Tweaks · 实时变体切换

配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + localStorage 持久化 · 刷新不丢。

信息图 / 数据可视化

杂志级排版 · CSS Grid 精准分栏 · text-wrap: pretty 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。

5 维度专家评审

哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。

Junior Designer 工作流

不闷头做大招：先写 assumptions + placeholders + reasoning，尽早 show 给你，再迭代。理解错了早改比晚改便宜 100 倍。

品牌资产协议 5 步硬流程

涉及具体品牌时强制执行：问 → 搜 → 下载（三条兜底）→ grep 色值 → 写 brand-spec.md。

核心机制品牌资产协议

这是整个 skill 最硬的一条规则，涉及具体品牌时强制执行 5 步：

问
— 用户有 brand guidelines 吗？
搜官方品牌页
— brand.com/brand、brand.com/press
下载资产
— SVG、色值、截图，三条兜底
grep 提取色值
— 从资产里抓所有色，按频率排序
固化 spec
— 写 brand-spec.md，CSS 变量化

作者实测：v2 稳定性比 v1 高 5 倍。稳定性是，这个 skill 的护城河。

Junior Designer 工作流

不闷头做大招。开工前先写 assumptions + placeholders + reasoning，尽早 show 给用户看，理解错了早改比晚改便宜 100 倍。

设计方向顾问（Fallback）

需求模糊时触发，从 5 流派 × 20 种设计哲学里推荐 3 个差异化方向，并行生成 Demo 让你选。代表流派包括：

Pentagram
— 信息建筑
Field.io
— 运动诗学
Kenya Hara
— 东方极简
Sagmeister
— 实验先锋

反 AI slop 规则

避免一眼 AI 的视觉最大公约数（紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display）。用 text-wrap: pretty + CSS Grid + 精心选择的 serif display 和 oklch 色彩。

怎么安装为 OpenCode 安装 huashu-design Skill

由于 OpenCode 完美兼容 Claude 生态，它可以直接加载 .claude/skills/ 目录下的技能。安装 huashu-design 最简单的方法是使用官方推荐的一行命令：

npx skills add alchaincyf/huashu-design

这个命令会自动从 GitHub 下载 Skill 文件，并为你创建正确的目录结构。

安装完成后，Skill 会被放置在 ~/.claude/skills/huashu-design/ 目录下。你可以运行以下命令检查文件是否就位：

ls ~/.claude/skills/huashu-design/

两种安装方式的选择：

npx skills add（推荐）
：自动完成下载和目录创建，全程约 40 秒，省心省力。
手动安装
：如果你习惯精细控制，也可以从 GitHub 仓库手动下载，解压后放到 .claude/skills/huashu-design/ 目录下。

其他 Agent

支持 Skill 的 Agent：Claude Code、Cursor、Codex、OpenCode、OpenClaw、Hermes Agent。

npx skills add alchaincyf/huashu-design

手动安装：

git clone https://github.com/alchaincyf/huashu-design.git ~/.hermes/skills/huashu-design

怎么用

装好后，直接对 Agent 说人话：

「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」「帮我对这个设计做一个 5 维度评审」

没有按钮、没有面板、没有 Figma 插件。打字，等 Agent 做。

和 Claude Design 的关系

作者花生大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷的。那份提示词反复强调好的高保真设计不是从白纸开始，而是从已有的设计上下文里长出来。

两条工具的定位差异：

Claude Design

huashu-design

形态

网页产品（浏览器里用）

Skill（终端里用）

配额

订阅 quota

API 消耗，无配额限制

交付物

画布内 + 可导 Figma

HTML / MP4 / GIF / PPTX / PDF

操作方式

GUI（点、拖、改）

对话（说话、等 agent 做）

复杂动画

有限

Stage + Sprite 时间轴，60fps 导出

Claude Design 是更好的图形工具，huashu-design 是让图形工具这层消失。

已知局限

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

作者给自己的定位很诚实：这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。

仓库结构一览

huashu-design/
├─ SKILL.md # 主文档（给 agent 读）
├─ README.md # 给用户读
├─ assets/ # Starter Components
│ ├─ animations.jsx # Stage + Sprite + Easing + interpolate
│ ├─ ios_frame.jsx # iPhone 15 Pro bezel
│ ├─ macos_window.jsx
│ ├─ browser_window.jsx
│ ├─ deck_stage.js # HTML 幻灯片引擎
│ ├─ design_canvas.jsx # 并排变体展示
│ ├─ showcases/ # 24 个预制样例（8场景×3风格）
│ └─ bgm-*.mp3 # 6 首场景化背景音乐
├─ references/ # 深入子文档
│ ├─ animation-pitfalls.md
│ ├─ design-styles.md # 20种设计哲学详细库
│ ├─ slide-decks.md
│ ├─ editable-pptx.md
│ └─ critique-guide.md
├─ scripts/ # 导出工具链
│ ├─ render-video.js # HTML → MP4
│ ├─ convert-formats.sh # MP4 → 60fps + GIF
│ ├─ add-music.sh # MP4 + BGM
│ ├─ html2pptx.js # HTML deck → 可编辑 PPTX
│ └─ verify.py # Playwright 验证
└─ demos/ # 9个能力演示，中英双版