prompt - 一键搞定、宝藏提示词将你的任何内容生成网页

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- 图片插入方法

因为是在线引用,我们需要获得在线图片链接:

  1. 网页图片:右键在新标签页中打开图片,获得图片的在线链接

    获取图片链接

  2. 本地图片:使用图床托管,我用的是 sm.ms,登录后上传图片获取在线链接

    图床上传

  3. 整合到文档:将所有文字和图片链接放在一个 Markdown 文件中

    • 使用 Markdown 语法:![东京](图片链接),方括号写图片标记,圆括号放链接
    • 不会 Markdown 也可以直接写:「东京:链接」

    Markdown图片插入

1.5.2- 视频嵌入方法

各大视频网站在分享时都有「嵌入」按钮,点击获得嵌入代码,将代码粘贴到准备好的文档中即可。

获取视频嵌入代码

最终你会得到一个包含视频、图片链接和文案内容的资料文档:

完整资料文档

1.6- 完整提示词

最后一步,复制下面提示词粘贴到 Claude、POE、Monica 等可以使用 Claude 3.7 的软件中,然后把文档也拖进去,点击回车即可获得精美的展示类网页、简历、攻略等。

💡 提示:记得把下面提示词中的名字和推特链接换成你自己的

  入动画## 性能优化- 确保页面加载速度快,避免不必要的大型资源- 图片使用现代格式(WebP)并进行适当压缩- 实现懒加载技术用于长页面内容## 输出要求- 提供完整可运行的单一HTML文件,包含所有必要的CSS和JavaScript- 确保代码符合W3C标准,无错误警告- 页面在不同浏览器中保持一致的外观和功能请根据上传文件的内容类型(文档、数据、图片等),创建最适合展示该内容的可视化网页。