content-infographic

内容信息图技能

用途

生成生产就绪的 SVG 和 HTML 信息图，与品牌保持一致、具备可访问性，并针对网页、印刷和社交媒体嵌入进行优化。此技能产出的是视觉资产，而非演示文稿或文档。

---

此技能何时激活

• 用户要求制作信息图、数据可视化、流程图、对比图表或数据卡片。
• 用户有想要可视化的数据。
• 用户需要为博客文章、社交媒体、报告或演示文稿制作视觉摘要。
• 用户针对任何数据或流程说“把这个可视化”或“把这个做成视觉图”。

---

SVG 优先方法

除非用户另有要求，否则始终默认输出 SVG。SVG 的优势：

• 可缩放：从社交媒体缩略图到会议海报，任何尺寸都清晰锐利。
• 可嵌入：可内联在 HTML 中，可嵌入 Markdown，可包含在演示文稿中。
• 适合印刷：在任何 DPI 下都不会出现像素化。
• 可编辑：用户可在生成后修改颜色、文本和布局。
• 可访问：支持 <title>、<desc> 和 aria-label 属性，供屏幕阅读器使用。
• 文件体积小：矢量图形压缩效果好。

何时改用 HTML 而非 SVG：

• 带有悬停状态、工具提示或动画的交互式信息图。
• 需要在不同屏幕尺寸下响应式重排的信息图。
• 带有实时数据绑定的仪表板。

---

生成流程

第 1 步：读取品牌上下文

如果以下文件存在，请读取它们：

• brand/VISUAL.md -- 颜色、字体、Logo 规则
• brand/BRAND.md -- 身份、受众（影响视觉基调）

提取：

• 主色、辅助色和强调色
• 字体族（或使用简洁的无衬线默认字体）
• Logo 标记的 SVG 路径（用于嵌入信息图）
• 视觉风格偏好（极简、大胆、趣味、企业）

如果缺少 brand/，请询问 2-3 种颜色，并使用简洁的默认风格继续。

第 2 步：理解数据

在设计任何内容之前，先理解需要传达什么：

• 数据是什么？ 数字、类别、流程、对比、时间线。
• 关键洞察是什么？ 每张信息图都有一个核心要点。找出它。
• 受众是谁？ 技术人员还是普通大众，内部还是外部。
• 它会出现在哪里？ 博客文章、社交媒体、电子邮件、印刷品、演示文稿幻灯片。

如果用户提供的原始数据缺少上下文，请提出澄清问题。

第 3 步：选择布局

根据数据类型和关键洞察，选择合适的模板类型：

数据类型	模板	何时使用
定量对比	data-viz	柱状图、折线图、饼图、指标
顺序步骤	process-flow	工作流、工作原理、时间线、流水线
并排评估	comparison	对比、优缺点、功能矩阵、前后对比
单一关键指标	stat-card	主视觉数字、KPI 亮点、社交分享

每种模板类型见 templates/。

第 4 步：生成 SVG

遵循以下原则构建 SVG：

• 根据输出场景设置合适的 viewBox（博客嵌入用 1200x800，社交媒体用 1080x1080，其他场景可自定义）。
• 使用 CSS 自定义属性定义颜色，方便用户轻松更换主题。
• 通过 SVG 内部的 <style> 嵌入品牌字体，或使用 Web 安全回退字体。
• 在角落包含品牌 Logo 标记（默认：右下角，小尺寸，50% 不透明度）。
• 添加可访问性：用 <title> 表示信息图名称，用 <desc> 提供纯文本摘要。

第 5 步：验证

交付前，请检查：

• 关键洞察立即可见（最重要的信息是最大/最突出的元素）。
• 所有文本的颜色对比度均通过 WCAG AA。
• 颜色总数不超过 5-6 种。
• 文本在预期显示尺寸下可读。
• 品牌颜色和字体应用正确。
• Logo 存在但不分散注意力。
• SVG 有效，并能在所有主流浏览器中渲染。

---

设计原则

完整参考见 design-principles.md。关键规则：

数据墨水比

每个视觉元素都应承载数据。移除任何不承载数据的内容：

