Gemini把截图转html,草图直接变游戏,这波操作太赞了!

Gemini把截图转html,草图直接变游戏,这波操作太赞了!

技术教程gslnedu2025-05-13 20:44:071A+A-

Gemini 2.5 Pro模型更新,在Arena竞技场排名第一,是目前唯一得分冲到1400分以上的大模型:

他们宣称,此模型有了更好的编程表现:

对此我非常感兴趣,从5月6日发布到现在,每天都在测试。

今天这篇文章咱们就来做个测试总结,看看最新升级后的Gemini 2.5 Pro, 编程能力到底如何,我会给出尽可能多的实际案例,争取大家拿到这些案例后,直接将其应用到工作和学习中,从而提升效率。

1、前端截图直转代码

对于很多开发者,通常需要多次调试CSS样式代码 ,才能写出一个能看得过去的前端页面,有时候一次修改,一不小心,前端格式就会全乱掉,可以说是非常耽误时间,确实也很痛苦。

但现在随着大模型能力持续进化,现在再写前端页面时,只需要找一个差不多的已有前端页面,截个图,扔给大模型,就能直接拿到第一版html代码。

比如截图下面页面:

复制到界面中,然后这样发提示词:如何设计这样的一个界面,发我完整代码,这样图+文字一起发送后:

它会默认返回html格式的代码,点击箭头所示的下载按钮:

即可拿到下面html文件:

双击打开,生成的界面如下图所示:

除了个别小图标(如红线所示)没有完全一样外,样式和布局已经非常相似,简直就像克隆出来的。

整个过程,不到1分钟,生成的html代码一次运行通过。

之前我试过其他大模型,有时候能行,有时候布局全乱。所以为了做鲁棒性测试,重复实验了5次,生成的结果基本差不多。

好,咱们继续测试网页截图转代码能力。如下图所示,这是一个网页截图,展示了一个网格布局图,几何关系比上面案例要复杂:

同样我们截图它,然后复制到界面中,同样相似的提示词,这样图+文,多模态回复提问它:

这次思考时间就会长一些,大概26秒钟:

同样的方法,咱们点击下载按钮:

然后双击html文件,得到的布局图,如下所示:

这次没有达到和输入截图一样的布局,原图布局是2,3,2;它生成的布局变为3,3,1,但是每个块的样式却与原图相似。

几何关系理解,当前大模型普遍比较困难,主要因为在于与人类依靠直观的空间想象和物理经验解决几何问题不同,大模型更多依赖对已有数据的模式记忆,缺乏真正的空间感知和推理能力。人类可以通过动手画图、脑中旋转物体等方式建立清晰的空间关系,而大模型往往只能基于模糊的相关性判断,难以准确理解图形细节和复杂的空间变化。因此,在三维理解、投影变化和图形关系推理中,大模型的表现明显不足。实现AGI,道路依然曲折。

2、文字直转小红书卡片

很多时候PPT一堆文字拿着去展示,去汇报,低下的听众就提不起兴趣,觉得索然无味;做自媒体也是,比如去做小红书,我们得生成符合小红书风格的图文笔记。

问下Gemini2.5Pro,如下所示,这样发送提示词:

MCP智能体框架,现在常用的有哪些,发我html知识卡片,符合小红书风格的

大概30秒左右,它会输出完整的html代码文件,咱们一键下载,双击打开,效果如下:

这样一键输出小红书风格的知识卡片,大家可以再在基础上进行更加精细的定制,包括内容、口吻和风格等。对于想做自媒体的,可以多试试这个,比较实用。

3、静态图直接动起来

在纸上画一个草图,或者直接从网上截个图,然后复制到Gemini2.5Pro里,叫这个图动起来,然后输出html代码,双击一键运行。

整个过程,哪怕从没写过代码的朋友,也能玩下去,如果真正能做到这点,那就太酷了。

咱们测试下,如下是一个纸飞机的静态图:

咱们输入到模型里,并按照如下提示词,把截图和文字一起发给它:

如同上面一样会生成html文件,双击一键打开后,我录制一个GIF图,大家可以看看这个效果:

总体效果还可以,但是瑕疵还是出在几何关系学习上,比如飞机的展示角度和我输入的多少有些区别,同时轨迹线也没有完全学习好,没有依附在飞机尾部。

这是我从网上找的一个闪电静态图:

同样方法,图文多模态混合提问它,提示词如下:

根据截图,模拟这个打闪电的过程,完整代码文件发我

双击生成的html,为了让闪电看的更清楚,我截取上图局部区域,相当于是一个放大视图,并录制成如下GIF图:

整个打闪电的效果可以,准确的把周围场景、闪电效果模拟出来了。用于游戏开发、虚拟现实模拟应该够了。

4、草图直转游戏

下面是我在excalidraw工具里,绘制的一幅草图,模拟外星人大战,本人画画水平有限:

然后扔给Gemini2.5Pro,提示词如下:

叫它转为游戏代码,赛博朋克风格,html版本:

大概思考了27秒,开始回复,如下所示:

生成如上游戏效果,哇,不知道该说什么了。看看这些外星人形状都和草图有几分相似,代码逻辑更是一次运行通过。

只有不到1分钟的时间,草图直转赛博风格的游戏,并且运行也非常简单,只需要双击一个html文件即可。

看到这种生成效果,咱们更有必要了解下背后的基本原理。

大概来说,Gemini会会像一个经验丰富的程序员在接到需求后,先理解需求,然后根据类似项目的经验,设计架构,再具体编码实现,并融入特定的美术风格,大概步骤如下:

Gemini通过多模态能力,看明白了给它的草图,识别出了游戏布局,不同角色及形状,这步非常关键:

5、总结一下

Gemini2.5Pro最新升级后,在Arena榜单成为第一名,代码能力进一步迎来提升,本文设计了4类案例测评了其代码能力,具体来说,

1)前端截图直转代码:通过网页截图直接生成 HTML 页面,能够快速还原页面布局,大大提升了前端开发效率。

2)文字直转小红书风格卡片:基于文本内容直接生成符合小红书风格的图文卡片,为自媒体内容创作提供了极大便利。

3)静态图直接动起来:输入静态图片,通过提示词生成动态效果的 HTML 文件,展示了较强的动画生成能力,适合用作交互展示和简单的视觉效果开发。

4)草图直转游戏:将手绘草图直接转换为可运行的 HTML 游戏,并具备指定风格的美术效果,如赛博朋克风,降低了游戏开发门槛。

不过我们也需要看到,目前的大模型都不是完美的,咱们必须要了解一些大模型背后的基本运作原理,最起码要知道它能做什么,不能做什么,这点很重要。

客观的测评不应该一味说它有多好,而完全不考虑它的缺陷,咱们必须要辩证两面看问题,比如在复杂几何关系、空间布局精确还原等场景下,它依然存在理解偏差和推理不足的问题。

好了,今天关于Gemini2.5Pro的测评总结就到这里。

更多免费AI功能 云片AI:https://y-p.cc/?f=tt

本文完,记得随手点个赞、收藏和转发三连,大家感兴趣的可以关注下,后续我再研究点新东西分享给大家~

关注私信发送DeepSeek即可领取完整版资料

点击这里复制本文地址 以上内容由朽木教程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

朽木教程网 © All Rights Reserved.  蜀ICP备2024111239号-8