svg-article-illustrator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SVG Article Illustrator

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

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

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
![](path.svg)
. This ensures animation effects and optimal compatibility.

快速开始

Quick Start

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

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

依赖说明

Dependency Notes

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

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

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

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

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

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

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

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

核心思路：

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

启用条件：

规划的配图数量 ≥ 8 张

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]]
```
into the article
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

读取源文章 Markdown 文件
识别核心概念和关键信息点
规划配图位置：
- 每个二级标题（##）后至少 1 张图
- 每 2-3 个重要段落 1 张图
- 重要概念转折点额外配图
- 在规划位置插入占位符
```
[[ILLUSTRATION:ID:简短描述]]
```
评估并选择生成模式：
- ≥ 8 张 → 并行生成（多 Task Agent）
- < 8 张 → 顺序生成

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]]
```
  at planned positions
Evaluates and selects generation mode:
- ≥8 illustrations → Parallel generation (multi Task Agents)
- <8 illustrations → Sequential generation

第二阶段：设计 SVG

Phase 2: SVG Design

根据选择的输出模式应用相应规范
- dynamic-svg：添加 SMIL 动画效果
- static-svg：生成静态 SVG 代码
- png-export：生成 SVG 文件
遵循共享设计原则：references/core-principles.md

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

解析占位符：提取所有
```
[[ILLUSTRATION:ID:描述]]
```
并行/顺序生成：
- ≥ 8 张：并行生成（多 Task Agent）
- < 8 张：顺序生成
替换占位符：将生成的 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)
```

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
```
<svg>
```
tags)
static-svg: Embeds SVG code directly into Markdown file (using
```
<svg>
```
tags)
png-export (only when explicitly requested by user):
1. Saves SVG files to source article directory
2. Converts to PNG using
```
scripts/svg2png.js
```
3. Inserts image reference
```
![](path.png)
```
  into Markdown

第四阶段：归档

Phase 4: Archiving

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

bash

undefined

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

bash

undefined

归档目录结构

Archive directory structure

.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`
  - ...

**归档执行命令**：

```bash

.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 (`# Title`) of the Markdown, with special characters removed
- SVG file naming: `SequenceNumber_IllustrationName.svg`
- Example: `20260209_163045_FutureParadigmOfAI_AgentLegalWorkflow/`
  - `1_AI_Agent_EvolutionOverview.svg`
  - `2_PromptEngineering.svg`
  - ...

**Archiving Execution Command**:

```bash

归档 SVG（提取文章中的 SVG 代码并保存为独立文件）

Archive SVG (extract SVG code from article and save as independent files)

scripts/archive.sh @path/to/article.md

---

scripts/archive.sh @path/to/article.md

---

共享设计原则

Shared Design Principles

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

核心要点：

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

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 模式

Dynamic SVG Mode

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

详见：references/dynamic-svg.md

核心特性：

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

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 模式

Static SVG Mode

静态 SVG 代码直接嵌入 Markdown。

详见：references/static-svg.md

核心特性：

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

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 模式

PNG Export Mode

生成独立的 SVG 和 PNG 文件。

详见：references/png-export.md

核心特性：

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

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
```
scripts/svg2png.js
```
Best cross-platform compatibility

PNG 转换脚本

PNG Conversion Script

使用

scripts/svg2png.js

进行高保真转换：

bash

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

默认 DPI：600
支持：emoji、中文、CSS
输出位置：总是生成到 SVG 源文件所在目录

Uses

scripts/svg2png.js

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

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

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