animated-sketch-diagram

---
name: animated-sketch-diagram
description: 生成"黑墨手绘涂鸦"风格的动画架构图/流程图：米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML（SVG+CSS），可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化，或提到"手绘风""涂鸦风""动图""animated diagram""GIF 架构图"时使用；即使用户没明说要动画，做技术概念科普配图时也应优先考虑本 skill。
---

# Animated Sketch Diagram（手绘涂鸦风动画信息图）

产出一张像资深工程师在牛皮笔记本上手绘的系统图：米色纸面、黑墨抖动描边、
极淡水洗色块、简笔涂鸦图标（小人/文档/纸箱/月亮）、序号章、✦ 点缀，
连线上有小圆点沿路径流动、图标带微动效，整体 3s 无缝循环。

**产物**：一个自包含 HTML 文件（内联 SVG + CSS 动画 + base64 字体，双击即可播放）；
需要 GIF 时用 `scripts/render-gif.mjs` 逐帧录制。

## 工作流

### 1. 先规划内容，再动笔

**版式跟着内容的天然形状走，不要反过来。** 先判断主题本身长什么样，再选版式原型：

| 内容的天然形状 | 版式原型 |
|---|---|
| N 个并列的类别/方案/阶段，各自内部有流程 | 横向色带 band（左侧标签栏 + 右侧流程画布） |
| 自上而下的分层架构（前端→服务→存储） | 纵向层叠：全宽色层堆叠，跨层竖直连线 |
| 一个核心与多个卫星（hub-and-spoke） | 径向：中心 mascot 大圆 + 环绕节点 + 放射连线 |
| 两三个东西逐维度对比 | 并排色柱/矩阵，同一行是同一维度 |
| 单一主流程 | 不用色带，一条蛇形/折线主轴铺满画布 |
| 时间演进 | 横向时间轴 + 上下交错的事件卡 |

原型可以混搭（如 band 内部径向）。所有原型共用同一套元件：

- **区块（region）**：一级分区的圆角水洗色块，左上序号章 + 顶部居中标题；相邻区块换色。
- **内卡（node）**：纸白小卡片 = 简笔涂鸦图标 + 手写标签，一个区块内 3~6 个为宜；
  "文档/列表"用折角纸 + 三两行短横线速记，"一叠"用偏移副本。
- **连线（edge)**：微弯曲线箭头，线上可挂小字标签。**拓扑跟内容走**：分支、汇聚、
  往返、回环、跨区块长弧、环形轨道都是一等公民，不要把图默认摆成单向流水线——
  内容里有循环/转向，图上就要画出来并让圆点沿它转。实线/虚线只表达"确定/弱、
  数据面/控制面"这类强弱语义，不是"主流程/回环"的分工。
- **点缀件**：虚线引用框（放命令/示例）、简笔小人、✦ 火花、中央手写口号。

**规划的最后一步是编排流动**：动画不是装饰，是把主题里"什么在流动"讲出来。
先用一句话回答——这张图里流动的是什么（数据？请求？记忆？任务？），
它从哪来、经过谁、在哪分叉、在哪转圈、最后到哪去——再把这条"流动脚本"
落成路径：该分支就分支、该汇聚就汇聚、该循环就让圆点沿弧转回去。
主题本身是环（飞轮、迭代、生命周期）→ 图的动线就该是环；
主题是发散/收敛（一发多、多合一）→ 动线就该扇形展开/合拢。
看成品时"流动的形状"应该能复述出主题的结构，全图只有一排同向箭头
通常说明流动没规划，不是主题真的这么直。

内容永远来自用户的主题。不要照搬任何示例里的文字、节点名或结构；
示例里的"三条横带"只是原型之一，不是本 skill 的固定输出形状。

### 2. 反问图标来源（交互场景必做）

动笔前用 AskUserQuestion 问一次图标怎么来（用户此前已表态或本次已指定的不重复问）：

1. **生图模型生成**（质感最像真手绘）——选这个就先做工具发现：当前环境有生图
   skill/MCP/工具就直接用；没有就请用户提供生图 API。生成时统一约束提示词：
   黑墨简笔涂鸦、单一线宽、纸色/透明底、无阴影；产物转 data URI 用 `<image>` 内嵌，
   尺寸对齐 token，不引外部 URL。
