Agent skill

Animated Sketch Diagram

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

Apache-2.0Auto-check passed

Install Animated Sketch Diagram

skills CLI

$ npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install iflytek/iFly-Skills animated-sketch-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/iflytek/iFly-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/animated-sketch-diagram .claude/skills/animated-sketch-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "animated-sketch-diagram" agent skill from https://github.com/iflytek/iFly-Skills/tree/main/skills/animated-sketch-diagram into .claude/skills/animated-sketch-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animated-sketch-diagram", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/iflytek/iFly-Skills/tree/main/skills/animated-sketch-diagram

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install iflytek/iFly-Skills animated-sketch-diagram --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/iflytek/iFly-Skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/animated-sketch-diagram .agents/skills/animated-sketch-diagram && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "animated-sketch-diagram" agent skill from https://github.com/iflytek/iFly-Skills/tree/main/skills/animated-sketch-diagram into .agents/skills/animated-sketch-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animated-sketch-diagram", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install iflytek/iFly-Skills animated-sketch-diagram --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/iflytek/iFly-Skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/animated-sketch-diagram .cursor/skills/animated-sketch-diagram && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "animated-sketch-diagram" agent skill from https://github.com/iflytek/iFly-Skills/tree/main/skills/animated-sketch-diagram into .cursor/skills/animated-sketch-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animated-sketch-diagram", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/iflytek/iFly-Skills.git --path skills/animated-sketch-diagram

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install iflytek/iFly-Skills animated-sketch-diagram --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/iflytek/iFly-Skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/animated-sketch-diagram .gemini/skills/animated-sketch-diagram && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "animated-sketch-diagram" agent skill from https://github.com/iflytek/iFly-Skills/tree/main/skills/animated-sketch-diagram into .gemini/skills/animated-sketch-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animated-sketch-diagram", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install iflytek/iFly-Skills animated-sketch-diagram

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/iflytek/iFly-Skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/animated-sketch-diagram .github/skills/animated-sketch-diagram && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "animated-sketch-diagram" agent skill from https://github.com/iflytek/iFly-Skills/tree/main/skills/animated-sketch-diagram into .github/skills/animated-sketch-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animated-sketch-diagram", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install iflytek/iFly-Skills animated-sketch-diagram --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/iflytek/iFly-Skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/animated-sketch-diagram .opencode/skills/animated-sketch-diagram && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "animated-sketch-diagram" agent skill from https://github.com/iflytek/iFly-Skills/tree/main/skills/animated-sketch-diagram into .opencode/skills/animated-sketch-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animated-sketch-diagram", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: animated-sketch-diagram
GitHub stars: 209
Token cost: ~999 tokens
SKILL.md length: 253 words
Files: 17 (incl. scripts, references, assets)
Skills in repo: 11
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Works in 6 steps: 先规划内容，再动笔 → 反问图标来源（交互场景必做） → 读风格系统 → …
SKILL.md covers 工作流 and 质量红线
Runs JavaScript scripts from its folder; calls npm, node and ffmpeg

What it does

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

Its SKILL.md is about 1000 tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files, including scripts, reference files and assets (for example `README.md`, `_meta.json` and `assets/fonts-cn/README.md`).

The repository describes itself as: Official collection of iFLYTEK skills for speech, OCR, translation, proofreading, and multimodal AI capabilities. The licence is Apache-2.0.

Example prompts

“黑墨手绘涂鸦”
“animated diagram”
“GIF 架构图”
“/animated-sketch-diagram”

Requirements

Node.js

Workflow steps

6 steps, taken from the step headings in SKILL.md.

先规划内容，再动笔
反问图标来源（交互场景必做）
读风格系统
读代码配方，组装 HTML
导出 GIF
自检-修正循环（必做，产完不算完）

What it can do on your machine

Read from SKILL.md and the folder at commit 08cb03f. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
- npm
- node
- ffmpeg
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Animated Sketch Diagram loads about 999 tokens when it runs, and up to ~6.6k if it reads all its reference files. Until then it costs about 66 tokens; SKILL.md has 253 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~66
When it runs · the whole SKILL.md, loaded when a task matches: ~999
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~6.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from iflytek/iFly-Skills at commit 08cb03f, republished under its Apache-2.0 licence (© iflytek). 253 words, ~999 tokens.

Download SKILL.mdSave it as .claude/skills/animated-sketch-diagram/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.

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

生图模型生成（质感最像真手绘）——选这个就先做工具发现：当前环境有生图 skill/MCP/工具就直接用；没有就请用户提供生图 API。生成时统一约束提示词：黑墨简笔涂鸦、单一线宽、纸色/透明底、无阴影；产物转 data URI 用 <image> 内嵌，尺寸对齐 token，不引外部 URL。
自己设计 SVG 简笔图标（默认推荐，零依赖）——按 recipes §4 的涂鸦配方就地画。
网上搜现成素材——找 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 动画节奏），微动效幅度小。

Files

SKILL.md and 16 other files (scripts, references, assets) in skills/animated-sketch-diagram of iflytek/iFly-Skills.

