# Article Illustrator

> 为文章生成可截图的扁平化解释配图 HTML 页面。用于用户提供文章、草稿、段落或文件路径，并要求配图、文章插图、图解、公众号配图、生成 illustration 页面、帮我配图。输出是本地 HTML 文件，不直接生成 PNG/JPG，不用于 Logo、图标、海报、封面或非文章内容。

- Skill: `gainubi/article-illustrator` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add gainubi/article-illustrator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gainubi/article-illustrator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: gainubi (https://skillmd.com/u/gainubi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gainubi/article-illustrator

---


# Article Illustrator

将文章内容转化为 Anthropic 风格的扁平化解释配图网页，方便用户打开后截图用于公众号、博客或长文。

## 核心原则

配图不是装饰，是解释工具。

- 配图要补充文章中难以一眼看清的结构、对比、流程、层级和因果
- 优先横图，适合嵌入文章正文，竖图只在单卡聚焦或内容很窄时使用
- 默认使用中文，除非文章本身是英文且面向英文读者
- 能用图形表达的内容不要写成长句，截图出来应该像图，不像文档
- 每张图只表达一个核心判断，不把整篇文章塞进一张图
- 文字只保留标题、标签、关键数字、按钮名和点题句
- 标签、说明、点题句不加引号
- 不使用破折号

## 输入

- 用户提供的文章文本，或可读取的文件路径
- 可选的配图数量、尺寸、使用场景和特殊风格要求

如果用户没有给文章内容，先请用户补充。文章少于 100 字时，提醒内容可能太短，但如果用户坚持，可以做单张概念图。

## 工作流

### 1. 阅读文章

识别这些信息：

- 文章类型，比如产品介绍、技术文档、博客、营销页、复盘、评论
- 核心观点数量
- 适合图片化的内容，比如数字、流程、对比、架构、层级、因果
- 不需要配图的内容，比如普通叙述、例子、情绪铺垫

### 2. 选择配图位置

逐段判断哪里真的需要图解释。

优先选择这些位置：

- 文字讲了一个关系，但读者需要脑补结构
- 文字讲了一个流程，但步骤之间容易混
- 文字做了对比，但差异不够直观
- 文字包含多个层级、角色或模块
- 文字包含关键数字，图能放大记忆点

不建议配图的位置：

- 只是陈述事实
- 只是讲故事或举例
- 只是表达态度
- 图只能重复原文，不能提供额外理解

### 3. 是否先给建议

默认先给配图建议，再等用户确认后生成 HTML。

如果用户明确说直接做、直接生成、帮我产出、无需确认，跳过确认，直接生成。

建议格式：

```text
配图建议

【图 1】位置：第 X 到 Y 段
解释什么：核心关系或流程
适合图型：左右对比 / 横向流程 / 网格卡片 / 上下分层 / 单卡聚焦
建议比例：横图 / 竖图

【总结】
共 X 张图
优先做图 1，因为它解释文章最关键的概念
```

### 4. 生成 HTML

生成一个自包含 HTML 文件，保存到：

```text
/Users/gai/Pictures/article-illustration-[timestamp].html
```

要求：

- CSS 内联
- 不依赖外部 JS、图片或字体 CDN
- 字体使用本地 fallback
- 多张图放在同一个页面中，每张图是独立截图区块

### 5. 验收

生成后检查文件：

- HTML 文件已创建
- 每张图都有编号和标题
- 内容没有使用引号包裹普通标签
- 没有使用破折号
- 没有外部资源依赖
- 颜色没有超出规定色板
- 单张图文字不过量，截图区域不是长文档

## 视觉系统

### 画布

- 背景：`#FBF8EF`
- 四周留白：40px
- 整体扁平，无阴影、渐变、3D、毛玻璃、发光

### 色板

只使用以下颜色：

- 主文字和深色块：`#2C2C2A`
- 次要文字：`#888780`
- 抽象横线：`#B4B2A9`，3px 圆头，opacity 0.6
- 边框：`#D3D1C7`，0.5px
- 米色填充：`#E8DCC0`
- 浅米填充：`#F1EFE8`
- 苔绿点缀：`#7A8B5C`，只用于自然、有机、健康、增长等含义
- 暖橙高亮：`#D85A30`，每张图最多出现一次

### 字体

- 衬线标题：`Tiempos Text, Source Serif Pro, Charter, Georgia, serif`，weight 700
- 无衬线正文：`Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif`
- 等宽：`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`
- 小标签全大写时，`letter-spacing: 2px`

### 内容抽象化

- 段落和描述性文字，优先抽象成灰色横线
- 横线长度交替使用 100%、85%、70%
- 保留真实文字时，必须短、准、能截图
- 点题句可选，不超过 16 个汉字或 12 个英文单词

### 间距

- 紧密关联：12px
- 同组内：24px
- 独立区块：40px
- 卡片内边距：20 到 24px

### 几何

- 小元素圆角：6px
- 卡片圆角：10 到 12px
- 最大圆角：16px
- 边框：0.5px `#D3D1C7`
- 单边边框圆角必须为 0

## 布局选择

优先横图，宽度控制在 800 到 900px。

- 左右对比：适合两个方案、两种状态、前后变化
- 横向流程：适合步骤、链路、演进
- 网格卡片：适合 3 到 4 个并列概念
- 上下分层：适合系统层级、上下游关系
- 单卡聚焦：适合一个核心数字、结论或概念
- 四段式叙事：适合痛点、架构、机制、结论这种解释性长文

竖图比例用 4:5 或 3:4。内容如果横向放不下，优先换布局，不要把字号压得很小。

## 布局细则

### 左右对比

- 两栏对称，等宽、同间距、同内边距
- 主标签字号 13 到 14px，加粗，颜色 `#2C2C2A`
- 副说明颜色 `#888780`
- 不用单边粗边框区分面板
- 面板背景统一使用 `#F1EFE8`
- 中性节点背景也使用 `#F1EFE8`

### 网格卡片

- 行列等距，卡片等宽等高
- 4 列间距 24px，2 到 3 列间距 32px
- 卡片内部三段式，迷你示意区、标题、副标题
- 迷你示意区占卡片高度 45% 到 55%
- 标题 18 到 22px，衬线粗体
- 副标题 13 到 14px，颜色 `#888780`

### 迷你示意图

- 极简，通常 3 到 6 个基础形状
- 只用 `#E8DCC0`、`#2C2C2A`、`#D3D1C7`
- 绿色和橙色不进入示意图，除非该卡就是高亮主角
- 核心示意元素需要短标签，装饰性或结构性形状不需要逐一标注
- 能用文字加简单形状说清楚时，不要硬画图标
- 不用文字替代结果，结果要尽量通过箭头、流向、分叉、聚合、阻断等图形关系表达

参考形状：

- 表格：3x2 网格，第一行米色填充
- 图片占位：矩形、山形折线、小圆
- 流程：三个小方块和箭头
- 滑块：两条横线和两个小圆
- 调色板：4 个小方块横排
- 图表：L 形坐标轴和散点
- 代码：深色矩形和几条灰色横线
- 对话：两个圆角矩形
- 中断：方块格子和对角线
- 膨胀：圆、指针、扩散圆
- 分工：三个不同深浅的方块

### 流程图

- 尽量单行横向展开
- 节点内容精简，2 到 4 个字
- 节点之间用箭头字符连接
- 中性节点使用 `#F1EFE8` 背景和 `#D3D1C7` 细边框
- 功能性节点才用橙色或绿色高亮
- 同一个面板内部保持颜色体系一致

## 输出契约

最终回复包含：

- HTML 文件绝对路径
- 简短说明，告诉用户打开 HTML 后截图即可
- 如果跳过了某些候选图，说明原因

不要输出大段 HTML 内容到聊天窗口。

## 失败处理

- 没有文章内容：请用户提供文章文本或文件路径
- 文件路径不可读：说明读取失败，并请用户重新提供
- 内容太短：提示可能只适合做一张概念图
- 用户中途改内容：重新阅读文章，再选择配图位置