用 AI 制作信息图的分步指南

用 AI 制作信息图的分步指南：August 5, 2026 · 12 min read · View source ↗ AI Claude Pinterest Linkedin 你的大脑爱图片。 因为你的大脑用更多区域来处理图像，而不是文字，来理解这个世界。 所以当我在 Linkedin 上写作时，我大部分的工作其实是做图。 而正是这个，让我一年拿到 1.36 亿次展示。 ——"而且 10 条帖子里有 9 条是图片，配文字。" 人们忘记自己读过的东西。他们记住自己看过的东西。 我知道你在想什么。这又是一篇 AI 指南，你要照做，然后做出跟所有人一样的信息图，而只有我，作者本人，才能用它拿到好结果。 是的，这是一篇 AI 指南。但也对，如果你照着做，你就会拿到属于你自己的、好的结果。不满意包退。 开始前有两件事： - 把这篇指南收藏起来稍后用。它很长，你需要一点时间消化。在你的日历上订 15 分钟，跟着每一步走。 - 把它发给办公室里那个只会发一堆"值得配最好信息图"的纯文字墙的同事。 1. 一切都是代码，连你也是。 如果你真的、真的深入去想，一切都是代码。 ——"一切都是代码，连你也是。" 这就是为什么 AI 实验室对代码如此狂热，因为代码是做网站的方式，但也是做图片、视频、Excel 的方式。你工作里的每一样东西大概都能被代码化，而这就是为什么我们看到世界正随着 AI 变得如此之快。 现在，我不是来跟你说你会消失、什么都不重要，只是说：你可以在不懂代码的情况下，用代码做出可爱、酷、好消化的信息图。 去 Claude。 确保用 home 标签页。code 标签页会把信息图搞复杂。 在右下角，选择模型，Opus 或 Fable。它们会做得更好，但 Fable 很贵，所以我通常用 Opus。 上传一张或多张图片，帮 Claude 搞清你需要的风格，然后把它们传上去。猜猜怎么着？如果你处理图片比处理文字更好，LLM 也一样。 现在复制粘贴这个提示词： > 你是这个项目的设计负责人。我不是设计师，最终拍板的是我，所以用大白话跟我说话。 > > 附上的参考图是我想要的样子。把它们放在一起研究，提取它们共享的设计系统。 > > • 读这些参考图。识别出：作为 4-6 个带角色命名的 hex 值的调色板（背景、表面、墨色、强调色、弱化色）；2-3 个角色的字体（展示、正文、工具/标签）——如果某个字体不能免费获得，就说出最接近的 Google Font，并说明它取舍了什么；间距节奏、圆角、边框和阴影处理、密度；布局逻辑；以及那个让这个风格可辨识的标志性元素。 > > • 用 200 字以内汇报，不用术语。对每一个选择，说出它是什么、它对读者做了什么（"暖米白上的近黑文字——平静，读起来像印刷品"）。标出任何你在推断、而非真正看到的东西。 > > • 在参考图互相矛盾、或某个真实决定仍然悬而未决的地方，问我。用 AskUserQuestion 工具，最多 2-4 个问题，大白话选项，把取舍说清楚。任何你能从图片里回答的，都别问我。 > > • 然后写 DESIGN_SYSTEM.md：一个 :root CSS 变量块、带具体字号和字重的字体比例、间距和圆角值、Google Fonts 链接标签、一段布局逻辑、标志性元素，以及一个"这个设计绝不做什么"的简短清单，列出会毁掉这种风格的东西。 > > • 构建 tokens-preview.html——一页展示色板、字体比例，和一张示例卡片——这样我能在我们用之前先看到系统。截个图，跟我的参考图对比，修掉任何跑偏的地方。 > > • 还不要设计任何别的东西。这里对你的参考图的保真，胜过你自己的品味。如果你通常会做一个更大胆的选择，把它作为一个选项记在最后，而不是直接用。 一旦你对风格预览满意了，就粘贴你想放进信息图里的信息（或者你可以让 Claude 在做之前先帮你搜索）。 生成你的图片。 如果你跟不上这些指令，这里是带截图的分步流程： 选 Opus 或 Fable。我会用 Opus，因为它更便宜。📷 上传你的图片，粘贴上面的提示词。 ——"点'加号'，再点'Add files or photos'来上传你的参考图。复制粘贴我之前给你的提示词。" 现在生成。 ——"模型会开始问你问题。回答它们来细化你的提示词。" 做完后，你应该得到类似这样的东西： ——"点 preview。这会展示你信息图的视觉设计元素。" Claude 把这叫做"设计系统"。 一旦你核对过这些元素合你心意，就让模型用你刚给的系统，配上你的信息，去做你的信息图。 ——"这里我没有提供信息，所以模型替我搜集了。" 注意到它自我检查得多仔细了吗？这就是你知道我们有个好提示词的信号。 ——"完成。就这么简单。挺酷的，对吧？" 把信息图代码化的一大好处是，它永远不会错，因为这就好比"画一张表"和"一张 Excel 表格"的区别。 一张 HTML 图片是精确的，没有某些 AI 图片那种糊糊的感觉。看看它改起来多容易： ——"这里我只是让它改了颜色和字体。但你可以让它改任何东西。" 这是它给我的： ——"这个配色对眼睛柔和多了。" 现在，假设你刚做了一张超酷的信息图，你想用同样的风格、但换成不同的信息再重做一张。 回到你原来的提示词，简单地按"Edit"来换主题： 按这个按钮，重写你想要的信息。 我从一张关于信息留存的信息图，变成了一张关于咖啡因摄入的。而且这还是照样能用。 ——"我无法接受这有多简单。" 当你的参考图质量很高时，这特别好用。 我最爱的地方是 Pinterest，几乎对一切。我的做法是，用最多一两个词做个查询。按回车。点我最喜欢的那张图，然后 Pinterest 就把你送进图片的兔子洞。你点的新图越多，它就越变越好。 做网页设计，你应该试试 Awwwards、Godly、CSS Design Awards、Dribbble，或 Refero。复制一张图，传到 Claude，那就是你的参考。 试试。很好玩。 2. ChatGPT 在某一件事上还是很行。 这是人人都知道的做 AI 图片的技术。 它叫扩散（diffusion）。 AI 反复精炼随机"噪点"，直到它变成一张图。 你打一段描述，AI 给你画像素。 而市场上明确的 #1 领导者，就是 ChatGPT： ——"这是 LMArena.ai 在 500 万次投票后的官方排行榜。" 现在，给它提示词相当容易。你只需： - 上传一张你爱的图片。 - 粘贴你的信息，或让 ChatGPT 去搜索。 - 生成图片，任何比例，然后一遍又一遍地编辑它。 这是分步： 点"加号"，再点"Create image"。 这立刻告诉系统，你要的是图片，不是文字。 现在上传你的参考图，告诉它你要什么。 我挑了一些视觉上复杂的图片，好让你看看扩散模型能有多准。 ——"这是 ChatGPT 做的信息图。要我说，相当准。" 但如我所说，你可以编辑它。 ——"像这样。" 什么时候该用 ChatGPT（+扩散）？ - 视觉重信息图 - 你不需要改动太多数据 - 你更喜欢视觉控制，而非数据控制 什么时候该用 Claude（+HTML）？ - 数据重信息图 - 你需要频繁改动数字 - 你更喜欢 0 错误，而非艺术产出 但，两样都要不是更好吗？ 3. 你想鱼与熊掌兼得。 我也是，朋友，我超法式的。 记得我答应你的那个修法吗？ 喏，它在这儿 → 别选。两样都用。 让扩散（也就是 ChatGPT）搭背景。 让代码（也就是 Claude）搭图表和数字。 怎么做： 在 ChatGPT 里开一个新聊天。 还是点"加号"和"Create image"。 写下你的背景图提示词并生成。 ——"让它为信息图创建一张背景图。" 小提示：记得让它给文字和图表留出空白。 现在打开 Claude，上传 ChatGPT 刚做的图，让它用你刚生成的这张图作为信息图的背景。 这是我用的提示词： > 用这张图作为背景，创建一个关于"按地区的地震频率与震级"的 HTML 信息图。先做研究、找到信息，再放进去。确保任何标注都不盖住其他文字或数据。确保信息全部放在最底部，这样就不会盖住地图。地图上的任何标注都不应盖住地图的大部分。如有必要把图做得更竖一些，好让完整地图保持可见。 我特意澄清了我要一张 HTML 信息图。这很重要。 如果你用我给你展示的方法做了个系统，就用它。 ——"完成。我也许有偏见……但这张美翻了。" 现在你把静态美术（扩散）跟活元素（代码）结合起来了。 把信息图做得（甚至）更快。 你可以一次性教 Claude 你喜欢怎样的信息图，作为一个技能。 品牌色。字体。参考。甚至你最喜欢的截图。 但在教你之前，我想让你知道这个策略的问题：它很重复。所以如果你必须保持一致，它完美；但如果你想做多种风格的信息图，它就不行。 这是分步： 把我们之前做的设计系统找回来。现在不是走马观花的时候。回到这篇 newsletter 的第一节。 点那个以 .md 结尾的"Design system"文件，打开预览。 然后点右上角的下箭头，点"Download as MD"，就像这样： ——"这里有个快速视觉，帮你理清步骤。" 现在开一个新聊天，上传你刚下载的设计系统。 像这样： 点"加号"再点"Add files or photos"，还有我们刚下载的 Design system 文件。 有了这个上传，我们就能开始创建一个技能了。 写或粘贴：/skill-creator ——"点那个弹窗。这会打开 Anthropic 的技能创建器。" 现在，把这个提示词复制粘贴进聊天，然后生成： ——"它看起来会像这样。" 一旦生成完技能，你就会得到保存技能的选项。 ——"点'Save skill'。" 现在无论何时你需要做信息图，都能用这个技能，而你的提示词可以简单到令人发指。 看看。 ——"现在技能在扛重活，你的提示词想多简单或多复杂都行。" 这是结果： ——"我说真的，拜托。" 你行，但你的团队不行。 教会一个人用 AI，不等于让公司里一百个人都采用它。而每周，我和我的团队都会跟那些懂 AI、却就是不明白"公司为什么要这么久才从它获益"的 CEO 和幕僚长聊天。他们只是从没费心去看看一个普通人是怎样用 AI 的（剧透：他们不用，或者他们假装用）。 如果你觉得我是在点你，因为你有一张没人执行的 AI 路线图，或者你压根没有 AI 路线图、正在琢磨你的生意接下来几年会怎么走，私信我。我很乐意跟你聊聊。 但如果你员工不到 100 人，我给你点别的。 我在 Circle 上建了个社区，帮你每周在电话里跟我连一次线。 上周，我用 AI 做了场 newsletter 直播，39 个人在电话上。 我没法替你搭整张路线图，或给你全公司做工作坊，但我确信我依然能帮你走上成功的轨道。 所以，先点这个链接，如果你想加入 Circle：http://how-to-ai.guide/ 来自作者 Ruben 的一段话。 这篇文章存在，是因为 91,000+ 人认定 AI 太重要，不能搁置。不仅如此，他们还在身边分享它。他们明白，他们就是身边那 5 个人的总和。所以最好让那些人也用上 AI。 如果这帮到了你——或者它会帮到你认识的某个人——把它转发给他们。它就是这么长大的。就是像你这样的读者，把它发给像他们那样的人。 如果你是新来的，在 X 上关注我 → @rubenhassid（同样免费！）Tags: # X # AI # Claude # Pinterest # Linkedin # Guide # Chatgpt # Fable Related articles 10 AI agents to build for cold outbound... (+ how to build them) an agentic model takes a task and works through the steps on its own. AI Claude B2B Linkedin