预计阅读时间：6 分钟 | 难度：初级

你将完成什么

在不到 60 秒的时间里，你将创建一张完整设计的信息图——包含布局、颜色、排版和结构化数据——仅仅基于一句描述主题的话。而且你可以通过双击来编辑其中的任何文字。

我们将涵盖以下内容：

• 理解"自定义"信息图类型
• 编写一个能生成完整图形的单句提示词
• 通过双击内联编辑文字
• 通过自然语言优化设计
• 将最终结果导出为 WebP

工作原理：HTML + AI 的魔力

在开始之前，先来看看底层发生了什么：

1. 你用中文输入一个主题
2. VisualGEO 将其发送给 AI，AI 生成自包含的 HTML + CSS——无需外部依赖
3. HTML 在 Shadow DOM（一个密封的容器，防止应用 CSS 泄露进去）内部渲染
4. 结果是一个干净、样式化的信息图，你可以通过双击任何文字元素进行编辑

这种方法让 30 秒出图成为可能。AI 处理所有设计决策——布局、色彩协调、排版、间距、数据呈现——你不需要调整任何 CSS 属性。

第一步：打开创建器并选择"自定义"

访问 VisualGEO 创建页面，按向导操作：

1. 类别： 选择"GEO 图像"
2. 类型： 选择"自定义"（这就是信息图类型）
3. 比例： 选择你偏好的比例（1:1 是安全的默认选项）
4. 模式： 选择"AI 生成"

你将进入编辑器，左侧是 AI 聊天面板，右侧是空白的预览区域。

💡 专业提示： 你可以使用 URL 参数跳过整个向导。试试：https://visual-geo.art/create?type=custom&ratio=1:1&skip=true 直接跳转到编辑器。

第二步：编写提示词

这是唯一需要动脑的步骤。30 秒信息图的关键在于具体、结构化的提示词。

公式

[格式类型]展示[主题]。包括[具体数据点]。使用[风格/氛围]。

糟糕的提示词（太模糊）

制作一张关于 SEO 的信息图。

AI 会生成一些内容，但不会有具体的可提取数据——这意味着 AI 搜索引擎没有实质内容可以引用。

好的提示词（具体且数据丰富）

创建一个统计卡片，显示 73% 的用户从未滚动超过 AI 搜索结果的第一页。加粗数字：73%。来源：行业报告 2026。专业的蓝白风格。

按格式划分的优秀提示词

格式	示例提示词
对比表	"创建一个对比表，在 6 个维度上比较 GEO vs SEO：目标平台、目标、指标、优化重点、见效时间、竞争壁垒。使用专业风格，蓝色表头。"
流程图	"设计一个 4 步流程图，解释 RAG 的工作原理：1）用户查询，2）内容检索，3）上下文注入，4）LLM 综合。每步编号，带清晰的指向箭头。简洁极简风格。"
统计卡片	"统计卡片显示 95% 的 AI 引用来自非付费媒体。大号数字：95%。副标题：'Muck Rack，2026'。极简风格，粗体排版。"
定义区块	"定义区块解释 GEO：'生成引擎优化是一种优化内容以被 ChatGPT 和 Perplexity 等 AI 搜索引擎引用的实践。'包括你的品牌名称 VisualGEO 作为来源。干净现代风格。"
时间线	"时间线信息图展示搜索的演变：1998 Google 成立 → 2010 SEO 时代 → 2023 GPT 发布 → 2024 AI Overviews → 2025 RAG → 2026 GEO。专业暗色主题。"

本教程请使用这个提示词：

创建一个对比信息图，展示 GEO vs SEO。包括 5 个维度：首要目标、目标平台、成功指标、见效时间、内容风格。使用干净的配色方案，深色标题搭配白色背景。以表格格式呈现。

第三步：观看生成过程

点击生成后，实时发生的事情如下：

┌─────────────────────┐
│  AI 思考中...        │
│                      │
│  • 分析主题          │
│  • 选择布局          │
│  • 生成 HTML         │
│  • 应用样式          │
│  │││││││││││││││→   │  ← 流式进度
│                      │
│  ✅ 完成！           │
└─────────────────────┘

AI 的推理过程会在聊天面板中流式显示——你会看到它在思考：

• 哪种格式最适合你的主题
• 如何组织信息层次结构
• 什么配色方案与你描述的氛围匹配
• 每个元素放在什么位置实现视觉平衡

几秒之内，右侧的预览面板就会显示你完成的信息图。

第四步：用双击编辑文字

自定义 HTML 格式最强大的功能之一是内联编辑：

