illustrator

name	illustrator
description	为文章生成专业级静态插图。当用户需要为文章、文档或教程添加插图、封面图或可视化图表时调用。

文章插图设计方法论

核心理念

不是套模板，而是理解本质；不是执行规则，而是运用原则。

优秀的插图设计源于对内容的深刻理解，而非对模板的机械应用。本方法论提供设计思维框架，让创作在合理边界内自由发挥。

---

配置系统

本 skill 使用配置系统来适配不同品牌和平台。

品牌配置

品牌配置存储在 config/brands/ 目录下，每个品牌有独立的 YAML 文件：

# config/brands/{brand-name}.yml
brand:
  name: "品牌名称"
  tagline: "品牌标语"

colors:
  primary: "#2563eb"
  primary-light: "#3b82f6"
  primary-dark: "#1d4ed8"
  secondary: "#64748b"
  accent: "#f59e0b"

neutral:
  50: "#fafafa"
  100: "#f5f5f5"
  200: "#e5e5e5"
  500: "#737373"
  700: "#404040"
  900: "#171717"

typography:
  font-stack: "-apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif"
  art-font: "'ZCOOL KuaiLe', 'Ma Shan Zheng', sans-serif"

logo:
  text: "LOGO"
  position: "bottom-right"

平台配置

平台配置存储在 config/platforms/ 目录下：

# config/platforms/{platform-name}.yml
platform:
  name: "平台名称"

sizes:
  cover-large:
    width: 900
    height: 383
  cover-medium:
    width: 900
    height: 500
  inline:
    width: 900
    height: auto

safe-area:
  top: 60
  bottom: 40
  left: 40
  right: 40

format:
  type: "static-html"
  output: "png/jpg"
  max-size: "2MB"

使用配置

生成插图时，按以下步骤操作：

1. 识别品牌：检查用户是否指定品牌，否则使用默认
2. 识别平台：检查用户是否指定平台，否则使用默认
3. 加载配置：读取对应的 YAML 文件
4. 应用配置：在设计中使用品牌颜色、平台尺寸

---

一、设计的本质

1.1 插图存在的意义

插图不是装饰，而是信息的视觉翻译。

文字信息 ──→ 认知加工 ──→ 视觉表达
    │            │            │
    ▼            ▼            ▼
  抽象概念    理解与提炼    具象呈现

核心问题：这张图要帮助读者理解什么？

1.2 好插图的标准

维度	标准	反例
传达效率	3秒内理解主旨	需要反复阅读才能理解
信息精准	视觉与内容高度一致	图文不符或过度装饰
视觉舒适	层次清晰、留白得当	拥挤杂乱或空洞无物
风格统一	元素之间和谐共存	风格混搭、元素冲突

---

二、设计思维框架

2.1 内容解码

在动手设计前，先回答五个问题：

问题	探究方向	设计启示
What	核心信息是什么？	决定视觉焦点
Why	为什么要这张图？	决定信息密度
Who	读者是谁？	决定表达方式
Where	出现在哪里？	决定尺寸比例
How	如何表达最有效？	决定视觉形式

2.2 视觉翻译

将抽象内容转化为视觉语言：

内容本质	视觉表达	设计要点
过程/流程	线性叙事	方向感、阶段感、连贯性
对比/选择	并置对照	平衡感、差异强调
层次/结构	嵌套堆叠	层级区分、关系清晰
概念/抽象	符号隐喻	识别度、联想性
情感/氛围	场景渲染	情绪传递、意境营造
关系/网络	连接辐射	节点关系、路径清晰

2.3 风格决策

风格不是选择，而是内容属性的自然延伸：

内容属性分析
     │
     ├── 技术含量高 ──→ 几何、规整、冷色调
     │
     ├── 情感浓度高 ──→ 有机、柔和、暖色调
     │
     ├── 信息密度高 ──→ 简约、克制、高对比
     │
     └── 创意要求高 ──→ 独特、新颖、有记忆点

风格是结果，不是起点。 先理解内容，风格自然浮现。

---

三、设计原则

3.1 核心原则

原则一：一图一意

每张图只传达一个核心信息。

❌ 错误：一张图同时展示架构、流程、性能数据
✅ 正确：一张图展示架构，另一张图展示性能对比

