SVG Article Illustrator
AI 驱动的文章配图生成工具，使用 SVG 技术为公众号文章生成高质量配图。
重要说明：默认模式（dynamic-svg 和 static-svg）将 SVG 代码直接嵌入到 Markdown 文件中，而不是使用
的图片引用语法。这确保了动画效果和最佳兼容性。
快速开始
/svg-article-illustrator @path/to/article.md
依赖说明
- dynamic-svg / static-svg 模式：无需安装任何依赖
- png-export 模式：需要安装 Node.js 和 puppeteer，详见 references/png-export.md
选择输出模式
根据用户需求和发布平台选择合适的输出模式：
| 用户场景 | 使用模式 | 加载参考文件 |
|---|---|---|
| 默认/未指定 | 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 模式。
并行生成模式
当配图数量 ≥ 8 张时，自动启用多 Agent 并行生成以提升效率。
详见：references/multi-agent-generation.md
核心思路：
- 主 Agent 分析文章内容并规划配图
- 插入占位符
[[ILLUSTRATION:ID:简短描述]]到文章 - 解析占位符，按批次分发（每批 3-5 张）
- 并行启动多个 Task Agent 生成
- 主 Agent 按 ID 顺序收集并替换占位符
启用条件：
- 规划的配图数量 ≥ 8 张
核心工作流程
第一阶段：内容分析
-
读取源文章 Markdown 文件
-
识别核心概念和关键信息点
-
规划配图位置：
- 每个二级标题（##）后至少 1 张图
- 每 2-3 个重要段落 1 张图
- 重要概念转折点额外配图
- 在规划位置插入占位符
[[ILLUSTRATION:ID:简短描述]]
-
评估并选择生成模式：
- ≥ 8 张 → 并行生成（多 Task Agent）
- < 8 张 → 顺序生成
第二阶段：设计 SVG
- 根据选择的输出模式应用相应规范
- dynamic-svg：添加 SMIL 动画效果
- static-svg：生成静态 SVG 代码
- png-export：生成 SVG 文件
- 遵循共享设计原则：references/core-principles.md
第三阶段：生成与输出
- 解析占位符：提取所有
[[ILLUSTRATION:ID:描述]] - 并行/顺序生成：
- ≥ 8 张：并行生成（多 Task Agent）
- < 8 张：顺序生成
- 替换占位符：将生成的 SVG 代码替换占位符
默认行为：除非用户明确要求 PNG 格式或图片文件引用，否则必须直接将 SVG 代码嵌入到 Markdown 文件中。
- dynamic-svg：将 SVG 代码直接嵌入 Markdown 文件（使用
<svg>标签） - static-svg：将 SVG 代码直接嵌入 Markdown 文件（使用
<svg>标签） - png-export（仅当用户明确要求时）：
- 保存 SVG 文件到源文章目录
- 使用
scripts/svg2png.js转换为 PNG - 在 Markdown 中插入图片引用
第四阶段：归档
每次完成配图生成后，将文章中的 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_演进概览.svg2_提示词设计.svg- ...
共享设计原则
所有输出模式都遵循相同的核心设计原则，详见：references/core-principles.md
核心要点：
- 概念聚焦：每张图只表达 1-2 个核心概念
- 极简设计：浅色主题，大图形，少文字
- 画布尺寸：800x450（16:9 比例）
- 边界控制：所有元素在有效区域内（60px 安全边距）
模式特定规范
Dynamic SVG 模式
默认模式，支持 SMIL 动画效果。
核心特性：
- SMIL 动画：浮动、虚线流动、箭头绘制
- Emoji 动画：浮动、脉冲效果
- 逻辑性动画优先：箭头和虚线框必须有动画
- SVG 代码直接嵌入 Markdown
Static SVG 模式
静态 SVG 代码直接嵌入 Markdown。
核心特性：
- 无动画效果
- SVG 代码直接嵌入 Markdown
- 公众号完美支持
PNG Export 模式
生成独立的 SVG 和 PNG 文件。
核心特性：
- 文件命名：短名-序号.svg（≤15 字符）
- 保存位置：与源文章同目录
- PNG 转换：使用
scripts/svg2png.js - 跨平台兼容性最佳
PNG 转换脚本
使用 scripts/svg2png.js 进行高保真转换：
bashnode scripts/svg2png.js input.svg [output.png] [dpi]
- 默认 DPI：600
- 支持：emoji、中文、CSS
- 输出位置：总是生成到 SVG 源文件所在目录
成功标准
- 配图密度 10-15 张，有效增强视觉吸引力
- 每张配图概念聚焦准确
- 极简风格贯穿始终
- 公众号显示正常
- 跨平台兼容性良好