1. 双击预览中的任何文字元素
2. 文字变得可编辑——就像文本输入框一样
3. 输入你的更改
4. 点击外部或按 Escape 键确认

试试看：

• 将标题改得更具体一些
• 修正任何需要更新的数据点
• 在署名行添加你的品牌名称

这是因为 Shadow DOM 隔离了每个文字节点，使其可以独立编辑，而不影响周围的布局或样式。

💡 专业提示： 内联编辑适合快速调整。对于更大的改动——比如切换整个布局或配色方案——请使用 AI 聊天框。输入'改成垂直格式'或'改用暗色背景'，AI 会在保留文字内容的同时重新生成。

第五步：用自然语言优化

如果你想要修改，不需要从头开始。只需在聊天框中输入优化要求：

你可以说的一些话：

• "添加第三列，展示 AEO（答案引擎优化）"
• "将配色方案换成暗色模式，搭配紫色强调色"
• "把文字调大，增加行间距"
• "在底部添加来源引用：'VisualGEO Research，2026'"
• "把这个从表格转换为编号列表格式"

AI 会重新生成设计，同时保留你现有的内容结构。这是最快的迭代方式——没有手动设计工具能赶上这个速度。

第六步：设置 Alt 文本（用于 GEO）

在导出之前，检查自动生成的 alt 文本。VisualGEO 使用生成图形时相同的提示上下文来创建 alt 文本，因此它准确描述了图像包含的内容。

验证它能否通过闭眼测试：

• 闭上眼睛
• 让别人朗读 alt 文本
• 你能在脑海中画出信息图的样子吗？

如果不能，请编辑 alt 文本字段。目标是在描述中包含图形的主要主题、区块或数据点的数量，以及 1-2 个具体的数字。

第七步：导出为 WebP

点击导出并选择：

设置	值	原因
格式	WebP	对文字密集型图形提供最佳压缩
质量	95%	保持文字边缘清晰锐利
分辨率	2x	在 Retina 显示屏上看起来清晰细腻

下载自动开始，文件名是从你的 alt 文本派生的 SEO 友好格式。

总耗时： 从提示输入到下载完成，不到 60 秒。

真实案例

案例 1：营销 ROI 统计卡片

提示词： "统计卡片：内容营销带来的线索是有广告的 3 倍。数字：3x。来源：DemandMetric。大胆的绿色强调色。"

结果： 一张干净、醒目的统计卡片，包含大号"3x"数字、支持文字和来源引用——随时可以嵌入关于内容营销 ROI 的博客文章。

案例 2：敏捷 vs 瀑布对比

提示词： "对比表：敏捷 vs 瀑布 vs 混合项目管理。维度：方法、灵活性、交付方式、客户参与度、风险管理。专业蓝色风格。"

结果： 一个三列对比表，包含清晰的表头、勾选标记和结构化的行——这正是 AI 搜索引擎在处理"X vs Y"类查询时喜欢引用的格式。

案例 3：DNS 工作原理流程图

提示词： "5 步流程图：DNS 如何工作。步骤：1）用户输入 URL，2）浏览器检查缓存，3）查询 DNS 解析器，4）解析器查询根服务器，5）IP 返回浏览器。带箭头的编号框。简洁的技术风格。"

结果： 一个技术流程图，包含编号步骤、方向箭头和简洁的标签——非常适合教育类内容。

更快创建的小技巧

使用 URL 快捷方式

收藏这些链接，一键访问：

• https://visual-geo.art/create?type=custom&ratio=1:1&skip=true——正方形自定义信息图
• https://visual-geo.art/create?type=custom&ratio=16:9&skip=true——宽屏自定义信息图
• https://visual-geo.art/create?type=image&ratio=4:5&skip=true——竖屏主图

保存好用的提示词

当你发现一个效果很好的提示词时，保存下来。一个包含 10-15 条提示词的小型库，覆盖你最常用的信息图格式，意味着你可以在 15 秒内按需生成。

批量创建保持一致性

在同一个会话中创建多个信息图——当你在同一次使用相似的提示词时，AI 会在多个图形之间保持风格一致。这对于为单篇博客文章或营销活动创建一组图形非常有用。

下一步

你已经掌握了 30 秒信息图的工作流程。接下来可以做什么：

1. 创建一组对比图——针对你行业中的 3-5 个"X vs Y"主题
2. 嵌入到你的热门博客文章中——用数据丰富的信息图替换库存照片
3. 追踪哪些被引用了——向 ChatGPT 询问相关问题，看看你的图形是否被引用
4. 试试视频教程——学习如何创建带 AI 旁白的无面视频

准备好创建下一个了吗？ 立即访问 VisualGEO 开始制作新信息图。