Agent skill

SVG Article Illustrator

by cat-xierluo in cat-xierluo/legal-skills

Creates SVG illustrations for a Markdown article as animated SVG, static SVG or PNG files, and places them in the text at planned positions.

MITAuto-check passedMedia & Creative

SKILL.md written in Chinese; this summary is our English description.

Install SVG Article Illustrator

skills CLI
$ npx skills add cat-xierluo/legal-skills --skill svg-article-illustrator -a claude-code

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

GitHub CLI
$ gh skill install cat-xierluo/legal-skills svg-article-illustrator --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/cat-xierluo/legal-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/svg-article-illustrator .claude/skills/svg-article-illustrator && 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/

Facts

Skill name
svg-article-illustrator
GitHub stars
720
Token cost
~981 tokens
SKILL.md length
286 words
Files
11 (incl. scripts, references, assets)
Skills in repo
62
Repo updated
First seen
Licence
MIT

At a glance

Creates SVG illustrations for a Markdown article as animated SVG, static SVG or PNG files, and places them in the text at planned positions.

  • Works in 5 steps: 主 Agent 分析文章内容并规划配图 → 插入占位符 [[ILLUSTRATION:ID:简短描述]] 到文章 → 解析占位符,按批次分发(每批 3-5 张) → …
  • Adding illustrations to a Markdown article that has several sections
  • SKILL.md covers 快速开始, 依赖说明, 选择输出模式 and 并行生成模式, plus 5 more sections
  • Runs Shell and JavaScript scripts from its folder; calls node

What it does

This skill reads an article in Markdown, plans where illustrations belong, designs an SVG for each spot and inserts the result. It offers three output modes: dynamic SVG with SMIL animation, which is the default, static SVG, and PNG export. In the two SVG modes the code is embedded straight into the Markdown file instead of linked as an image, to keep animation and compatibility. PNG output is produced only when you ask for it, using the bundled `svg2png.js` script.

Placement follows simple rules: at least one image after each second-level heading, roughly one per two or three key paragraphs, and extra images at conceptual turning points. Each spot gets a placeholder tag that is later replaced with the generated SVG. When eight or more images are planned, the work is split into batches of three to five and handed to parallel sub-agents, then collected in ID order. Finished SVGs are archived into a timestamped folder named after the article.

The two SVG modes need no installs; PNG export needs Node.js and puppeteer. The skill is written in Chinese and aimed at illustrating WeChat Official Account articles. Reference files cover design principles, each mode, PNG export and multi-agent generation, and `assets/` holds layout and animation material.

When your agent uses it

  • Adding illustrations to a Markdown article that has several sections
  • Producing animated SVG diagrams for an article
  • Converting article SVGs to PNG for platforms that do not accept SVG
  • Generating many illustrations at once for a long article

Example prompts

  • “Add illustrations to ./posts/ai-agents-intro.md using the default animated style.”
  • “Make static SVG illustrations for this article, no animation.”
  • “Export the illustrations in this article as PNG files.”
  • “This article needs about ten images, so split the work across parallel agents.”

Requirements

  • Node.js and puppeteer, only for the PNG export mode

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. 主 Agent 分析文章内容并规划配图
  2. 插入占位符 [[ILLUSTRATION:ID:简短描述]] 到文章
  3. 解析占位符,按批次分发(每批 3-5 张)
  4. 并行启动多个 Task Agent 生成
  5. 主 Agent 按 ID 顺序收集并替换占位符

What it can do on your machine

