H

huashu-design

SHA-256
27.4k stars·设计工具·已提供 SHA-256 校验码,下载后可自行核对文件完整性

一句话让 AI agent 做出能交付的设计:网页、App 原型、可编辑 PPT、动画、信息图,开源免费可商用。

对 AI 说一句话,拿回大厂级设计成品。

核心功能

  • 一句话生成可交付设计:网页、App 原型、PPT、动画、信息图
  • 六个候选方向先出缩略图,挑三版做成真实视觉供挑选
  • 84 种带样张的 HTML 原生风格库,含中文与东亚设计分区
  • HTML 幻灯片可导出为真正可编辑文本框的 PPTX 文件
  • 时间轴动画引擎,一键导出 MP4/GIF/60fps 插帧并配背景音乐

避坑指南

  • •它不是独立软件,没有图形界面,必须配合 Claude Code、Cursor、Codex 等支持 skills 的 AI agent 使用,单独安装无法运行。安装时注意:skills CLI 1.5.15 及以下版本存在只同步单文件的 bug,会丢失素材目录,请先升级到最新版再装,或用 git clone 兜底。它也不是 Figma 替代品:产出的是 HTML、PPTX、MP4 等成品文件,不能导出 .fig 源文件,也不支持多人实时协作。涉及具体品牌时建议先提供 logo、色板等资产,否则只能靠风格库兜底。动画导出和自动点击验证需要本机有 Node.js 环境,零基础用户建议先看官方 YouTube 教程。

适用场景

  • 产品经理快速验证想法:一句话生成可点击的 App 原型
  • 职场人做汇报:自动生成演讲幻灯片并导出可编辑 PPTX
  • 内容创作者:把一段逻辑做成 60 秒发布动画或信息图
  • 独立开发者:没有设计团队也能做出大厂级产品页面
  • 设计评审:对现有设计做 5 维度体检并给出修复清单

详细介绍

Huashu Design 3.0 是开源的 HTML 原生设计 skill,装进 Claude Code、Cursor、Codex 等 agent 后,打一句话即可在几分钟内拿到能交付的设计:可点击的 App/网页原型、可导出真可编辑 PPTX 的幻灯片、带配乐的 MP4/GIF 动画、印刷级信息图。它先出六张缩略图再挑三个方向做成真稿,84 种带样张的风格库兜底,另有设计体检与外观账本防止 AI 套路感。相比 Canva、v0 等闭源工具,它 MIT 开源、商用免费、跨 agent 通用,且是少数能导出真可编辑 PPTX 的方案。一行命令安装:npx skills add alchaincyf/huashu-design。

常见问题与排障 (2)

故障排除
为什么我上传文档到 GitHub Issues 后,huashu-design 没有生成 PPT?该如何正确使用它?

GitHub Issues 不是运行时入口——那里没有 agent 运行,因此上传的文件永远不会被读取或执行。huashu-design 是一个 skill,必须安装到你自己的编程 agent(Claude Code、Codex、Cursor、OpenClaw 或 Hermes)中。步骤:1) 安装:npx skills add alchaincyf/huashu-design。2) 验证安装目录(例如 ~/.claude/skills/huashu-design/)中除 SKILL.md 外,还包含 references、assets、scripts 和 demos 子目录。如果只有 SKILL.md,说明你的 skills CLI 版本过旧——运行 npm i -g skills@latest 并重新安装,或直接克隆:git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design。3) 将你的原始素材放入本地文件夹,在该文件夹中启动一个 agent 会话,并用自然语言描述你的需求(例如受众、时长、结构,先要求给出大纲和时间分配)。注意:该 skill 在生成完整演示文稿之前,始终会先输出 3 个风格草稿(多页演示文稿每种风格各 2 个示例页)供你选择——提前指定风格并不能跳过此步骤。

来源 Issue #49
故障排除
如何修复运行 npx skills add 时出现的 "YAML parse error: Nested mappings are not allowed in compact mappings" 错误?

此错误表示 skill 仓库中的 SKILL.md frontmatter 存在一个包含冒号且未加引号的值(例如 description: Huashu-Design — HTML-based hi-fi prototypes, ... slides: ...)。YAML 会将内部的 text: text 解析为嵌套映射,导致解析失败,CLI 因而报告 "No valid skills found."。修复方法:在 SKILL.md 中为 description 的值加上引号:

---
name: huashu-design
description: "Huashu-Design — HTML-based hi-fi prototypes, interactive demos..."
---

替代方案:移除 description 中的冒号,或使用 YAML 块标量(description: > 后跟一个缩进行)。如果你只是使用该 skill 而非仓库的所有者,可以 fork 该仓库,修复 frontmatter,然后运行 npx skills add <your-username>/<fork-name>,或者向上游作者报告格式错误的 SKILL.md。

来源 Issue #48

标签

ai-designclaude-code-skillhtml-slidespptx-exportapp-prototypemotion-designinfographicagent-agnostic

快速上手

1

下载安装包

点击上方按钮下载对应系统的安装包

2

安装软件

根据你的发行版安装对应的包(dpkg / rpm / AppImage)

3

先安装 Node.js(v18 及以上),确保终端可以使用 npx 命令

4

在终端运行 npx skills add alchaincyf/huashu-design 完成安装

5

检查安装目录(如 ~/.claude/skills/huashu-design/),确认 references、assets、scripts、demos 子目录齐全

安装指引
  1. 先安装 Node.js(v18 及以上),确保终端可以使用 npx 命令
  2. 在终端运行 npx skills add alchaincyf/huashu-design 完成安装
  3. 检查安装目录(如 ~/.claude/skills/huashu-design/),确认 references、assets、scripts、demos 子目录齐全
文件完整性

已提供 SHA-256 校验码,下载后可自行核对文件完整性

该校验码提取自 GitHub 官方 Release 页面

SHA256 校验码

388c726432c06b5f4e91d7e9b83556d3b44bb65fae06263f8a6b931d7dc19a38

该校验码提取自 GitHub Release 页面,下载后请自行核对文件完整性

本平台所有 SHA-256 校验码均提取自项目在 GitHub 官方 Release 页面发布的文件,未做任何修改。你可以通过 GitHub Releases 页面自行验证。

运维指引

卸载说明

该工具不安装任何桌面程序,卸载只需删除 skill 目录:找到安装位置(通常为 ~/.claude/skills/huashu-design 或对应 agent 的 skills 目录),将整个文件夹删除即可;若是用 git clone 安装的,同样删除克隆目录。不会在系统其他位置残留文件。

无额外依赖

下载后即可直接使用,无需安装其他运行环境

项目信息
开源协议MIT
最后更新2026-10-27 09:16:31
GitHub 仓库官方网站

遇到问题?查看下方 FAQ

2 FAQs

相似推荐