🌐 中文 · English

Huashu Design

「打字。回车。一份能交付的设计。」 "Type. Hit enter. A finished design lands in your lap."

在你的 agent 里打一句话，拿回一份能交付的设计。

3 到 30 分钟，你能 ship 一段产品发布动画、一个能点击的 App 原型、一套能编辑的 PPT、一份印刷级的信息图。

不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。给 skill 你的品牌资产（logo、色板、UI 截图），它会读懂你的品牌气质；什么都不给，六张缩略图里挑出的三个真实方向 + 84 种带样张的风格库也能兜底到不出 AI slop。

你看到这篇 README 里的每一页设计，都是 huashu-design 自己做的。 不是 Figma，不是 AE，就是一句话 prompt + skill 跑通。下次产品发布要做宣传片？现在你也能做。

npx skills add alchaincyf/huashu-design

跨 agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。

📣 已改为 MIT 协议。 自 2026-05-14 起本 skill 完全开源（MIT License），个人和商用都免费，无需事先授权。原「个人使用免费、企业商用需授权」的条款已作废。(查看变更)

🆕 3.0：三个方向更敢，项目之间也不再长一个样。 先出六张缩略图再挑三版做成真稿；风格库扩到 84 种（新增 App、中文与东亚两个分区），每种都有样张；参照作品先截图再动手；带一个只量事实的设计体检，和一本记住你做过什么样子的外观账本。详见核心机制

看效果 · 安装 · 能做什么 · 核心机制 · 和 Claude Design 的关系

---

▲ 3.0 发布片 · 32 秒 · 片里每一页设计都是 3.0 自己做的，剪辑用的是 huashu-motion 👉 下载 MP4（1080p · 含配乐 · 24MB） · 2.0 的带音效 HTML 互动版

---

3.0 案例

下面这些都是 3.0 跑出来的。前五个是从发布时新跑的 6 道题里挑的，每道只给一句话需求，方向是 agent 自己挑的，作者没插手；后两个一个是第三轮盲选赢下来的那版，一个是发布后作者拿它做的真实项目。

网页 · 《富岳三十六景》线上展

「给葛饰北斋的《富岳三十六景》做一个线上展览网站」

三版分别是 Rijksmuseum 官网式的暗场展厅、田中一光式的三角窗、民国书衣式的题签框。设计体检报过一次撞车：两版首屏都用了《神奈川冲浪里》，它就把暗场那版换成了《山下白雨》。

往下一章讲普鲁士蓝，依据是大都会博物馆的光谱研究；全 46 幅都来自芝加哥艺术博物馆和大都会的开放馆藏。

App · 鸣迹（观鸟记录）

「做一个观鸟记录 App 的原型」

现实参照找的是拿了 2025 年苹果设计奖的 CapWords，ref_board.py 先把它截成参考板，agent 亲眼看过再动手。借来的是「从照片里撕下一张贴纸」：每只鸟都从 Wikimedia 的真实照片里分割出来，贴进一年的本子里，叫声波形是拿真实录音算的。

App · 今晚吃啥（家常菜谱）

「做一个家常菜谱 App」

秒数轮盘恰好抽到吕敬人书籍设计，最后做成了一本菜谱：一道菜一页方子，切口旁边留一条旁注栏，写「擦干再煎才不溅油」「老抽只要几滴」，朱砂只给「开做」这一方印。外观账本看到最近 6 个交付里 5 个是无衬线标题，这一版挑了宋体。

PPT · 《千里江山图》讲座

走的是最佳设计师 Abbott Miller 式的暗场展柜，暗底取的是绢地最暗处的颜色。封面底下那条细长的位置条就是整卷缩略图，框出这一页在 11.9 米长卷的哪一段。

PPT · 黑洞的照片是怎么拍出来的

现实参照是 Jonathan Corum 的讲座幻灯片：黑底、照片做主角、标注直接写在图上。每页都标了出处，事实先过核查再上页面。

App · 绿拇指（第三轮盲选赢的那版）

把植物当成会呼吸的生命体征来读。App 原型做成一张有构图的展示板，几台手机错落排开。

网页 · 旅居档案（作者自己的项目）

三年里所有旅行照片的地图。选的是葛西薰式的白纸明朝体长卷，开头一张卫星地图串起所有旅程，往下一段旅程一章。选完作者顺口说了句「尽量不要遗漏」，它就记进了经验：个人回忆类档案照片要全，而且注明只适用于照片档案，不外溢到产品界面。

---

📺 新手教程（花叔亲录）

不知道怎么用？看花叔录的 huashu-design 上手教程：

👉 在 YouTube 观看完整教程

---

装上就能用

npx skills add alchaincyf/huashu-design

装完先自检：这个 skill 不只是 SKILL.md 一个文件，references/、assets/、scripts/、demos/ 四个子目录里有 99 处被引用的配方、脚本、素材，缺一不可。装完看一眼安装目录（如 ~/.claude/skills/huashu-design/），如果只有 SKILL.md、没有那几个子目录，说明你的 skills CLI 版本太旧（≤1.5.15 有个只同步单文件的 bug，已在 1.5.19 修复）。升级后再装一次即可：

