huashu-design 是什么?

Huashu Design 是一个基于 Claude Code 的 HTML 原生设计技能,提供高保真原型、幻灯片、动画等功能,旨在简化设计流程。

⭐ 21,147 Stars 🍴 2,525 Forks HTML NOASSERTION 作者: alchaincyf
来源:官方 README 与文档入口 查看 GitHub 仓库 →

为什么值得关注

Huashu Design 受关注的原因包括其独特的 Agent-agnostic 特性,适用于多种 Claude Code 兼容的 agent;提供丰富的 HTML 原生设计功能,满足不同设计需求;开源且免费,降低了使用门槛。

来源:官方 README 与文档入口

核心功能

交互原型

支持创建可点击的 App 原型,提供真 iPhone bezel 和 Playwright 验证,适用于快速原型设计。

来源:官方 README 与文档入口
演讲幻灯片

将 HTML deck 转换为可编辑的 PPTX 文件,保留文本框编辑功能,适用于制作演讲材料。

来源:官方 README 与文档入口
时间轴动画

提供 MP4、GIF 和 BGM 导出功能,支持 60fps 插帧,适用于制作产品发布动画。

来源:官方 README 与文档入口
设计变体

提供 3+ 并排对比、Tweaks 实时调参和跨维度探索功能,适用于设计方向选择。

来源:官方 README 与文档入口
信息图/可视化

提供印刷级排版和可导 PDF/PNG/SVG 功能,适用于制作信息图和数据可视化。

来源:官方 README 与文档入口
设计方向顾问

提供三套逻辑并行(秒数轮盘、现实参照、最佳设计师)和 60 种 HTML 原生风格库,适用于设计方向选择。

来源:官方 README 与文档入口
5 维度专家评审

提供雷达图可视化和 Keep/Fix/Quick Wins 清单,适用于设计评审。

来源:官方 README 与文档入口

技术架构

Huashu Design 采用模块化设计,代码结构清晰,依赖文件明确。主要采用单例模式,模块之间通过接口进行通信。数据流转主要通过 JSON 格式进行。

来源:官方仓库目录与依赖文件

项目知识图谱

知识图谱:项目核心节点(中心)+ 核心功能(内环六边形)+ 关键技术依赖(外环 chip) pdf-lib playwright pptxgenjs sharp 交互原型 演讲幻灯片 时间轴动画 设计变体 信息图/可视化 设计方向顾问 5 维度专家评审 huashu-design 项目本体 核心功能 关键依赖

技术栈

语言HTML框架React
pdf-libplaywrightpptxgenjssharp
本地运行
来源:官方仓库目录与依赖文件

快速上手

```bash npx skills add alchaincyf/huashu-design ```
来源:官方 README 与文档入口

使用场景

1. 设计师:快速创建原型、幻灯片、动画等设计作品。 2. 产品经理:快速制作产品原型和演示。 3. 教育工作者:制作教学演示和课件。 4. 市场营销人员:制作产品宣传材料和演示。

来源:官方 README 与文档入口

优势与局限

优势

  • 优势1:功能丰富,满足多种设计需求。
  • 优势2:开源免费,降低了使用门槛。
  • 优势3:Agent-agnostic,适用于多种 Claude Code 兼容的 agent。

局限

  • 局限1:不支持图层级可编辑的 PPTX 到 Figma。
  • 局限2:不支持 Framer Motion 级别的复杂动画。
  • 局限3:完全空白的品牌从零设计质量会掉到 60–65 分。
来源:官方 README 与文档入口

最新版本

v2.0 (2026-04-21): V2.0 · 9 个能力演示重制 + 中英双版

来源:官方 Releases

总结评价

Huashu Design 是一个功能丰富、易于使用的 HTML 原生设计技能,适合设计师、产品经理、教育工作者和市场营销人员等使用。它能够简化设计流程,提高设计效率。

来源:官方仓库
资料与核验范围
本文依据项目公开资料整理。版本、安装命令和功能边界可能随上游更新,请以所列来源和项目当前版本为准。 资料核对时间: 2026-10-07 18:32.

参考材料:README、GitHub API、依赖文件