昨天发了可以将任何文档变成精美网页杂志的提示词

我本来就是随手发一下，没想到远远低估了这套提示词的价值。

看到大家的玩法才发现这玩意太有用了。

👇下面是升级版提示词和如何插入图片和视频：

这次主要的升级点就是如何插入视频和图片。

因为是在线引用所以我们需要获得在线视频和图片的链接才行，关于图片链接，如果你是在网页上的图片只需要右键在新标签页中打开图片就可以获得图片的在线链接了。

如果你是自己下载的图片，我们可以使用图床托管，我用的 sm. ms 只需要登录之后上传图片就行，他会给你图片的在线链接。

我们现在已经获得图片链接了，然后怎么办呢。

我推荐将是所有的文字和图片链接都放在一个 Markdown 文件中，你甚至可以用图片插入的 Markdown 语法给图片进标记：![]() 方括号写图片的标记比如这张图片是东京，就可以写东京，这样模型就会把它插入描写东京的位置，圆括号里面放你刚才获得的图片链接就行。

当然如果你不会 Markdown 语法用 Doc 也是一样的，直接用文字写上东京：链接就行。

然后是视频如何嵌入。

其实各大视频网站在分享的时候你都会看到一个按钮是嵌入，点这个按钮你就会获得一串代码，只需要把这串代码粘贴到你刚才要准备的文档里面就可以了。

所以这时候我们就会获得一个包含视频、图片链接和文案内容的资料文档。

最后一步就是提示词出场的时候了，复制下面提示词粘贴到 Claude 、POE、Monica 等可以使用 Claude 3.7 的软件中，然后把文档也拖进去，点击回车，结束了，你获得了一个精美的展示类网页、简历、攻略......

记得把下面提示词中我的名字和推特链接换成你的：

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

## 内容要求

- 所有页面内容必须为简体中文
- 保持原文件的核心信息，但以更易读、可视化的方式呈现
- 在页面底部添加作者信息区域，包含：
- 作者姓名: [歸藏]
- 社交媒体链接: 至少包含Twitter/X：https://x.com/op7418
- 版权信息和年份

## 设计风格

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

## 技术规范

很多朋友问如何将下面的这种全是字的文档，变成上面这种美观、直观的网页。

👇分享一下提示词和逻辑：

其实大部分的技巧和提示词来自我前几天写的这个教程：https://mp.weixin.qq.com/s/tUOAfd4OI56QxD94-0PPKw

我又加了几条要求，确保你可以将任何文件扔进去，不需要一个字的修改就能生成美观的网页：

因为我们很多的文件都是英文的，所以我加了让他变成中文的要求
另外让他参考 Linear App 的设计语言，这个灵感来自 Padphone 老师
还有就是可以在页面加上你的社交媒体链接和你的名字，方便网页传播之后大家可以找到作者
去掉了 Unsplash 的图片要求，因为免费的 API 不太好查找对应的主题图片

完整的提示词：

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

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

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

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

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

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

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

## 性能优化
- 确保页面加载速度快，避免不必要的大型资源

Ai智力测验