用AI把PDF一键变成能玩的可视化网页，这不比PPT酷多了。 * { margin: 0; padding: 0; outline: 0; } body { font-family: “PingFang SC”, system-ui, -apple-system, BlinkMacSystemFont, “Helvetica Neue”, “Hiragino Sans GB”, “Microsoft YaHei UI”, “Microsoft YaHei”, Arial, sans-serif; line-height: 1.6; } .__page_content__ { max-width: 667px; margin: 0 auto; padding: 20px; text-size-adjust: 100%; color: rgba(0, 0, 0, 0.9); padding-bottom: 64px; } .title { user-select: text; font-size: 22px; line-height: 1.4; margin-bottom: 14px; font-weight: 500; } .__meta__ { color: rgba(0, 0, 0, 0.3); font-size: 15px; line-height: 20px; hyphens: auto; word-break: break-word; margin-bottom: 50px; } .__meta__ .nick_name { color: 576B95; } .__meta__ .copyright { color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.05); padding: 0 4px; margin: 0 10px 10px 0; } blockquote.source { padding: 10px; margin: 30px 0; border-left: 5px solid ccc; color: #333; font-style: italic; word-wrap: break-word; } blockquote.source a { cursor: pointer; text-decoration: underline; } .item_show_type_0 > section { margin-top: 0; margin-bottom: 24px; } a { color: 576B95; text-decoration: none; cursor: default; } .text_content { margin-bottom: 50px; user-select: text; font-size: 17px; white-space: pre-wrap; word-wrap: break-word; line-height: 28px; hyphens: auto; } .picture_content .picture_item { margin-bottom: 30px; } .picture_content .picture_item .picture_item_label { text-align: center; } img { max-width: 100%; } .pay_subscribe_notice { margin: 30px 0; padding: 20px; background: fffbe6; border: 1px solid ffe58f; border-radius: 8px; } .pay_subscribe_badge { display: inline-block; padding: 4px 12px; background: faad14; color: fff; border-radius: 4px; font-size: 14px; font-weight: 500; margin-bottom: 12px; } .pay_subscribe_desc { font-size: 15px; line-height: 1.8; color: rgba(0, 0, 0, 0.7); margin-bottom: 12px; } .pay_subscribe_hint { font-size: 13px; color: rgba(0, 0, 0, 0.4); } .__bottom-bar__ { display: flex; justify-content: space-between; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; padding: 8px 20px; background: white; box-sizing: border-box; border-top: 1px solid rgba(0, 0, 0, 0.2); } .__bottom-bar__ .left { display: flex; align-items: center; font-size: 15px; white-space: nowrap; } .__bottom-bar__ .right { display: flex; } .__bottom-bar__ .sns_opr_btn { display: flex; align-items: center; user-select: none; background: transparent; border: 0; color: rgba(0, 0, 0, 0.9); font-size: 14px; } .__bottom-bar__ .sns_opr_btn:not(:last-child) { margin-right: 16px; } .__bottom-bar__ .sns_opr_btn > img { margin-right: 4px; }
用AI把PDF一键变成能玩的可视化网页，这不比PPT酷多了。
原创 数字生命卡兹克 数字生命卡兹克 2025-03-12 09:02 北京
前几天，看到好基友歸藏在X上发了一个帖子：
还挺爆，一天半的时间过去，已经有17.3万的阅读了。
这个东西，简单点说，就是用一个Prompt，把一些非常难以阅读的文字报告，一键转成更舒服更易度的可视化网页。
甚至，还是能交互的那种。
藏师傅发完了之后，我的群里大家也开始了复现潮，然后也不知道这群人为啥，kuku给藏师傅交作业。
我给大家看一个朋友交作业的例子，她本质工作是物理老师，然后把一些物理概念的PDF，转成了一个可视化的网页。
超级惊艳。
网址在此：
https://lisa94destiny.github.io/physics-simulation/index.html
随便打开一个其中的一个实验，动态效果是这样的。
我只能说，佩服的五体投地。
还是没赶上好时候，但凡我学物理时候有这个，我能只考30多分吗。。
说实话，在看到这种玩法的时候，作为一个干了快10年的设计师。
我有一种直觉，大众的信息传达媒介，可能会涌现出一种新的形态了。
因为我们都经历过那种痛苦，面对一页页密密麻麻的PDF文字时，那种提不起劲看下去的感觉。
比如我每次看一些报告或者论文时，说实话，在阅读第二页时已经开始走神了。。。
我相信，这不是我一个人的问题，而是传统文档形式本身的局限。
后来，人们为了阅读更好、更直观，于是，涌现出了PPT这种形式。
只不过，难度高了很多。
而现在，可视化网页这种方式，在AI的加持下，门槛低到尘埃里，人人都可以做，那曾经遥不可及的形式，如今唾手可得。
这也是一种，非常有趣的新的信息革命。
你想想，你以后的报告不是PDF，不是PPT，而是一个可以交互的可视化网页甩过去，该有多酷。
说说怎么做，整体的思路几乎都还是来自于歸藏。
非常实用，按藏师傅的话说，八十老太都能操作。
我在藏师傅的基础上，稍稍修改了一点点prompt，以便能更好的让大家使用。
我会给你一个文件，分析内容，并将其转化为美观漂亮的中文可视化网页作品集：
要注意，这个Prompt不是复制给任何大模型都可以用的，目前大家测试下来，只有Claude 3.7 Sonnet效果最好最强，其他的大模型生成出来的审美，总还是差点意思，所以，你可以把Prompt，发给任何能用Claude 3.7的产品。
比如Claude自己的官网、trea海外版、cursor等等。
Prompt整体上基本复制就可以用，但是细节部分，你还是要改成你的信息。
主要就是两趴：
1. 作者信息这一块改成你自己的内容
2. 媒体资源这一块，你可以加上自己特定要出现的图片/视频，不需要的直接删掉这一块就行
把这两块定义一下，就OK了，文档啥的你就自己上传就行。
媒体资源这块我详细说一下，比如你希望展现的图片啥的，但是记住不要跟着文档一起上传，可能会有显示错误，尽量用公链。
图片这块，如果是网上现成的图片，你就直接右键图片，复制图像链接就行。
如果是你自己的图片，可以使用图床服务（比如如https://sm.ms/）托管图片，生成一个公链。
然后，用Markdown格式贴到媒体资源那。
如果你想插入视频的话，也很简单，找到公网的视频地址（你自己的本地视频就先上传到公网上，比如Youtube或者B站之类的）。在视频页面寻找”分享”按钮，点击”嵌入”或”嵌入代码”选项。
比如这个B站的例子。
把复制下来的HTML代码粘贴到媒体资源那。
比如《死亡搁浅2》预告片的资源代码就是这样的：
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114134511256693&bvid=BV1vDRuYwEsd&cid=28788263474&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
然后，就把改完的Prompt，粘贴到Claude自己的官网、trea海外版、cursor等等里面去就行。
如果是其他渠道的，没有那种代码预览功能的，就可以把生成的代码直接复制到这个网站里，https://www.yourware.so/，像这样，然后点deploy code，稍等一会，就有预览了。
点copy link，就可以直接分享给朋友链接就可以一起看。
教程就是这样了，是不是很简单。
真的，只要你能用上Claude 3.7，真的就是有手就行。
我自己也随手跑了两个case玩。
我第一个想到的场景，就是吃瓜。。。
因为每次一有点啥瓜，朋友就扔给我个pdf。好看是好看，就是忒长了。。还是纯流水账，毫无重点。每次我都得强撑着分着看好几次，才能看完。
比如说，这个PDF（为了保护别人的隐私，所以这个是我用纯Claude仿制生成的，可能有点无聊。如有雷同，就是Claude的锅）
我闲读着麻烦，直接反手改成了可视化网页。
网址在这：https://jdsrt3f1pk.yourware.so/
时间线、人物关系图谱应有尽有。
甚至还有对话重现。。太细了。
对比一下，这不比看纯文字文档有趣多了。。。
还有另一个，我最近新买的吹风机的说明书。
（不是广告。。。纯是刚好手边有这个）
真的，我就问你这种说明书谁看谁不脑壳疼。
直接三下五除二，捏了一个可视化网页。
https://qicpvw19ax.yourware.so/
还能切换日间模式。
这不爽多了？
我们为什么会对PDF这类传统文档感到如此抵触？
我细想了想，我觉得其实不是是对形式的嫌弃，而是对一种旧认知模式的本能抗拒。
PDF这类东西就像是代表着工业时代的线性思维，知识被切割成章节段落，按预设路径强制你从A走到Z。
它们假设所有读者以相同步调、相同方式吸收信息，这与人类思维的网状、跳跃、联想性本质完全相悖。
而我们人类，生来就是喜欢探索、喜欢跳跃的。
在游戏里，典型的就像一个可以自由探索的塞尔达，和一段纯粹线性叙事的游戏的对比。
而现在游戏行业是什么情况大家也都知道了，开放世界，远远占了上风。
而当文字遇上可视化可交互的网页这种形式，就像进入了一段巨型的开放世界。
枯燥的内容，焕发出了新的生命力。
在这个新世界里，知识不是被读的，而是被体验的。
我们体验信息的方式，变得更加多元，也更加主动了。
不再是被动输入，而是主动探索。
信息页不再是高墙上的明珠。
而是流动在生活每个角落的活水。
最后，祝你玩得开心。
让你的文档也开心起来。
谢谢歸藏。
以上，既然看到这里了，如果觉得不错，随手点个赞、在看、转发三连吧，如果想第一时间收到推送，也可以给我个星标⭐～谢谢你看我的文章，我们，下次再见。
>/ 作者：卡兹克、小瑞
>/ 投稿或爆料，请联系邮箱：wzglyay@gmail.com
数字生命卡兹克
 阅读 赞  分享 ‘%3E %3Cg transform=‘translate(0 -2.349)‘%3E %3Cpath d=‘M0 2.349h24v24H0z’/%3E %3Cpath fill=‘%23576B95’ d=‘M16.45 7.68c-.954 0-1.94.362-2.77 1.113l-1.676 1.676-1.853-1.838a3.787 3.787 0 0 0-2.63-.971 3.785 3.785 0 0 0-2.596 1.112 3.786 3.786 0 0 0-1.113 2.687c0 .97.368 1.938 1.105 2.679l7.082 6.527 7.226-6.678a3.787 3.787 0 0 0 .962-2.618 3.785 3.785 0 0 0-1.112-2.597A3.687 3.687 0 0 0 16.45 7.68zm3.473.243a4.985 4.985 0 0 1 1.464 3.418 4.98 4.98 0 0 1-1.29 3.47l-.017.02-7.47 6.903a.9.9 0 0 1-1.22 0l-7.305-6.73-.008-.01a4.986 4.986 0 0 1-1.465-3.535c0-1.279.488-2.56 1.465-3.536A4.985 4.985 0 0 1 7.494 6.46c1.24-.029 2.49.4 3.472 1.29l.01.01L12 8.774l.851-.85.01-.01c1.046-.951 2.322-1.434 3.59-1.434 1.273 0 2.52.49 3.472 1.442z’/%3E %3C/g%3E %3C/g%3E %3C/g%3E%3C/svg%3E) 推荐 ’ fill=‘%23000’ fill-opacity=’.9’/%3E%3C/svg%3E) 留言