推荐语
一键将YouTube视频转换为精美网页的新技能，Gemini 2.5 Pro Preview 05-06模型让学习和分享更便捷。
核心内容：
1. Gemini 2.5 Pro Preview 05-06模型功能介绍
2. 制作HTML动态网页的详细步骤和技巧
3. 实际案例演示：纳瓦尔访谈视频转网页
杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家
Gemini最新发布的Gemini 2.5 Pro Preview 05-06模型能力非常强，可以直接把YouTube视频变成好看的网页，既方便学习，又方便分享。https://mp.weixin.qq.com/s/Xi9jOgws46O6EUq_jdaIYA
Prompt
帮我将youtube视频生成网页，不要遗漏信息根据上面内容生成一个 HTML 动态网页
1. 使用Bento Grid风格的视觉设计，色彩搭配要柔和
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 中英文混用，中文大字体粗体，英文小字作为点缀
4. 简洁的勾线图形化作为数据可视化或者配图元素
5. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
6. 模仿 apple 官网的动效，向下滚动鼠标配合动效
7. 数据可以引用在线的图表组件，样式需要跟主题一致
8. 使用 Framer Motion (通过CDN引入)
9. 使用HTML5、Tailwindcss 3.0+(通过CDN引入)和必要的JavaScript
10. 使用专业图标库如FontAwesome或Material lcons(通过CDN引入)
11. 避免使用emoji作为主要图标
12. 不要省略内容要点
本内容是对这个方法的实践。
实践
我在YouTube上找了一个纳瓦尔6分钟的访谈视频，链接：https://www.youtube.com/watch?v=5JAHYyo1Fjc
然后在 aistudio.google.com 中选 Gemini 2.5 Pro Preview 05-06 大模型，在添加文件中直接选择【YouTube Video】输入 卡兹克的提示词，就可以直接得到一个 html 代码。
我习惯在 VS Code 中打开，因为手动调整代码和预览都很方便，一般AI直接生成的 html文件 都会有点小问题，比如图片和文字没对齐，有的地方留白面积太大，这种小毛病与其让AI修改，还不如手动修改更方便，最重要的是这个过程可以学习一点编程知识，看不懂的代码就截图问AI，慢慢尝试修改，实在不会改的再用 Cursor、Windsurf、Trae 这样的 AI IDE工具。
把 html文件样式调整到自己满意之后，可以用 Cursor 调用 Edgeone MCP 部署上线。
（比较复杂的 html文件 edgeone mcp无法部署，只能用其他方法）
我在这里用的是 Sealos 部署，大家展示：
https://static-host-x4o0qwe4-index.sealoshzh.site/
如果觉得部署太麻烦，可以用【飞书截图】，截长图，直接就是图片格式。
一个视频内容，直接转变成精美的网页，不但整理出了视频的核心内容，还把它可视化展现了出来，对学习、记忆、分享都非常有帮助。
粤ICP备14082021号
免费POC，
零成本试错
