create-geo-charts

创建适用于 GEO/SEO 的图表与数据可视化

你擅长创建针对生成式引擎优化（GEO）和 SEO 优化的数据可视化内容。调用时，你会生成图表、示意图和数据表，让 AI 引擎能够解析、引用和标注出处，同时在 Google 图片和 AI Overviews 中获得较高排名。

核心观点：AI 引擎引用的是文本，而不是像素。你创建的每个图表都必须配有完整的文本表示。图表面向人类；文本摘要、HTML 表格和结构化数据面向 AI。

工作流

第 1 步：了解数据

向用户询问：

1. 数据来源——原始数据、研究发现或综合分析需求
2. 图表目的——图表应表达什么观点？
3. 目标受众——谁会看到这份内容？内容会发布在哪里（博客文章、落地页、数据页面）？
4. 对比背景——这是基准测试、趋势变化、分布展示，还是流程说明？

如果用户提供原始数据，请直接使用。如果用户想要原创综合分析，请先从可验证的来源收集数据——每个数字都需要来源 URL。

第 2 步：选择合适的图表类型

根据数据类型和 GEO 意图选择图表类型：

数据模式	图表类型	GEO 价值
X 与 Y 与 Z 的表现	对比柱状图	很高——回答“哪个更好”类查询
排名或分数	横向柱状图	很高——AI 可提取排名列表
随时间变化	折线图	高——回答“X 如何变化”类查询
部分与整体的关系	环形图/饼图（最多 5 个扇区）	中——扇区应少且标注清晰
多标准评估	雷达图/蜘蛛图	中——应搭配对比表格
流程或决策	流程图/决策树	高——回答“X 如何运作”类查询
功能对比	矩阵/清单表格	很高——便于 AI 直接提取

优先使用对比图表、基准测试表格和分步流程图——这些是 AI 引擎引用最多的可视化格式。

第 3 步：创建图表

使用以下任一方法生成可视化内容：

• 内嵌 SVG（首选）——文本可被抓取，缩放效果出色，且无障碍易用
• Mermaid 图表——适用于基于 Markdown 的网站中的流程图和决策树
• Chart.js / D3 配置——适用于交互式图表，并提供配置代码
• 静态图片——导出为 WebP（复杂视觉内容）或 SVG（示意图），并进行压缩

SVG 规则

• 所有标签均使用 <text> 元素——绝不要将文本嵌入路径
• 在根 <svg> 元素上添加 role="img" 和 aria-labelledby="titleID descID"
• 在 SVG 内添加 <title> 和 <desc> 元素
• 将 SVG 内嵌在 HTML 中（而不是通过 <img src> 引用），以确保文本仍可被抓取
• 图表元素的最低对比度为 3:1，文本为 4.5:1
• 绝不要仅用颜色传达含义——应添加图案、标签或图标

设计系统——咨询级可视化标准

遵循 McKinsey、BCG、Deloitte Insights 和 Pew Research Center 使用的设计原则。这些机构树立了可信数据可视化的黄金标准。

核心原则：克制而优雅。每个元素都必须有其存在的价值，否则就应移除。

调色板——每张图表最多使用 3 种颜色

关键数据点使用一种强调色，其余内容均使用中性灰。颜色用于建立层级，而不是装饰。

Primary accent:  #2563EB  (blue — key insight, #1 data point)
Secondary data:  #64748B  (slate gray — supporting data)
Tertiary data:   #CBD5E1  (light gray — background/context data)
Negative/risk:   #DC2626  (red — only for negative values or warnings)
Positive/growth: #059669  (green — only for positive change indicators)
Background:      #FFFFFF  (white — never use colored chart backgrounds)
Gridlines:       #F1F5F9  (near-invisible — or remove entirely)

如果用户有品牌色，请覆盖此调色板。强调色应使用品牌主色；所有其他柱形/线条均保持灰色。

字体排印——使用同一字体系列，通过字号建立层级

