制作信息图的分步指南（含 AI）：

你的大脑喜欢图像。

因为大脑处理图像而非文本来理解世界的部分更多。

所以当我在 LinkedIn 上写作时，我大部分工作实际上是在制作图片。

也正是这一点，让我一年获得了 1.36 亿次曝光。

而且 10 篇帖子中有 9 篇是图片配文字。

而且 10 篇帖子中有 9 篇是图片配文字。

人们会忘记读过的内容。他们会记住看到的内容。

我知道你在想什么。这又是一篇 AI 指南，你会照着做，然后做出跟别人一样的信息图，只有我这个作者能靠它得到好结果。

是的，这是一篇 AI 指南。但同样，是的，如果你照着做，你会得到属于你自己的好结果。假一赔十。

开始之前先说两件事：

1. 把这篇文章收藏起来。它很长，你需要时间消化。在日历上预留 15 分钟，然后一步一步跟着做。

2. 把它转发给办公室里那位只会发超棒文字长文、却配得上最好信息图的同事。

1. 一切都是代码，连你也是。

如果你真的、真的深入思考，一切都是代码。

一切都是代码，连你也是。

一切都是代码，连你也是。

这就是为什么 AI 实验室对代码如此狂热，因为代码不仅可以用来做网站，还可以做图片、视频、Excel。可能你的所有工作都可以被代码化，这也是为什么我们看到世界因 AI 而如此快速变化。

我并不是要说你会消失、一切都不重要，我只是想说：你可以在完全不懂代码的情况下，用代码制作出可爱、酷炫、易于理解的信息图。

1. 打开 Claude。

2. 确保使用的是主标签页。代码标签页会把信息图复杂化。

3. 在右下角选择模型，Opus 或 Fable。它们的效果更好，但 Fable 很贵，所以我通常用 Opus。

4. 上传一张或多张图片，帮助 Claude 弄清楚你需要的风格，然后上传它们。猜猜怎么着？如果你处理图像比处理文字更在行，LLM 也一样。

5. 现在复制并粘贴这个提示词：

你是这个项目的设计负责人。我不是设计师，最终决定由我来做，所以请用通俗易懂的语言跟我沟通。

附件中的参考图片就是我想要的外观。一起研究它们，并提取它们所共有的设计系统。

• 阅读参考资料。识别：调色板，用 4-6 个带角色的命名十六进制值（背景、表面、文字、强调色、弱化色）；排版，对应 2-3 个角色（展示、正文、工具/标签）——如果某个字体不是免费可用的，请说出最接近的 Google Font 并说明它做了哪些取舍；间距节奏、圆角、边框和阴影处理、密度；布局逻辑；以及让这种风格具有辨识度的那个标志性元素。

• 用不到 200 字回复，不要用行话。对于每个选择，说明它是什么以及它对读者起什么作用（“暖米白色上的近黑色文字——平静，像印刷品一样易读”）。标注出任何你是在推测而非真正看到的内容。

• 在参考资料不一致的地方，或者真正需要做决定的地方，问我。使用 AskUserQuestion 工具，最多 2-4 个问题，用通俗语言给出选项并说明取舍。不要问任何你能从图片中得到答案的问题。

• 然后编写 DESIGN_SYSTEM.md：一个 :root CSS 变量块、带有具体字号和字重的字体比例、间距和圆角数值、Google Fonts 的 link 标签、一段布局逻辑说明、标志性元素，以及一张简短的“这种设计绝不做”清单，列出会破坏这种风格的东西。

• 构建 tokens-preview.html——一页展示色板、字体比例和一个示例卡片——这样在我们使用之前我可以先看到这个系统。截图，跟我的参考图对比，修复任何偏离的地方。

• 暂时不要设计其他任何东西。忠实于我的参考图，这比你的个人品味更重要。如果你通常会更大胆，请在最后把它作为一个可选项提出来，而不是直接使用。

6. 当你对风格预览满意后，把你想要放在信息图中的信息粘贴进去（或者你也可以让 Claude 在制作之前先帮你搜索）。

7. 生成你的图片。

如果你觉得这些说明操作起来有困难，下面是带截图的分步过程：

选择 Opus 或 Fable。我会用 Opus，因为它更便宜。📷

上传你的图片，并粘贴上面的提示词。

点击“加号”，然后点“添加文件或照片”来上传你的参考资料。复制并粘贴我之前给你的提示词。

