| name | article-visuals |
| description | Use to make an article 图文并茂 — generate publish-ready figures (data charts, flow/structure diagrams) and a cover, SEO/GEO-friendly. 配图/图表/插图/封面/流程图/数据图/visuals/figures/diagrams/charts |
| version | 1.0.0 |
| license | Apache-2.0 |
| homepage | https://github.com/weitzu-com/ai-article-factory |
| when_to_use | Use at the figures stage (P6) of article production, or whenever a draft needs charts/diagrams/a cover. Renders Mermaid + matplotlib to PNG and prepares an AI-cover prompt; enforces image SEO/GEO rules. |
| argument-hint | <article-dir> |
| metadata | {"author":"weitzu-com","tags":["visuals","figures","charts","diagrams","mermaid","matplotlib","image-seo","cover"]} |
article-visuals (P6 — 图文并茂)
Make figures that serve three readers at once: humans (understanding), search engines (image SEO / rich results), and AI engines (multimodal citation). ≥3 figures per article: 1 cover + ≥2 content figures. This skill is self-contained — it uses the bundled scripts, no external pack needed.
Type decision tree (pick type → tool)
| To express | Type | Tool | Source file |
|---|
| flow / structure / relationship | diagram | Mermaid | assets/src/*.mmd |
| data / comparison / trend | chart | matplotlib (import figlib) | assets/src/*.py |
| concept / cover | illustration | AI image (prompt → human fills) | assets/src/cover-prompt.md → assets/img/cover.png |
| real UI / object | screenshot/photo | manual | — |
| tabular comparison | Markdown table (preferred — AI-extractable) | in prose | — |
Rule: if data fits a Markdown table, use a table; only draw when relationships/trends need it.
Workflow
- From the outline's figure intent, write figure sources into
assets/src/ and log assets/图清单.md (caption + alt + placement).
- Render:
bash <repo>/scripts/render-figures.sh <article-dir>
figlib.py provides the brand palette (scripts/palette.json) + registered CJK fonts (Chinese won't box) + save() / bar_compare() helpers. If mmdc is missing, .mmd is skipped gracefully.
- Embed with
 + a caption carrying the source [C#].
- Cover: a placeholder is used so it never blocks; generate the real one from
cover-prompt.md and drop it at assets/img/cover.png.
Image SEO + GEO checklist (each figure must pass)
- Descriptive English kebab-case filename with keywords (not
image1.png).
- Alt text describing the figure + naturally containing the keyword.
- Caption is a complete sentence with the data source.
- Compressed (<200KB chart / <400KB cover).
- Every data figure has an equivalent sentence/table nearby (AI reads text; the figure corroborates).
- Don't rely on color alone (color-blind safe); in-figure font ≥ body.
Full detail: ../../references/visuals-spec.md (the repo-root references/ folder).
