一键搞定：宝藏提示词将任何内容生成精美网页
1. 一键搞定：宝藏提示词将任何内容生成精美网页
1.1 前言：意外爆火的提示词
昨天发了一个可以将任何文档变成精美网页杂志的提示词：还在用 PPT？教你用 Claude 生成惊艳同事的文档可视化网页
我本来就是随手发一下，没想到远远低估了这套提示词的价值。看到大家的玩法才发现这玩意太有用了。
核心优势：门槛低到离谱，几乎所有人都是一次成功，完全不需要调整提示词，能帮助到每个行业和每个从业阶段的人。
今天我会分享升级版的提示词，并展示我自己和社群朋友们的实际案例，希望给你带来一些启发。
1.2 实际应用案例展示
1.2.1 教育领域：物理现象可视化
学校老师（来自 stardust）用这个生成网页，直观演示各种物理表现：
1.2.2 医疗领域：疾病案例与治疗方案
医生用来演示疾病的案例和治疗方案，甚至支持键盘翻页（这个案例我想不起来是哪位的了，可以评论区认领）：
1.2.3 自定义风格：赛博朋克风教学方案
你还可以指定风格，比如群里朋友（金太热）的赛博朋克风孔子学习方案分享：
1.2.4 杂志风格：读书笔记分享
我朋友向阳乔木制作的读书笔记内容分享，他还加了其他要求让排版更像杂志：
1.3 升级版功能：支持图片和视频
昨天的提示词还有些问题，比如不能展示图片和视频，导致网页演示还是以文字为主。而平时我们大部分演示都需要图片。
于是昨晚我连夜工作，补充了提示词和逻辑，现在不止可以在网页上展示图片，还可以展示视频。
1.4 更多实用场景
1.4.1 旅行攻略可视化
我从小红书随便复制了一个日本旅行攻略（甚至都没有换行和排版），然后给了几张对应地点的图片和 YouTube 找到的旅行 Vlog，一个旅行计划网页就做好了，比单纯的文字更加直观和条理。
1.4.2 求职简历美化
求职时更需要这种页面，一个美观且条理清晰的简历至关重要，但不是每个人都有审美和设计能力，各种简历模板又千篇一律。
Claude 会帮你提取亮点，重新排版，设计师甚至还能在网页展示自己的作品。
1.4.3 明星介绍/粉丝物料
追星的朋友需要制作很多物料，比如聚会宣传、行程分享或参演电视剧介绍等。只需提供素材，就能生成精美的邀请函或通知。
1.5 操作指南：如何插入图片和视频
1.5.1 图片插入方法
因为是在线引用，我们需要获得在线图片链接：
-
网页图片：右键在新标签页中打开图片，获得图片的在线链接
-
本地图片：使用图床托管，我用的是 sm.ms，登录后上传图片获取在线链接
-
整合到文档：将所有文字和图片链接放在一个 Markdown 文件中
- 使用 Markdown 语法：
，方括号写图片标记，圆括号放链接 - 不会 Markdown 也可以直接写：「东京：链接」
- 使用 Markdown 语法：
1.5.2 视频嵌入方法
各大视频网站在分享时都有「嵌入」按钮，点击获得嵌入代码，将代码粘贴到准备好的文档中即可。
最终你会得到一个包含视频、图片链接和文案内容的资料文档：
1.6 完整提示词
最后一步，复制下面提示词粘贴到 Claude、POE、Monica 等可以使用 Claude 的软件中，然后把文档也拖进去，点击回车即可获得精美的展示类网页、简历、攻略等。
💡 提示：记得把下面提示词中的名字和推特链接换成你自己的
# 网页生成专家
你是一位专业的前端开发工程师和网页设计师，擅长将各种内容转换为精美的可视化网页。
## 任务要求
请根据我提供的文档内容，创建一个美观、现代、响应式的单页面 HTML 网页。这个网页应该：
1. 完美展示文档中的所有内容，包括文字、图片和视频
2. 具有现代化的设计和流畅的用户体验
3. 确保在不同设备上都能良好显示
4. 包含适当的交互元素和动画效果
## 设计原则
- **视觉层次**：通过字体大小、颜色和间距创建清晰的信息层次
- **色彩搭配**：使用和谐的配色方案，确保良好的可读性
- **响应式设计**：适配桌面、平板和手机等不同设备
- **用户体验**：添加适当的微交互和过渡动画
- **可访问性**：确保所有用户都能轻松访问内容
## 技术要求
- 使用语义化 HTML5 标签
- 采用现代 CSS 技术（Flexbox、Grid 等）
- 添加适当的 JavaScript 交互
- 优化性能，确保快速加载
- 跨浏览器兼容性
## 内容处理
- 保留所有原始内容，不添加或删除信息
- 为图片添加适当的 alt 属性
- 确保视频可以正常播放
- 为长内容添加目录导航
- 添加返回顶部按钮
## 输出格式
请提供完整的 HTML 代码，包含：
1. DOCTYPE 声明
2. 完整的 head 部分（meta 标签、标题、样式）
3. 结构化的 body 内容
4. 内联 CSS 和 JavaScript
5. 确保代码可以直接保存为 HTML 文件并在浏览器中打开
请根据我提供的内容，创建一个令人印象深刻的可视化网页。