Read from SKILL.md and the folder at commit db2c58c. 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 2 files in scripts/ (Shell and JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    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

SVG Article Illustrator loads about 981 tokens when it runs, and up to ~10k if it reads all its reference files. Until then it costs about 31 tokens; SKILL.md has 286 words of instructions outside code blocks.

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

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 cat-xierluo/legal-skills at commit db2c58c, republished under its MIT licence (© cat-xierluo). 286 words, ~981 tokens.

Download SKILL.mdSave it as .claude/skills/svg-article-illustrator/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
svg-article-illustrator
description
AI驱动的SVG文章配图生成工具,支持动态SVG、静态SVG和PNG导出三种输出模式。当用户需要为文章生成配图、创建SVG插图、将SVG转换为PNG,或提到"为文章配图"、"生成插图"时使用此技能。
homepage
https://github.com/cat-xierluo/legal-skills
author
杨卫薪律师(微信ywxlaw)
version
1.0.4
license
MIT

SVG Article Illustrator

AI 驱动的文章配图生成工具,使用 SVG 技术为公众号文章生成高质量配图。

重要说明:默认模式(dynamic-svg 和 static-svg)将 SVG 代码直接嵌入到 Markdown 文件中,而不是使用 ![](path.svg) 的图片引用语法。这确保了动画效果和最佳兼容性。

快速开始

/svg-article-illustrator @path/to/article.md

依赖说明

  • dynamic-svg / static-svg 模式:无需安装任何依赖
  • png-export 模式:需要安装 Node.js 和 puppeteer,详见 references/png-export.md

选择输出模式

根据用户需求和发布平台选择合适的输出模式:

用户场景使用模式加载参考文件
默认/未指定dynamic-svgreferences/dynamic-svg.md
需要动画效果dynamic-svgreferences/dynamic-svg.md
需要 PNG 兼容性png-exportreferences/png-export.md
不知道如何使用 SVGpng-exportreferences/png-export.md
明确要求静态效果static-svgreferences/static-svg.md
需要静态 SVG 代码static-svgreferences/static-svg.md

默认模式:当用户未明确指定时,使用 dynamic-svg 模式。


并行生成模式

当配图数量 ≥ 8 张时,自动启用多 Agent 并行生成以提升效率。

详见:references/multi-agent-generation.md

核心思路:

  1. 主 Agent 分析文章内容并规划配图
  2. 插入占位符 [[ILLUSTRATION:ID:简短描述]] 到文章
  3. 解析占位符,按批次分发(每批 3-5 张)
  4. 并行启动多个 Task Agent 生成
  5. 主 Agent 按 ID 顺序收集并替换占位符

启用条件:

  • 规划的配图数量 ≥ 8 张

核心工作流程

第一阶段:内容分析
  1. 读取源文章 Markdown 文件

  2. 识别核心概念和关键信息点

  3. 规划配图位置:

    • 每个二级标题(##)后至少 1 张图
    • 每 2-3 个重要段落 1 张图
    • 重要概念转折点额外配图
    • 在规划位置插入占位符 [[ILLUSTRATION:ID:简短描述]]
  4. 评估并选择生成模式:

    • ≥ 8 张 → 并行生成(多 Task Agent)
    • < 8 张 → 顺序生成
第二阶段:设计 SVG
  1. 根据选择的输出模式应用相应规范
    • dynamic-svg:添加 SMIL 动画效果
    • static-svg:生成静态 SVG 代码
    • png-export:生成 SVG 文件
  2. 遵循共享设计原则:references/core-principles.md
第三阶段:生成与输出
  1. 解析占位符:提取所有 [[ILLUSTRATION:ID:描述]]
  2. 并行/顺序生成:
    • ≥ 8 张:并行生成(多 Task Agent)
    • < 8 张:顺序生成
  3. 替换占位符:将生成的 SVG 代码替换占位符

默认行为:除非用户明确要求 PNG 格式或图片文件引用,否则必须直接将 SVG 代码嵌入到 Markdown 文件中。

  • dynamic-svg:将 SVG 代码直接嵌入 Markdown 文件(使用 <svg> 标签)
  • static-svg:将 SVG 代码直接嵌入 Markdown 文件(使用 <svg> 标签)
  • png-export(仅当用户明确要求时):
    1. 保存 SVG 文件到源文章目录
    2. 使用 scripts/svg2png.js 转换为 PNG
    3. 在 Markdown 中插入图片引用 ![](path.png)
第四阶段:归档

每次完成配图生成后,将文章中的 SVG 代码提取并归档到 Skill 内部:

bash
# 归档目录结构
.claude/skills/svg-article-illustrator/archive/YYYYMMDD_HHMMSS_文章名/
├── 1_配图名称.svg  # 提取的 SVG 文件
├── 2_配图名称.svg
└── ...

归档命名规则:

  • 格式:YYYYMMDD_HHMMSS_文章标题
  • 文章标题取自 Markdown 的第一个一级标题(# 标题),去除特殊字符
  • SVG 文件命名:序号_配图名称.svg
  • 示例:20260209_163045_AI_Agent法律工作流未来范式/
    • 1_AI_Agent_演进概览.svg
    • 2_提示词设计.svg
    • ...

共享设计原则

所有输出模式都遵循相同的核心设计原则,详见:references/core-principles.md

核心要点:

  • 概念聚焦:每张图只表达 1-2 个核心概念
  • 极简设计:浅色主题,大图形,少文字
  • 画布尺寸:800x450(16:9 比例)
  • 边界控制:所有元素在有效区域内(60px 安全边距)

模式特定规范

Dynamic SVG 模式

默认模式,支持 SMIL 动画效果。

详见:references/dynamic-svg.md

核心特性:

  • SMIL 动画:浮动、虚线流动、箭头绘制
  • Emoji 动画:浮动、脉冲效果
  • 逻辑性动画优先:箭头和虚线框必须有动画
  • SVG 代码直接嵌入 Markdown
Static SVG 模式

静态 SVG 代码直接嵌入 Markdown。

详见:references/static-svg.md

核心特性:

  • 无动画效果
  • SVG 代码直接嵌入 Markdown
  • 公众号完美支持
PNG Export 模式

生成独立的 SVG 和 PNG 文件。

详见:references/png-export.md

核心特性:

  • 文件命名:短名-序号.svg(≤15 字符)
  • 保存位置:与源文章同目录
  • PNG 转换:使用 scripts/svg2png.js
  • 跨平台兼容性最佳

PNG 转换脚本

使用 scripts/svg2png.js 进行高保真转换:

bash
node scripts/svg2png.js input.svg [output.png] [dpi]
  • 默认 DPI:600
  • 支持:emoji、中文、CSS
  • 输出位置:总是生成到 SVG 源文件所在目录

成功标准

  • 配图密度 10-15 张,有效增强视觉吸引力
  • 每张配图概念聚焦准确
  • 极简风格贯穿始终
  • 公众号显示正常
  • 跨平台兼容性良好

© cat-xierluo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (scripts, references, assets) in skills/svg-article-illustrator of cat-xierluo/legal-skills.

  • SKILL.md
  • CHANGELOG.md
  • assets/animations.smil
  • assets/layouts.svg
  • references/core-principles.md
  • references/dynamic-svg.md
  • references/multi-agent-generation.md
  • references/png-export.md
  • references/static-svg.md
  • scripts/archive.sh
  • scripts/svg2png.js

Open the folder on GitHubat commit db2c58c

Compare with similar skills

SVG Article Illustrator 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.

SVG Article Illustrator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
SVG Article Illustrator this skillcat-xierluo/legal-skills720—~981Automated safety check: PassMIT
Md2pdf Exportwentorai/Research-Claw858—~2.1kAutomated safety check: NotesCustom licence
Markdown PRD to HTML Rendererowainlewis/blueprint412—~1.3kAutomated safety check: PassMIT
Web Visualsglifxyz/glif-mcp-server213—~1.5kAutomated safety check: PassMIT
Article Illustration Batch GeneratorSpaceZephyr/design-buddy176—~1kAutomated safety check: PassNone
Markdown To HTMLgithub/awesome-copilot40k1 repos~6.2kAutomated safety check: PassMIT

Similar skills

  • Md2pdf Export

    wentorai/Research-Claw

    Convert Markdown files to PDF, PNG, or JPEG using headless Chrome (Puppeteer), following the same methodology as VS Code's Markdown Preview Enhanced extension.

    858 GitHub stars~2.1k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes
  • Markdown PRD to HTML Renderer

    owainlewis/blueprint

    Converts a complete Markdown PRD or technical design into one verified, static HTML reading page without changing what it says.

    412 GitHub stars~1.3k tokensUpdated today
    Documents & OfficeAuto-check passed
  • Web Visuals

    glifxyz/glif-mcp-server

    Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code.

    213 GitHub stars~1.5k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Article Illustration Batch Generator

    SpaceZephyr/design-buddy

    Splits a Markdown article by heading, drafts an image prompt for each section, then generates diagrams with the Gemini API and embeds them in the note.

    176 GitHub stars~1k tokensUpdated 3 mo ago
    Media & CreativeAuto-check passed
  • Markdown To HTML

    github/awesome-copilot

    Official

    Convert Markdown files to HTML similar to marked.js, pandoc, gomarkdown/markdown, or similar tools; or writing custom script to convert markdown to html and/or working on web template systems like…

    40k GitHub starsUsed in 1 repo~6.2k tokens
    Documents & OfficeAuto-check passed
  • Knap Markdown Templates

    kepano/obsidian-skills

    Renders Markdown notes from Knap templates and JSON data on the command line, including notes built from Defuddle web page output.

    49k GitHub starsUsed in 2 repos~986 tokens
    Documents & OfficeAuto-check passed

More from cat-xierluo/legal-skills

All 62 skills in this repo
  • Elements-Style Complaint Generator

    cat-xierluo/legal-skills

    Converts a lawyer's ordinary complaint or a described case into the Supreme People's Court's elements-style Word template, with layout checks on the result.

    720 GitHub stars~2.5k tokensUpdated today
    Auto-check: notes
  • Lecture Performance Review

    cat-xierluo/legal-skills

    Analyzes raw lecture transcripts for verbal tics, pacing, time use and promise follow-through, with optional slide-by-slide comparison and cross-session tracking.

    720 GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • De-AI Polish for Chinese Articles

    cat-xierluo/legal-skills

    Detects and rewrites machine-sounding patterns in the body text of Chinese articles while keeping the author's facts, headings and legal terms intact.

    720 GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • GitHub Star Manager

    cat-xierluo/legal-skills

    Finds GitHub projects mentioned in articles or screenshots and stars them, tracks updates to your starred repos, and builds an HTML dashboard to browse them.

    720 GitHub stars~2k tokensUpdated today
    Auto-check: notes
  • Legal Harness Initializer

    cat-xierluo/legal-skills

    Sets up or incrementally updates AGENTS.md and CLAUDE.md for legal professionals, with a minimal safety baseline and a check that a new session loads and follows the rules.

    720 GitHub stars~2.3k tokensUpdated today
    Auto-check passed
  • Moot Court Simulation Builder

    cat-xierluo/legal-skills

    Chinese-language skill that organizes a case file into a multi-role mock trial with judge, parties and clerk, producing a transcript, issue review and a to-strengthen list.

    720 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

Questions about SVG Article Illustrator

What does SVG Article Illustrator do?

Creates SVG illustrations for a Markdown article as animated SVG, static SVG or PNG files, and places them in the text at planned positions. This skill reads an article in Markdown, plans where illustrations belong, designs an SVG for each spot and inserts the result. It offers three output modes: dynamic SVG with SMIL animation, which is the default, static SVG, and PNG export.

When should I use SVG Article Illustrator?

SVG Article Illustrator fits situations like: adding illustrations to a Markdown article that has several sections; producing animated SVG diagrams for an article; converting article SVGs to PNG for platforms that do not accept SVG; generating many illustrations at once for a long article.

How do I install SVG Article Illustrator in Claude Code?

Run `npx skills add cat-xierluo/legal-skills --skill svg-article-illustrator -a claude-code`. Or copy the skill folder (skills/svg-article-illustrator in cat-xierluo/legal-skills) into .claude/skills/svg-article-illustrator in your project. Claude Code loads it when a task matches its description.

How do I install SVG Article Illustrator in Codex?

Run `npx skills add cat-xierluo/legal-skills --skill svg-article-illustrator -a codex`. Or copy the skill folder (skills/svg-article-illustrator in cat-xierluo/legal-skills) into .agents/skills/svg-article-illustrator in your project. Codex loads it when a task matches its description.

Can I use SVG Article Illustrator 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 cat-xierluo/legal-skills --skill svg-article-illustrator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/svg-article-illustrator, .gemini/skills/svg-article-illustrator, .github/skills/svg-article-illustrator and .opencode/skills/svg-article-illustrator in your project.

What does SVG Article Illustrator need to run?

Going by SKILL.md and its folder, SVG Article Illustrator needs a shell and JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js and puppeteer, only for the PNG export mode.

Does SVG Article Illustrator access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is SVG Article Illustrator 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 SVG Article Illustrator use?

SVG Article Illustrator is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does SVG Article Illustrator use?

About 981 tokens (SKILL.md is roughly 3.9k 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 9.2k tokens, read only when the agent opens those files.

What are the alternatives to SVG Article Illustrator?

Skills that share tags, products or a category with SVG Article Illustrator: Md2pdf Export (wentorai/Research-Claw, 858 stars), Markdown PRD to HTML Renderer (owainlewis/blueprint, 412 stars), Web Visuals (glifxyz/glif-mcp-server, 213 stars) and Article Illustration Batch Generator (SpaceZephyr/design-buddy, 176 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains SVG Article Illustrator?

cat-xierluo (a GitHub user) maintains it in cat-xierluo/legal-skills, which has 720 GitHub stars. The repository holds 62 skills in this directory. The repository was last updated on October 10, 2026.

Source: cat-xierluo/legal-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.