周末前来学点好玩的吧，介绍一下 Gemini 2.5 根据视频生成网页的方法
昨天发现这个可以搞之后又做了几个测试，发现了一些诀窍总结成了提示词
先介绍一下今天新作的两个测试：
首先是一个前段时间看到的交互，一个邮箱地址包含了名字、网页、邮箱和 Ins 账号，同时 Hover 对应的图标对应的文字就会高亮。
可以看到他搞的还是不错的，虽然有些小问题，比如图标不需要变色，有些细节丢了，比如虚线是需要保住一部分文字的间距的。
另一个案例是今天看到的一个翻译工具 Hover 交互
鼠标在移动到他 Hero 部分的文案的部分的时候会弹出对应单词的翻译卡片，而且卡片里面的翻译还会自动变化。
可以看到这个的效果基本已经很完美了
所有的变化都捕捉到了，除了字体大小和换行的问题之外，动效并没有什么问题。
如何更好的使用这个能力
通过上面的测试，我发现如果拿人来比喻现在的 Gemini2.5 Pro 的话他就像是一个视力不太好也没啥美学细节鉴赏能力的前端。
它可以看到那些比较大的变化，容易忽略其中的一些细节，但是这些细节对于品质又比较重要。
所以我也总结了一些使用这个能力需要注意的地方，整理了一个提示词模板。
提示词模板
帮我用前端代码完美还原这个页面
重点是{效果简要描述}动画效果，{详细描述动画效果}
需要图标的话可以CDN 引用图标库，动画需要增加缓动，html、css、js 在一个页面里
案例
帮我用前端代码完美还原这个页面，背景用纯白色就可以，重点是鼠标 Hover 的动画效果，当鼠标 Hover 到对应的单词时单词变成蓝色同时增加淡蓝色的圆角矩形背景，弹出对应单词的翻译卡片，而且会不断切换不同语言对这个单词的翻译，需要图标的话可以CDN 引用图标库，动画需要增加缓动，html、css、js 在一个页面里
在哪用这个能力
目前白嫖的 Gemini API 上传视频会有问题，如果你想要体验的话还是需要在 AI Studio 里面，然后在右侧选择 Gemini 2.5 Pro 05-06 的版本。
上传视频的时候注意压缩一下视频，同时视频不适合太长，不然上下文长了效果不太好，把视频拖到输入框之后输提示词就可以了，非常简单。