Huashu Design

# Huashu Design

把你在 AI 智能体里写的一句话需求，变成一份完成的设计：发布动画、可点击的应用原型、可编辑的幻灯片、信息图，或一组小红书图片。可在多种智能体中使用。

由 alchaincyf 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：Huashu Design 是一个做设计的智能体技能。你在 AI 智能体里打一句话，它就做出一份成品，比如产品发布动画、可点击的应用原型、可编辑的幻灯片，或印刷级的信息图。README 说一份成品需要三到三十分钟。

适合谁：需要设计成果但没有设计团队、又乐意用大白话指挥 AI 智能体的人。

```table
行业 | 谁在用 | 怎么用 | 例子
产品与创业 | 创始人和产品经理 | 用一句话需求做出发布动画或可点击的应用原型 | 要一个 AI 番茄钟 iOS 原型，四个屏幕都能点
演讲展示 | 演讲者和讲师 | 做一份可编辑的幻灯片，先要三个风格方向 | 要一份关于 AI 心理学的演讲稿，三种外观任选
社交内容 | 内容创作者 | 用八种版式之一，做一组 3:4 竖图发小红书 | 用一个版式样张把一个主题做成图组
网页与展览 | 网页设计师 | 用一句话需求做出一个网页 | 为一套著名的木版画做线上展览网站
讲解内容 | 老师和培训师 | 把一段逻辑做成短动画，导出 MP4 和 GIF | 一段 60 秒、讲解某个流程的动画
```

如果你更喜欢在设计软件里亲手做，可以跳过它。

用在哪里：

- Claude Code、Cursor、Codex、OpenClaw 和 Hermes
- 其他任何支持技能的智能体
- DSH，作为桌面版或网页版的插件

```table
使用场景 | 适合谁 | 能得到什么
发布动画 | 产品团队 | 一段产品发布动画
可点击原型 | 产品设计师 | 一个关键屏幕能响应点击的应用原型
幻灯片 | 演讲者 | 一份可编辑的 PPT 文件
社交图组 | 创作者 | 3:4 图片，并检查字号、出界和文字重叠
```

如何设置：

- 一个支持技能的 AI 智能体，比如 Claude Code、Cursor、Codex、OpenClaw 或 Hermes
- Node，因为安装命令通过 npx 运行
- 可选：你电脑上的 Chrome 或 Edge，脚本会借用它们导出 PDF

1. 在终端里运行安装命令。
2. 看一眼安装文件夹，比如 Claude 技能文件夹下的 huashu-design 文件夹。里面应该有 references、assets、scripts 和 demos 子文件夹，而不只是技能文件。
3. 如果只有技能文件，说明你的 skills CLI 太旧了。1.5.15 及以下版本只复制一个文件。升级后再装一次。
4. 如果还是不对，就手动把仓库克隆到任意技能文件夹里。
5. 用 DSH 的话，先打开一次桌面应用并完全退出，再用命令行。之后重新打开 DSH，插件才会加载。网页版的 profile 名用 web。

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

```bash
npm i -g skills@latest
npx skills@latest add alchaincyf/huashu-design
```

```bash
dsh plugin --profile desktop add github:alchaincyf/huashu-design
```

要移除 DSH 插件，运行下面这条。

```bash
dsh plugin --profile desktop remove huashu-design
```

如何使用：用大白话和智能体说话，并说明你要的格式。给它你的品牌素材，比如 logo、色板和界面截图，它就会读出品牌的气质。什么都不给的话，它会给出几个设计方向。下面是来源自己的示例提示词。

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

```table
工具 | 作用
设计方向 | 先出六张缩略图，再从风格样张库里挑三个做成真实草稿
ref_board.py | 把现实中的参照作品截成一块参考板，智能体设计前先看它
设计体检 | 只量事实，比如发现两份草稿用了同一张图开场
外观账本 | 记住你以前的作品长什么样，让项目之间不再雷同
```

示例：你要一个 AI 番茄钟 iOS 原型，四个主要屏幕都能响应点击。技能做出一个你可以逐屏点过去的原型，而不是一组平面图片。

新手与专家：技能就是你的智能体会读取的一组说明和文件。装好之后，你直接向智能体要一份设计就行。第一次可以试一份简短的幻灯片，因为技能会给出三个风格方向让你挑。

往底层看，它把六张缩略图缩成三份真实草稿，动手前先截一张参照作品，并运行一个只量事实的检查。这个技能横跨四个子文件夹，引用了 99 个配方、脚本和素材，所以只装一部分就会出问题。效果也取决于你运行它的智能体。

```flow
你写一句话需求
技能读取品牌素材，或给出方向
六张缩略图缩成三份真实草稿
智能体做出你选的那份草稿
交付前由设计体检量一遍事实
```

注意事项：

- 许可证：MIT。自 2026-05-14 起，个人和商用都免费，旧的条款不再适用。
- 这个技能不止一个文件，只装一部分是最常见的故障。
- 1.5.15 及以下的 skills CLI 只复制一个文件，1.5.19 修复了这个问题。
- 在 DSH 桌面应用里，可编辑的幻灯片文件用应用自带的 Python 生成。
- 导出 PDF 会借用你电脑上的 Chrome 或 Edge。

## GitHub 上的数据（2026年11月14日）

- 星标：29,432
- 复刻：3,154
- 关注：105
- 未关闭的议题和拉取请求：0
- 语言：HTML
- 许可证：MIT
- 话题：agent-skills, ai-design, animation, claude-code, claude-code-skills, claude-skills, codex, cursor, deepseek-harness, design, dsh-plugin, html

## 链接

- 代码：https://github.com/alchaincyf/huashu-design
- 发布版本：https://github.com/alchaincyf/huashu-design/releases
- 议题：https://github.com/alchaincyf/huashu-design/issues
- 星标历史：https://www.star-history.com/#alchaincyf/huashu-design&Date

## 介绍视频

- 我逆向了Claude Design！一句话帮你生成任何出色设计，开源后狂揽GitHub 1.6万+stars！: https://www.youtube.com/watch?v=m-_BlUdcIvw

## 获取代码

```
git clone https://github.com/alchaincyf/huashu-design.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  7 KB