SKILL.md
README.md
_meta.json
assets/fonts-cn/README.md
assets/fonts/Caveat-400.woff2
assets/fonts/Caveat-700.woff2
assets/fonts/Excalifont-400.woff2
assets/fonts/Kalam-400.woff2
assets/fonts/Kalam-700.woff2
assets/fonts/PatrickHand-400.woff2
assets/vendor/rough.js
assets/vendor/sketchify.js
references/style-guide.md
references/svg-recipes.md
scripts/package-lock.json
… and 2 more

Open the folder on GitHubat commit 08cb03f

Compare with similar skills

Animated Sketch Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Animated Sketch Diagram compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Animated Sketch Diagram this skilliflytek/iFly-Skills	209	—	~999	Automated safety check: Pass	Apache-2.0	3 days ago
Diagram Makergarrytan/gstack	136k	—	~4.1k	Automated safety check: Notes	MIT	today
Diagram Makeropenclaw/openclaw	392k	2 repos	~589	Automated safety check: Pass	MIT	today
Hand Drawn Diagramsnexu-io/open-design	100k	—	~336	Automated safety check: Pass	Apache-2.0	yesterday
Docs Diagramsvercel/next.js	143k	—	~2.9k	Automated safety check: Pass	MIT	today
Diagram Generatorsickn33/agentic-awesome-skills	47k	1 repos	~2.3k	Automated safety check: Pass	MIT	2 days ago

Similar skills

Diagram Maker
garrytan/gstack
Turns an English description or Mermaid source into a diagram set: the source, an editable .excalidraw file and rendered SVG and PNG images.
136k GitHub stars~4.1k tokensUpdated today
DevelopmentAuto-check: notes
Diagram Maker
openclaw/openclaw
Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.
392k GitHub starsUsed in 2 repos~589 tokens
DevelopmentAuto-check passed
Hand Drawn Diagrams
nexu-io/open-design
Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export.
100k GitHub stars~336 tokensUpdated yesterday
DevelopmentAuto-check passed
Docs Diagrams
vercel/next.js
Official
Draw diagrams for the Next.js docs in the style of the ones already published there: the light/dark PNGs an mdx references with <Image srcLight="/docs/light/<name.png" srcDark="/docs/dark/<name.png".
143k GitHub stars~2.9k tokensUpdated today
DevelopmentAuto-check passed
Diagram Generator
sickn33/agentic-awesome-skills
Generate, refine, validate, and render diagrams from natural language, notes, code, schemas, or existing diagram sources: flowcharts, swimlanes, attack-path graphs, data-flow diagrams, architecture…
47k GitHub starsUsed in 1 repo~2.3k tokens
DevelopmentAuto-check passed
Lanshu Animated Architecture Diagram
cclank/lanshu-animated-architecture-diagram
Create premium hand-drawn architecture and process diagrams in the Lanshu animated GIF style, with editable .excalidraw files, static PNG previews, and genuinely animated GIFs with moving flow…
995 GitHub stars~1.1k tokensUpdated 1 mo ago
DevelopmentAuto-check passed

Questions about Animated Sketch Diagram

What does Animated Sketch Diagram do?

How do I install Animated Sketch Diagram in Claude Code?

Run `npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a claude-code`. Or copy the skill folder (skills/animated-sketch-diagram in iflytek/iFly-Skills) into .claude/skills/animated-sketch-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Animated Sketch Diagram in Codex?

Run `npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a codex`. Or copy the skill folder (skills/animated-sketch-diagram in iflytek/iFly-Skills) into .agents/skills/animated-sketch-diagram in your project. Codex loads it when a task matches its description.

Can I use Animated Sketch Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add iflytek/iFly-Skills --skill animated-sketch-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/animated-sketch-diagram, .gemini/skills/animated-sketch-diagram, .github/skills/animated-sketch-diagram and .opencode/skills/animated-sketch-diagram in your project.

What does Animated Sketch Diagram need to run?

Going by SKILL.md and its folder, Animated Sketch Diagram needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npm, node and ffmpeg). Our summary lists: Node.js.

Does Animated Sketch Diagram access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Animated Sketch Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Animated Sketch Diagram use?

Animated Sketch Diagram is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Animated Sketch Diagram use?

About 999 tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.6k tokens, read only when the agent opens those files.

What are the alternatives to Animated Sketch Diagram?

Skills that share tags, products or a category with Animated Sketch Diagram: Diagram Maker (garrytan/gstack, 136k stars), Diagram Maker (openclaw/openclaw, 392k stars), Hand Drawn Diagrams (nexu-io/open-design, 100k stars) and Docs Diagrams (vercel/next.js, 143k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Animated Sketch Diagram?

iflytek (a GitHub organization) maintains it in iflytek/iFly-Skills, which has 209 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 8, 2026.

Source: iflytek/iFly-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Animated Sketch Diagram

Facts

At a glance

What it does

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

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

工作流

1. 先规划内容，再动笔

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

3. 读风格系统

4. 读代码配方，组装 HTML

5. 导出 GIF

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

质量红线

Files

Compare with similar skills

Similar skills

More from iflytek/iFly-Skills

Questions about Animated Sketch Diagram