svg-article-illustrator

SVG Article Illustrator

AI-driven article illustration generation tool that uses SVG technology to generate high-quality illustrations for WeChat official account articles.

Important note: The default modes (dynamic-svg and static-svg) embed the SVG code directlyinto the Markdown file, rather than using the ![](path.svg) image reference syntax. This ensures animation effects and optimal compatibility.

Quick Start

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

Dependency Notes

• dynamic-svg / static-svg modes: No dependencies need to be installed
• png-export mode: Requires installing Node.js and puppeteer, see references/png-export.md

---

Choose Output Mode

Choose the appropriate output mode based on user needs and the publishing platform:

User Scenario	Mode to Use	Load Reference File
Default/unspecified	dynamic-svg	references/dynamic-svg.md
Need animation effects	dynamic-svg	references/dynamic-svg.md
Need PNG compatibility	png-export	references/png-export.md
Don't know how to use SVG	png-export	references/png-export.md
Explicitly require static effects	static-svg	references/static-svg.md
Need static SVG code	static-svg	references/static-svg.md

Default mode: When the user does not explicitly specify, use the dynamic-svg mode.

---

Parallel Generation Mode

When the number of illustrations is ≥ 8, multi-Agent parallel generation is automatically enabled to improve efficiency.

See:references/multi-agent-generation.md

Core Idea：

1. The main Agent analyzes the article content and plans the illustrations
2. Insert placeholders [[ILLUSTRATION:ID:简短描述]] into the article
3. Parse the placeholders and distribute them in batches (3-5 per batch)
4. Launch multiple Task Agents in parallel to generate
5. The main Agent collects and replaces placeholders in ID order

Enable Conditions：

• The planned number of illustrations is ≥ 8

---

Core Workflow

Phase 1: Content Analysis

1. Read the source article Markdown file

2. Identify core concepts and key information points

3. Plan illustration positions:

   • At least 1 image after each second-level heading (##)
   • 1 image every 2-3 important paragraphs
   • Additional illustrations at important conceptual turning points
   • Insert placeholders at the planned positions [[ILLUSTRATION:ID:简短描述]]

4. Evaluate and choose the generation mode:

   • ≥ 8 images → parallel generation (multiple Task Agents)
   • < 8 images → sequential generation

Phase 2: Design SVG

1. Apply the corresponding specifications according to the selected output mode
   • dynamic-svg: Add SMIL animation effects
   • static-svg: Generate static SVG code
   • png-export: Generate SVG file
2. Follow shared design principles:references/core-principles.md

Phase 3: Generation and Output

1. Parse placeholders: Extract all [[ILLUSTRATION:ID:描述]]
2. Parallel/sequential generation：
   • ≥ 8 images: parallel generation (multiple Task Agents)
   • < 8 images: sequential generation
3. Replace placeholders: Replace the placeholders with the generated SVG code

Default behavior: Unless the user explicitly requests PNG format or image file references,the SVG code must be embedded directlyinto the Markdown file.

• dynamic-svg: Embed the SVG code directly into the Markdown file (using the <svg> tag)
• static-svg: Embed the SVG code directly into the Markdown file (using the <svg> tag)
• png-export(only when the user explicitly requests it):
  1. Save the SVG file to the source article directory
  2. Use scripts/svg2png.js to convert to PNG
  3. Insert an image reference in Markdown ![](path.png)

Phase 4: Archiving

After completing each illustration generation, extract the SVG code from the article and archive it inside the Skill:

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

Archiving naming rules：

• Format:YYYYMMDD_HHMMSS_文章标题
• The article title is taken from the first level-1 heading in the Markdown (# 标题), with special characters removed
• SVG file naming:序号_配图名称.svg
• Example:20260209_163045_AI_Agent法律工作流未来范式/
  • 1_AI_Agent_演进概览.svg
  • 2_提示词设计.svg
  • ...

---

Shared design principles

All output modes follow the same core design principles, see:references/core-principles.md

Core points:

• Concept focus: each image expresses only 1-2 core concepts
• Minimalist design: light theme, large graphics, little text
• Canvas size: 800x450 (16:9 ratio)
• Boundary control: all elements within the valid area (60px safe margin)

---

Mode-specific specifications

Dynamic SVG mode

Default mode, supports SMIL animation effects.

See:references/dynamic-svg.md

Core features:

• SMIL animation: floating, dashed line flow, arrow drawing
• Emoji animation: floating, pulse effects
• Logical animation first: arrows and dashed boxes must have animation
• SVG code embedded directly into Markdown

Static SVG mode

Static SVG code embedded directly into Markdown.

See:references/static-svg.md

Core features:

• No animation effects
• SVG code embedded directly into Markdown
• Perfect support for WeChat Official Accounts

PNG Export mode

Generate standalone SVG and PNG files.

See:references/png-export.md

Core features:

• File naming: short-name-number.svg (≤15 characters)
• Save location: same directory as the source article
• PNG conversion: use scripts/svg2png.js
• Best cross-platform compatibility

---

PNG conversion script

Use scripts/svg2png.js for high-fidelity conversion:

node scripts/svg2png.js input.svg [output.png] [dpi]

• Default DPI：600
• Supports: emoji, Chinese, CSS
• Output location: always generated to the directory where the SVG source file is located

---

Success criteria

• Illustration density 10-15 images, effectively enhancing visual appeal
• Each illustration has accurate concept focus
• Minimalist style throughout
• Displays normally on WeChat Official Accounts
• Good cross-platform compatibility