这两天逛推特，发现一个宝藏博主，一位真正的AI大牛，每天在X上发好多AI资讯，真的是宝藏博主呀。

这不是翻到他10号发的帖子，号称一套提示词能够直接把PDF文件转换成精美的页面，一下就吸引了我。

仔细看了一下，基本原理就是利用AI大模型的超强理解能力，把一些非常难以阅读的文字内容，转成精美更易度的可视化网页。

有一些甚至还是交互式的，就是咱们可以点击、跳转等等，很炫酷啊。

然后在评论区也看到了很多超牛的作业，不得不说，厉害的人真多呀。

比如这个，一位物理老师，把自己的课件做成了精美的动态网页，如果早有这玩意，萝卜哥的物理也不至于那么差呀。

地址如下：https://lisa94destiny.github.io/physics-simulation/index.html

我们打开一个实验，是这样的效果，厉害不

太服气了，我觉得这个东西，比很多专业设计师做的都好了，关键是让AI来干这活，一分钱不用花。

好，那么我们来看看到底该怎么做这么炫酷的网页呢，关键是非程序员也能完成

直接给出提示词，这个是卡兹克大佬优化过的，更好用！

我会给你一个文件，分析内容，并将其转化为美观漂亮的中文可视化网页：

## 内容要求
- 保持原文件的核心信息，但以更易读、可视化的方式呈现
- 在页面底部添加作者信息区域，包含：
  * 作者姓名: [作者姓名]
  * 社交媒体链接: 至少包含GitHub、Twitter/X、LinkedIn等主流平台
  * 版权信息和年份

## 设计风格
- 整体风格参考Linear App的简约现代设计
- 使用清晰的视觉层次结构，突出重要内容
- 配色方案应专业、和谐，适合长时间阅读

## 技术规范
- 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
- 实现完整的深色/浅色模式切换功能，默认跟随系统设置
- 代码结构清晰，包含适当注释，便于理解和维护

## 响应式设计
- 页面必须在所有设备上（手机、平板、桌面）完美展示
- 针对不同屏幕尺寸优化布局和字体大小
- 确保移动端有良好的触控体验

## 媒体资源
- 使用文档中的Markdown图片链接（如果有的话）
- 使用文档中的视频嵌入代码（如果有的话）

## 图标与视觉元素
- 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
- 根据内容主题选择合适的插图或图表展示数据
- 避免使用emoji作为主要图标

## 交互体验
- 添加适当的微交互效果提升用户体验：
  * 按钮悬停时有轻微放大和颜色变化
  * 卡片元素悬停时有精致的阴影和边框效果
  * 页面滚动时有平滑过渡效果
  * 内容区块加载时有优雅的淡入动画

## 性能优化
- 确保页面加载速度快，避免不必要的大型资源
- 实现懒加载技术用于长页面内容

## 输出要求
- 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript
- 确保代码符合W3C标准，无错误警告
- 页面在不同浏览器中保持一致的外观和功能

请根据上传文件的内容类型（文档、数据、图片等），创建最适合展示该内容的可视化网页。

当然这个Prompt不是任何大模型都能用的，目前只有Claude3.7 Sonnet才效果最好最强，其他的模型出来的页面，总是感觉怪怪的，审美不过关。

如果你要体验该提示词，那么只有两个地方要改，其一是作者部分，那肯定要改成你自己呀，其二就是媒体资源部分，也就是你想在网页上展示什么图片或者视频，那么需要先上传到CDN服务器上。

当然我知道这么说肯定有朋友不明白，没事，咱们这篇文章就是喂饭级别的，跟着萝卜哥一步步来就行！

Trae小试牛刀

在做复杂页面制作之前，咱们先来个开胃菜，这里我先用海外版的Trae自带的Claude 3.7实验

注意选择Claude 3.7哦

在输入上面的提示词之后，我发现Trae不能上传文件，只能上传图片，那刚刚好来测试一下仅仅一张图片能不能生成精美的网页呢

我选择上传的图片如下，看起来很简单是不