• 不要装饰性边框或阴影。
• 不要图表上的 3D 效果。
• 不要背景纹理或图案，除非它们承载信息。
• 网格线应为浅灰色且尽可能少（如果轴标签已足够，可完全移除）。

有意义的色彩

• 用色彩承载信息，而不是用于装饰。
• 主品牌色用于关键数据系列或最重要的元素。
• 次要颜色用于辅助数据。
• 中性灰色用于上下文、标签和坐标轴。
• 切勿将色彩作为唯一的区分方式——搭配标签、图案或位置以确保可访问性。

字体层级

最多三级：

1. 标题：大号、加粗。陈述关键洞见，而不是图表类型。“Q3 收入增长 47%”，而不是“收入图表”。
2. 标签：中号、常规字重。轴标签、类别名称、数据点注释。
3. 脚注：小号、细体。来源、方法说明、日期范围。

留白

留白不是空白——它是结构。用它来：

• 分隔信息图的各个部分。
• 在关键洞见周围营造视觉呼吸空间。
• 引导视线从一个元素移向另一个元素。

网格对齐

将元素对齐到不可见的网格。未对齐的元素会造成视觉噪声。在 SVG 中，使用一致的 x/y 坐标和间距值。

---

模板类型

数据可视化（templates/data-viz.svg.template）

用于定量数据：柱状图、折线图、环形图、面积图。

关键规则：

• 柱状图的 y 轴从零开始（截断的轴会误导）。
• 当类别标签较长时，使用水平柱状图。
• 饼图/环形图限制为 5 个分段。其余使用“其他”。
• 尽可能直接在图表上标注数据点（减少对图例的需求）。

流程（templates/process-flow.svg.template）

用于顺序信息：工作流、工作原理图、时间线、流水线。

关键规则：

• 从左到右或从上到下流动。切勿从右到左。
• 每个步骤：图标或编号 + 标题 + 一行描述。
• 用箭头或线条连接步骤。
• 步骤之间使用一致的间距。
• 用品牌强调色突出当前或最重要的步骤。

对比（templates/comparison.svg.template）

用于并排评估：对比布局、功能矩阵、优缺点、前后对比。

关键规则：

• 两侧视觉权重相等（除非信息图设计上偏向某一侧）。
• 清晰的视觉分隔（垂直线、颜色差异或留白）。
• 结构一致：两侧的类别相同且顺序相同。
• 使用图标或颜色编码表示正面/负面/中性。

数据卡片（templates/stat-card.svg.template）

用于单一关键指标：主视觉数字、KPI 亮点、社交媒体分享。

关键规则：

• 数字是迄今为止最大的元素。
• 数字下方用较小文字提供上下文。
• 可选：趋势指示（向上/向下箭头）、对比（“较上季度的 32% 有所上升”）。
• 保持卡片聚焦：一个数据、一行上下文、一个可选趋势指示。

---

品牌 Logo 嵌入

如果 brand/logo/logo-mark.svg 存在，将其嵌入信息图：

<g transform="translate(1120, 750)" opacity="0.5">
  
</g>

位置：默认右下角。根据布局调整位置。 尺寸：约为信息图宽度的 5-8%。 不透明度：40-60%，以免与数据争夺注意力。

---

输出格式

格式	何时使用	如何
.svg 文件	网页嵌入、演示幻灯片、进一步编辑	直接输出 SVG
HTML 中的内联 SVG	博客文章嵌入、电子邮件	将 SVG 包裹在 <div> 中，并使用响应式 CSS
HTML + CSS	交互式信息图	使用 CSS 样式和可选 JS 的 HTML 结构

对于社交媒体，建议用户使用 svgexport 或浏览器截图等工具将 SVG 渲染为 2x 分辨率的 PNG。

---

错误处理

• 如果用户未提供数据，请主动索取。不要用虚假数字生成占位信息图。
• 如果数据中的类别对于所选格式而言过多（例如饼图中有 15 项），推荐其他格式或建议进行分组。
• 如果缺少 brand/，请采用简洁的极简风格继续，并说明运行 content-setup 可提升一致性。
• 如果数据无法传达清晰的故事，请提出质疑：“你最希望观众从中记住的一点是什么？”