infographic

信息图设计

创建引人入胜的数据可视化和信息图。将数字、流程和对比转化为视觉效果出色的图形。

选择路径： Gemini 生成的图表几何形状和数字仅供示意，并不准确——柱形高度不会与数据吻合，数字也可能变得难以辨认。只要图形需要绘制真实数据或包含超过约 8 个简短文本标签，就使用 HTML/CSS/SVG。对于文本较少的插画类内容（图标、场景、少量醒目的统计数字），使用 Gemini；也可以用 Gemini 生成插画，再用代码在周围排布数据。

---

步骤 1：加载设计上下文

1. 首先阅读 .agents/design-context.md——了解品牌颜色（十六进制值）、字体和风格原型
2. 如果文件缺失，请使用 design-context 默认回退方案，并告知用户使用了默认值
3. 信息图很依赖一致的颜色系统来区分数据类别

---

Gemini 图像生成路径

流程/CLI：image-generation。提示词设计、裁剪和文本叠加回退方案：graphic-design 步骤 3。

1. 比例：竖版（Pinterest 风格）用 2:3 或 9:16，长图滚动页面用 1:4，信息流用 4:5 或 1:1，幻灯片用 16:9。使用 --size 2K 或 4K——高长宽比会让文字变得很小
2. 精确保留每个数字和标签；控制在约 8 个简短标签以内。将较长的信息图拆分成多个区块，分别生成后再用代码拼接
3. 读取输出 PNG，并对照源数据检查每个数字、标签和单位。任何不一致都属于缺陷：在后续轮次中修正，或将相关文本改用代码叠加

提示词示例

• 统计信息图：“创建一张展示 [主题] 统计数据的信息图。用图标展示 [数字] 个关键指标，并突出显示大号数字。采用 [颜色方案] 配色。使用清晰的网格布局和分区标题。风格专业、以数据为导向。”
• 流程图：“为 [流程名称] 创建一张流程信息图。包含由箭头连接的 [数字] 个步骤。每个步骤包含一个图标、标题和一句描述。使用从起点到终点逐步变化的 [颜色] 渐变。采用竖版布局和现代风格。”
• 时间线：“为 [主题] 创建一张时间线信息图。展示从 [开始年份] 到 [结束年份] 的 [数字] 个里程碑。沿竖线采用左右交替布局。[颜色方案]。每个节点标注关键日期和简短描述。”

---

步骤 2：确定信息图类型

类型	最适合	布局
流程图	分步操作流程	水平或垂直链式布局
对比图	两个或更多选项	分栏或分屏布局
统计图	关键数字和指标	统计卡片网格
时间线	按时间顺序排列的事件	垂直或水平线
列表 / 排名	Top N 项目	带编号的垂直列表
数据图表	定量数据	使用 SVG 绘制柱状图、饼图、折线图
图标网格	类别概览	图标与标签配对的网格

---

步骤 3：颜色编码系统

系统化地分配颜色。切勿为数据类别随机使用颜色。

配色方案类型