原则二：视觉层级

建立清晰的信息层次：主 > 次 > 辅

视觉权重分配：
├── 主信息：最大字号、最强对比、中心位置
├── 次信息：中等处理，支撑主信息
└── 辅助信息：最小、最淡，不抢焦点

原则三：留白呼吸

内容占比不超过 60%，留白是设计的一部分。

留白的作用：
├── 视觉休息：避免信息过载
├── 焦点强化：突出主体
└── 品质感：留白 = 高端感

原则四：对比统一

在变化中寻求统一，在统一中制造对比。

对比：大小、颜色、形状、位置
统一：风格、色调、元素、节奏

3.2 配色原则

色彩心理学

色调	心理联想	适用场景
蓝色系	专业、信任、技术	技术文档、企业级产品
绿色系	成长、自然、安全	教程、环保、健康
紫色系	创新、神秘、高端	AI、新产品、高端服务
橙色系	活力、热情、行动	活动、促销、号召
红色系	紧急、重要、热情	警告、重点、节日

配色公式

60-30-10 法则：
├── 主色 60%：背景、大面积色块
├── 辅色 30%：次要元素、边框
└── 强调色 10%：重点突出、CTA

对比度要求

• 正文文字对比度 ≥ 4.5:1（WCAG AA）
• 大标题对比度 ≥ 3:1
• 确保可读性优先于美观性

---

四、创作边界

4.1 硬性约束（必须遵守）

约束类型	具体要求	原因
尺寸规范	按平台配置	平台要求
格式要求	静态 HTML，无动画无交互	输出为图片
对比度	文字对比度 ≥ 4.5:1	可读性
内容完整	不超出容器边界	防止裁剪
品牌标识	包含品牌 Logo/名称	品牌一致性

4.2 防溢出约束（关键）

容器必须设置 overflow: hidden，超出内容会被裁剪，不会显示。

内容容量上限

内容类型	最大数量	单项字数	安全边距
主标题	1 个	≤12 字	距边缘 ≥40px
副标题	1 个	≤20 字	距边缘 ≥30px
列表项（横向）	≤4 个	≤8 字	间距 ≥12px
列表项（纵向）	≤5 个	≤15 字	间距 ≥8px
关键词标签	≤5 个	≤6 字	间距 ≥8px
功能亮点	≤4 个	≤10 字	间距 ≥16px
步骤节点	≤5 个	≤8 字	间距 ≥20px

防溢出技术规范

/* 必须设置 */
.container {
    width: 900px;
    height: 383px;  /* 或其他固定高度 */
    overflow: hidden;  /* 关键：防止溢出 */
    position: relative;
}

/* 内容区域留出安全边距 */
.content {
    padding: 40px;  /* 四周留白 */
    box-sizing: border-box;
}

/* 文字截断 */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行文字截断 */
.text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

溢出风险检查

生成前必须检查：

检查项	标准	不达标处理
文字总长度	不超过容器 80% 宽度	缩短文字或换行
元素总高度	不超过容器 70% 高度	减少元素或缩小字号
元素间距	≥8px	调整布局
边缘距离	内容距边缘 ≥30px	增加内边距

4.3 软性约束（建议遵守）

约束类型	建议范围	可突破条件
文字长度	标题 ≤12 字，说明 ≤20 字	有特殊设计需求时
元素数量	主要元素 ≤5 个	复杂信息图可增加
留白比例	30-50%	极简风格可更多
配色数量	主色 1 + 辅色 2-3	渐变、插画可更多

4.4 自由创作空间

在边界内，以下方面可自由发挥：

创作自由度
│
├── 布局方式 ──→ 自由选择：居中、左右、上下、对角、辐射...
│
├── 视觉元素 ──→ 自由创造：形状、图标、线条、装饰...
│
├── 配色方案 ──→ 自由搭配：在色彩心理学指导下
│
├── 字体处理 ──→ 自由设计：大小、粗细、间距、排列
│
└── 细节风格 ──→ 自由定义：圆润/锐利、简约/丰富、现代/复古

---

五、设计决策逻辑

5.1 内容 → 形式 决策链

Step 1: 识别内容本质
        │
        ▼
Step 2: 确定视觉形式（流程图？对比图？概念图？）
        │
        ▼
