Article Illustrator
Analyze articles, identify optimal illustration positions, and generate images using a Type x Style consistency system.
Installation
OpenClaw / Moltbot / Clawbot
CODEBLOCK0
NEVER Do
- - Illustrate metaphors literally (e.g., if article says "chainsaw cutting watermelon," visualize the underlying concept instead)
- Generate generic decorative images that don't connect to content
- Skip the settings confirmation step (Step 3)
- Begin generating before confirming type, density, and style with the user
- Create illustrations without justifying each position by content needs
Two Dimensions
| Dimension | Controls | Examples |
|---|
| Type | Information structure, layout | infographic, scene, flowchart, comparison, framework, timeline |
| Style |
Visual aesthetics, mood | notion, warm, minimal, blueprint, watercolor, elegant, editorial, scientific |
Types and styles combine freely: INLINECODE0
Type Selection Guide
| Type | Best For |
|---|
| INLINECODE1 | Data, metrics, technical articles |
| INLINECODE2 |
Narratives, personal stories, emotional content |
|
flowchart | Tutorials, workflows, processes |
|
comparison | Side-by-side, before/after, options |
|
framework | Methodologies, models, architecture |
|
timeline | History, progress, evolution |
Style Selection Guide
| Style | Best For |
|---|
| INLINECODE7 (Default) | Knowledge sharing, SaaS, productivity |
| INLINECODE8 |
Business, thought leadership |
|
warm | Personal growth, lifestyle, education |
|
minimal | Philosophy, core concepts |
|
blueprint | Architecture, system design |
|
watercolor | Lifestyle, travel, creative |
|
editorial | Tech explainers, journalism |
|
scientific | Academic, technical research |
Full style specs and compatibility matrix: references/styles.md
Auto Selection by Content
| Content Signals | Type | Style |
|---|
| API, metrics, data, numbers | infographic | blueprint, notion |
| Story, emotion, journey |
scene | warm, watercolor |
| How-to, steps, workflow | flowchart | notion, minimal |
| vs, pros/cons, before/after | comparison | notion, elegant |
| Framework, model, architecture | framework | blueprint, notion |
| History, timeline, progress | timeline | elegant, warm |
Workflow
Step 1: Pre-check
- 1. Determine input type — file path or pasted content
- Determine output directory — check preferences or ask user:
-
{article-dir}/ — same directory
-
{article-dir}/illustrations/ — illustrations subdirectory (recommended)
-
illustrations/{topic-slug}/ — independent directory
- 3. Check existing images — if images exist, ask: supplement / overwrite / regenerate
- Confirm article update method (file input only) — update original or create
{name}-illustrated.md copy - Load preferences — check for EXTEND.md in project or user home
Step 2: Analyze Content
| Analysis | Description |
|---|
| Content type | Technical / Tutorial / Methodology / Narrative |
| Core arguments |
2-5 main points to visualize |
| Visual opportunities | Positions where illustrations add value |
| Recommended type | Based on content signals |
| Recommended density | Based on length and complexity |
Illustrate: core arguments (required), abstract concepts, data comparisons, processes/workflows.
Skip: literal metaphors, decorative scenes, generic illustrations.
Step 3: Confirm Settings (Required)
Use a structured question with 3-4 questions in ONE call:
- - Q1 — Type: recommended option + alternatives
- Q2 — Density: minimal (1-2), balanced (3-5, recommended), rich (6+)
- Q3 — Style: recommended based on type/content compatibility matrix
- Q4 — Language (only if source language differs from user language)
Step 4: Generate Outline
Save as outline.md with YAML frontmatter (type, density, style, count) and per-illustration details: position, purpose, visual content, filename.
Step 5: Generate Images
- 1. Create prompts following references/prompt-construction.md
- Save prompts to INLINECODE20
- Generate sequentially, reporting progress after each
- On failure: retry once, then log and continue
Step 6: Finalize
Insert image references after corresponding paragraphs:
CODEBLOCK1
Output a summary with article path, settings, image count, and positions.
Output Structure
CODEBLOCK2
Prompt Construction Principles
Good illustration prompts must include:
- 1. Layout structure first — describe composition, zones, flow direction
- Specific data/labels — use actual numbers, terms from the article
- Visual relationships — how elements connect to each other
- Semantic colors — meaning-based choices (red=warning, green=efficient)
- Style characteristics — line treatment, texture, mood
- Aspect ratio — end with ratio and complexity level
Avoid: vague descriptions, literal metaphor illustrations, missing labels, generic decorative elements.
Full templates by type: references/prompt-construction.md
Type x Style Compatibility
| notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific |
|---|
| infographic | ++ | + | ++ | ++ | + | ++ | ++ | ++ |
| scene |
+ | ++ | + | - | ++ | + | + | - |
| flowchart | ++ | + | + | ++ | - | + | ++ | + |
| comparison | ++ | + | ++ | + | + | ++ | ++ | + |
| framework | ++ | + | ++ | ++ | - | ++ | + | ++ |
| timeline | ++ | + | + | + | ++ | ++ | ++ | + |
INLINECODE21 highly recommended | + compatible | - not recommended
Usage Examples
CODEBLOCK3
Extension Support
Custom configurations via EXTEND.md files:
- - Project level: INLINECODE24
- User level: INLINECODE25
Supports: watermark, preferred type/style, custom styles, language, output directory.
Modification
| Action | Steps |
|---|
| Edit | Update prompt, regenerate, update reference |
| Add |
Identify position, create prompt, generate, update outline, insert |
|
Delete | Delete files, remove reference, update outline |
References
Style gallery, compatibility matrix, auto-selection |
|
references/prompt-construction.md | Prompt templates for each illustration type |
|
references/styles/<style>.md | Full specifications for each visual style |
|
references/config/preferences-schema.md | EXTEND.md configuration schema |
|
references/config/first-time-setup.md | First-time preference setup flow |
|
prompts/system.md | System prompt reference |
文章插画师
分析文章，识别最佳插画位置，并使用类型×风格一致性系统生成图像。
安装
OpenClaw / Moltbot / Clawbot
bash
npx clawhub@latest install article-illustrator
绝对禁止
- - 对隐喻进行字面化插画（例如，如果文章提到电锯切西瓜，应可视化其背后的概念）
- 生成与内容无关的通用装饰性图像
- 跳过设置确认步骤（步骤3）
- 在未与用户确认类型、密度和风格之前开始生成
- 创建插画时未根据内容需求证明每个位置的合理性
两个维度
| 维度 | 控制 | 示例 |
|---|
| 类型 | 信息结构、布局 | 信息图、场景、流程图、对比、框架、时间线 |
| 风格 |
视觉美学、氛围 | Notion、温暖、极简、蓝图、水彩、优雅、编辑、科学 |
类型和风格可自由组合：--type infographic --style blueprint
类型选择指南
| 类型 | 最佳适用场景 |
|---|
| infographic | 数据、指标、技术文章 |
| scene |
叙事、个人故事、情感内容 |
| flowchart | 教程、工作流、流程 |
| comparison | 并排对比、前后对比、选项比较 |
| framework | 方法论、模型、架构 |
| timeline | 历史、进展、演变 |
风格选择指南
| 风格 | 最佳适用场景 |
|---|
| notion（默认） | 知识分享、SaaS、生产力 |
| elegant |
商业、思想领导力 |
| warm | 个人成长、生活方式、教育 |
| minimal | 哲学、核心概念 |
| blueprint | 架构、系统设计 |
| watercolor | 生活方式、旅行、创意 |
| editorial | 技术解释、新闻 |
| scientific | 学术、技术研究 |
完整风格规格和兼容性矩阵：references/styles.md
根据内容自动选择
| 内容信号 | 类型 | 风格 |
|---|
| API、指标、数据、数字 | infographic | blueprint、notion |
| 故事、情感、旅程 |
scene | warm、watercolor |
| 操作指南、步骤、工作流 | flowchart | notion、minimal |
| vs、优缺点、前后对比 | comparison | notion、elegant |
| 框架、模型、架构 | framework | blueprint、notion |
| 历史、时间线、进展 | timeline | elegant、warm |
工作流程
步骤1：预检查
- 1. 确定输入类型 — 文件路径或粘贴内容
- 确定输出目录 — 检查偏好或询问用户：
- {article-dir}/ — 同一目录
- {article-dir}/illustrations/ — 插画子目录（推荐）
- illustrations/{topic-slug}/ — 独立目录
- 3. 检查现有图像 — 如果存在图像，询问：补充 / 覆盖 / 重新生成
- 确认文章更新方式（仅文件输入）— 更新原文件或创建 {name}-illustrated.md 副本
- 加载偏好 — 检查项目或用户主目录中的 EXTEND.md
步骤2：分析内容
| 分析项 | 描述 |
|---|
| 内容类型 | 技术 / 教程 / 方法论 / 叙事 |
| 核心论点 |
2-5个需要可视化的主要观点 |
| 可视化机会 | 插画能增加价值的位置 |
| 推荐类型 | 基于内容信号 |
| 推荐密度 | 基于长度和复杂度 |
需要插画： 核心论点（必需）、抽象概念、数据对比、流程/工作流。
跳过： 字面化隐喻、装饰性场景、通用插画。
步骤3：确认设置（必需）
在一次对话中使用结构化问题提出3-4个问题：
- - Q1 — 类型：推荐选项 + 备选方案
- Q2 — 密度：最少（1-2）、均衡（3-5，推荐）、丰富（6+）
- Q3 — 风格：基于类型/内容兼容性矩阵推荐
- Q4 — 语言（仅当源语言与用户语言不同时）
步骤4：生成大纲
保存为 outline.md，包含YAML前置元数据（类型、密度、风格、数量）以及每个插画的详细信息：位置、目的、视觉内容、文件名。
步骤5：生成图像
- 1. 按照 references/prompt-construction.md 创建提示词
- 将提示词保存到 prompts/illustration-{slug}.md
- 按顺序生成，每次生成后报告进度
- 失败时：重试一次，然后记录并继续
步骤6：最终处理
在相应段落之后插入图像引用：
markdown
输出摘要，包含文章路径、设置、图像数量和位置。
输出结构
illustrations/{topic-slug}/
├── source-{slug}.{ext}
├── outline.md
├── prompts/
│ └── illustration-{slug}.md
└── NN-{type}-{slug}.png
提示词构建原则
好的插画提示词必须包含：
- 1. 先描述布局结构 — 描述构图、区域、流向
- 具体数据/标签 — 使用文章中的实际数字和术语
- 视觉关系 — 元素之间的连接方式
- 语义颜色 — 基于含义的颜色选择（红色=警告，绿色=高效）
- 风格特征 — 线条处理、质感、氛围
- 宽高比 — 以宽高比和复杂度级别结尾
避免：模糊描述、字面化隐喻插画、缺少标签、通用装饰元素。
按类型的完整模板：references/prompt-construction.md
类型×风格兼容性
| notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific |
|---|
| infographic | ++ | + | ++ | ++ | + | ++ | ++ | ++ |
| scene |
+ | ++ | + | - | ++ | + | + | - |
| flowchart | ++ | + | + | ++ | - | + | ++ | + |
| comparison | ++ | + | ++ | + | + | ++ | ++ | + |
| framework | ++ | + | ++ | ++ | - | ++ | + | ++ |
| timeline | ++ | + | + | + | ++ | ++ | ++ | + |
++ 强烈推荐 | + 兼容 | - 不推荐
使用示例
bash
自动选择类型和风格
illustrate path/to/article.md
指定类型
illustrate path/to/article.md --type infographic
指定类型和风格
illustrate path/to/article.md --type flowchart --style notion
指定密度
illustrate path/to/article.md --density rich
扩展支持
通过 EXTEND.md 文件进行自定义配置：
- - 项目级别：.article-illustrator/EXTEND.md
- 用户级别：$HOME/.config/article-illustrator/EXTEND.md
支持：水印、首选类型/风格、自定义风格、语言、输出目录。
修改
确定位置、创建提示词、生成、更新大纲、插入 |
|
删除 | 删除文件、移除引用、更新大纲 |
参考文档
风格画廊、兼容性矩阵、自动选择 |
|
references/prompt-construction.md | 每种插画类型的提示词模板 |
| references/styles/
