animated-sketch-diagram

name	animated-sketch-diagram
description	生成"黑墨手绘涂鸦"风格的动画架构图/流程图：米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML（SVG+CSS），可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化，或提到"手绘风""涂鸦风""动图""animated diagram""GIF 架构图"时使用；即使用户没明说要动画，做技术概念科普配图时也应优先考虑本 skill。
metadata	{"homepage":"https://github.com/OLDyade/animated-sketch-diagram","openclaw":"{\"emoji\": \"✏️\", \"dimensions\": [\"手绘动画架构图\", \"图表可视化\"], \"user_instructions\": [\"帮我画一张架构图动图\", \"画一张手绘风流程图\", \"把这个概念画成动画示意图\"], \"requires\": {\"bins\": [\"node\", \"ffmpeg\"]}}"}

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 就导：

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 动画节奏），微动效幅度小。