| name | article-illustrator |
| description | 为文章生成可截图的扁平化解释配图 HTML 页面。用于用户提供文章、草稿、段落或文件路径，并要求配图、文章插图、图解、公众号配图、生成 illustration 页面、帮我配图。输出是本地 HTML 文件，不直接生成 PNG/JPG，不用于 Logo、图标、海报、封面或非文章内容。 |
Article Illustrator
将文章内容转化为 Anthropic 风格的扁平化解释配图网页，方便用户打开后截图用于公众号、博客或长文。
核心原则
配图不是装饰，是解释工具。
- 配图要补充文章中难以一眼看清的结构、对比、流程、层级和因果
- 优先横图，适合嵌入文章正文，竖图只在单卡聚焦或内容很窄时使用
- 默认使用中文，除非文章本身是英文且面向英文读者
- 能用图形表达的内容不要写成长句，截图出来应该像图，不像文档
- 每张图只表达一个核心判断，不把整篇文章塞进一张图
- 文字只保留标题、标签、关键数字、按钮名和点题句
- 标签、说明、点题句不加引号
- 不使用破折号
输入
- 用户提供的文章文本，或可读取的文件路径
- 可选的配图数量、尺寸、使用场景和特殊风格要求
如果用户没有给文章内容，先请用户补充。文章少于 100 字时，提醒内容可能太短，但如果用户坚持，可以做单张概念图。
工作流
1. 阅读文章
识别这些信息：
- 文章类型，比如产品介绍、技术文档、博客、营销页、复盘、评论
- 核心观点数量
- 适合图片化的内容，比如数字、流程、对比、架构、层级、因果
- 不需要配图的内容，比如普通叙述、例子、情绪铺垫
2. 选择配图位置
逐段判断哪里真的需要图解释。
优先选择这些位置：
- 文字讲了一个关系，但读者需要脑补结构
- 文字讲了一个流程，但步骤之间容易混
- 文字做了对比，但差异不够直观
- 文字包含多个层级、角色或模块
- 文字包含关键数字，图能放大记忆点
不建议配图的位置：
- 只是陈述事实
- 只是讲故事或举例
- 只是表达态度
- 图只能重复原文，不能提供额外理解
3. 是否先给建议
默认先给配图建议，再等用户确认后生成 HTML。
如果用户明确说直接做、直接生成、帮我产出、无需确认，跳过确认，直接生成。
建议格式：
配图建议
【图 1】位置：第 X 到 Y 段
解释什么：核心关系或流程
适合图型：左右对比 / 横向流程 / 网格卡片 / 上下分层 / 单卡聚焦
建议比例：横图 / 竖图
【总结】
共 X 张图
优先做图 1，因为它解释文章最关键的概念
4. 生成 HTML
生成一个自包含 HTML 文件，保存到：
/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 内容到聊天窗口。
失败处理
- 没有文章内容：请用户提供文章文本或文件路径
- 文件路径不可读：说明读取失败，并请用户重新提供
- 内容太短：提示可能只适合做一张概念图
- 用户中途改内容：重新阅读文章，再选择配图位置
