大家好，我是苍何。
在藏师傅那里看到个有意思的玩法，能将任何内容快速生成可视化网页，并且效果还相当惊艳。
于是我用 Cursor+Claude3.7 也快速将我的文章一键生成了可视化网页，整个过程只用了 2 分钟。。。
这 2 分钟我慢悠悠的喝了菊花茶，等待 Claude 帮我生成代码，真正体验了一把当老板的感觉🐶。
你甚至可以切换主题颜色，其实我更喜欢暗色风了，别的不说，看着就高级。
我看藏师傅发了很多有意思的应用场景，比如物理老师将自己的教案生成可视化网页用来演示各种物理表现。
说真的，我的灵感大爆发，除了将我的文章生成作品集外，我还可以将我的人生小记生成在线版的人生档案。
说干就干，这是我在 obsidian 中每日记录的人生小记，虽然已经加了不少的优化，不过依旧不够优雅美观。
而且是本地文件，也无法快速分享，于是我让 Claude 来帮我干活了，这是生成后的效果，大家可以对比看看。
别的就不用多说了，效果可以说相当惊艳，这样人生小记可以光明正大的给大家观赏了。
如果你每天也有在记日记的习惯（正经人谁记日记啊😂），完全可以用这个方法将所有的日记汇集成人生档案。
多年后，蓦然回首，哪些人哪些事，还能触动你的心弦。
除此之外，也可以将我们写的教程一键发布成网页并分享，比如我之前写的 rocketmq 系列教程 2 分钟快速变成精美的网页。
好了，案例看了这么多，下面讲一讲如何实现的吧，方法也很简单。
在 Cursor 中新建一个 md 文档，选中文档，然后输入提示词，选择 Claude3.7，直接点击 send：
提示词我在藏师傅的基础上稍微做了些改动：
我会给你一个文件，分析内容，并将其转化为美观漂亮的中文可视化网页作品集，
文件命名为:canghe_content-to-web.html
## 内容要求
- 所有页面内容必须为简体中文
- 保持原文件的核心信息，但以更易读、可视化的方式呈现- 在页面底部添加作者信息区域，包含：
- 作者姓名: [ 苍何 ]
- 社交媒体链接: 至少包含Twitter/X：https://x.com/canghecode
- 版权信息和年份 ## 设计风格
- 整体风格参考Linear App的简约现代设计
- 使用清晰的视觉层次结构，突出重要内容
- 配色方案应专业、和谐，适合长时间阅读 ## 技术规范
- 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
- 实现完整的深色/浅色模式切换功能，默认跟随系统设置- 代码结构清晰，包含适当注释，便于理解和维护 ## 响应式设计
- 页面必须在所有设备上（手机、平板、桌面）完美展示
- 针对不同屏幕尺寸优化布局和字体大小
- 确保移动端有良好的触控体验 ## 媒体资源
- 使用文档中的Markdown图片链接（如果有的话）
- 使用文档中的视频嵌入代码（如果有的话） ## 图标与视觉元素
- 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
- 根据内容主题选择合适的插图或图表展示数据
- 避免使用emoji作为主要图标 ## 交互体验
- 添加适当的微交互效果提升用户体验：
- 按钮悬停时有轻微放大和颜色变化
- 卡片元素悬停时有精致的阴影和边框效果
- 页面滚动时有平滑过渡效果
- 内容区块加载时有优雅的淡入动画 ## 性能优化
- 确保页面加载速度快，避免不必要的大型资源
- 图片使用现代格式(WebP)并进行适当压缩- 实现懒加载技术用于长页面内容## 输出要求
- 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript
- 确保代码符合W3C标准，无错误警告
- 页面在不同浏览器中保持一致的外观和功能请根据上传文件的内容类型（文档、数据、图片等），创建最适合展示该内容的可视化网页。然后静待 2 分钟，代码就自动生成好了，用浏览器打开，就可以看到效果。
这里需要注意的是，如果我们需要将 html 发布成网页，图片就得上传到图床。
图片上传图床的方法很多啦，在 cursor 中可以装一个 picgo 插件，可以配置阿里云、七牛云等各种图床。
如果配置了插件，无论是截图还是上传图片只需要一个快捷键就可以快速上传。
如果要更好的展示视频，可以在视频分享的时候选择嵌入的方式，复制代码到 md 文档中。
有了 HTML 代码，就可以通过 YOURWARE 这个网站，将代码复制进去，快速分享给别人。
稍微懂一点服务器知识的话，借助 vercel 或者 GitHub page 也可以快速发布网站。
我突发奇想，以前我们用 vuepress 或者 hexo 这种网站模板快速生成网站的方法或许可以借助 AI 来迅速升级。
传统的模板是通过预设方式进行渲染好后按照统一的方式来布局，现在完全可以借助 AI，自定义来布局排版。
你再也无需手动繁琐的调整页面代码，你只需要告诉 AI，你想要哪种风格的样式，你的每一个页面将会是焕然一新的样式。
传统的将 md 转成 html 的静态页面渲染或将可以被颠覆。
对普通的非开发者来说，有了这个方法，也能快速的将自己的任何内容转成网页。
我想你一定蠢蠢欲动了，欢迎评论区展示你的作品。
好啦，以上全文 3312 字，10 张图，如果这篇文章对你有用，可否点个关注，给我个三连击：点赞、转发