点击“加号”，然后点“添加文件或照片”来上传你的参考资料。复制并粘贴我之前给你的提示词。

现在生成。

模型会开始问你问题。回答它们以优化你的提示词。

模型会开始问你问题。回答它们以优化你的提示词。

完成后，你应该会得到类似这样的东西：

点击预览。它会展示你信息图的视觉设计元素。

点击预览。它会展示你信息图的视觉设计元素。

Claude 称之为“设计系统”。

当你确认这些元素符合你的喜好后，让模型用刚才给出的系统，结合你的信息来制作信息图。

我在这里没有提供信息，所以模型自己搜集了。

我在这里没有提供信息，所以模型自己搜集了。

注意到它如此彻底地反复自我检查了吗？这就是你判断我们提示词质量好的依据。

完成了。就这么简单。挺酷的，对吧？

完成了。就这么简单。挺酷的，对吧？

用代码做信息图的一大好处是它永远不会“画错”，因为这就好比画一张表格和用 Excel 做表格之间的区别。

HTML 图像是精确的，没有某些 AI 图片那种模糊不清的感觉。看看编辑它有多容易：

这里我只是让它改了颜色和字体。但你可以让它改任何东西。

这里我只是让它改了颜色和字体。但你可以让它改任何东西。

这是它给我的结果：

这个调色板对眼睛柔和多了。

这个调色板对眼睛柔和多了。

现在，假设你刚刚做了一张超级酷的信息图，想用同样的风格重新做一张，但换成不同的信息。

回到你的原始提示词，直接点击“编辑”来更换主题：

点击这个按钮，重写你想要的信息。

我从一张关于信息留存率的信息图，变成了一张关于咖啡因摄入的信息图。而且它仍然有效。

我简直不敢相信这居然这么简单。

我简直不敢相信这居然这么简单。

当你的参考图片质量很高时，这种方法效果尤其好。

我最喜欢的参考图来源是 Pinterest，几乎什么都能找。我的做法是：用一个最多两个词的关键词搜索。按回车。点开我最喜欢的那张图片，然后 Pinterest 就会带你进入图片的兔子洞。你越点开新图片，结果就越好。

对于网页设计，你应该试试 Awwwards、Godly、CSS Design Awards、Dribbble 或 Refero。复制一张图片，上传到 Claude，那就是你的参考。

试试吧。非常有趣。

2. ChatGPT 仍然擅长一件事。

这是人人都知道的 AI 绘图技巧。

它叫扩散模型。

AI 不断细化随机“噪声”，直到它变成一张图片。

你输入一段描述，AI 为你绘制像素。

而市场上公认的第一名显然是 ChatGPT：

这是 LMArena.ai 在 500 万次投票后的官方排行榜。

这是 LMArena.ai 在 500 万次投票后的官方排行榜。

给它提示词其实非常简单。你只需要：

• 上传一张你喜欢的图片。

• 粘贴你的信息，或者让 ChatGPT 自己搜索。

• 生成图片，可以选择任意比例，然后反复编辑它。

下面是分步操作：

点击“加号”，然后“创建图片”。

这会立刻告诉系统，你要的是图片，不是文字。

现在上传你的参考资料，然后告诉它你想要什么。

我选择了一些视觉上很复杂的图片，来向你展示扩散模型可以有多精准。

这是 ChatGPT 生成的信息图。要我说，相当精准。

这是 ChatGPT 生成的信息图。要我说，相当精准。

但正如我说的，你可以编辑它。

就像这样。

就像这样。

什么时候应该用 ChatGPT（+扩散模型）？

• 视觉元素较多的信息图

• 你不需要频繁修改数据

• 你更看重视觉控制，而非数据控制

什么时候应该用 Claude（+HTML）？

• 数据密集的信息图

• 你需要比较频繁地修改数字

• 你更看重零错误，而非艺术效果

但如果能……两者兼得呢？

3. 鱼与熊掌，你全都要。

我也是，朋友，我可是个地道的法国人。

还记得我答应你的补救办法吗？

就是这个 → 别选。两个都用。

• 让扩散模型（也就是 ChatGPT）来构建背景。

• 让代码（也就是 Claude）来构建图表和数字。

做法如下：

在 ChatGPT 中打开一个新对话。

再次点击“加号”和“创建图片”。

写下你的背景图片提示词并生成。