/* Sequential (ordered data) */
:root { --data-1: #EFF6FF; --data-2: #BFDBFE; --data-3: #60A5FA; --data-4: #2563EB; --data-5: #1E40AF; }

/* Categorical (distinct categories) */
:root { --cat-a: #6366F1; --cat-b: #EC4899; --cat-c: #F59E0B; --cat-d: #10B981; --cat-e: #8B5CF6; --cat-f: #EF4444; }

/* Diverging (positive/negative) */
:root { --neg-strong: #EF4444; --neg-light: #FCA5A5; --neutral: #E5E7EB; --pos-light: #86EFAC; --pos-strong: #22C55E; }

颜色规则

• 最重要的数据点使用品牌主色
• 使用中性色（灰度）表示背景或基准数据
• 图表标记（柱形、线条、扇区）与背景及相邻标记之间的对比度需达到 3:1（WCAG 1.4.11）。浅色调色板色阶（例如 --data-1、--cat-c 琥珀色）在白色背景上不符合要求——应添加较深的轮廓，或仅在深色背景上使用
• 文本对比度需达到 4.5:1（字号 >=24px 或粗体字号 >=18.66px 时为 3:1）
• 切勿只依赖颜色：直接标注数据系列，或添加图案/图标（WCAG 1.4.1）
• 单张图表最多使用 6 种不同颜色

---

步骤 4：流程图

水平流程图

.process-flow { display: flex; align-items: flex-start; gap: 0; padding: 40px; }
.step { flex: 1; text-align: center; position: relative; padding: 0 20px; }
.step-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; margin: 0 auto 16px; position: relative; z-index: 2;
}
.step-connector {
  position: absolute; top: 24px; left: calc(50% + 24px); right: calc(-50% + 24px);
  height: 2px; background: var(--primary); opacity: 0.3; z-index: 1;
}
.step:last-child .step-connector { display: none; }

垂直流程图

使用 flex-direction: column，并将 ::before 伪元素设为绝对定位在各项左侧，作为连接线。

---

步骤 5：对比图表

并排功能对比

.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.comparison-table thead th { padding: 20px; font-size: 18px; font-weight: 700; text-align: center; border-bottom: 2px solid #E5E7EB; }
.comparison-table thead th.highlighted { background: var(--primary); color: #fff; border-radius: 12px 12px 0 0; }
.comparison-table td { padding: 14px 20px; text-align: center; border-bottom: 1px solid #F3F4F6; font-size: 14px; }
.check { color: #15803D; } .cross { color: #6B7280; } /* >=3:1 on white; pair with ✓/✗ glyphs, not color alone */

二选一对比

使用三列网格：grid-template-columns: 1fr auto 1fr，并在两个选项卡片之间居中放置一个较大的“VS”元素。

第 6 步：统计数据与数字亮点

大数字卡片

.stat-card { text-align: center; padding: 32px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.stat-number {
  font-size: 56px; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; margin-bottom: 8px;
}
.stat-label { font-size: 14px; font-weight: 500; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.05em; }

进度指示器

/* Percentage bar */
.percent-bar { height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.percent-bar .fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 4px; animation: fillBar 1.5s ease-out; }
@keyframes fillBar { from { width: 0; } }

/* Circular progress - conic-gradient; set a unitless --progress, e.g. style="--progress: 72" */
.circle-progress {
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(var(--primary) 0deg, var(--primary) calc(var(--progress) * 3.6deg), #E5E7EB calc(var(--progress) * 3.6deg));
  display: flex; align-items: center; justify-content: center;
}

---

第 7 步：时间线信息图

垂直时间线

.timeline { position: relative; padding: 20px 0; max-width: 600px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--primary), var(--primary), transparent);
  transform: translateX(-50%);
}
.timeline-item { display: flex; align-items: flex-start; margin-bottom: 40px; position: relative; }
.timeline-item:nth-child(odd) { padding-right: calc(50% + 30px); text-align: right; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; padding-left: calc(50% + 30px); text-align: left; }
.timeline-dot {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--primary);
  border: 3px solid var(--bg-color); z-index: 2;
}
.timeline-content { padding: 16px 20px; background: rgba(255,255,255,0.05); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }

水平时间线

使用 display: flex 和 ::before 水平线。每个项目都包含一个圆点，内容放在下方。

---

第 8 步：基于 SVG 的图表

柱状图

使用定位在 y 轴基线上的 <rect> 元素。为 height/y 属性添加 <animate> 作为入场动画。使用 <text> 添加轴标签，并使用 <line> 添加网格线。

环形图

使用带有 stroke-dasharray 和 stroke-dashoffset 的 <circle> 元素创建分段。通过 rotate(-90) 旋转，使图表从顶部开始。在中心添加 <text>，显示关键指标。

折线图

使用 <polyline> 绘制数据线，使用带 fill 的 <path> 填充下方区域，并使用 <circle> 元素标记数据点。为区域填充添加 <linearGradient>。

所有 SVG 图表的关键模式：

<svg viewBox="0 0 400 250" width="400" height="250" xmlns="http://www.w3.org/2000/svg">
  
  
  
</svg>

---

第 9 步：图标驱动的数据点

图标 + 统计数据布局

.icon-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding: 40px; }
.icon-stat { display: flex; align-items: flex-start; gap: 16px; }
.icon-stat .icon-circle {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-stat .value { font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.icon-stat .label { font-size: 13px; color: #6B7280; }

---

第 10 步：信息图布局模板

长篇垂直布局

宽度：800px（网页）或 1000px（印刷）。结构：页眉 > 第 1 部分 > 分隔线 > 第 2 部分 > 分隔线 > 第 3 部分 > 总结 > 页脚。各部分之间留出 60px 间距。

仪表盘式网格

.info-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 40px; }
.info-dashboard .header { grid-column: 1 / -1; }
.info-dashboard .chart-main { grid-column: 1 / 3; }
.info-dashboard .chart-side { grid-column: 3; }
.info-dashboard .footer { grid-column: 1 / -1; }

---

质量检查清单

• 数据准确呈现（数字与视觉效果一致；柱形／扇区大小根据数据计算，而非凭目测估算）
• 已读取输出的 PNG（Gemini 或渲染后的代码），并逐一对照源内容检查所有数字、标签和单位
• 颜色编码一致且有意义（最多 6 种颜色）
• 所有数据点均有清晰标签
• 视觉层次能引导读者浏览信息
• 在适当位置注明来源
• 应用了设计上下文中的品牌颜色
• SVG 图表具有合适的 viewBox 和比例（响应式设计时使用 CSS width: 100%; height: auto）
• 文本和图表标记符合对比度规则；颜色不是唯一的编码方式
• 动画细微适度，有助于理解
• 各部分之间留有充足的空白