Gemini把截图转html,草图直接变游戏,这波操作太赞了!
myzbx 2025-05-15 19:59 50 浏览
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,即可领取完整版资料
相关推荐
- 如何设计一个优秀的电子商务产品详情页
-
加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...
- 怎么在JS中使用Ajax进行异步请求?
-
大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...
- 中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革
-
前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...
- 前端监控 SDK 开发分享_前端监控系统 开源
-
一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...
- Ajax 会被 fetch 取代吗?Axios 怎么办?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...
- 前端面试题《AJAX》_前端面试ajax考点汇总
-
1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...
- Ajax 详细介绍_ajax
-
1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...
- 6款可替代dreamweaver的工具_替代powerdesigner的工具
-
dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...
- 我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊
-
接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...
- 福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光
-
时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...
- 不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!
-
Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...
- 2025 年 Python 爬虫四大前沿技术:从异步到 AI
-
作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...
- 最贱超级英雄《死侍》来了!_死侍超燃
-
死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...
- 停止javascript的ajax请求,取消axios请求,取消reactfetch请求
-
一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)
