Smart-Illustrator skill技能深度拆解：从原理到实现
本文带你从"这个 Skill 是什么"开始，逐步深入到"它是怎么工作的"，最后触及"它为什么这么设计"。
第一步：先看看它长什么样
在深入之前，我们先快速浏览一下这个 Skill 的文件结构，建立一个感性认识：
smart-illustrator/
├── SKILL.md # 入口文件（告诉 Claude 这是个什么 Skill）
├── styles/ # 视觉风格定义
│ ├── style-light.md # 文章配图（默认风格）
│ ├── style-cover.md # 封面图风格
│ ├── style-bento.md # Bento Grid 功能展示
│ └── brand-colors.md # 品牌色板
├── scripts/ # 执行脚本
│ ├── generate-image.ts # 调用 API 生成图片
│ ├── batch-generate.ts # 批量生成
│ ├── cover-learner.ts # 封面学习系统
│ ├── mermaid-export.ts # Mermaid 导出
│ └── excalidraw-export.ts # Excalidraw 导出
└── prompts/ # 特定场景的 Prompt 模板
关键洞察：你会发现这个 Skill 的核心逻辑不在代码里，而在 Markdown 文件里。Claude 读取 SKILL.md 后，按照文档描述的流程自主执行。脚本只是处理 API 调用和文件导出这些"确定的事情"。
第二步：整体架构——它做了什么？
Smart Illustrator 的核心思想是：让 AI 不仅能写文字，还能"读懂"文章内容并自动生成配图。
它把"给文章配图"这件事拆成了 五层，一层接一层地执行：
现在你对整体有了概念。接下来我们逐层深入。
第三步：内容理解层——怎么知道哪里需要配图？
核心问题
整篇文章那么多字，AI 怎么知道哪里需要配图？
解决方案：6 种高价值信号
Smart Illustrator 定义了 6 种"应该配图"的信号，AI 按这个"检查清单"扫描文章：
| 信号 | 配图价值 | 例子 |
|---|---|---|
| 抽象概念首次出现 | 高 | “Agent 系统是什么？” |
| 流程/步骤描述 | 高 | “首先…然后…最后…” |
| 对比/选择论述 | 高 | “A vs B” |
| 数据/统计引用 | 中 | “提升了 85%” |
| 章节转折点 | 中 | 新的小标题 |
| 情感/故事高潮 | 中 | “很多人以为…” |
配图数量规则
| 文章长度 | 建议数量 |
|---|---|
| 短文（< 1000 字） | 1-2 张 |
| 中篇（1000-3000 字） | 2-4 张 |
| 长文（> 3000 字） | 4-6 张 |
简单记忆：平均每 500-800 字一张图。
真实的思考过程
拿一篇关于 AI Agent 的文章举例：
第四步：视觉决策层——决定怎么配图
找到位置后，还要回答 5 个问题：
问题 1：配图类型怎么选？
7 种配图类型：
| 类型 | 适用场景 | 构图 |
|---|---|---|
| concept 概念图 | 解释"这是什么" | 中心辐射、层级结构 |
| process 流程图 | 描述"怎么做" | 横向/纵向流程 |
| comparison 对比图 | 对比 A vs B | 左右/上下对比 |
| data 数据图 | 展示数字和趋势 | 数字 + 简化图表 |
| scene 场景图 | 讲故事、叙述 | 人物剪影 + 环境 |
| summary 总结图 | 要点列表 | 卡片网格 |
| metaphor 隐喻图 | 创意类比 | 创意视觉隐喻 |
判断规则：
❓ "什么是 Agent？" → concept（概念图）
❓ "Agent 是怎么工作的？" → process（流程图）
❓ "Agent 和聊天机器人有什么区别？" → comparison（对比图）
问题 2：视觉风格怎么选？
5 种内置风格：
| 风格 | 适用场景 | 核心特征 |
|---|---|---|
| light | 文章配图（默认） | 75% 扁平几何 + 25% 手绘点缀 |
| dark | 封面图、营销 | 纯黑背景 + 高对比 |
| cover | YouTube/公众号封面 | 零文字 + 金蓝双色光 |
| minimal | 技术文档、白皮书 | 单色 + 最大留白 |
| bento | 产品功能展示 | Apple 风格 Bento Grid |
关键洞察：每个 style-*.md 文件都是一套完整的"设计规范手册"，包含：
- System Prompt（给 AI 的指令）
- 构图规则
- 色彩规范
- 字体规范
- 硬约束（强制规则）
问题 3：配色方案怎么选？
4 套预设色板：
| 色板 | 适用场景 | 核心颜色 |
|---|---|---|
| Brand Signature | 封面图 | 纯黑 + 琥珀金 + 天空蓝 |
| High Contrast | Bento Grid | 深海蓝 + 暖橙 |
| Light Neutral | 正文配图 | 浅灰白 + 天空蓝 + 琥珀橙 |
| Minimal Slate | 技术文档 | 纯白 + 深石板 + 强调色（三选一） |
禁止清单：
- 蓝紫渐变（科技烂大街风格）
- 彩虹渐变、紫粉渐变
- 高饱和霓虹色
问题 4：渲染引擎怎么选？
三引擎优先级：
内容类型
│
├── 创意/隐喻/场景 ──→ 🎨 Gemini（优先级 1）
│ （视觉表现力最强，但成本高）
│
├── 概念/对比/简单流程 ──→ ✏️ Excalidraw（优先级 2）
│ （8 节点以下，手绘风格亲切）
│
└── 复杂结构化图表 ──→ 📊 Mermaid（优先级 3）
（8 节点以上，多层架构/多角色）
详细对比：
问题 5：宽高比怎么选？
| 风格 | 默认比例 | 为什么 |
|---|---|---|
| light（正文配图） | 16:9 或 3:2 | 横版适合嵌入文章 |
| cover（YouTube） | 16:9 | 平台标准 |
| cover（小红书） | 3:4 | 竖屏平台 |
| minimal（技术文档） | 3:4 | 竖版适合阅读 |
| bento（功能展示） | 16:9 | 横版适合展示多个格子 |
硬约束：文章配图必须 16:9 或 3:2，禁止 3:4 和 1:1（仅用于竖屏平台）。
第五步：风格约束层——怎么保证不跑偏？
什么是"硬约束"？
每个 style 文件都包含 强制规则，AI 必须遵守。这些规则是保证输出质量一致性的关键。
例子 1：手绘占比控制
手绘是"调味"，不是"主体"。
A) 数量上限：≤ 8 个
B) 面积上限：≤ 15% 画面
C) 功能约束：只能用于
1. 指向关系（箭头）
2. 高亮重点（圈选/下划线）
3. 补充提醒（短注释）
4. 小图标增强记忆点
❌ 禁止用手绘画大块容器、主流程框
例子 2：字体规范
核心要求：所有文字都必须采用「超细线体」渲染
像"发丝"一样细
严禁粗体
哪怕是标题，也只能通过字号放大来区分
例子 3：封面图零文字规则
ABSOLUTE PROHIBITIONS:
1. ZERO TEXT — no titles, keywords, labels, numbers
2. NO LITERAL DEPICTIONS — "AI" ≠ robot
3. NO CLICHÉ TECH SYMBOLS — robotic arms, brain circuits, rockets
4. NO AI-AESTHETIC — blue-purple neon gradients
设计哲学
灵活判断的事 → 用文字描述，让 AI 理解
硬性约束的事 → 用"硬约束"写清楚，让 AI 必须遵守
第六步：多引擎编排——用什么工具画？
三引擎架构
┌─────────────────────────────────────────────────────────────┐
│ 三引擎系统 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 🎨 Gemini（优先级 1） │
│ ├── 创意视觉（隐喻图、场景图、信息图） │
│ ├── 输出：PNG (2K) │
│ └── 成本：~¥1/张 │
│ │
│ ✏️ Excalidraw（优先级 2） │
│ ├── 手绘概念图、对比图、简单流程（≤ 8 节点） │
│ ├── 输出：PNG（通过 Playwright 自动化导出） │
│ └── 成本：免费（需要 Playwright + Firefox） │
│ │
│ 📊 Mermaid（优先级 3） │
│ ├── 复杂结构化图表（流程图、时序图、架构图） │
│ ├── 输出：PNG（通过 mermaid-cli 导出） │
│ └── 成本：免费 │
│ │
└─────────────────────────────────────────────────────────────┘
Gemini 引擎的设计
Gemini 支持 双 API 后端：
- OpenRouter：优先，有消费限制，更安全
- Gemini API：备选，支持多模态参考图
自动切换逻辑：
- 如果有参考图（
--ref），自动切换到 Gemini API（OpenRouter 不支持多模态输入）
Excalidraw 引擎的设计
Excalidraw 没有稳定的 CLI 导出工具，所以这个 Skill 用 Playwright 浏览器自动化 来导出：
1. 打开 excalidraw.com
2. 加载 .excalidraw 文件
3. 打开 Export 对话框
4. 配置选项（Scale / Dark mode / Background）
5. 触发下载并保存
为什么不用命令行工具？ Excalidraw 官网 UI 频繁变化，直接用 Playwright 自动化更可靠。
Mermaid 引擎的设计
Mermaid 用 mermaid-cli 导出，支持语义色板：
| 语义 | 填充色 | 用于 |
|---|---|---|
input |
浅绿 | 输入、起点 |
process |
浅紫 | 处理、核心逻辑 |
decision |
浅红 | 决策点 |
output |
浅青 | 输出 |
第七步：学习闭环——怎么让它越用越聪明？
什么是学习闭环？
学习闭环是一个 可选的附加功能，不是核心流程的一部分。不用它，Skill 也能正常工作。
4 步循环
┌─────────────────────────────────────────────────────────────┐
│ 学习闭环（4 步循环） │
├─────────────────────────────────────────────────────────────┤
│ │
│ Step 1: 收集高表现封面 │
│ └── 命令：--learn-cover + --learn-note │
│ │
│ Step 2: AI 分析封面（Gemini Vision） │
│ └── 分析 6 个维度：构图/配色/文字/情绪/焦点/模式 │
│ │
│ Step 3: 保存学习记录 │
│ └── 位置：~/.smart-illustrator/cover-learnings.md │
│ │
│ Step 4: 生成新封面时自动应用 │
│ └── 自动附加："从历史高表现封面学到的模式" │
│ │
└─────────────────────────────────────────────────────────────┘
学习系统 vs --ref 参数的区别
| 特性 | --ref（参考图） |
学习系统 |
|---|---|---|
| 目的 | 让图片 视觉风格相似 | 从成功封面 提取设计原则 |
| 机制 | 直接把图片传给 AI 模仿 | 分析 → 提取 → 持久化 → 应用 |
| 粒度 | 像素级/视觉模仿 | 原则级/设计层提取 |
| 人类类比 | “照着这张画一张” | “告诉我为什么成功，下次我自己画时用上” |
可以一起用：学习系统提供设计原则，--ref 提供视觉风格，两者叠加效果更好。
第八步：完整执行流程
Article 模式（文章配图）
Step 1: 文章分析
├── 读取文章内容
├── 识别 3-5 个配图位置（6 种信号）
└── 为每个位置决定引擎
Step 2: 生成图片
├── Gemini: 读取 style 文件 → 生成 prompt → 调用 API
├── Excalidraw: 生成 .excalidraw JSON → Playwright 导出
└── Mermaid: 生成 .mmd 代码 → mmdc 导出
Step 3: 组装输出
└── 生成 {article}-image.md，包含 YAML frontmatter + 配图插入
Cover 模式（封面图）
推荐工作流：
- 使用 AI 团队协作（author + codex-reviewer + gemini-reviewer）
- Author 设计 3 个隐喻方案（中文推导 + 英文 prompt）
- Codex reviewer 评估：隐喻精度、prompt 质量
- Gemini reviewer 评估：生成可行性、主体大小控制
- Team lead 产出定稿英文 prompt
- 用户复制到 Gemini Web 手动生成
封面图隐喻方法论：
三步推导法：
- 提取核心张力 — 主题的矛盾、冲突、悬念是什么？
- 寻找日常物体隐喻 — 找到物体结构与概念的同构关系
- 验证隐喻精度 — 能猜方向但不能立刻全懂 = 好隐喻
隐喻层次（从低到高）：
- 直译 → 无聊俗套
- 象征 → 可预测
- 后果 → 有故事感
- 缺席 → 最高级（悬念和张力）
第九步：设计哲学总结
Skill 架构的核心理念
灵活判断的事 → 用 Markdown 描述，让 AI 理解
硬性约束的事 → 用"硬约束"写清楚，让 AI 必须遵守
确定性操作 → 用代码/脚本执行（API 调用、文件导出）
三层 Prompt 架构
| 层级 | 文件 | 作用 |
|---|---|---|
| 风格文件 | styles/style-*.md |
核心设计规则（构图、配色、禁忌） |
| Prompt 模板 | prompts/*.md |
生成策略（风格提示、分析重点） |
| Style-lock 参考图 | --ref 参数 |
视觉风格精确控制 |
为什么用 Markdown 存学习记录？
- 人类可读：可以直接打开看、手动编辑
- AI 可读：AI 也能轻松解析
- 版本控制友好：可以用 Git 追踪变化
第十步：文件位置速查
| 功能 | 核心文件 |
|---|---|
| Skill 入口 | SKILL.md |
| 图片生成 | scripts/generate-image.ts |
| 批量生成 | scripts/batch-generate.ts |
| Mermaid 导出 | scripts/mermaid-export.ts |
| Excalidraw 导出 | scripts/excalidraw-export.ts |
| 封面学习 | scripts/cover-learner.ts |
| 正文配图风格 | styles/style-light.md |
| 封面图风格 | styles/style-cover.md |
| Bento Grid 风格 | styles/style-bento.md |
| 品牌色板 | styles/brand-colors.md |
总结
Smart Illustrator 不是一个"图片生成工具"，而是一个 "内容理解 + 视觉决策 + 多引擎编排"的系统：
- 内容理解层：分析文章结构，识别哪里需要配图
- 视觉决策层：决定用什么类型的图、什么引擎渲染
- 风格约束层：通过硬约束确保输出质量
- 多引擎编排：Gemini/Excalidraw/Mermaid 各司其职
- 学习闭环：封面学习系统让质量持续提升
最值得学习的：这个 Skill 把"需要灵活判断"和"需要精确执行"的事情清晰地分开了——前者用 Markdown 描述让 AI 理解，后者用代码执行保证确定性。这种设计思路可以应用到任何复杂的 AI 系统构建中。
发布于：2026-05-23
es/style-bento.md| | 品牌色板 |styles/brand-colors.md` |
总结
Smart Illustrator 不是一个"图片生成工具"，而是一个 "内容理解 + 视觉决策 + 多引擎编排"的系统：
- 内容理解层：分析文章结构，识别哪里需要配图
- 视觉决策层：决定用什么类型的图、什么引擎渲染
- 风格约束层：通过硬约束确保输出质量
- 多引擎编排：Gemini/Excalidraw/Mermaid 各司其职
- 学习闭环：封面学习系统让质量持续提升
最值得学习的：这个 Skill 把"需要灵活判断"和"需要精确执行"的事情清晰地分开了——前者用 Markdown 描述让 AI 理解，后者用代码执行保证确定性。这种设计思路可以应用到任何复杂的 AI 系统构建中。
发布于：2026-05-23
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
10
0- 0
已为社区贡献2条内容
所有评论(0)