從提示詞到 HTML 雜誌：AI 資訊視覺化的 6 步工程實作

2026-10-28 4

版权

版权声明：

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文从工程视角详解AI自动生成科技资讯页面的全流程：一句需求出发，AI自动检索、核验信源、扒取原图、绘制图表、搭建响应式页面，并完成多轮自检。涵盖Prompt设计、Agent分步执行（检索/核验/抓图/绘图/搭页/自检）及踩坑实践，强调“不编数据、只标口径”的严谨原则。（239字）

一句需求，AI 自己搜资讯、扒配图、画图表、搭页面。这篇从工程视角拆解整个实现过程，包括踩的坑。

图一：成品效果——左边 Anthropic 走向公开市场，右边 OpenAI 留在私募市场，中间竖排「同日」

图二：首屏——报头 AI 24H、期号、今日头条横带、主编手记 + 黑底数字卡

一、Prompt 模板

我想让你收集《过去24小时AI圈发生了什么》，做成一个html。
要有配图（最好是合法合规地直接用信源原图）、合适的地方要有
数据可视化图表。整体要有一种线上科技杂志的感觉，丰富多彩、
信息合理准确。
【可选补充】
- 时间范围：[过去24小时 / 指定日期]
- 重点方向：[大模型 / 算力芯片 / 机器人 / 全都要]
- 图表数量：[4 张左右]
- 视觉风格：[米白纸感+墨黑+橙色点缀 / 深色科技风 / 杂志感]

这段 prompt 的关键在三个词：「信源原图」（不编图，去原文扒）、「数据可视化」（要图表，不只是文字）、「科技杂志感」（定风格，不是随便排版）。

二、Agent 实际怎么做的

Step 01 · 检索

Agent 没有直接开写，而是先分头搜：中文关键词、英文关键词、算力芯片、国产模型，时间范围全部限定「最近一天」。

实际调了 11 次搜索，命中 Anthropic 递交 S-1、OpenAI 发布 GPT-6.1 Terra、OpenRouter 周榜前五全是中国模型、马斯克警告 200 家新云倒闭、SpaceX 400 亿租 GPU、智元 G2 Max 发布等事件。

Step 02 · 交叉核验

Anthropic 的算力采购承诺，不同媒体写 4170 亿、5180 亿、6500 亿、8000 亿美元。Agent 没有随便挑一个，而是继续翻原文，最后确认招股书写的是「未来最低算力付款义务约 4170 亿美元」，其他是不同统计范围。

处理方式是在成品里标注口径差异，而不是当成一个确定数字。这一步是人给 agent 定的规矩——不许编，只许标。

Step 03 · 抓图

Agent 直接去信源文章里扒原图，不自己生成。带 Referer 和 UA 请求头，绕过部分防盗链。

失败清单：虎嗅、中国证券网、OFweek 返回 403。成功来源：新浪、搜狐、东方财富、36氪、UC、上海证券报。26 张原图统一压成 webp，总计 1.35MB，平均 53KB。

Step 04 · 画图

Agent 先下载思源黑体注册到 matplotlib，再画图。中间踩了三个坑，都是自己发现并修掉的。

坑一是中文字体缺失，得手动注册，负号还要单独设 axes.unicode_minus。坑二是临时脚本命名 inspect.py 顶掉了 Python 标准库，matplotlib 直接导入失败，改个文件名就好。坑三是柱状图 Y 轴上限设 12，最高柱子正好 12，标签被裁一半，改成 16 留白。

Step 05 · 搭页面

米白纸感 + 墨黑 + 电光橙，宋体标题配无衬线正文。加了纸张颗粒肌理（SVG 噪点）、滚动进度条、入场动画、图片点击放大。

验证方式是起本地服务、浏览器打开、截图、视觉模型检查。第一轮发现标题重叠和标签被裁，修图重验，共迭代 3 轮。

Step 06 · 自检

Agent 用 JS 检查每张图的 naturalWidth，确认无裂图；切到 390px 视口确认无横向溢出；点击图片确认灯箱正常。

最终结果：16 张图全部加载，移动端无溢出，灯箱正常，4 张图表中文无乱码。

三、最终产出

四、几点工程体会

这次整套流程涉及多轮检索、批量图片处理、图表迭代和页面构建，中间要反复读写本地文件。我用 AiPy 跑的这套流程，它在本地执行，文件不出机器，省去了上传下载的环节，调试迭代时反馈比较直接。

但工具解决的是效率问题，判断还是得自己做。Agent 干的是体力活——搜、扒、画、搭、验。人干的是判断题——哪个数字该拆开看、哪个结论需要加限定条件。

数据来自公开信源，配图版权归原作者及原媒体所有，仅作新闻报道引用。