Step 3: 选择布局结构（线性？并列？嵌套？辐射？）
        │
        ▼
Step 3.5: 【强制】布局尺寸计算（见 5.2 节公式）
        │
        ▼
Step 4: 确定风格基调（简约？手绘？科技？温暖？）
        │
        ▼
Step 5: 设计配色方案（基于情感和主题）
        │
        ▼
Step 6: 细化视觉元素（图标、装饰、细节）
        │
        ▼
Step 7: 【强制】溢出验证（见 5.3 节检查清单）

5.2 布局计算公式（强制执行）

⚠️ 关键：生成代码前必须完成以下计算，确保内容不溢出！

通用计算公式

可用宽度 = 容器宽度 - 左右 padding - 预留边距
可用高度 = 容器高度 - 上下 padding - 预留边距

安全原则：实际使用 ≤ 可用空间的 90%

网格布局计算

假设：cols 列，rows 行，gap 间距

单格宽度 = (可用宽度 - (cols-1) × gap) / cols
单格高度 = (可用高度 - (rows-1) × gap) / rows

验证：单格高度 ≥ 内容高度（图标 + 文字 + 内边距）

示例计算（3×2 网格，容器 900×500）：

可用宽度 = 900 - 50×2 = 800px
可用高度 = 500 - 36×2 - 标题区(90) - 底部预留(20) = 318px

单格宽度 = (800 - 2×18) / 3 = 254.67px
单格高度 = (318 - 18) / 2 = 150px

卡片内容：
- 图标 44px + margin 12px = 56px
- 标题 16px + margin 6px = 22px
- 描述 12px × 1.4 = 17px
- padding 18px × 2 = 36px
- 总计：56 + 22 + 17 + 36 = 131px ✓ < 150px

横向列表计算

单个宽度 = (可用宽度 - (n-1) × gap) / n

验证：单个宽度 ≥ 图标宽度 + 文字宽度 + padding

纵向列表计算

单个高度 = (可用高度 - (n-1) × gap) / n

验证：单个高度 ≥ 图标高度 + 文字行数 × 行高 + padding

5.3 溢出检查清单（生成前必检）

在输出 HTML 代码前，必须逐项检查并确认：

检查项	计算公式	阈值	当前值	是否通过
容器总高度	所有区块高度之和	≤ 容器高度 - padding	___px	☐
单格高度	内容高度 + padding	≤ 计算所得单格高度	___px	☐
文字行数	总字数 / 单行字数	≤ 预期行数	___行	☐
边缘距离	内容到容器边缘	≥ 30px	___px	☐

5.4 常见溢出原因与修正

溢出原因	表现	修正方案
padding 过大	内容区域被压缩	减小 padding 至 30-40px
gap 过大	单格空间不足	减小 gap 至 16-20px
字号过大	文字超出预期	减小字号 2-4px
元素过多	总高度超标	减少元素或增加容器高度
未预留标题空间	内容区被挤压	先扣除标题区高度再计算

5.5 常见场景决策参考

场景	内容本质	视觉形式	布局建议	风格倾向
技术教程	步骤流程	流程图	线性/纵向	简约专业
产品发布	亮点展示	特性卡片	并列/网格	现代渐变
概念解释	抽象具象化	概念图	中心辐射	手绘/简约
方案对比	差异呈现	对比图	左右并列	中性平衡
成长故事	时间叙事	时间轴	线性/曲线	温暖手绘
架构说明	层次关系	结构图	嵌套堆叠	简约专业

注意：以上是参考，不是规则。根据具体内容灵活调整。

---

六、技术实现

