القائمة
为文章生成专业级静态插图。当用户需要为文章、文档或教程添加插图、封面图或可视化图表时调用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Product version planning and roadmap management for smart-mqtt. Invoke when need release planning, feature prioritization, milestone definition, or roadmap visualization.
升级 smart-mqtt 版本时，自动更新 README.md、README_zh.md 和 Astro 页面中的版本号和下载链接。当用户需要发布新版本或升级版本号时调用。
| 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"
生成插图时，按以下步骤操作：
插图不是装饰，而是信息的视觉翻译。
文字信息 ──→ 认知加工 ──→ 视觉表达
│ │ │
▼ ▼ ▼
抽象概念 理解与提炼 具象呈现
核心问题：这张图要帮助读者理解什么？
| 维度 | 标准 | 反例 |
|---|---|---|
| 传达效率 | 3秒内理解主旨 | 需要反复阅读才能理解 |
| 信息精准 | 视觉与内容高度一致 | 图文不符或过度装饰 |
| 视觉舒适 | 层次清晰、留白得当 | 拥挤杂乱或空洞无物 |
| 风格统一 | 元素之间和谐共存 | 风格混搭、元素冲突 |
在动手设计前，先回答五个问题：
| 问题 | 探究方向 | 设计启示 |
|---|---|---|
| What | 核心信息是什么？ | 决定视觉焦点 |
| Why | 为什么要这张图？ | 决定信息密度 |
| Who | 读者是谁？ | 决定表达方式 |
| Where | 出现在哪里？ | 决定尺寸比例 |
| How | 如何表达最有效？ | 决定视觉形式 |
将抽象内容转化为视觉语言：
| 内容本质 | 视觉表达 | 设计要点 |
|---|---|---|
| 过程/流程 | 线性叙事 | 方向感、阶段感、连贯性 |
| 对比/选择 | 并置对照 | 平衡感、差异强调 |
| 层次/结构 | 嵌套堆叠 | 层级区分、关系清晰 |
| 概念/抽象 | 符号隐喻 | 识别度、联想性 |
| 情感/氛围 | 场景渲染 | 情绪传递、意境营造 |
| 关系/网络 | 连接辐射 | 节点关系、路径清晰 |
风格不是选择，而是内容属性的自然延伸：
内容属性分析
│
├── 技术含量高 ──→ 几何、规整、冷色调
│
├── 情感浓度高 ──→ 有机、柔和、暖色调
│
├── 信息密度高 ──→ 简约、克制、高对比
│
└── 创意要求高 ──→ 独特、新颖、有记忆点
风格是结果，不是起点。 先理解内容，风格自然浮现。
每张图只传达一个核心信息。
❌ 错误：一张图同时展示架构、流程、性能数据
✅ 正确：一张图展示架构，另一张图展示性能对比
建立清晰的信息层次：主 > 次 > 辅
视觉权重分配：
├── 主信息：最大字号、最强对比、中心位置
├── 次信息：中等处理，支撑主信息
└── 辅助信息：最小、最淡，不抢焦点
内容占比不超过 60%，留白是设计的一部分。
留白的作用：
├── 视觉休息：避免信息过载
├── 焦点强化：突出主体
└── 品质感：留白 = 高端感
在变化中寻求统一，在统一中制造对比。
对比：大小、颜色、形状、位置
统一：风格、色调、元素、节奏
| 色调 | 心理联想 | 适用场景 |
|---|---|---|
| 蓝色系 | 专业、信任、技术 | 技术文档、企业级产品 |
| 绿色系 | 成长、自然、安全 | 教程、环保、健康 |
| 紫色系 | 创新、神秘、高端 | AI、新产品、高端服务 |
| 橙色系 | 活力、热情、行动 | 活动、促销、号召 |
| 红色系 | 紧急、重要、热情 | 警告、重点、节日 |
60-30-10 法则：
├── 主色 60%：背景、大面积色块
├── 辅色 30%：次要元素、边框
└── 强调色 10%：重点突出、CTA
| 约束类型 | 具体要求 | 原因 |
|---|---|---|
| 尺寸规范 | 按平台配置 | 平台要求 |
| 格式要求 | 静态 HTML，无动画无交互 | 输出为图片 |
| 对比度 | 文字对比度 ≥ 4.5:1 | 可读性 |
| 内容完整 | 不超出容器边界 | 防止裁剪 |
| 品牌标识 | 包含品牌 Logo/名称 | 品牌一致性 |
容器必须设置 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 | 增加内边距 |
| 约束类型 | 建议范围 | 可突破条件 |
|---|---|---|
| 文字长度 | 标题 ≤12 字，说明 ≤20 字 | 有特殊设计需求时 |
| 元素数量 | 主要元素 ≤5 个 | 复杂信息图可增加 |
| 留白比例 | 30-50% | 极简风格可更多 |
| 配色数量 | 主色 1 + 辅色 2-3 | 渐变、插画可更多 |
在边界内，以下方面可自由发挥：
创作自由度
│
├── 布局方式 ──→ 自由选择：居中、左右、上下、对角、辐射...
│
├── 视觉元素 ──→ 自由创造：形状、图标、线条、装饰...
│
├── 配色方案 ──→ 自由搭配：在色彩心理学指导下
│
├── 字体处理 ──→ 自由设计：大小、粗细、间距、排列
│
└── 细节风格 ──→ 自由定义：圆润/锐利、简约/丰富、现代/复古
Step 1: 识别内容本质
│
▼
Step 2: 确定视觉形式（流程图？对比图？概念图？）
│
▼
Step 3: 选择布局结构（线性？并列？嵌套？辐射？）
│
▼
Step 3.5: 【强制】布局尺寸计算（见 5.2 节公式）
│
▼
Step 4: 确定风格基调（简约？手绘？科技？温暖？）
│
▼
Step 5: 设计配色方案（基于情感和主题）
│
▼
Step 6: 细化视觉元素（图标、装饰、细节）
│
▼
Step 7: 【强制】溢出验证（见 5.3 节检查清单）
⚠️ 关键：生成代码前必须完成以下计算，确保内容不溢出！
可用宽度 = 容器宽度 - 左右 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
在输出 HTML 代码前，必须逐项检查并确认：
| 检查项 | 计算公式 | 阈值 | 当前值 | 是否通过 |
|---|---|---|---|---|
| 容器总高度 | 所有区块高度之和 | ≤ 容器高度 - padding | ___px | ☐ |
| 单格高度 | 内容高度 + padding | ≤ 计算所得单格高度 | ___px | ☐ |
| 文字行数 | 总字数 / 单行字数 | ≤ 预期行数 | ___行 | ☐ |
| 边缘距离 | 内容到容器边缘 | ≥ 30px | ___px | ☐ |
| 溢出原因 | 表现 | 修正方案 |
|---|---|---|
| padding 过大 | 内容区域被压缩 | 减小 padding 至 30-40px |
| gap 过大 | 单格空间不足 | 减小 gap 至 16-20px |
| 字号过大 | 文字超出预期 | 减小字号 2-4px |
| 元素过多 | 总高度超标 | 减少元素或增加容器高度 |
| 未预留标题空间 | 内容区被挤压 | 先扣除标题区高度再计算 |
| 场景 | 内容本质 | 视觉形式 | 布局建议 | 风格倾向 |
|---|---|---|---|---|
| 技术教程 | 步骤流程 | 流程图 | 线性/纵向 | 简约专业 |
| 产品发布 | 亮点展示 | 特性卡片 | 并列/网格 | 现代渐变 |
| 概念解释 | 抽象具象化 | 概念图 | 中心辐射 | 手绘/简约 |
| 方案对比 | 差异呈现 | 对比图 | 左右并列 | 中性平衡 |
| 成长故事 | 时间叙事 | 时间轴 | 线性/曲线 | 温暖手绘 |
| 架构说明 | 层次关系 | 结构图 | 嵌套堆叠 | 简约专业 |
注意：以上是参考，不是规则。根据具体内容灵活调整。
<!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>
┌─────────────────────────────────────────────────────────────┐
│ overflow: hidden 是必须的，超出内容会被裁剪，不会显示 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 安全区域 = 容器尺寸 - padding - 预留边距 │
│ │
│ 封面 900×383：安全区域约 820×303（padding 40px） │
│ 正文 900×500：安全区域约 820×420（padding 40px） │
│ │
└─────────────────────────────────────────────────────────────┘
: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;
}
/* 系统字体栈 */
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;
.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;
}
生成后，逐一检验：
防溢出检查（最重要）
overflow: hidden？传达效果
视觉质量
技术规范
| 溢出类型 | 表现 | 原因 | 修正方案 |
|---|---|---|---|
| 文字溢出 | 文字被截断或超出 | 字数过多/字号过大 | 缩短文字、缩小字号、换行 |
| 元素溢出 | 元素被裁剪 | 数量过多/尺寸过大 | 减少元素、缩小尺寸 |
| 布局溢出 | 整体超出容器 | padding 不足 | 增加内边距 |
| 定位溢出 | 绝对定位元素超出 | 坐标计算错误 | 调整定位值 |
| 问题 | 表现 | 修正方向 |
|---|---|---|
| 信息过载 | 元素太多、拥挤 | 删减非必要元素、增加留白 |
| 层次混乱 | 分不清主次 | 强化主信息对比度、弱化次要信息 |
| 风格冲突 | 元素风格不统一 | 统一形状语言、色调、线条风格 |
| 对比不足 | 视觉平淡 | 增加大小、颜色、粗细对比 |
| 留白不足 | 紧迫感强 | 减少元素、增加间距 |
内容：框架快速入门，5 分钟搭建第一个服务
设计思考：
设计决策：
内容：AI Agent 工作原理：感知、决策、执行、学习
设计思考：
设计决策：
内容：产品 2.0 发布，三大亮点
设计思考：
设计决策：
config/brands/ — 品牌配置目录config/platforms/ — 平台配置目录templates/ — 历史模板参考（可借鉴，不必照搬）| 版本 | 日期 | 更新内容 |
|---|---|---|
| 1.0.0 | 2025-04-07 | 初始通用版本，从 feat-illustrator 提取 |