夜雨聆风
不懂代码也能做!我用 AI 搭了个 PDF 转信息图的网页
前言
大家好，我是阿霄。
如果你经常阅读公众号或技术文档，一定见过那种一图看懂全文的信息图。
手动制作一张这样的图，排版、配色、提炼要点，少说也要半小时。
前段时间，我用扣子平台搭了一个信息图生成网页——上传 PDF，点一下按钮，自动生成手绘风格的信息图。
它的核心是调用了 Nano Banana Pro 生图模型，再把结果以网页的形式展示出来。
具体效果如下。
左边是文件上传区域，支持上传 PDF 文件。
上传完成后，点击”开始生成”即可。
生成结果如图所示。
上方的按钮可以直接下载图片。
如果觉得效果不满意，可以再次点击”开始生成”，重新生成一份。
如何实现
那么这个网页是怎么搭出来的？
现在我把整个流程拆解给你看。
整个项目基于扣子平台搭建。
在动手之前，你需要先把流程想清楚。
整体流程概述
总的来说，可以拆解为以下四步：
-
1. 用户上传 PDF，系统解析并提取其中的文字内容。 -
2. 将文字内容传递给大模型，进行结构化总结。 -
3. 利用文本拼接模块，将信息图提示词与总结内容拼接成完整指令。 -
4. 将拼接后的指令传递给 Nano Banana Pro 生图插件，生成信息图。
具体的工作流架构如图所示：
其中，文件读取节点是官方提供的，直接搜索对应插件即可使用。
文件总结大模型
接下来是配置文件总结大模型。
这个节点的配置比较简单，核心就是一段提示词。
提示词的思路是：让大模型扮演”信息架构师”，把 PDF 内容压缩成结构化的语义指令——用层级纲要模拟思维导图，用逻辑算子（如 -> 表示流程、vs 表示对比）定义关系。
完整提示词如下：
# Role / 角色设定你是一位资深的信息架构师 (Information Architect) 与知识可视化专家 (Knowledge Visualization Expert)。你的任务是深度解析 (Deep Analysis) 提供的 PDF 文档，并将其核心逻辑提炼为一套专门用于 AI 绘画插件生成"逻辑图谱 (Logic Map)"的语义指令集 (Semantic Instruction Set)。# Core Constraints / 核心约束1. 拓扑结构 (Topological Structure)：严禁使用大段自然语言。必须采用 Markdown 层级纲要，模拟思维导图的节点 (Nodes) 与连接 (Edges)。2. 逻辑算子 (Logical Operators)：在关键词之间强制使用以下算子来定义关系，以增强模型的注意力权重 (Attention Weights)： - 流程/演进：[A] -> [B] - 包含/组成：[A] { [B], [C] } - 对抗/对比：[A] vs [B] - 因果/驱动：[A] => [B]3. 视觉锚点 (Visual Anchors)：优先提取具象名词 (Concrete Nouns) 与动力学动词 (Dynamic Verbs)。避免使用抽象形容词，替换为具有空间感 (Spatial Sense) 的词汇，如"基石 (Foundation)"、"枢纽 (Hub)"、"屏障 (Barrier)"。4. 信息密度 (Information Density)：输出总字数严格控制在 800 字以内。确保在高维向量空间 (Vector Space) 中保留最核心的特征向量 (Feature Vectors)。# Output Template / 输出模板[PDF 核心主题：视觉化短语]## 一、 逻辑底层与背景 (Context & Foundation)- 核心锚点 (Core Anchors)：[关键词 1] + [关键词 2]- 底层驱动 (Drivers)：[现象/原因] => [必然结果]## 二、 核心运作机制 (Core Dynamics)- 运作模型 (Operating Model)：[主体] -> [动作] -> [客体]- 要素矩阵 (Elements Matrix)：{[子维度 A], [子维度 B], [子维度 C]}- 关键冲突 (Critical Conflict)：[矛盾点 A] vs [矛盾点 B]## 三、 演化结论与价值 (Outcome & Evolution)- 终极交付 (Final Delivery)：[具象化的逻辑产出物]- 未来模态 (Future Modality)：[趋势关键词 1], [趋势关键词 2]# Workflow / 执行指令请现在读取我提供的 PDF 文档，直接按上述模板输出结构化摘要，无需任何开场白或客套话。经过大模型总结后，输出的就是一段高度浓缩的结构化文本，接下来进入拼接环节。
文本拼接
文本拼接节点的作用是：把”信息图生图提示词”和”大模型总结的内容”合并成一条完整指令。
为什么要拼接？
因为这两部分各司其职——生图提示词告诉模型”你要用什么风格画”，总结内容告诉模型”你要画什么”。
两者缺一不可。
信息图的生图提示词如下：
## 角色-你是一名专业的 手绘笔记艺术家和信息设计师。## 任务-生图。字体设计,有创意,创意手绘字,文字排版艺术,手写字线条细,线条圆润,冲击力,艺术构图,先锋艺术,极致清晰,极简主义,简约高级,杰作。-基于我发布的内容图片，创建一张清晰、简洁的 手绘笔记风格的手绘草图图像，画风要有很强的手绘感-旨在帮助读者快速把握其内在逻辑和核心要点。-**背景纯白，禁止有多余多东西，比如黑板边框，手稿纸边框等**## 步骤-阅读并提取"关键节点"（角色/动作/结果/条件），按流程或因果关系进行组织；-确保每一幅图都有一个清晰、简短的主题，把主题用大字表现，并确保视觉集中。不要在一幅手绘图中提供过多信息，不要让视觉过于拥挤。-用简洁的中文关键词命名其他关键节点，确保文字书写正确、措辞易于理解，字号要比主题小至少一级。不要在一张图里放太多文字。文字是次要的，插图才是第一优先。-根据##核心要求 创建图像。-让生成效果更简洁。-填满画布以保证视觉均衡，不要过度居中。## 核心要求-视觉风格：严格遵循 手绘笔记的手绘风格。所有元素都应具有手写感。使用干净、极简的线条，并配合简单图标。整体感觉应像用彩色铅笔在白板或笔记本上绘制。可以适当添加一些相关元素，但是要注意风格匹配。-构图与布局：整体布局必须清晰、简洁、有逻辑，能自然引导读者视线。布局不需要严格遵循从左到右或从上到下；合理自由地安排元素，并确保它们之间有足够的空间。严格避免箭头重叠；确保视觉不混乱。-颜色：黑色为主要素描线条，以确保视觉清晰，但可用其他颜色（如红色用于强调、绿色或黄色用于装饰），保持整体简洁；纯白色背景，高对比度；不使用渐变、不使用阴影、不使用照片/3D/拟物风格。- 简体中文，简体中文、简体中文## 输出目标生成一张极简手绘草图，能清晰解释原文的核心思想，让任何看到这张图的人都能快速理解其主要内容。**框架感要强、层次要分明****框架感要强、层次要分明****背景纯白，禁止有多余多东西，比如黑板边框，手稿纸边框等**拼接完成后，这条完整指令就会传递给生图插件。
生图插件
这是整个流程中最关键的环节。
这个插件是我自制的，原理是将拼接好的指令上传至中转平台，由平台调用生图模型生成图片后返回结果。
如果你想了解这个插件的制作方法、我用的中转平台和生图模型，欢迎关注后私信我，我会详细说明。
网页页面搭建
工作流跑通后，后端逻辑就搭建完毕了。
接下来是前端页面。
扣子平台的页面搭建非常直观，就像做 PPT 一样，把需要的组件拖到画布上即可。
至于按钮跳转、图片展示、下载功能这些交互细节，涉及的内容比较多，这里不展开讲。
感兴趣的话可以关注我，后续我会单独出一篇详细教程。
结语
这并不是什么大型项目，我也不是资深程序员。
但搭建过程中，让我感触最深的是插件代码的编写。
刚进入插件代码页面时，我愣住了——以前插件支持用 Python 编写，而我刚好会 Python。
但这次，编程语言换了，我甚至认不出它是什么语言。
放在以前，这意味着你要重新学一门语言。
去请教、去试错、去调试，每一步都可能让你放弃。
但现在不一样了。
我把需求详细描述给 AI，AI 帮我制定了实现方案。
中间改了四五版，最终才呈现出现在的效果。
这就是 AI 时代带来的变化：
你不需要什么都会，你只需要有想法，然后把想法清楚地告诉 AI。
所以，如果你有什么创意，但苦于不知道怎么实现，不妨试着向 AI 提问。
它给你的答案，可能会让你眼前一亮。
欢迎关注我，我会持续分享 AI 实践心得。
如果这篇文章对你有帮助，请点个赞，感谢你的支持。
