## 项目概述

Huashu Design 是一个面向 Claude Code 等 AI 编程助手的 HTML 原生设计技能（skill），由 alchaincyf 开发，采用 MIT 许可证。它允许用户通过自然语言指令，在 3 到 30 分钟内生成高保真原型、幻灯片、动画、信息图等设计交付物，并支持导出 MP4、GIF、可编辑 PPTX、PDF 等格式。该项目强调“打字、回车、一份能交付的设计”，旨在让 AI 直接产出接近专业设计团队水准的作品，同时避免常见的“AI 味”设计。

## 核心功能

- **交互原型**：生成单文件 HTML 原型，支持真实 iPhone 边框、可点击交互，并通过 Playwright 验证。
- **演讲幻灯片**：生成 HTML 演示文稿，并可导出为可编辑的 PPTX 文件（保留文本框）。
- **时间轴动画**：创建动画并导出为 MP4（25/60fps）、GIF（调色板优化）及带背景音乐的成片。
- **设计变体**：提供 3 个以上并排对比的变体，支持实时参数调整（Tweaks）。
- **信息图/可视化**：生成印刷级排版的信息图，可导出 PDF、PNG、SVG。
- **设计方向顾问**：当需求模糊时，通过三套逻辑并行（秒数轮盘、现实参照、最佳设计师）直接生成 3 版真实视觉供用户选择。
- **5 维度专家评审**：对设计进行哲学一致性、视觉层级、细节执行、功能性、创新性评分，并输出改进清单。
- **品牌资产协议**：强制 5 步流程（问、搜、下载、grep 色值、固化 spec），确保品牌色准确。
- **Junior Designer 工作流**：默认工作模式，先展示假设与占位，尽早反馈，迭代改进。

## 适用与不适用场景

**适用场景**：
- 快速生成高保真 UI 原型、演示文稿、产品发布动画、信息图。
- 需要跨 agent 使用（Claude Code、Cursor、Codex 等）。
- 用户偏好对话式交互，不愿打开图形设计工具。
- 需要本地运行、零网络依赖的核心设计流程。

**不适用场景**：
- 需要图层级可编辑的 PPTX 到 Figma 的转换。
- 复杂动画（如 Framer Motion 级别、3D、物理模拟、粒子系统）。
- 完全空白的品牌从零设计（质量会降至 60-65 分）。

## 技术架构与依赖

- **语言**：HTML（主要），辅以 JavaScript、CSS。
- **核心机制**：SKILL.md 主文档 + references/ 子文档 + assets/ 组件 + scripts/ 工具链 + demos/ 演示。
- **依赖**：Node.js（运行脚本）、Playwright（浏览器验证）、skills CLI（安装）、可选云服务（豆包 TTS、AI 评审，需用户自备 key）。
- **导出工具**：render-video.js（HTML→MP4）、convert-formats.sh（MP4→GIF）、add-music.sh（加 BGM）、html2pptx.js（HTML→PPTX）等。

## 安装与快速开始

```bash
npx skills add alchaincyf/huashu-design
```

安装后需检查目录是否包含 references/、assets/、scripts/、demos/ 子目录；若缺失，升级 skills CLI（≥1.5.19）或使用 git clone 兜底：

```bash
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design
```

然后在支持 skills 的 agent 中直接输入指令，例如：

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

## 典型使用方法

1. **安装 skill**：使用 npx skills add 或 git clone。
2. **发起设计请求**：在 agent 对话中描述需求，如“做一份产品发布动画”。
3. **选择方向**：若需求模糊，skill 会生成 3 版视觉供选择。
4. **迭代反馈**：通过 Junior Designer 工作流，逐步完善设计。
5. **导出交付**：使用内置脚本导出 MP4、GIF、PPTX、PDF 等格式。

## 配置与部署要点

- **安装完整性**：确保所有子目录存在，否则功能不完整。
- **品牌资产**：涉及具体品牌时，skill 会强制遵循品牌资产协议，需提供品牌指南或允许搜索。
- **云功能**：云能力（TTS、AI 评审）默认关闭，需用户显式启用并提供 API key。
- **本地运行**：核心设计、渲染、导出流程完全本地运行，无网络请求。
- **许可证**：MIT，允许商用，无需授权。

## 限制、风险与许可证

**限制**：
- 不支持图层级可编辑的 PPTX 到 Figma。
- 不支持复杂动画（3D、物理模拟、粒子系统）。
- 空白品牌从零设计质量下降。

**风险**：
- 依赖第三方服务（如 Wikimedia、Unsplash）获取图片，可能受网络影响。
- 云功能需用户自备 key，且仅发送至对应厂商官方 API。

**许可证**：MIT（自 2026-05-14 起），允许自由使用、修改、分发，包括商业用途。

## 官方链接

- GitHub 仓库：https://github.com/alchaincyf/huashu-design
- 最新版本：v2.0（2026-04-21）
- 作者官网：https://www.huasheng.ai/
- 教程视频：https://www.youtube.com/watch?v=m-_BlUdcIvw

## 信息来源和分析时间

- 信息来源：GitHub 仓库 README（中文版）、仓库元数据、最新 Release 信息。
- 分析时间：2026-05-14（基于 README 中许可证变更日期）。