为自然搜索排名提供站点审计、内容撰写与竞品分析。
设计与多媒体
Article Illustrator
试用When the user wants to add illustrations to an article or blog post. Triggers on: "illustrate article", "add images to article", "generate illustrations", "article images", or requests to visually enhance written content. Analyzes article structure, identifies positions for visual aids, and generates illustrations using a Type x Style two-dimension approach.
它能做什么
Analyze articles, identify optimal illustration positions, and generate images using a Type x Style consistency system.
技能文档
Article Illustrator
Analyze articles, identify optimal illustration positions, and generate images using a Type x Style consistency system.
Installation
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install article-illustrator
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: --type infographic --style blueprint
Type Selection Guide
| Type | Best For |
|---|---|
infographic | Data, metrics, technical articles |
scene | 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 |
|---|---|
notion (Default) | Knowledge sharing, SaaS, productivity |
elegant | 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
- 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
- Check existing images — if images exist, ask: supplement / overwrite / regenerate
- Confirm article update method (file input only) — update original or create
{name}-illustrated.mdcopy - 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
- Create prompts following references/prompt-construction.md
- Save prompts to
prompts/illustration-{slug}.md - Generate sequentially, reporting progress after each
- On failure: retry once, then log and continue
Step 6: Finalize
Insert image references after corresponding paragraphs:

Output a summary with article path, settings, image count, and positions.
Output Structure
illustrations/{topic-slug}/
├── source-{slug}.{ext}
├── outline.md
├── prompts/
│ └── illustration-{slug}.md
└── NN-{type}-{slug}.png
Prompt Construction Principles
Good illustration prompts must include:
- 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 | ++ | + | + | + | ++ | ++ | ++ | + |
++ highly recommended | + compatible | - not recommended
Usage Examples
# Auto-select type and style
illustrate path/to/article.md
# Specify type
illustrate path/to/article.md --type infographic
# Specify type and style
illustrate path/to/article.md --type flowchart --style notion
# Specify density
illustrate path/to/article.md --density rich
Extension Support
Custom configurations via EXTEND.md files:
- Project level:
.article-illustrator/EXTEND.md - User level:
$HOME/.config/article-illustrator/EXTEND.md
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
| File | Content |
|---|---|
| references/usage.md | Command syntax, options, input modes |
| references/styles.md | Style gallery, compatibility matrix, auto-selection |
| references/prompt-construction.md | Prompt templates for each illustration type |
references/styles/.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 |
相关技能
以 AI 机器人身份加入视频会议,提供语音、虚拟形象与屏幕共享四种模式。
用 Python 库和命令行工具完成 PDF 的读取、合并、拆分、生成与内容抽取。
用目标文件里已发布的设计系统组件和变量,从代码或描述搭出整页 Figma 屏幕。
从文字、参考图或品牌线索生成 Codex 兼容的 9 状态动画宠物图集,附带 QA 联系表与 pet.json 打包。
通过 Figma Code Connect 把设计组件映射到代码文件,按名称和 props 比对后批量建关联。
wpank 的更多技能
浏览全部技能Systematic code review patterns covering security, performance, maintainability, correctness, and testing — with severity levels, structured feedback guidance, review process, and anti-patterns to avoid. Use when reviewing PRs, establishing review standards, or improving review quality.
Pragmatic coding standards for writing clean, maintainable code — naming, functions, structure, anti-patterns, and pre-edit safety checks. Use when writing new code, refactoring existing code, reviewing code quality, or establishing coding standards.
Build reliable, fast E2E test suites with Playwright and Cypress. Critical user journey coverage, flaky test elimination, CI/CD integration.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
Provides backend architecture patterns (Clean Architecture, Hexagonal, DDD) for building maintainable, testable, and scalable systems with clear layering and...