然后上传给Trae，再给一句简单的触发动作就好了，Claude3.7就开始酷酷的写代码了。

因为代码很长，所以Trae会分成多次返回，我们只要把所有代码无脑拼接到一起就行

最后我得到的网站如下

真厉害呀，就凭借一张简单的图片，就自己生成了这么一个五脏俱全的AI资料网站，牛逼！

Claude大干一场

因为Trae不支持文件上传，那萝卜哥这里就转移阵地了，使用了一个国内的套壳网站，服务很稳定。

素材就选用吃瓜内容吧，毕竟在网页上吃瓜更方便，萝卜哥就选择前段时间很火的南京师范大学的瓜，当时还有人做成了PPT来讲述来龙去脉。

但是萝卜哥觉得PPT看着也费劲，现在就做出网页试试。

我们先让DeepSeek把PPT内容提取为文字版

**南京师范大学**  
**关于南京师范大学环境学院副院长宋某婚内出轨其博士生的公开信**  
**2025年2月**  

---

### **目录**  
1. 前言  
2. 人物介绍  
3. 部分聊天记录截图  
4. 其他证明材料  
5. 结语  

---

### **1 前言**  
我与她相识于南师大校园，当时我研二，她博一。后来我参加工作，她继续在校读博。本以为一切顺利，但网络上的荒诞情节竟真实发生在我身上。  

因工作需要，我出差长达4个月。期间她态度逐渐冷淡，原以为是异地矛盾，直至发现她手机中与导师宋某某的聊天记录……我的博士女友在与我交往期间，长期与已婚的环境学院副院长宋某某保持不正当关系。宋某某甚至计划于2025年底安排她毕业并进入某研究院工作。  

---

### **2 人物介绍**  
**男主角**  
宋某某，男，1979年10月生，江苏泰兴人。中共党员，工学博士，教授，博士生导师。现任南京师范大学环境学院副院长。  

**女主角**  
汪某某，女，水与环境电生物技术研究组2022级博士研究生，环境学院博士生党支部书记。  

**材料出处**  
1. 南京师范大学环境学院官网  
2. 微信公众号“水与环境电生物技术研究组”  

---

### **3 部分聊天记录截图**  
#### **谨慎的宋老师**  
- 宋老师使用大号“海阔天际”与小号“浪花”与汪某联系。  
- 每日回家后删除汪某好友，汪某为方便联系设置“免验证添加”。  
- 聊天内容涉及日常安排（如“三号门见面”“换车牌”）及暧昧对话。  

#### **爱党的宋老师**  
- 汪某担任党支部书记期间，宋某某在党会期间仍与其激情聊天，并提醒“好好学习天天向上”。  
- 对话穿插党会议程：“2024年12月18日培训班议程”等。  

#### **爱吃鲍鱼的宋老师**  
- 聊天包含隐晦内容，如“温度”“私密花园”“烤鸭鱼”等暗示性对话。  

#### **背后蝙蝠的宋老师**  
- 宋某某私下贬低同事（代号“206”为某女副教授），同时与汪某保持关系。  

#### **顾家的宋老师**  
- 宋某某在社交晚宴前回家为儿子做饭，汪某称其夫人为“杨老师”，并提及“干女儿”“干姐姐”等关系。  

---

### **4 其他证明材料**  
- **支付记录**：2020年6月1日多次小额转账记录（1元、26.74元等）。  
- **打车记录**：部分行程截图，内容模糊。  
- **截图备注**：“baby”“快速搜索”等关键词未明确关联事件。  

---

### **5 结语**  
公开信中，作者表示揭露真相只为警示他人，希望不再有人成为宋某某口中的“年轻小伙”。文末强调：“这封公开信公之于众之时，就是我与这段不堪过往告别之日。”  

---

**THANKS**  
**南京师范大学**  
**2025年2月**

然后放到飞书上整理成pdf文件，注意要把相关的图片放到图床上。

我们把文章整理好之后，就可以开始了，输入提示词并上传附件。

然后Claude就开始裤裤的分析和制作了

最后效果如下，这样吃瓜就方便太多啦。