让它为信息图创建一张背景图片。

让它为信息图创建一张背景图片。

专业提示：记得让它为文字和图表留出空白空间。

现在打开 Claude，上传 ChatGPT 刚刚生成的图片，让它用你刚生成的图片作为信息图的背景。

我用的提示词是：

用这张图片作为背景，创建一份关于各地区地震频率和震级的 HTML 信息图。先做研究并找到相关信息，再把它放进去。确保任何标注不会遮住其他文字或数据。确保信息放在最底部，这样不会遮住地图。地图上的任何标注都不应遮住地图的大部分区域。如果有必要，让图片更纵向一些，以便完整地图仍然可见。

我特意说明了我想要一份 HTML 格式的信息图。这一点很重要。

如果你用我之前展示的方法建了一个设计系统，那就直接用它。

完成了。我可能有点偏心……但这真的很漂亮。

完成了。我可能有点偏心……但这真的很漂亮。

现在你就在结合静态艺术（扩散模型）和动态元素（代码）了。

（更）快速地制作信息图。

你可以教会 Claude 一次你喜欢的信图风格，把它变成一个技能。

品牌色。字体。参考资料。甚至是你最喜欢的截图。

但在我教你怎么做之前，我想让你知道这个策略的问题：它非常重复。所以如果你必须保持一致性，它非常完美；但如果你想要多样化的信息图风格，它就不太合适了。

下面是分步操作：

把我们之前创建的设计系统找回来。现在不是当“跳读党”的时候。回到本期通讯的第一部分。

点击以 .md 结尾的“Design system”文件，打开预览。

然后点击右上角的向下箭头，再点击“Download as MD”，就像这样：

这里有一张快速图示，帮助你掌握这些步骤。

这里有一张快速图示，帮助你掌握这些步骤。

现在打开一个新对话，上传你刚刚下载的设计系统。

就像这样：

点击“加号”，然后“添加文件或照片”，选择我们刚下载的 Design system 文件。

上传完成之后，我们就可以开始创建技能了。

输入或粘贴：/skill-creator

点击弹出的选项。这会打开 Anthropic 的技能创建器。

点击弹出的选项。这会打开 Anthropic 的技能创建器。

现在，把这段提示词复制并粘贴到对话中，然后生成：

它会看起来有点像这样。

它会看起来有点像这样。

技能生成完成后，你会看到保存该技能的选项。

点击“保存技能”。

点击“保存技能”。

现在，每当你需要制作信息图时，都可以使用这个技能，而你的提示词可以简单到令人发指。

看看吧。

现在你的提示词可以随意简单或复杂，因为繁重的工作都由技能来承担了。

现在你的提示词可以随意简单或复杂，因为繁重的工作都由技能来承担了。

这是最终结果：

我是说，真的没谁了。

我是说，真的没谁了。

你学会了，但你的团队没有。

教会一个人用 AI，和让一百个人在公司里真正采用 AI，完全是两回事。我的团队每周都会和那些懂 AI 的 CEO 和幕僚长们交流，他们就是不明白为什么公司从 AI 中获益要花这么长时间。他们只是从来没关心过一个普通人是怎么用 AI 的（剧透警告：他们不用，或者假装在用）。

如果你觉得我在针对你，因为你有一条没人执行的 AI 路线图，或者你根本没有 AI 路线图，并且正在担心企业未来几年的发展，那就给我发消息吧。我很乐意和你聊聊。

但如果你公司员工不到 100 人，我还有别的东西给你。

我在 Circle 上建了一个社区，让你可以每周跟我通一次电话。

上周，我和 39 个人一起做了一场 AI 直播通讯。

我没法为你制定完整的路线图，也没法为你的整个公司做工作坊，但我相信我仍然可以帮助你为成功做好准备。

所以，如果你想加入这个 Circle，先点这个链接：http://how-to-ai.guide/

来自作者 Ruben 的话。

这篇文章之所以存在，是因为有 91,000 多人认定 AI 太重要了，不能置之不理。不仅如此，他们还在身边传播分享。他们明白，自己就是身边 5 个人的总和。所以最好让他们也用上 AI。

如果这篇文章帮到了你——或者可能帮到你认识的某个人——请把它转发给他们。这就是它成长的方式。就是像你这样的读者，把它发给像他们那样的人。

如果你是新来的，请在 X 上关注我 →@rubenhassid（也是免费的！）