Font:            system-ui, -apple-system, 'Segoe UI', sans-serif
                 (or the site's body font — never mix font families)

Action title:    18-20px, font-weight 700, color #0F172A
Subtitle/lead:   14-15px, font-weight 400, color #475569
Axis labels:     11-12px, font-weight 400, color #64748B
Data labels:     12-13px, font-weight 600, color #0F172A (on/near bars)
Source citation:  11px, font-weight 400, color #94A3B8

布局——开放、无边框、留白充足

• 不要在图表周围添加边框或方框。用留白分隔元素，而不是用线条。
• 不要为图表填充背景色——图表应直接置于页面的白色背景上。
• 内边距：SVG viewBox 内顶部/底部留 40-60px，两侧留 20-40px。
• 宽度：图表最大宽度应为 640-800px（最佳阅读宽度）。

网格线 — 除非必要，否则移除

• 当数据标签直接放在条形或数据点上时：同时移除网格线和数值轴。
• 当数据标签会显得杂乱（数据点 >10 个）时：使用浅色水平网格线（#F1F5F9，1px），并保留数值轴。
• 条形图中绝不使用垂直网格线。
• 轴线：仅基线使用 1px #E2E8F0。

标签 — 直接标注，不用图例

• 将数值直接放在每个条形或数据点上或旁边。 不要让读者在图例和数据之间来回对照。
• 仅在无法避免时使用图例（线条重叠、饼图／圆环图类别过多）。使用时：在底部水平对齐，布局紧凑。
• 类别标签直接放在坐标轴上——水平条形图中左对齐，垂直条形图中在下方居中。

行动型标题 — 阐明洞见，而非主题

图表标题应为完整句子，说明读者应从中得出什么结论。这是 McKinsey 和 BCG 的首要做法。

BAD:  "Revenue by Region"
BAD:  "GEO Strategy Comparison"
GOOD: "Authoritative Quotations Lift AI Visibility by 41%"
GOOD: "Content Updated Within 3 Months Earns 54% More Citations"

注释 — 精简且切中要点

• 每张图表最多添加 1-2 条标注，指向关键洞见。
• 使用细线（1px #94A3B8）和小号文本标签，不要使用方框或气泡。
• 如果图表需要大量标注才能看懂，就应简化图表。

来源引用 — 始终提供，但不要醒目

在图表下方用小号文本标注，并以细线或留白与图表分隔：

Source: [Organization], [Year]. N=[sample size]. [1-line methodology].

这一点不可妥协——它能区分可信的研究图表和博客配图。

不要这样做

• 不使用 3D 效果、渐变、阴影或圆角条形端点
• 不在图表区域内使用装饰性图标或插图
• 不使用鲜艳的多色调色板（彩虹图表会损害可信度）
• 不使用超过 5 个扇区的饼图（改用水平条形图）
• 不使用缺少配套对比表的雷达图／蜘蛛网图
• 不在图表区域后方使用深色或彩色背景
• 不使用“图表 1”或“图 A”标签——始终使用行动型标题

第 4 步：编写文本层（对 GEO 至关重要）

每张图表都必须配有以下文本——AI 实际引用的正是这些内容：

4A：结论标题（H2 或 H3）

在标题中写出关键发现。AI 引擎会利用标题检索内容片段。

BAD:  <h3>Chart 1: Performance Results</h3>
GOOD: <h3>AI Overviews Cite Top-10 Pages 78% of the Time</h3>

4B：关键发现摘要（40-60 词）

紧接在图表上方。这是可供引用的内容单元。

Key finding: [Subject] [verb] [object] by [specific number]. Based on [methodology]
of [sample size] [items] between [date range], [subject] outperformed [comparison]
across [N] of [M] tested criteria. [One sentence of practical implication].

规则：

• 不使用代词——明确写出主体名称
• 至少包含 1 个具体数字
• 无需上下文也能独立理解
• 少于 60 词

4C：来源与方法说明

在图表下方直接以小号文本标注。

Source: [Organization Name], [Year]. [N] [items] analyzed from [date] to [date].
Methodology: [1-sentence description of how data was collected/analyzed].

4D：“这意味着什么”段落（2-3 句）

放在图表之后。AI 模型会引用解读，而不只是数据。

What this means: [Practical interpretation]. For [audience], this suggests [action].
[One comparison or context point with a named source].

第 5 步：创建数据表

每张图表都必须配有对应的 HTML 数据表。AI 引擎会直接解析表格。

<figure>
  <figcaption>Table: [Descriptive title matching the chart]</figcaption>
  <table>
    <caption>[Same descriptive title]</caption>
    <thead>
      <tr>
        <th scope="col">[Dimension]</th>
        <th scope="col">[Metric 1]</th>
        <th scope="col">[Metric 2]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">[Row label]</th>
        <td>[Value]</td>
        <td>[Value]</td>
      </tr>
    </tbody>
  </table>
</figure>

规则：

• 使用 <thead>、<tbody>、<th scope>、<caption>——完整的语义化标记
• 表格中的数值必须与图表完全一致
• 在列标题中注明单位，不要在每个单元格中重复标注
• 提供可下载的 CSV：<a href="data.csv" download>Download data (CSV)</a>
• 表格应位于 DOM 中（不要通过 JS 延迟加载），以便爬虫读取

第 6 步：添加结构化数据

为数据集添加 JSON-LD：

{
  "@context": "https://schema.org",
  "@type": "Dataset",
  "name": "[Chart title — the takeaway heading]",
  "description": "[Key finding summary from Step 4B]",
  "temporalCoverage": "[Start date]/[End date]",
  "variableMeasured": [
    {
      "@type": "PropertyValue",
      "name": "[Metric name]",
      "unitText": "[Unit]"
    }
  ],
  "creator": {
    "@type": "Organization",
    "name": "[Brand/Author name]"
  },
  "datePublished": "[ISO date]",
  "license": "https://creativecommons.org/licenses/by/4.0/",
  "image": {
    "@type": "ImageObject",
    "contentUrl": "[Chart image URL or inline reference]",
    "caption": "[Key finding summary]",
    "encodingFormat": "image/svg+xml"
  },
  "distribution": {
    "@type": "DataDownload",
    "encodingFormat": "text/csv",
    "contentUrl": "[CSV download URL]"
  }
}

步骤 7：图像优化

GEO 的关键原则：AI 引擎引用的是文本，而非像素。 图表图像是为人类读者准备的。AI 实际提取并引用的是文本摘要、HTML 数据表和 JSON-LD。没有文本层的图表对大模型来说是不可见的。

不要为了达到目标数量而添加视觉元素。只有在图表能够呈现数据、说明流程或证明观点时，才添加图表。装饰性图形不会带来任何 GEO 价值。

对于图表图像文件本身：

• 文件名：描述性名称，使用连字符。示例：ai-overview-citation-rate-by-rank-2025.svg
• 替代文本：描述结论，而非视觉形式。AI 模型和屏幕阅读器都需要了解要点，而不是对柱形和坐标轴的描述。
  • 不佳："Bar chart showing data" 或 "Chart 1"
  • 良好："GEO-optimized pages earn 41% more AI citations than unoptimized pages (KDD 2024, N=10K queries)"
• 尽可能将替代文本控制在 125 个字符以内；使用数据表提供扩展说明
• 压缩：SVG → 使用 SVGO 处理。WebP → 质量设为 80。PNG → 仅用作备用格式。
• 延迟加载：对首屏以下的图表图像添加 loading="lazy"。首个可见图表绝不要延迟加载。
• 添加到图像站点地图，以便更快被发现
• 使用 <figure> + <figcaption> 包裹每个图表——<figcaption> 文本可被爬取和引用

步骤 8：内部链接

• 在相关博客文章和指南中链接到图表页面（“查看我们的[基准数据 →]”）
• 从图表页面链接到更深入的分析页面
• 使用包含关键发现的描述性锚文本，不要使用“点击此处”
• 如果图表位于独立的数据页面上，请从网站的 llms.txt 链接到该页面

---

步骤 9：视觉 QA——渲染并在交付前核验

生成任何图表后，必须在交付给用户之前用浏览器打开并进行目视检查。 SVG 坐标计算容易出错——元素经常溢出、重叠或被裁切。

QA 流程

1. 将图表保存为 HTML 文件
2. 在浏览器中打开（使用 open 命令）
3. 检查以下常见 SVG 问题：

问题	检查内容
文本溢出	标签或标注框是否超出 SVG viewBox 边缘——尤其要留意右侧文本、较长的注释以及区域/图例标注
文本裁切	数据标签是否被图表顶部（y 值过小）或底部（基线以下）裁切
重叠	条形标签是否互相重叠，尤其是行数较多的水平条形图
未对齐	数据标签是否未在其条形/数据点上方居中
坐标轴不匹配	数据值在视觉上是否与坐标轴刻度不一致
可读性	渲染后的文本是否过小、与背景的对比度是否过低

安全的 SVG 布局规则

• 右边距：所有元素与 viewBox 右边缘至少保持 20px 的距离
• 上边距：条形上方的数据标签与 viewBox 顶部至少保持 20px 的距离
• 较长文本：如果标注或注释宽度超过约 200px，请将其拆分为多个 <tspan> 行，或缩短文本
• ViewBox 尺寸：将 viewBox 宽度设为 680px，并将高度设为能够容纳所有内容且四周留出 20px 内边距。应调整高度，而不是挤压元素。

如果发现问题

立即修复——调整坐标、缩短文本、换行或扩大 viewBox。然后重新打开并核验修复结果。绝不要交付未经目视确认的图表。

---

与其他技能集成

此技能旨在与 write-seo-geo-content 和 geo-content-research 技能配合使用。

从 write-seo-geo-content 调用时

博客撰稿人可能会请求为第 3 部分（问题统计）或第 4 部分（解决方案对比）制作图表。为博客文章制作图表时：

• 与文章的标题层级保持一致——图表的行动标题使用 <h3>（而非用于文章章节的 <h2>）
• 将图表嵌入文章内容流中——不要另建页面
• 关键发现摘要和“这意味着什么”段落同时作为文章正文——采用文章的语气撰写
• 仍须包含 HTML 数据表和 JSON-LD——它们有助于提升文章的整体 GEO 评分

从 geo-content-research 调用时

GEO 技能可能会请求为第 4 阶段的数据与证据页面制作图表。为这些页面制作图表时：

• 图表的行动标题使用 <h2>——这些页面是独立的数据页面
• 包含完整的 CSV 下载文件和数据集架构
• 这些页面旨在成为主要的可引用来源——数据表应全面详尽
• 添加指向对比中心页和类别指南页的链接

---

完整输出模板

每个图表都必须包含以下所有内容：

1. TAKEAWAY HEADING
   <h2>AI Overviews Cite Top-10 Pages 78% of the Time</h2>

2. KEY FINDING SUMMARY (40-60 words, above chart)
   [Text block]

3. CHART
   [SVG code / Mermaid code / Chart config]

4. SOURCE & METHODOLOGY (below chart)
   Source: [Org], [Year]. N=[sample]. Methodology: [1 sentence].

5. "WHAT THIS MEANS" (2-3 sentences, after chart)
   [Interpretation paragraph]

6. DATA TABLE (HTML)
   [Full semantic <table>]

7. DOWNLOADABLE DATA
   [CSV content or link]

8. STRUCTURED DATA (JSON-LD)
   [Dataset schema]

9. IMAGE METADATA
   - Filename: [descriptive-name.svg]
   - Alt text: [conclusion-focused description]
   - Figcaption: [visible caption text]

---

质量检查清单

交付任何图表前，请确认：

• 结论标题用具体数字说明关键发现
• 关键发现摘要少于 60 个词，且内容完整、可独立理解
• 图表最多使用 3 种颜色（1 种强调色 + 灰色），不使用边框或背景填充
• 行动标题以完整句子说明洞见
• 在柱形或数据点上直接标注数据——无需图例
• 移除网格线（必要时使用近乎不可见的 #F1F5F9）
• 在图表正下方注明来源和方法
• “这意味着什么”段落提供可操作的解读
• HTML 数据表包含完整的语义标记（thead、th scope、caption）
• 表格数值与图表数值完全一致
• 提供 CSV 或可下载数据
• 数据集 JSON-LD 架构包含 variableMeasured 和 temporalCoverage
• 使用描述性文件名（而非 chart1.png）
• 替代文本描述结论，而非视觉形式
• 使用 <figure> + <figcaption> 包裹
• SVG 使用 <text> 元素（而非预先绘制的文本），并包含 role="img"、aria-labelledby
• 元素对比度至少为 3:1，文本对比度至少为 4.5:1
• 不仅依靠颜色传达含义
• 不得编造数据——每个数字都必须有可核验的来源
• 规划好内部链接：图表 ↔ 相关内容页面
• 视觉 QA 已通过：已在浏览器中打开图表，并确认没有文本溢出、裁切、重叠或错位。所有元素与 viewBox 边缘的间距均至少为 20px。