AI探索指南

昨天发了可以将任何文档变成精美网页杂志的提示词 我本来就是随手发一下，没想到远远低估了这套提示词的价值。 看到大家的玩法才发现这玩意太有用了。 👇下面是升级版提示词和如何插入图片和视频： 这次主要的升级点就是如何插入视频和图片。 因为是在线引用所以我们需要获得在线视频和图片的链接才行，关于图片链接，如果你是在网页上的图片只需要右键在新标签页中打开图片就可以获得图片的在线链接了。 如果你是自己下载的图片，我们可以使用图床托管，我用的 sm. ms 只需要登录之后上传图片就行，他会给你图片的在线链接。…

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

## 响应式设计

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

## 媒体资源

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

## 图标与视觉元素

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

## 交互体验

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

## 性能优化

- 确保页面加载速度快，避免不必要的大型资源
- 图片使用现代格式(WebP)并进行适当压缩
- 实现懒加载技术用于长页面内容

## 输出要求

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

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

最后是分享：如果你用的 Claude 和 POE 都可以直接点击分享按钮获得分享的网页链接直接给别人看。

如果你用的其他不支持分享代码渲染结果的客户端的话可以用我推荐的 YOURWARE （www.yourware. so）复制代码然后点击按钮就能获得一个可以分享的链接。

FrgW6yXG2iL8WW9aD1E0YFpSo-okv3.png

1.8 MB

FlBUaC83Mfc3bhid8UoWPBRmH_YAv3.png

1.2 MB