Huashu Design · HTML 原生设计 Skill

## 这是什么

**Huashu Design**（花叔设计）是 Claude Code 里的 HTML 原生设计 Skill，由独立开发者花生（花叔）开发，GitHub 19.9k stars，MIT 协议。

核心理念：**「打字。回车。一份能交付的设计。」**——在你的 agent 里打一句话，拿回一份看起来像大厂设计团队做的成品。不是「AI 做的还行」那种水平，是 3-30 分钟就能 ship 的产品级交付物。

## 能做什么

| 能力 | 交付物 | 典型耗时 |
|------|--------|----------|
| 交互原型（App / Web） | 单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证 | 10–15 min |
| 演讲幻灯片 | HTML deck + 可编辑 PPTX（真文本框保留） | 15–25 min |
| 时间轴动画 | MP4（25fps / 60fps 插帧）+ GIF + BGM | 8–12 min |
| 设计变体 | 3+ 并排对比 · Tweaks 实时调参 | 10 min |
| 信息图 / 可视化 | 印刷级排版 · 可导 PDF/PNG/SVG | 10 min |
| 设计方向顾问 | 三套逻辑并行出 3 版真实视觉 | 5 min |
| 5 维度专家评审 | 雷达图 + Keep/Fix/Quick Wins 清单 | 3 min |

## 安装

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

装上后在 Claude Code / Cursor / Codex 里直接说话：

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

## 核心机制

### 1. 品牌资产协议（5 步硬流程）

涉及具体品牌时强制执行：①问用户有无 brand guidelines → ②搜官方品牌页（<brand>.com/brand、brand.<brand>.com、<brand>.com/press）→ ③下载资产（SVG → 官网 HTML → 截图取色，三条兜底）→ ④grep 提取色值（绝不从记忆猜品牌色）→ ⑤固化 `brand-spec.md` + CSS 变量。

A/B 测试结果：v2 的稳定性方差比 v1 低 5 倍。

### 2. 设计方向顾问（Fallback）

需求模糊时触发：三套互补逻辑并行——
- **秒数轮盘**：`date +%S` 取秒数 20 选 1，打破模型偷选极简的惯性
- **现实参照**：世界级获奖网站迁移
- **最佳设计师**：顶级工作室哲学

各出一版**真实视觉**让你看着选，不让你在文字里盲选风格。底层是 **40 种 HTML 原生风格库**（网页 20 + PPT 20，纯 CSS 无需生图）。

### 3. Junior Designer 工作流

默认工作模式：开工前 show 问题清单 → HTML 里先写 assumptions + placeholders + reasoning → 尽早 show 给用户（哪怕只是灰色方块）→ 填充内容 → variations → Tweaks 三步分别再 show → 交付前 Playwright 肉眼过一遍。

### 4. 反 AI slop 规则

避免一眼 AI 的视觉最大公约数：紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display。改用 `text-wrap: pretty` + CSS Grid + 精心选择的 serif display 和 oklch 色彩。

## 和 Claude Design 的关系

作者大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。定位差异：

| | Claude Design | huashu-design |
|---|---|---|
| 形态 | 网页产品 | skill |
| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受限 |
| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF |
| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 |
| 跨 agent | 专属 Claude.ai | 任意 skill 兼容 agent |

Claude Design 是**更好的图形工具**，huashu-design 是**让图形工具这层消失**。

## 局限

- 不支持图层级可编辑的 PPTX 到 Figma
- Framer Motion 级复杂动画不行（3D、物理模拟、粒子系统）
- 完全空白的品牌从零设计质量会掉到 60–65 分

> 这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。

## 作者

花生（花叔），AI Native Coder、独立开发者、AI 自媒体博主。代表作：小猫补光灯（AppStore 付费榜 Top 1）、《一本书玩转 DeepSeek》、女娲 .skill（GitHub 12000+ star）。自媒体全平台 30 万+ 粉丝。

- 官网：https://www.huasheng.ai/
- GitHub：https://github.com/alchaincyf/huashu-design
- 作者主页：https://bookai.top