npm i -g skills@latest        # 或 npx skills@latest add alchaincyf/huashu-design

升级后仍异常，就用 git clone 兜底安装，把仓库克隆到任意 skills 目录即可：

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

然后在 Claude Code / Codex / Cursor 等任意支持 skills 的 agent 里直接说话：

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

没有按钮、没有面板、没有 Figma 插件。

---

Star 趋势

---

能做什么

能力	交付物	典型耗时
交互原型（App / Web）	单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证	10–15 min
演讲幻灯片	HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留）	15–25 min
时间轴动画	MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM	8–12 min
设计变体	3+ 并排对比 · Tweaks 实时调参 · 跨维度探索	10 min
信息图 / 可视化	印刷级排版 · 可导 PDF/PNG/SVG	10 min
设计方向顾问	三套逻辑各出两个候选（最佳设计师 + 同媒介获奖作品 + 秒数轮盘）· 六张缩略图挑三版真实视觉，另三张作备选	10 min
5 维度专家评审	雷达图 + Keep/Fix/Quick Wins · 可操作修复清单	3 min

---

Demo 画廊

设计方向顾问

模糊需求时的 fallback：三套互补逻辑各出两个候选——最佳设计师（预算无上限时最适合的设计师）+ 现实参照（同媒介的获奖作品，先截图亲眼看）+ 秒数轮盘（从风格库随机抽，打破惯性）。六个候选先画成一页缩略图，挑最强、最不一样的三版做成真实视觉让你看着选，另外三张作为备选一起给你。背后是 84 种 HTML 原生风格库（网页 20 + PPT 20 + 信息图 20 + App 12 + 中文与东亚 12，纯 CSS 无需生图），每种都有一张样张。

动图为 2.0 流程（三套逻辑直接各出一版）

3.0 新增的两个分区，每格都是一张样张（全部纯 HTML/CSS，题材与数字虚构）：

iOS App 原型

iPhone 15 Pro 精确机身（灵动岛 / 状态栏 / Home Indicator）· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。

Motion Design 引擎

Stage + Sprite 时间片段模型 · useTime / useSprite / interpolate / Easing 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。

HTML Slides → 可编辑 PPTX

HTML deck 浏览器演讲 · html2pptx.js 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是真文本框，PPT 里双击即可编辑。

Tweaks · 实时变体切换

配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + localStorage 持久化 · 刷新不丢。

信息图 / 数据可视化

杂志级排版 · CSS Grid 精准分栏 · text-wrap: pretty 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。

5 维度专家评审

哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性 各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。

Junior Designer 工作流

不闷头做大招：先写 assumptions + placeholders + reasoning，尽早 show 给你，再迭代。理解错了早改比晚改便宜 100 倍。

品牌资产协议 5 步硬流程

涉及具体品牌时强制执行：问 → 搜 → 下载（三条兜底）→ grep 色值 → 写 brand-spec.md。

---

Showcase · 2.0 时期的真实案例

鹦鹉进化史网站 · 设计方向顾问三套逻辑实战（2.0）

Live demo · https://www.huasheng.ai/parrots/

一句「做个介绍鹦鹉进化史的网站」、零额外要求，skill 自动跑完整 2.0 顾问流程：先判断图片是内容必需 → 抓公共领域博物插画（Edward Lear / John Gould 的鹦鹉图录）→ 三套逻辑并行（秒数轮盘 + 现实参照获奖站 + 原研哉「白」哲学）各出一版真实视觉。素材齐了再设计，不是边设计边用色块占位。

「聊聊 skill」 · PM after-party 演讲 deck

Live demo · https://skill-huasheng.vercel.app

13 页 HTML deck，全部用 huashu-design 完成：

• 黑底极简衬线视觉系统（cover / about / hook / what / why / closing）
• 2 个带 BGM + SFX 的 22 秒 cinematic demo（Nuwa skill workflow + Darwin skill workflow），各采用完全独立的视觉语言：
  • Nuwa：3D 知识 orbit + Pentagon 提炼 + SKILL.md typewriter + 「21 分钟」hero reveal
  • Darwin：autoresearch loop spin + v1/v5 并列 diff + Hill-Climb 全屏曲线 + Ratchet gear lock
• 每个 cinematic 默认显示完整静态 workflow dashboard（观众随时能看清 skill 怎么跑），点 ▶ 才触发动画，跑完自动 fade 回 dashboard
• 嵌入 huasheng.ai 的 25 秒 hero 动画（iframe 本地化兜底）
• 真实数据：14,495 stargazers 真实曲线（gh API 拉取）+ DeepSeek V4 真实 specs（WebSearch 验证）
• 真实 AI 素材：用 huashu-gpt-image 跑 4×2 grid 大图，extract_grid.py 抠出 8 张独立透明 PNG，做 3D orbit 漂浮

适合参考的页面：

• /slides/slide-04b-nuwa-flow.html · 静态 dashboar