讲义：AI 时代的科研可视化革命
——从被动阅读到全流程交互重构
引言：认知摩擦与沟通的桥梁
在上一章中，我们探讨了 AI 如何作为“第四范式”驱动科学发现。更现实的瓶颈是：如何让我们的人类大脑高效地读取并理解 AI 的产出？
我们正面对前所未有的 认知摩擦（Cognitive Friction），源于人机底层思维模式的巨大差异。
结构化逻辑与线性流
AI（尤其是大语言模型）是概率预测引擎，输出被迫坍缩为线性文本流。它最擅长生成结构化语言（JSON、Python、HTML、XML），不在乎括号或层级的复杂度。
视觉感知与模式识别
人类是视觉动物，对图像、颜色、空间布局、交互的处理速度远高于纯文本。
- 大段纯文本是一种高能耗活动，尤其是未格式化的数据或代码。
- 高能耗直接拖慢科研效率，易错失洞察。
核心矛盾：AI 生产的是“高密度的代码/文本”，人类渴望的是“高带宽的视觉/交互”。
解决之道是把 AI 擅长的“结构化代码”实时转译为人类更易理解的视觉体验。那座桥梁，就是 HTML + 浏览器。
互联网馈赠给科学的礼物
要理解为什么选择 HTML 作为科研可视化的核心载体，需要回顾它的起源：Web 技术诞生的初衷就是为科学交流服务。
物理学家 Tim Berners-Lee 为了解决论文格式不兼容、信息无法共享的痛点，发明了 HTML。 基因：为科学交流而生
John Gruber 为简化 HTML 书写创造了 Markdown，成为 AI 输出的默认格式。
Google 推出极速 V8 引擎，浏览器升级为“超级操作系统”。
D3.js (2011) 让数据在网页上动起来；
Vue.js (2014) 让开发者像搭积木一样构建复杂应用。
1.2 辨析：Markdown vs. HTML
你其实早就见过它：星号 **重点**、井号 # 标题 都是标记。它是所有 AI 模型输出文本时的默认格式。
本质：结构（Structure）、表现（Presentation）、行为（Behavior）的结合。AI 可以轻松生成 HTML，让浏览器立即把它变成可交互的软件。
可视化工具的谱系——寻找“中间地带”
在科研可视化的光谱上，我们拥有不同的工具。理解它们的边界，是选择正确工具的前提。
2.1 基础层：Markdown (草稿本)
与 ChatGPT 对话时最常见的格式，也是目前 AI 的默认输出。
# 免疫检查点阻断简介
PD-1 抑制剂 可以重新激活
被耗竭的 T 细胞。
- nivolumab
pembrolizumab
PD-1 抑制剂 可以重新激活被耗竭的 T 细胞。
- nivolumab
- pembrolizumab
2.2 严谨层：Python / R (印刷机)
发表 SCI 论文常用的绘图工具（Matplotlib, ggplot2）。
import matplotlib.pyplot as pltgroups = [“CR”, “PR”, “SD”, “PD”] values = [12, 25, 18, 9]
plt.bar(groups, values, color=“#3b82f6”) plt.ylabel(“Patients”) plt.title(“Response to PD-1 Blockade”) plt.tight_layout() plt.show()
静态 PNG / PDF，被嵌入到文章中。
2.3 核心层：HTML + JS (仪表盘)
本课程的核心，也是常被忽视的“中间地带”。
- 折叠：保持主界面清爽。
- 筛选：瞬间找到关注的数据。
- 响应：悬停显示数值，框选放大。
价值：它是思考的容器，提供最佳的探索性数据分析 (EDA) 体验。
<div id="response-dashboard">
<select id="group-filter">
<option value="all">All patients</option>
<option value="responder">Responders (CR+PR)</option>
</select>
<div class="bar" data-type="CR">CR: 12</div>
<div class="bar" data-type="PR">PR: 25</div>
<div class="bar" data-type="SD">SD: 18</div>
<div class="bar" data-type="PD">PD: 9</div>
</div>实战——全流程的交互式重构
理论必须服务于实践。以下是 5 个可以立刻落地的场景，每个都配有 操作步骤 与 可直接复制的 Prompt。
与其被动接受排版，不如把文献“拆开重组”：如果有对应的网页版本，可以右键查看网页源代码，把这段 HTML 源码交给 AI，请它帮我们重排成一个“适合自己阅读”的 HTML 阅读器。
源代码里天然包含了图片的 URL、标题结构等信息，因此经过一次性转换，我们就能得到一个字体更大、留白更充足、图文在同一视野内的阅读页面。
即使没有网页源码，或者你就是习惯从 PDF 中复制文字，也可以让 AI 按照“知识点罗列 + 增大行距 + 重要句加粗”的方式重新排版，减少信息密度、突出重点，从而极大提升长文献阅读的舒适度和效率。
操作步骤
- 1 打开论文网页（HTML版），右键点击空白处，选择“查看网页源代码” (View Source)。
-
2
按
Ctrl+A全选，Ctrl+C复制。 - 3 打开 Gemini/ChatGPT，输入右侧的 Prompt。
- 4 等待 AI 回复“请粘贴代码”后，粘贴你复制的源码。
AI Prompt (直接复制)
免疫检查点阻断（示例）
近期研究显示，
PD-1
程序性死亡受体 1
肿瘤细胞通过与 T 细胞上的 PD-1 结合来逃避免疫系统的攻击。
抑制剂可以重新激活耗竭的 T 细胞，显著改善转移性黑色素瘤的预后。点击
查看示意。
示意图占位
图 1：阻断 PD-1 信号可恢复肿瘤微环境中 T 细胞功能。
✨ Bonus: Gemini 驱动的学术翻译官
不确定某段文字的含义？粘贴在这里，让 Gemini 为你生成通俗易懂的中文解释。
不同任务选哪个 Prompt？
- · 基础排版（单篇论文重排、首尝试）：使用「1. AI 论文网页化 Prompt (基础版)」。
- · 深入重构（需要目录、术语工具提示、图文并茂）：使用「2. 文献重构改进版 (主要使用)」或「13. 文献重构——改进」。
- · 科普/公众号改写：使用「23. 文献重构（公众号）」或「24. AI文章重构」。
- · Gemini 专用版本：使用「22. 文献重构(gemeni3版本)」。
一键直达 Notion 里的 Prompt
以下链接会在新标签打开对应行，方便复制与二次修改：
Prompt 解剖：文献重构类的共同结构
- 系统角色设定：如“前端工程师 + 医学专家”，确保 AI 既懂排版又懂领域知识。
- 输入说明：告诉 AI 将收到的是 HTML 源码、Markdown 文本还是纯文本段落。
- 输出结构：明确需要「单文件 HTML」「TOC 目录」「图文对照」「术语 Tooltip」等模块。
- 约束与安全：强调不要虚构数据、不要改动图表原意，只做重排与解释补充。
- 交互与风格：指定字体、配色、留白、是否适配移动端，形成可复用的“视觉模板”。
3.2 演示的重构：从静态 PPT 到交互式 Slides
基于 Reveal.js 的 HTML 幻灯片，本质上是一个网页：一份
index.html 就可以在任何现代浏览器中播放，不依赖特定软件，更适合通过 Git / 网盘长期保存和共享。在这个模式下，你只需要用文字给 AI 提供大纲 + 关键内容模块（比如“代码示例”“交互式结果图”等），AI 就能自动写出包含切换动画、代码高亮、Plotly 图表占位符的完整演示文稿。
对于 Journal Club 或组会，这意味着你可以从“修 PPT 的美工工作”中解放出来，把时间真正花在梳理逻辑和筛选重点图表上，同时又能获得更现代、更适合线上分享的展示效果。
操作步骤
- 1 准备好你的汇报大纲（简单的 Markdown 列表）。
- 2 发送右侧 Prompt 给 AI。
-
3
将 AI 生成的代码保存为
presentation.html。 - 4 双击打开，按空格键翻页。
AI Prompt (直接复制)
实战练习：让 AI 帮你“读代码”
在本讲义中，你已经看到了多个 HTML + JS 小应用（如 Reveal 幻灯片、GCS 计算器）。建议同学们反向利用这些示例，用专门的「代码阅读 Prompt」请 AI 把代码翻译成人类友好的教程。
- 1 从本讲义或自己项目中，复制一段前端代码（组件 / 小工具均可）。
- 2 在 AI 工具中先发送「代码阅读类 Prompt」，等待它回复“请粘贴代码”。
- 3 粘贴代码，要求 AI 按「模块划分 / 数据流 / 交互逻辑」三个维度解释，并给出可以直接改造的建议。
推荐使用的代码相关 Prompt
建议：先用「代码阅读类 Prompt」理解现有 demo，再用「前端工程师 / AI 研究工程师」Prompt 让 AI 帮你从零生成一个属于自己的小工具（如新的评分量表、实验记录器等）。
3.3 概念的重构：从静态图示到动态模型
Mermaid.js 提供了一种“用文字画图”的思路：你只需要用接近自然语言的方式描述节点和箭头关系（谁指向谁、在哪个阶段发生分支），AI 就可以帮你生成标准的 Mermaid 代码，浏览器再把它渲染成矢量图。
好处在于，这张图的“真相”不在图片里，而在背后的文本逻辑中：当你的实验流程调整时，只需修改几行文字，图像随之自动更新，不再依赖手工对齐和排版。
对于复杂概念（如多步信号转导、临床分层路径等），这种“文字即模型”的方式尤其适合在组会或课堂上快速迭代和讨论。
操作步骤
- 1 梳理你要展示的逻辑（如信号通路、诊断流程）。
- 2 发送 Prompt 给 AI。
- 3 AI 会生成一段 HTML，其中包含 Mermaid 代码。
- 4 打开 HTML，图表自动绘制。修改逻辑只需改文字，无需重画。
AI Prompt (直接复制)
style Wet_Lab fill:#e0f2fe,stroke:#3b82f6 style Dry_Lab fill:#f3e8ff,stroke:#a855f7
3.4 逻辑的重构：从被动查询到专属工具定制
通过 Vue.js 这样的响应式框架，我们可以让 AI 帮忙把这些规则“固化”为一个个小工具：输入选项一变，分数和风险提示就自动更新；当总分超过某个阈值时，界面背景变红、弹出提醒。
更重要的是，这些小工具都是单文件 HTML，可以离线保存到手机或平板，在查房、门诊或会议现场随时打开使用；规则更新时，只需修改一处逻辑，所有人都能立即获得同一版本的决策支持。
长远来看，这种方式帮助每位医生和科研人员，逐步沉淀出一套“专属于自己课题/学科”的微型工具库，而不仅仅是零散的截图和笔记。
操作步骤
- 1 明确你的计算逻辑（如：A+B=C，如果 C>10 则报警）。
- 2 发送 Prompt 给 AI。
- 3 AI 会生成包含计算逻辑的单文件 HTML。
- 4 保存到手机或电脑，随时离线使用。
AI Prompt (直接复制)
3.5 知识的重构：从教材到多步知识卡片流水线
书籍图片 / PDF → Markdown 文本 → 结构化知识提炼 → ANKI / USMLE 知识卡片
每一步都由专门的 System Prompt 接手，既减少机械重复，又尽量保留原文的严谨性。
操作步骤（建议 workflow）
- 1 使用 20. 书籍图像转化为markdown：将教材扫描页或题库截图转为干净的 Markdown 文本。
- 2 使用 文献重构类 Prompt（如「2. 文献重构改进版」「13. 文献重构——改进」）整理结构：提炼章节层级、标出重点与高频考点。
- 3 把整理后的内容交给 USMLE / ANKI 系列 Prompt（5 / 6 / 8 / 21 / 17-19），生成分层的闭合卡片 JSON 或直接可导入的文本。
- 4 用 10. USMLE导师 或其他「导师类 Prompt」定期抽查这些卡片：生成周度复习计划、模拟口试问答。
推荐使用的 Prompt 组合（可点击打开）
② 结合本院耐药监测数据与当地流行病学；
③ 根据患者肾功能、过敏史等个体情况调整剂量与具体药物。
提示：用上面的 ANKI/USMLE Prompt，可以把整章节内容批量转化为类似风格的闭合卡片。
附录：我的 Prompt 仓库（AI Studio）
下方小窗口实时引用我在 Notion 中维护的 Prompts List 表格，用来集中存放本课程中用到的 System Prompt 和场景 Prompt。
- html / code / knowledge / agent 等标签，对应讲义中的主线：文献重构、代码阅读、知识卡片（USMLE / ANKI）、以及多步骤智能体。
- 阅读讲义时，可以在表格中按标签筛选，并把适合自己的 Prompt 复制到 AI 工具中反复打磨。
- 讲义后续新增案例时，只需在 Notion 中补充行，即可自动出现在这里，形成一个持续演化的 Prompt 库。
- 学术导师（长期陪跑）：9. AI教授指导。
- 考试教练（USMLE/执业）：10. USMLE导师 + 21. ANKI_USMLE_精华版。
- 前端工程师（可视化助手）：12. 前端工程师，把想法变成 HTML 小工具。
- 知识工程师（卡片工厂）：11. ANKI工程师，负责从文本批量生成结构化卡片。
提示：如果内嵌窗口因浏览器或网络设置无法加载，请点击右侧「在 Notion 中打开」按钮。
结语：成为你知识产品的“首席产品经理”
回顾科学发展的历程，每一次工具的革新都带来了认知效率的飞跃。从手抄本到印刷术，从静态 PDF 到今天的交互式 HTML。在 AI 时代，自然语言就是编程语言。
欢迎来到科研可视化的新纪元。