huashu-design
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 个示例页)供你选择——提前指定风格并不能跳过此步骤。
故障排除如何修复运行 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。
标签
快速上手
安装软件
根据你的发行版安装对应的包(dpkg / rpm / AppImage)
先安装 Node.js(v18 及以上),确保终端可以使用 npx 命令
在终端运行 npx skills add alchaincyf/huashu-design 完成安装
检查安装目录(如 ~/.claude/skills/huashu-design/),确认 references、assets、scripts、demos 子目录齐全
- 先安装 Node.js(v18 及以上),确保终端可以使用 npx 命令
- 在终端运行 npx skills add alchaincyf/huashu-design 完成安装
- 检查安装目录(如 ~/.claude/skills/huashu-design/),确认 references、assets、scripts、demos 子目录齐全
已提供 SHA-256 校验码,下载后可自行核对文件完整性
该校验码提取自 GitHub 官方 Release 页面
SHA256 校验码
388c726432c06b5f4e91d7e9b83556d3b44bb65fae06263f8a6b931d7dc19a38该校验码提取自 GitHub Release 页面,下载后请自行核对文件完整性
本平台所有 SHA-256 校验码均提取自项目在 GitHub 官方 Release 页面发布的文件,未做任何修改。你可以通过 GitHub Releases 页面自行验证。
开源透明
查看 GitHub 源码卸载说明
该工具不安装任何桌面程序,卸载只需删除 skill 目录:找到安装位置(通常为 ~/.claude/skills/huashu-design 或对应 agent 的 skills 目录),将整个文件夹删除即可;若是用 git clone 安装的,同样删除克隆目录。不会在系统其他位置残留文件。
无额外依赖
下载后即可直接使用,无需安装其他运行环境
遇到问题?查看下方 FAQ
2 FAQs