Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add iflytek/iFly-Skills --skill animated-sketch-diagramgit clone --depth 1 https://github.com/iflytek/iFly-SkillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/iflytek/ifly-skills/animated-sketch-diagram)<a href="https://agentmods.dev/skills/iflytek/ifly-skills/animated-sketch-diagram"><img src="https://agentmods.dev/badge/skills/iflytek/ifly-skills/animated-sketch-diagram/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/iflytek/ifly-skills/animated-sketch-diagram"><img src="https://agentmods.dev/badge/skills/iflytek/ifly-skills/animated-sketch-diagram.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00182 | $0.02578 |
| Opus 5 | $0.00091 | $0.01289 |
| Sonnet 5 | $0.00036 | $0.00516 |
| Haiku 4.5 | $0.00018 | $0.00258 |
Grade A, and why
animated-sketch-diagram scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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），保证文件自包含、离线可开。
What ships with it
16 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- _meta.json 143 B
- assets/fonts-cn/README.md 500 B
- assets/fonts/Caveat-400.woff2 48 KB
- assets/fonts/Caveat-700.woff2 50 KB
- assets/fonts/Excalifont-400.woff2 24 KB
- assets/fonts/Kalam-400.woff2 22 KB
- assets/fonts/Kalam-700.woff2 22 KB
- assets/fonts/PatrickHand-400.woff2 23 KB
- assets/vendor/rough.js 27 KB runs code
- assets/vendor/sketchify.js 2.1 KB runs code
- README.md 1.7 KB
- references/style-guide.md 8.5 KB
- references/svg-recipes.md 13 KB
- scripts/package-lock.json 671 B
- scripts/package.json 145 B
- scripts/render-gif.mjs 3.0 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 130 lines · 182 tokens per session scan A 5c8bc8fcc547
animated-sketch-diagram is a skill published in the GitHub repository iflytek/iFly-Skills (218 stars, last pushed 2d ago), licensed Apache-2.0. It adds 182 tokens to every session and 2,578 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
printed-curtain-render
A browser-based p5.js simulation that makes artwork or text move through separate curtain-like strands. p5.js is a JavaScript library for creating graphics and animations in a web browser.
light-spotlight-render
A reusable HTML animation in which a swinging spotlight reveals text, with settings for the text, swing, lamp size, glow, and colors.
web-ui-motion
Build polished front-end UI together with a signature motion effect in a single self-contained HTML file, combining SVG.js / SVG filters and the Canvas 2D API. Use when the user asks to build a web page, landing page, dashboard, or component that has a special visual effect, animation, particle system, fluid/water…
design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards…
design-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.