> [!NOTE]
> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
> [English](./README.en.md) · [原始项目](https://github.com/alchaincyf/huashu-design) · [上游 README](https://github.com/alchaincyf/huashu-design/blob/HEAD/README.md)
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
🌐 中文 · English
# Huashu Design
> *"打字。回车。一份能交付的设计就到你手里。"*
> *「打字。回车。一份能交付的设计。」*
[](LICENSE)
[](https://skills.sh)
[](https://skills.sh)
**对你的 agent 说一句话就行——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能用。**
3 到 30 分钟——你就能交付**产品发布动画**、可点击的 App 原型、可编辑的 PPT 演示稿、印刷级信息图。
不是「AI 凑合能看」的质量——看起来就像真正的设计团队做的。把品牌素材（logo、配色、UI 截图）交给 skill，它会读懂你品牌的调性；什么都不给，内置的 20 套设计词汇（design vocabularies）也能让你远离 AI 廉价感。
**本 README 中的每个动画都由 huashu-design 自己制作。** 没有 Figma，没有 After Effects——只需一句话 + 一次 skill 运行。下次产品发布需要宣传片？你也能自己做。
```
npx skills add alchaincyf/huashu-design
```
> 📣 **现已采用 MIT 许可证。** 自 2026-05-14 起，本 skill 在 [MIT License](LICENSE) 下完全开源——个人与**商业**使用均免费，无需授权。([变更说明](#license))
[看看效果](#demo-gallery) · [安装](#install) · [能做什么](#what-it-does) · [工作原理](#core-mechanics) · [对比 Claude Design](#vs-claude-design)
> 📖 **英文读者须知**：本 skill 由中文开发者打造。skill 的 agent 提示词（`SKILL.md`、`references/*.md`）为中文，但 agent 支持双语——英文任务同样没问题。下方演示为英文平行版本；中文版本见默认 [中文 README](README.md)。
>
> 📖 **致中文读者**：这个 skill 由花叔（@AlchainHust）开发。一句话能让 agent 在 3–30 分钟内交付**产品发布动画 / 可点击 App 原型 / 可编辑 PPT / 印刷级信息图**。完整中文介绍见 [README.md](README.md)（默认中文）。
---
▲ 10 秒主视觉动画，展示 huashu-design 能做什么（若自动播放失效可下载 MP4）
---
## 安装
```bash
npx skills add alchaincyf/huashu-design
```
然后直接和 Claude Code 对话：
```
"Make a keynote for AI psychology. Give me 3 style directions to pick from."
"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."
"Turn this logic into a 60-second animation. Export MP4 and GIF."
"Run a 5-dimension expert review on this design."
```
没有按钮、没有面板、没有 Figma 插件。Agent 无关（Agent-agnostic）——可接入 Claude Code、Cursor、Trae、Hermes、OpenClaw 或任何支持 markdown skill 的 agent。
---
## Star 历史
---
## 能做什么
| 能力 | 交付物 | 典型耗时 |
|---|---|---|
| 交互原型（App / Web） | 单文件 HTML · 真实 iPhone 边框 · 可点击 · Playwright 验证 | 10–15 分钟 |
| 演示文稿 | HTML deck（浏览器演示）+ 可编辑 PPTX（保留文本框） | 15–25 分钟 |
| 动效设计 | MP4（25fps / 60fps 插帧）+ GIF（调色板优化）+ BGM | 8–12 分钟 |
| 设计变体 | 3+ 并排对比 · Tweaks 实时参数 · 跨维度探索 | 10 分钟 |
| 信息图 / 数据可视化 | 印刷级排版 · 导出 PDF/PNG/SVG | 10 分钟 |
| 设计方向顾问 | 5 大流派 × 20 种理念 · 推荐 3 个方向 · 并行生成演示 | 5 分钟 |
| 五维专家点评 | 雷达图 + Keep/Fix/Quick Wins · 可执行改进清单 | 3 分钟 |
---
## 演示画廊
> 演示的英文平行版本。中文版本使用默认文件名（见中文 README）。
### 设计方向顾问
模糊需求时的兜底方案：从 5 大流派 × 20 种理念中挑选 3 个差异化方向，并行生成全部 3 个演示，供用户选择。
### iOS App 原型
像素级精准的 iPhone 15 Pro 机身（Dynamic Island / 状态栏 / Home Indicator）· 状态驱动的多屏导航 · 从 Wikimedia/Met/Unsplash 拉取真实图片 · 交付前 Playwright 点击测试。
### 动效设计引擎
Stage + Sprite 时间切片模型 · `useTime` / `useSprite` / `interpolate` / `Easing` — 四个 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 配乐成品。
### HTML 幻灯片 → 可编辑 PPTX
用于浏览器演示的 HTML deck · `html2pptx.js` 读取 DOM 计算样式，将每个元素转换为真实的 PowerPoint 对象 · 导出的是**真正的文本框**，而非贴图糊弄。
### Tweaks · 实时变体切换
配色 / 字体 / 信息密度参数化 · 侧边栏切换 · 纯前端 + `localStorage` 持久化 · 刷新后仍保留。
### 信息图 / 数据可视化
杂志级排版 · 精确的 CSS Grid 列 · `text-wrap: pretty` 排版细节 · 由真实数据驱动 · 导出矢量 PDF / 300dpi PNG / SVG。
### 五维专家点评
理念一致性 · 视觉层级 · 执行工艺 · 功能性 · 创新性 — 每项 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 改进清单。
### 初级设计师工作流
不做英雄式的一次性尝试：从假设 + 占位符 + 推理开始，尽早展示给用户，再迭代。早期纠正误解比后期修正便宜 100 倍。
### 核心素材协议 · 5 步硬性流程
只要任务涉及特定品牌就必须执行：询问 → 搜索 → 下载（三条回退路径）→ 验证 + 提取 → 写入 `brand-spec.md`，涵盖 **logo、产品图、UI 截图、配色、字体** — 所有必需素材，不只是配色。
---
## 核心机制
### 核心素材协议
本 skill 中最严格的规则。当任务涉及特定品牌（Stripe、Linear、Anthropic、DJI、你自己的公司等）时，强制执行五个步骤：
| 步骤 | 操作 | 目的 |
|---|---|---|
| 1 · 询问 | 6 类素材清单：logo / 产品图 / UI 截图 / 配色板 / 字体 / 品牌指南 | 尊重现有资源 |
| 2 · 搜索官方渠道 | `.com/brand` · `.com/press` · `brand..com` · 产品页 · 发布影片 | 找到权威素材 |
| 3 · 按素材类型下载 | Logo（SVG → HTML 内联 SVG → 社交头像）· 产品图（主视觉 → 新闻稿素材包 → 发布视频帧 → 参考图 AI 生成）· UI（App Store 截图 → 官方视频帧） | 每类素材三条回退路径 |
| 4 · 验证 + 提取 | 检查 logo 保真度 · 产品图分辨率 · UI 时效性 · 从真实素材 grep 配色 hex | **绝不凭记忆猜测** |
| 5 · 固化为规范 | 写入 `brand-spec.md`，包含 logo 路径、产品图路径、UI 截图路径、配色/字体的 CSS 变量 | 未固化的知识会蒸发消失 |
**资产重要性排序**（来自 skill 内部评分标准）：
1. Logo — 任何品牌必备
2. 产品渲染图 — 实体产品必备
3. UI 截图 — 数字产品必备
4. 色值 — 辅助
5. 字体 — 辅助
A/B 测试（v1 对比 v2，各 6 个 agent）：**v2 将稳定性方差降低了 5 倍**。稳定性的稳定性——这才是真正的护城河。
### Design Direction Advisor（Fallback 回退模式）
当 brief 过于模糊、无法直接执行时触发：
- 不要凭泛泛直觉开工——进入 Fallback 模式
- 从 5 个流派 × 20 种哲学中推荐 3 个差异化方向，每个方向**来自不同流派**
- 每个方向附带代表作、格式塔（gestalt）关键词、代表性设计师
- 并行生成 3 个视觉 demo，供用户选择
- 选定后，继续进入 Junior Designer 主流程
### Junior Designer 工作流
每项任务的默认工作模式：
- 一次性发送完整问题集，等待全部回答后再继续
- 将假设、占位符、推理注释直接写入 HTML
- 尽早展示给用户（哪怕只是灰色块）
- 填入真实内容 → 变体 → Tweaks——在这三个步骤各展示一次
- 交付前用 Playwright 手动在浏览器中目测检查
### Fact Verification First（原则 #0）
最高优先级规则，源于一次真实失败模式：当任务提及具体产品 / 技术 / 事件（例如 "DJI Pocket 4"、"Nano Banana Pro"、"Gemini 3 Pro"）时，第一步**必须**执行 `WebSearch`，以确认其是否存在、发布状态、当前版本及规格。不得依赖训练语料记忆中的断言。一次搜索耗时约 10 秒；一次错误假设的代价是 1–2 小时返工。
### Anti AI-slop Rules（反 AI 俗套规则）
避免 AI 输出的视觉公约数（紫色渐变 / emoji 图标 / 圆角 + 左侧边框强调 / SVG 人物 / Inter 作展示字体 / **用 CSS 剪影代替真实产品图**）。使用 `text-wrap: pretty` + CSS Grid + 精心选择的衬线展示字体 + oklch 色彩。
---
## vs. Claude Design
我先直说：Core Asset Protocol 的理念借鉴自 Anthropic 为 Claude Design 编写的 system prompts。该 prompt 反复强调一个观点——**出色的高保真设计不是从空白页开始，而是从既有设计语境中生长出来**。这一条原则，就是 65 分设计与 90 分设计之间的分水岭。
定位差异：
| | Claude Design | huashu-design |
|---|---|---|
| 形态 | Web 产品（在浏览器中使用） | Skill（在 Claude Code 中使用） |
| 配额 | 订阅配额 | API 用量 · 并行 agent 不受限 |
| 输出 | Canvas + Figma 导出 | HTML / MP4 / GIF / 可编辑 PPTX / PDF |
| 交互 | GUI（点击、拖拽、编辑） | 对话（告诉 agent，等待） |
| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 |
| Agent 兼容性 | 仅 Claude.ai | Claude Code / Cursor / Trae / Hermes / OpenClaw |
Claude Design 是**更好的图形工具**。Huashu-design 让**图形工具这一层消失**。两条路径，面向不同受众。
---
## Limitations（局限）
- **无可图层编辑的 PPTX 与 Figma 往返。** 输出为 HTML——可截图、可录屏、可导出图片，但无法拖入 Keynote 微调文字位置。
- **Framer-Motion 级别的复杂动画不在范围内。** 3D、物理模拟、粒子系统超出本 skill 边界。
- **从零打造品牌时，设计质量会降至 60–65 分。** 凭空绘制高保真始终是最后手段。
这是一个 80 分的 skill，不是 100 分的产品。对于不愿打开图形界面的用户，80 分的 skill 胜过 100 分的产品。
---
## Repository Structure（仓库结构）
```
huashu-design/
├── SKILL.md # Main doc (read by agent, Chinese)
├── README.md # Chinese README (default)
├── README.en.md # English README (this file)
├── assets/ # Starter Components
│ ├── animations.jsx # Stage + Sprite + Easing + interpolate
│ ├── ios_frame.jsx # iPhone 15 Pro bezel
│ ├── android_frame.jsx
│ ├── macos_window.jsx
│ ├── browser_window.jsx
│ ├── deck_stage.js # HTML deck engine
│ ├── deck_index.html # Multi-file deck assembler
│ ├── design_canvas.jsx # Side-by-side variation display
│ ├── showcases/ # 24 prebuilt samples (8 scenes × 3 styles)
│ └── bgm-*.mp3 # 6 scene-specific background tracks
├── references/ # Drill-down docs by task (Chinese)
│ ├── animation-pitfalls.md
│ ├── design-styles.md # 20 design philosophies in detail
│ ├── slide-decks.md
│ ├── editable-pptx.md
│ ├── critique-guide.md
│ ├── video-export.md
│ └── ...
├── scripts/ # Export toolchain
│ ├── render-video.js # HTML → MP4
│ ├── convert-formats.sh # MP4 → 60fps + GIF
│ ├── add-music.sh # MP4 + BGM
│ ├── export_deck_pdf.mjs
│ ├── export_deck_pptx.mjs
│ ├── html2pptx.js
│ └── verify.py
└── demos/ # Capability demos referenced by this README
```
---
## Origin Story（缘起）
Anthropic 发布 Claude Design 那天，我玩到凌晨 4 点。几天后我发现之后再也没打开过——不是因为它不好（它是该品类中最精致的产品），而是我宁愿让 agent 在终端里工作，也不愿打开任何图形界面。
于是我让一个 agent 解构 Claude Design 本身（包括社区流传的 system prompts、品牌资产协议、组件机制），提炼为结构化 spec，再写成 skill 安装到我自己的 Claude Code 中。
感谢 Anthropic 把 Claude Design 的 prompts 写得如此清晰。这种受其他产品启发的衍生作品，是 AI 时代开源文化的新形态。
---
## Available Languages（可用语言）
本 skill 的社区维护翻译。翻译质量与许可条款由各维护者负责——使用前请查阅对应仓库。
| Language | Maintainer | Repository |
|---|---|---|
| English | [@namandhakad712](https://github.com/namandhakad712) | [namandhakad712/huashu-design-en](https://github.com/namandhakad712/huashu-design-en) |
| 한국어 (Korean) | [@ktkarchive](https://github.com/ktkarchive) | [ktkarchive/ktk-design](https://github.com/ktkarchive/ktk-design) |
| Tiếng Việt (Vietnamese) | [@letrquan](https://github.com/letrquan) | [letrquan/huashu-design](https://github.com/letrquan/huashu-design) |
想添加你的语言？Fork 仓库，翻译 `SKILL.md` + `README.md`，并在此开一个 issue，我们会添加链接。
---
## License（许可证）
**已于 2026-05-14 重新许可为 MIT。** 本 skill 此前在 Personal Use License 下发布，限制商业使用。该限制现已移除。
根据 [MIT License](LICENSE)，你可自由**使用、修改和分发**本 skill，用于任何目的，**包括商业用途**——公司内部、客户交付物、付费产品的一部分，任何地方均可。无需事先授权、许可费或通知。署名欢迎但非必需。
---
## Connect · Huasheng（花叔）
Huasheng（花叔）是 AI-native 程序员、独立开发者与 AI 内容创作者。代表作：Cat Fill Light（App Store 付费榜 Top 1）、*A Book on DeepSeek*、Nüwa.skill（GitHub 21k+ stars）。各平台合计 30 万+ 粉丝。
| Platform | Handle | Link |
|---|---|---|
| X / Twitter | @AlchainHust | https://x.com/AlchainHust |
| WeChat Official Account | 花叔 | Search "花叔" in WeChat |
| Bilibili | 花叔 | https://space.bilibili.com/14097567 |
| YouTube | 花叔 | https://www.youtube.com/@Alchain |
| Xiaohongshu | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
| Official Site | huasheng.ai | https://www.huasheng.ai/ |
| Developer Hub | bookai.top | https://bookai.top |
合作或赞助内容，请通过以上任一渠道私信联系。