SVG Article Illustrator
AI-powered article illustration generator that uses SVG technology to create high-quality visuals for WeChat Official Account articles.
Important Note: The default modes (dynamic-svg and static-svg)
embed SVG code directly into the Markdown file instead of using the 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 required
- png-export mode: Requires Node.js and puppeteer installation, see references/png-export.md for details
Select Output Mode
Choose the appropriate output mode based on user needs and publishing platform:
| User Scenario | Mode to Use | Reference File to Load |
|---|
| 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 |
| Unfamiliar with SVG usage | png-export | references/png-export.md |
| Explicitly requires static effects | static-svg | references/static-svg.md |
| Need static SVG code | static-svg | references/static-svg.md |
Default Mode: When no explicit specification is provided by the user, use dynamic-svg mode.
Parallel Generation Mode
Automatically enables multi-Agent parallel generation to improve efficiency when the number of illustrations ≥ 8.
For details: references/multi-agent-generation.md
Core Logic:
- Main Agent analyzes article content and plans illustrations
- Inserts placeholder
[[ILLUSTRATION:ID:Brief Description]]
- Parses placeholders and distributes in batches (3-5 illustrations per batch)
- Launches multiple Task Agents in parallel for generation
- Main Agent collects and replaces placeholders in ID order
Activation Condition:
- Planned number of illustrations ≥ 8
Core Workflow
Phase 1: Content Analysis
-
Reads source article Markdown file
-
Identifies core concepts and key information points
-
Plans illustration positions:
- At least 1 illustration after each level 2 heading (##)
- 1 illustration every 2-3 important paragraphs
- Additional illustrations at key concept turning points
- Inserts placeholder
[[ILLUSTRATION:ID:Brief Description]]
-
Evaluates and selects generation mode:
- ≥8 illustrations → Parallel generation (multi Task Agents)
- <8 illustrations → Sequential generation
Phase 2: SVG Design
- Applies corresponding specifications based on selected output mode
- dynamic-svg: Adds SMIL animation effects
- static-svg: Generates static SVG code
- png-export: Generates SVG files
- Follows shared design principles: references/core-principles.md
Phase 3: Generation & Output
- Parse Placeholders: Extract all
[[ILLUSTRATION:ID:Description]]
- Parallel/Sequential Generation:
- ≥8 illustrations: Parallel generation (multi Task Agents)
- <8 illustrations: Sequential generation
- Replace Placeholders: Replaces placeholders with generated SVG code
Default Behavior: Unless users explicitly request PNG format or image file references, must embed SVG code directly into the Markdown file.
- dynamic-svg: Embeds SVG code directly into Markdown file (using tags)
- static-svg: Embeds SVG code directly into Markdown file (using tags)
- png-export (only when explicitly requested by user):
- Saves SVG files to source article directory
- Converts to PNG using
- Inserts image reference into Markdown
Phase 4: Archiving
After each illustration generation is completed, extract SVG code from the article and archive it inside the Skill:
bash
# Archive directory structure
.claude/skills/svg-article-illustrator/archive/YYYYMMDD_HHMMSS_ArticleTitle/
├── 1_IllustrationName.svg # Extracted SVG file
├── 2_IllustrationName.svg
└── ...
Archiving Naming Rules:
- Format:
YYYYMMDD_HHMMSS_ArticleTitle
- Article title is taken from the first level 1 heading () of the Markdown, with special characters removed
- SVG file naming:
SequenceNumber_IllustrationName.svg
- Example:
20260209_163045_FutureParadigmOfAI_AgentLegalWorkflow/
1_AI_Agent_EvolutionOverview.svg
- ...
Archiving Execution Command:
bash
# Archive SVG (extract SVG code from article and save as independent files)
scripts/archive.sh @path/to/article.md
Shared Design Principles
All output modes follow the same core design principles, see details: references/core-principles.md
Core Points:
- Concept Focus: Each illustration expresses only 1-2 core concepts
- Minimalist Design: Light theme, large graphics, minimal text
- Canvas Size: 800x450 (16:9 aspect ratio)
- Boundary Control: All elements within effective area (60px safe margin)
Mode-Specific Specifications
Dynamic SVG Mode
Default mode, supports SMIL animation effects.
For details: references/dynamic-svg.md
Core Features:
- SMIL Animations: Floating, dashed line flow, arrow drawing
- Emoji Animations: Floating, pulse effects
- Logical Animation Priority: Arrows and dashed boxes must have animations
- SVG code directly embedded in Markdown
Static SVG Mode
Static SVG code directly embedded in Markdown.
For details: references/static-svg.md
Core Features:
- No animation effects
- SVG code directly embedded in Markdown
- Perfectly supported by WeChat Official Accounts
PNG Export Mode
Generates independent SVG and PNG files.
For details: references/png-export.md
Core Features:
- File Naming: ShortName-SequenceNumber.svg (≤15 characters)
- Save Location: Same directory as source article
- PNG Conversion: Uses
- Best cross-platform compatibility
PNG Conversion Script
Uses
for high-fidelity conversion:
bash
node scripts/svg2png.js input.svg [output.png] [dpi]
- Default DPI: 600
- Supports: emoji, Chinese, CSS
- Output Location: Always generated in the same directory as the source SVG file
Success Criteria
- Illustration density of 10-15, effectively enhancing visual appeal
- Each illustration accurately focuses on core concepts
- Consistent minimalist style throughout
- Displays correctly on WeChat Official Accounts
- Good cross-platform compatibility