Animated Sketch Diagram

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

31 stars 6 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add OLDyade/animated-sketch-diagram --skill animated-sketch-diagram

Manual install

git clone --depth 1 https://github.com/OLDyade/animated-sketch-diagram.git /tmp/animated-sketch-diagram
mkdir -p ~/.claude/skills
cp -r /tmp/animated-sketch-diagram/. ~/.claude/skills/animated-sketch-diagram

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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。生成时统一约束提示词：

Read the full skill on GitHub

Details

Skill name: animated-sketch-diagram
Repository: OLDyade/animated-sketch-diagram
Repo updated: 15 July 2026

FAQ

What does the Animated Sketch Diagram skill do?

How do I install the Animated Sketch Diagram skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add OLDyade/animated-sketch-diagram --skill animated-sketch-diagram. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Animated Sketch Diagram popular?

It lives in OLDyade/animated-sketch-diagram, which has 31 GitHub stars and 6 forks.

Related skills

Image to Prompt

jiemianduan/image-to-prompt

Analyze one or more reference images and reconstruct faithful, reusable image-generation prompts in Chinese and English. Use when users want to reverse-engineer, infer, restore, imitate, or write prompts from visual references.

Images, Video & Audio

Factory

AirsupHQ/factory-skill

Turn a one line description of a factory ("a line that makes 2,000 e-bike motors a day", "a bakery that bakes 10,000 croissants an hour", "a battery cell gigafactory") into a single self-contained HTML page with a live 3D tilt-shift miniature of that factory, driven by a real discrete event simulation (stations, cycle times, batches, finite buffers, shifts, breakdowns, scrap) with a live HUD for throughput against target, takt, utilization, WIP, lead time and the bottleneck, where clicking a station lets you add a machine or change a cycle time and watch the bottleneck move. Use it whenever so

Images, Video & Audio

FigFox Gen Skill

LawrenceRiver/FigFox-Gen-skill

Use when turning a scientific Methodology, with an optional reference image, into one evidence-grounded, human-editable final PNG figure.

Images, Video & Audio

Interflow Video Cut

derek-zhuolin/interflow-video-cut

Turn a local talking-head / 口播 video into metadata, transcript, and an AI-composed card-based video where the agent composes cards by cloning styled templates and filling them (designing bespoke only when content needs it), then renders to MP4. Ships with the Interflow AI club sign-off ("Interflow AI 出品"). Use when the user asks for interflow-video-cut, 口播成片, talking-head repurposing, video takeaways, transcript cleanup, or turning a spoken video into a captioned card video.

Images, Video & Audio

Blender Claymation

angrypenguinpng/blender-claymation-skill

Make stop-motion claymation videos in Blender from a one-line idea. Builds a miniature clay set and puppet in Python, animates it "on twos" at 12 fps with hand-made boil, renders with Cycles, encodes an mp4, and presents it in a video player. Use when the user asks for a claymation, stop-motion, plasticine or clay animation, a clay character or short film made in Blender, or "an animation that looks like a real studio made it".

Images, Video & Audio

Xiaoer Upscale

Jane-xiaoer/claude-skill-xiaoer-upscale

在 Mac 上把图片本地放大/提清晰度(超分辨率),并装好「Finder 右键 → 快速操作 → 超分 4K/8K」。 USE WHEN 用户说图片放大、超分、提清晰度、图糊了、做高清版、把这张图变清楚、 4K/8K 图、image upscale、super resolution、右键放大图片、Mac 右键超分。纯本地离线、不用 API key、不花钱(OpenCV dnn_superres,CPU 即可)。

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.