{
  "markdown": "<sub>🌐 <b>中文</b> · <a href=\"README.en.md\">English</a></sub>\n\n<div align=\"center\">\n\n# Huashu Design\n\n> *「打字。回车。一份能交付的设计。」*\n> *\"Type. Hit enter. A finished design lands in your lap.\"*\n\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n[![Agent-Agnostic](https://img.shields.io/badge/Agent-Agnostic-blueviolet)](https://skills.sh)\n[![Skills](https://img.shields.io/badge/skills.sh-Compatible-green)](https://skills.sh)\n\n<br>\n\n**在你的 agent 里打一句话，拿回一份能交付的设计。**\n\n<br>\n\n3 到 30 分钟，你能 ship 一段**产品发布动画**、一个能点击的 App 原型、一套能编辑的 PPT、一份印刷级的信息图。\n\n不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。给 skill 你的品牌资产（logo、色板、UI 截图），它会读懂你的品牌气质；什么都不给，**三套逻辑顾问 + 60 种 HTML 原生风格库**也能兜底到不出 AI slop。\n\n**你看到这篇 README 里的每一个动画，都是 huashu-design 自己做的。** 不是 Figma，不是 AE，就是一句话 prompt + skill 跑通。下次产品发布要做宣传片？现在你也能做。\n\n```\nnpx skills add alchaincyf/huashu-design\n```\n\n跨 agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。\n\n> 📣 **已改为 MIT 协议。** 自 2026-05-14 起本 skill 完全开源（[MIT License](LICENSE)），个人和**商用都免费**，无需事先授权。原「个人使用免费、企业商用需授权」的条款已作废。([查看变更](#license))\n\n[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系)\n\n</div>\n\n---\n\n<p align=\"center\">\n  <img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.gif\" alt=\"huashu-design Hero · 打字 → 选方向 → 画廊展开 → 聚焦 → 品牌显形\" width=\"100%\">\n</p>\n\n<p align=\"center\"><sub>\n  ▲ 25 秒 · Terminal → 4 方向 → Gallery ripple → 4 次 Focus → Brand reveal<br>\n  👉 <a href=\"https://www.huasheng.ai/huashu-design-hero/\">访问带音效的 HTML 互动版</a> ·\n  <a href=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4\">下载 MP4（含 BGM+SFX · 10MB）</a>\n</sub></p>\n\n---\n\n## 📺 新手教程（花叔亲录）\n\n不知道怎么用？看花叔录的 huashu-design 上手教程：\n\n<p align=\"center\">\n  <a href=\"https://www.youtube.com/watch?v=m-_BlUdcIvw\"><img src=\"https://img.youtube.com/vi/m-_BlUdcIvw/maxresdefault.jpg\" alt=\"huashu-design 使用教程\" width=\"70%\"></a>\n</p>\n\n<p align=\"center\"><sub>👉 <a href=\"https://www.youtube.com/watch?v=m-_BlUdcIvw\">在 YouTube 观看完整教程</a></sub></p>\n\n---\n\n## 装上就能用\n\n```bash\nnpx skills add alchaincyf/huashu-design\n```\n\n> **装完先自检**：这个 skill 不只是 SKILL.md 一个文件，`references/`、`assets/`、`scripts/`、`demos/` 四个子目录里有 99 处被引用的配方、脚本、素材，缺一不可。装完看一眼安装目录（如 `~/.claude/skills/huashu-design/`），如果只有 SKILL.md、没有那几个子目录，说明你的 `skills` CLI 版本太旧（≤1.5.15 有个只同步单文件的 bug，已在 1.5.19 修复）。升级后再装一次即可：\n>\n> ```bash\n> npm i -g skills@latest        # 或 npx skills@latest add alchaincyf/huashu-design\n> ```\n>\n> 升级后仍异常，就用 `git clone` 兜底安装，把仓库克隆到任意 skills 目录即可：\n>\n> ```bash\n> git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design\n> ```\n\n然后在 Claude Code / Codex / Cursor 等任意支持 skills 的 agent 里直接说话：\n\n```\n「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」\n「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」\n「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」\n「帮我对这个设计做一个 5 维度评审」\n```\n\n没有按钮、没有面板、没有 Figma 插件。\n\n---\n\n## Star 趋势\n\n<p align=\"center\">\n  <a href=\"https://star-history.com/#alchaincyf/huashu-design&Date\">\n    <img src=\"https://api.star-history.com/svg?repos=alchaincyf/huashu-design&type=Date\" alt=\"huashu-design Star History\" width=\"80%\">\n  </a>\n</p>\n\n---\n\n## 能做什么\n\n| 能力 | 交付物 | 典型耗时 |\n|------|--------|----------|\n| 交互原型（App / Web） | 单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证 | 10–15 min |\n| 演讲幻灯片 | HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留） | 15–25 min |\n| 时间轴动画 | MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM | 8–12 min |\n| 设计变体 | 3+ 并排对比 · Tweaks 实时调参 · 跨维度探索 | 10 min |\n| 信息图 / 可视化 | 印刷级排版 · 可导 PDF/PNG/SVG | 10 min |\n| 设计方向顾问 | **三套逻辑并行**（秒数轮盘 + 现实参照获奖站 + 最佳设计师）· 直接出 3 版真实视觉 | 5 min |\n| 5 维度专家评审 | 雷达图 + Keep/Fix/Quick Wins · 可操作修复清单 | 3 min |\n\n---\n\n## Demo 画廊\n\n### 设计方向顾问\n\n模糊需求时的 fallback：**三套互补逻辑并行**——秒数轮盘（20 选 1 打破惯性）+ 现实参照（世界级获奖网站迁移）+ 最佳设计师（顶级工作室哲学），直接出 3 版**真实视觉**让你看着选，不让你在文字里盲选风格。背后是 **60 种 HTML 原生风格库**（网页 20 + PPT 20 + 信息图 20，纯 CSS 无需生图）。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor.gif\" width=\"100%\"></p>\n\n### iOS App 原型\n\niPhone 15 Pro 精确机身（灵动岛 / 状态栏 / Home Indicator）· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype.gif\" width=\"100%\"></p>\n\n### Motion Design 引擎\n\nStage + Sprite 时间片段模型 · `useTime` / `useSprite` / `interpolate` / `Easing` 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c3-motion-design.gif\" width=\"100%\"></p>\n\n### HTML Slides → 可编辑 PPTX\n\nHTML deck 浏览器演讲 · `html2pptx.js` 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是**真文本框**，PPT 里双击即可编辑。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c2-slides-pptx.gif\" width=\"100%\"></p>\n\n### Tweaks · 实时变体切换\n\n配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + `localStorage` 持久化 · 刷新不丢。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c4-tweaks.gif\" width=\"100%\"></p>\n\n### 信息图 / 数据可视化\n\n杂志级排版 · CSS Grid 精准分栏 · `text-wrap: pretty` 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c5-infographic.gif\" width=\"100%\"></p>\n\n### 5 维度专家评审\n\n哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性 各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c6-expert-review.gif\" width=\"100%\"></p>\n\n### Junior Designer 工作流\n\n不闷头做大招：先写 assumptions + placeholders + reasoning，尽早 show 给你，再迭代。理解错了早改比晚改便宜 100 倍。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w2-junior-designer.gif\" width=\"100%\"></p>\n\n### 品牌资产协议 5 步硬流程\n\n涉及具体品牌时强制执行：问 → 搜 → 下载（三条兜底）→ grep 色值 → 写 `brand-spec.md`。\n\n<p align=\"center\"><img src=\"https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol.gif\" width=\"100%\"></p>\n\n---\n\n## Showcase · 真实案例\n\n### 鹦鹉进化史网站 · 设计方向顾问三套逻辑实战（2.0）\n\n> **Live demo · [https://www.huasheng.ai/parrots/](https://www.huasheng.ai/parrots/)**\n\n一句「做个介绍鹦鹉进化史的网站」、零额外要求，skill 自动跑完整 2.0 顾问流程：先判断图片是内容必需 → 抓公共领域博物插画（Edward Lear / John Gould 的鹦鹉图录）→ **三套逻辑并行**（秒数轮盘 + 现实参照获奖站 + 原研哉「白」哲学）各出一版真实视觉。**素材齐了再设计，不是边设计边用色块占位。**\n\n### 「聊聊 skill」 · PM after-party 演讲 deck\n\n> **Live demo · [https://skill-huasheng.vercel.app](https://skill-huasheng.vercel.app)**\n\n13 页 HTML deck，**全部用 huashu-design 完成**：\n\n- 黑底极简衬线视觉系统（cover / about / hook / what / why / closing）\n- 2 个带 BGM + SFX 的 22 秒 cinematic demo（Nuwa skill workflow + Darwin skill workflow），各采用**完全独立的视觉语言**：\n  - **Nuwa**：3D 知识 orbit + Pentagon 提炼 + SKILL.md typewriter + 「21 分钟」hero reveal\n  - **Darwin**：autoresearch loop spin + v1/v5 并列 diff + Hill-Climb 全屏曲线 + Ratchet gear lock\n- 每个 cinematic 默认显示**完整静态 workflow dashboard**（观众随时能看清 skill 怎么跑），点 ▶ 才触发动画，跑完自动 fade 回 dashboard\n- 嵌入 huasheng.ai 的 25 秒 hero 动画（iframe 本地化兜底）\n- 真实数据：14,495 stargazers 真实曲线（gh API 拉取）+ DeepSeek V4 真实 specs（WebSearch 验证）\n- 真实 AI 素材：用 `huashu-gpt-image` 跑 4×2 grid 大图，`extract_grid.py` 抠出 8 张独立透明 PNG，做 3D orbit 漂浮\n\n**适合参考的页面**：\n- `/slides/slide-04b-nuwa-flow.html` · 静态 dashboard + cinematic overlay 双层架构\n- `/slides/slide-06b-darwin-flow.html` · 完全独立视觉语言的对照案例\n- `/slides/slide-03b-deepseek-cover.html` · AI slop vs 真实设计师视角的对比页\n\n详细 cinematic patterns 见 `references/cinematic-patterns.md`。\n\n---\n\n## 核心机制\n\n### 品牌资产协议\n\nskill 里最硬的一段规则。涉及具体品牌（Stripe、Linear、Anthropic、自家公司等）时强制执行 5 步：\n\n| 步骤 | 动作 | 目的 |\n|------|------|------|\n| 1 · 问 | 用户有 brand guidelines 吗？ | 尊重已有资源 |\n| 2 · 搜官方品牌页 | `<brand>.com/brand` · `brand.<brand>.com` · `<brand>.com/press` | 抓权威色值 |\n| 3 · 下载资产 | SVG 文件 → 官网 HTML 全文 → 产品截图取色 | 三条兜底，前一条失败立刻走下一条 |\n| 4 · grep 提取色值 | 从资产里抓所有 `#xxxxxx`，按频率排序，过滤黑白灰 | **绝不从记忆猜品牌色** |\n| 5 · 固化 spec | 写 `brand-spec.md` + CSS 变量，所有 HTML 引用 `var(--brand-*)` | 不固化就会忘 |\n\nA/B 测试（v1 vs v2，各跑 6 agent）：**v2 的稳定性方差比 v1 低 5 倍**。稳定性的稳定性，这是 skill 真正的护城河。\n\n### 设计方向顾问（Fallback）\n\n当用户需求模糊到无法着手时触发（2.0 重做）：\n\n- 先对话澄清 + 主动索要参考（名字 / logo / 品牌色 / 喜欢的参考站）\n- 取齐内容必需的真图（公共领域 / 免版权，脚本一键抓），再开工\n- **三套互补逻辑并行 subagent**，各出一版**真实视觉**：① 秒数轮盘（`date +%S` 取秒，20 选 1，打破模型偷选极简的惯性）② 现实参照（世界级获奖网站 / PPT / iOS 原型迁移）③ 最佳设计师（预算无上限时最适合的工作室哲学）\n- **绝不让你在没看到视觉时盲选风格**——三版摆出来，看着选\n- 选定后进入主干 Junior Designer 流程\n- 底层是 **60 种 HTML 原生风格库**（网页 20 + PPT 20 + 信息图 20，按大胆 / 中性 / 安静分级，纯 CSS 无需生图）作弹药，不是教条\n\n### Junior Designer 工作流\n\n默认工作模式，贯穿所有任务：\n\n- 开工前 show 问题清单一次性发给用户，等批量答完再动手\n- HTML 里先写 assumptions + placeholders + reasoning comments\n- 尽早 show 给用户（哪怕只是灰色方块）\n- 填充实际内容 → variations → Tweaks 这三步分别再 show 一次\n- 交付前用 Playwright 肉眼过一遍浏览器\n\n### 反 AI slop 规则\n\n避免一眼 AI 的视觉最大公约数（紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display）。用 `text-wrap: pretty` + CSS Grid + 精心选择的 serif display 和 oklch 色彩。\n\n---\n\n## 和 Claude Design 的关系\n\n我大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。那份提示词反复强调**好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来**。这个原则是 65 分作品和 90 分作品的分水岭。\n\n定位差异：\n\n| | Claude Design | huashu-design |\n|---|---|---|\n| 形态 | 网页产品（浏览器里用） | skill（Claude Code 里用） |\n| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 |\n| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF |\n| 操作方式 | GUI（点、拖、改） | 对话（说话、等 agent 做完） |\n| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 |\n| 跨 agent | 专属 Claude.ai | 任意 skill 兼容 agent |\n\nClaude Design 是**更好的图形工具**，huashu-design 是**让图形工具这层消失**。两条路，不同受众。\n\n---\n\n## 安全与数据流\n\n核心链路（设计→渲染→MP4/PDF/PPTX导出）**100%本地运行，零网络零key**。云能力（豆包TTS配音、AI看片评审）全部隔离在 `scripts/cloud/`，完全可选：用你自己的key、只发对应厂商官方API、首次调用需 `--yes` 显式确认。无telemetry，没有任何数据发往作者服务器。全部出站域名、密钥处理、删除边界的穷举声明见 [SECURITY.md](SECURITY.md)，欢迎用你的agent对着代码逐条核验。\n\n---\n\n## Limitations\n\n- **不支持图层级可编辑的 PPTX 到 Figma**。产出 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置。\n- **Framer Motion 级别的复杂动画不行**。3D、物理模拟、粒子系统超出 skill 边界。\n- **完全空白的品牌从零设计质量会掉到 60–65 分**。凭空画 hi-fi 本来就是 last resort。\n\n这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。\n\n---\n\n## 仓库结构\n\n```\nhuashu-design/\n├── SKILL.md                 # 主文档（给 agent 读）\n├── README.md                # 中文 README（默认，本文件）\n├── README.en.md             # 英文 README\n├── assets/                  # Starter Components\n│   ├── animations.jsx       # Stage + Sprite + Easing + interpolate\n│   ├── ios_frame.jsx        # iPhone 15 Pro bezel\n│   ├── android_frame.jsx\n│   ├── macos_window.jsx\n│   ├── browser_window.jsx\n│   ├── deck_stage.js        # HTML 幻灯片引擎\n│   ├── deck_index.html      # 多文件 deck 拼接器\n│   ├── design_canvas.jsx    # 并排变体展示\n│   ├── showcases/           # 24 个预制样例（8 场景 × 3 风格）\n│   └── bgm-*.mp3            # 6 首场景化背景音乐\n├── references/              # 按任务深入读的子文档\n│   ├── animation-pitfalls.md\n│   ├── design-styles.md     # 60 种 HTML 原生风格库（网页 20 + PPT 20 + 信息图 20）\n│   ├── slide-decks.md\n│   ├── editable-pptx.md\n│   ├── critique-guide.md\n│   ├── video-export.md\n│   └── ...\n├── scripts/                 # 导出工具链\n│   ├── render-video.js      # HTML → MP4\n│   ├── convert-formats.sh   # MP4 → 60fps + GIF\n│   ├── add-music.sh         # MP4 + BGM\n│   ├── export_deck_pdf.mjs\n│   ├── export_deck_pptx.mjs\n│   ├── html2pptx.js\n│   └── verify.py\n└── demos/                   # 9 个能力演示 (c*/w*)，中英双版 GIF/MP4/HTML + hero v10\n```\n\n---\n\n## 起源\n\nAnthropic 发布 Claude Design 那天我玩到凌晨四点。几天之后发现自己再也没点开过它，不是它不好——它是这个赛道目前最成熟的产品——是我宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面。\n\n于是让 agent 拆解 Claude Design 本身（包括社区流传的系统提示词、品牌资产协议、组件机制），蒸馏成结构化 spec，再写成 skill 装进自己的 Claude Code。\n\n感谢 Anthropic 把 Claude Design 的提示词写得清晰。这种基于其他产品灵感的二次创作，是开源文化在 AI 时代的新形态。\n\n---\n\n## 用 huashu-design 做的产品\n\n**[FanBox · Coding Agent 的驾驶舱](https://github.com/alchaincyf/fanbox)** 的三套界面皮肤，就是用 huashu-design 设计的。指挥 Claude Code / Codex 干活，看清它碰过的每个文件、每一行改动。\n\n[![FanBox · Coding Agent 的驾驶舱](https://raw.githubusercontent.com/alchaincyf/fanbox/master/assets/promo-banner.jpg)](https://github.com/alchaincyf/fanbox)\n\n---\n\n## 社区翻译版本\n\n社区维护的翻译版本。翻译质量与各版本 license 条款由对应维护者负责，使用前请先确认。\n\n| 语言 | 维护者 | 仓库 |\n|---|---|---|\n| English | [@namandhakad712](https://github.com/namandhakad712) | [namandhakad712/huashu-design-en](https://github.com/namandhakad712/huashu-design-en) |\n| 한국어（韩语） | [@ktkarchive](https://github.com/ktkarchive) | [ktkarchive/ktk-design](https://github.com/ktkarchive/ktk-design) |\n| Tiếng Việt（越南语） | [@letrquan](https://github.com/letrquan) | [letrquan/huashu-design](https://github.com/letrquan/huashu-design) |\n\n想加你的语言？fork 仓库、翻译 `SKILL.md` + `README.md`，然后回这边开个 issue，我会把链接加进来。\n\n---\n\n## License\n\n**2026-05-14 起改为 MIT 协议。** 此前版本采用「个人使用免费、企业商用需授权」的 Personal Use License，对商用做了限制——现在这层限制完全解除。\n\n按 [MIT License](LICENSE)，你可以**自由使用、修改、分发**本 skill，**包括商业用途**——公司内部用、客户商单交付、做成付费产品对外卖，都没问题。无需事先授权、无需付费、无需打招呼。注明出处不强制，但欢迎。\n\n---\n\n## Connect · 花生（花叔）\n\n花生是 AI Native Coder、独立开发者、AI 自媒体博主。代表作：小猫补光灯（AppStore 付费榜 Top 1）、《一本书玩转 DeepSeek》、女娲 .skill（GitHub 12000+ star）。自媒体全平台 30 万+ 粉丝。\n\n| 平台 | 账号 | 链接 |\n|---|---|---|\n| X / Twitter | @AlchainHust | https://x.com/AlchainHust |\n| 公众号 | 花叔 | 微信搜索「花叔」 |\n| B 站 | 花叔 | https://space.bilibili.com/14097567 |\n| YouTube | 花叔 | https://www.youtube.com/@Alchain |\n| 小红书 | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |\n| 官网 | huasheng.ai | https://www.huasheng.ai/ |\n| 开发者主页 | bookai.top | https://bookai.top |\n\n合作咨询、自媒体约稿 → 以上任一平台私信花生即可。\n",
  "bytes": 13006,
  "sha": "4b4ad3824e5b1854421d573de1ae0be13eda18d27dfdda230b0745cbf5cdae07",
  "repo_slug": "alchaincyf/huashu-design",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_alchaincyf_huashu_design_huashu_design_969b6ce8/readme"
}