2. **自己设计 SVG 简笔图标**（默认推荐，零依赖）——按 recipes §4 的涂鸦配方就地画。
3. **网上搜现成素材**——找 CC0/开源手绘图标（如 tabler、handdrawn 系列），
   下载 SVG 后统一改成 ink 色和 2px 线宽再内嵌，风格必须归一。

无头/非交互/子代理场景不要卡在提问上：直接用方案 2。

### 3. 读风格系统

读 `references/style-guide.md` —— 调色板、字体、描边、圆角、间距、动画节奏的全部 token。
风格的辨识度来自 token 的组合，务必按 token 来，不要自由发挥配色。

### 4. 读代码配方，组装 HTML

读 `references/svg-recipes.md` —— 面板、节点、箭头、流动圆点、图标微动效、标题高亮
的可复制 SVG/CSS 模式。按配方组装出**一个** HTML 文件。

关键约束（导出 GIF 依赖这些）：

- 只用 **CSS 动画**（`@keyframes` + `offset-path`），不用 SMIL `<animate>`，
  不用 JS 驱动动画 —— 录制脚本靠 `document.getAnimations()` 逐帧定格。
- 所有 `animation-duration` 必须能整除全局循环时长 `--loop`（默认 3000ms），
  且 `infinite` 循环，这样 GIF 首尾无缝。
- 字体用 base64 内联（命令见 recipes），保证文件自包含、离线可开。

### 5. 导出 GIF

**GIF 是主要交付物**（HTML 只是源），写完 HTML 就导：

```bash
cd ~/.claude/skills/animated-sketch-diagram/scripts
npm install          # 仅第一次
node render-gif.mjs /path/to/diagram.html /path/to/diagram.gif
```

脚本自动找本机 Chrome/Chromium，逐帧截图后 ffmpeg 合成（需要 ffmpeg）。
参数：`--fps 25 --loop 3000 --scale 2`——**scale 保持 2**，1x 的 GIF 文字发糊。

### 6. 自检-修正循环（必做，产完不算完）

审查对象是**导出的 GIF**，不是 HTML：从 GIF 里抽 2~3 个间隔帧
（`ffmpeg -i x.gif -vf "select='not(mod(n,25))'" -vsync 0 f%d.png`），
用 Read 看图，逐项过：

- **清晰度**：文字边缘干净可读，没有糊化/噪点（糊 = scale 忘了 2 或被后期缩放）
- **排版**：内容撑满区块（两侧无大白边）、区块高度贴内容、眯眼看墨色分布均匀无"成片空白"
- **动画**：对比两帧，圆点位移明显（速度感）、微动效在动；播放确认循环无接缝、
  流动"一眼可见"而不是要凑近找
- **流动编排**：流动的形状能复述主题结构（有分叉/汇聚/回环的主题，动线也有），
  不是一排同向平行线
- **风格**：手绘抖动生效、箭头贴节点边缘、文字无溢出、中文字体正确
- **内容**：节点/连线/标签与规划一一对应，无错别字

**发现任何一项不合格：改 → 重渲 → 重看，直到全过。** 至少完整跑一轮这个循环才能交付；
交付时把 GIF 和 HTML 一起给出，并注明尺寸/帧数/文件大小。

## 质量红线

- 构图要"密"：区块尺寸贴内容，每个区块必须有一叠纸/小人/回环/标注框等非线性元素，
  连线挂标签——细则见 style-guide.md 的"构图密度"。一排等宽盒子加箭头 = 不合格。
- 区块之间 24px+，节点间 36px+；密不等于挤。
- 全图基本单色墨：彩色只出现在水洗底色和流动圆点上，文字图标一律 ink。
- 一个区块一种水洗色；相邻区块换色。
- 手写体只用于图内文字；代码/命令片段用等宽字体放引用框里。
- 动画是点缀不是主角，但必须"一眼可见"：圆点小（r≈4.5）而速度要跟上
  （80~150px/s，见 style-guide 动画节奏），微动效幅度小。