6.1 基础技术栈

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>插图标题</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f0f0f0;
        }
        
        .container {
            width: 900px;
            height: 383px;  /* 封面高度，正文可调整 */
            overflow: hidden;  /* 关键：防止溢出 */
            position: relative;
            background: #ffffff;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 内容必须在容器内 -->
    </div>
</body>
</html>

6.2 防溢出核心要点

┌─────────────────────────────────────────────────────────────┐
│  overflow: hidden 是必须的，超出内容会被裁剪，不会显示       │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  安全区域 = 容器尺寸 - padding - 预留边距                   │
│                                                             │
│  封面 900×383：安全区域约 820×303（padding 40px）           │
│  正文 900×500：安全区域约 820×420（padding 40px）           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

6.3 CSS 变量系统

:root {
    /* 中性色 */
    --neutral-900: #171717;
    --neutral-700: #404040;
    --neutral-500: #737373;
    --neutral-200: #e5e5e5;
    --neutral-50: #fafafa;
    
    /* 功能色 - 根据品牌配置替换 */
    --primary: #2563eb;
    --accent: #f59e0b;
    
    /* 手绘风格色（可选） */
    --art-cream: #fef9f3;
    --art-primary: #7c6ba0;
    --art-line: #5d4e37;
}

6.4 字体规范

/* 系统字体栈 */
font-family: 
    -apple-system, 
    BlinkMacSystemFont, 
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    sans-serif;

/* 手绘风格字体（可选） */
font-family: 
    "ZCOOL KuaiLe",
    "Ma Shan Zheng",
    "PingFang SC",
    sans-serif;

6.5 常用布局模式

居中布局

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

左右分栏

.container {
    display: flex;
}
.left { flex: 1; }
.right { flex: 1; }

网格布局

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

---

七、质量检验

7.1 自检清单

生成后，逐一检验：

防溢出检查（最重要）

• 容器是否设置 overflow: hidden？
• 所有内容是否在容器边界内？
• 文字是否超出预期宽度？
• 元素是否超出预期高度？
• 边缘是否留有 ≥30px 安全边距？

传达效果

• 3 秒内能理解主旨吗？
• 视觉与内容一致吗？
• 信息层次清晰吗？

视觉质量

• 配色和谐吗？
• 对比度足够吗？
• 留白合理吗？

技术规范

• 尺寸正确吗？
• 品牌标识正确吗？

7.2 溢出问题诊断与修正

溢出类型	表现	原因	修正方案
文字溢出	文字被截断或超出	字数过多/字号过大	缩短文字、缩小字号、换行
元素溢出	元素被裁剪	数量过多/尺寸过大	减少元素、缩小尺寸
布局溢出	整体超出容器	padding 不足	增加内边距
定位溢出	绝对定位元素超出	坐标计算错误	调整定位值

7.3 常见问题与修正

问题	表现	修正方向
信息过载	元素太多、拥挤	删减非必要元素、增加留白
层次混乱	分不清主次	强化主信息对比度、弱化次要信息
风格冲突	元素风格不统一	统一形状语言、色调、线条风格
对比不足	视觉平淡	增加大小、颜色、粗细对比
留白不足	紧迫感强	减少元素、增加间距

---

八、创作示例

示例 1：技术教程封面

内容：框架快速入门，5 分钟搭建第一个服务

设计思考：

1. 本质：教程 → 流程 → 步骤感
2. 受众：开发者 → 专业、简洁
3. 风格：技术向 → 简约、蓝色系
4. 布局：标题 + 步骤展示

设计决策：

• 主色：蓝色（#2563eb）— 技术感
• 布局：左对齐，步骤横向排列
• 元素：步骤编号 + 简短文字

示例 2：概念解释插图

内容：AI Agent 工作原理：感知、决策、执行、学习

设计思考：

1. 本质：概念 → 循环 → 周而复始
2. 受众：普通读者 → 友好、易懂
3. 风格：概念向 → 手绘、温暖
4. 布局：中心辐射或循环图

设计决策：

• 主色：紫色（#7c3aed）— AI 感
• 布局：中心图标 + 四周关键词环绕
• 元素：AI 图标 + 手绘装饰

示例 3：产品发布封面

内容：产品 2.0 发布，三大亮点

设计思考：

1. 本质：发布 → 亮点 → 吸引眼球
2. 受众：潜在用户 → 活力、现代
3. 风格：推广向 → 渐变、动感
4. 布局：标题 + 亮点并列

设计决策：

• 主色：紫色渐变 — 新颖感
• 布局：标题居上，亮点横向排列
• 元素：NEW 标签 + 功能图标

---

九、参考资源

• config/brands/ — 品牌配置目录
• config/platforms/ — 平台配置目录
• templates/ — 历史模板参考（可借鉴，不必照搬）

---

版本历史

版本	日期	更新内容
1.0.0	2025-04-07	初始通用版本，从 feat-illustrator 提取