Gemini把截图转html,草图直接变游戏,这波操作太赞了!
myzbx 2025-05-15 19:59 2 浏览
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,即可领取完整版资料
相关推荐
- 如何用Java还原童年回忆?在线教你完成贪吃蛇小游戏
-
今天我就从零开始来完成这个小游戏,完成的方式也是一步一步的添加功能这样的方式来实现。额,不好意思,放错了,重来第一步完成的功能:写一个界面大家见到的贪吃蛇小游戏,界面肯定是少不了的。因此,第一步就是写...
- 金士顿Canvas Go!Plus microSD卡评测 4K影像轻松驾驭
-
【ZOL中关村在线原创评测】如今,视频已经成为社交媒体的主流内容传播形式,全民自媒体时代更是让昔日被视为高端、专业的视频拍摄,走进大众的生活。同时,无人机、运动相机等新世代影像设备也已经支持了4K视频...
- 国外顶尖教程大师教你设计一个炫酷游戏海报...
-
今天的教程很实用,我想对于做网页设计的童鞋肯定非常想学会用Photoshop的合成技巧来制作高端的游戏网站我们将用很多素材和照片来合成一个场景和一些页头和导航的制作。过程需要很长时间,素材也很多,我自...
- Excel 制作贪吃蛇游戏,让你轻松摸鱼!
-
步骤1:准备工作表1.创建游戏区域:o在单元格区域(如B2:AK30)设置一个矩形区域,调整行高和列宽为正方形(如行高20像素,列宽3字符)。o设置背景色为深色(如黑色),作为游戏画布。2.初...
- 成长的画布,绘满童趣色彩
-
在万家丽热闹的脉动中,特步童装是一方柔软的画布,等待孩子们用欢笑与奔跑泼洒斑斓色彩。这里没有生硬的商业气息,每一件衣物都像会呼吸的精灵,悄悄诉说着关于童年的奇妙物语。漫步其中,仿佛踏入一座流动的童话森...
- 【教育高质量发展】施甸县示范小学:地面为画布 游戏“绘”出精彩童年
-
近日,施甸县示范小学积极践行“健康第一”教育理念,在寒假前夕,学校美术组教师联合部分师生完成了校园地面游戏彩绘工作。教师们以地面为画布,绘制跳格子、转盘、迷宫等游戏图案,为下学期师生15分钟课间做好了...
- 《国王的画布》Steam试玩发布 手绘风地图制作工具
-
HannesBreuer工作室制作并发行,一款手绘风地图制作工具游戏《国王的画布》Steam试玩发布,本作暂不支持中文。《国王的画布》游戏中玩家可以自定义交互式路径生成随机元素,易于调整改动。无需...
- 怪物收集RPG冒险游戏《妖之乡》7月16日正式发售
-
今日(6月18日),怪物收集RPG冒险游戏《妖之乡》更新发售日消息,该作将于7月16日发售,游戏试玩Demo现已正式上线,感兴趣的玩家可以进入商店页面。游戏介绍:《妖之乡》是一款东方奇幻的怪物收集R...
- 208元起,育碧第一人称动作冒险游戏《阿凡达:潘多拉边境》发售
-
IT之家6月18日消息,育碧旗下第一人称动作冒险游戏《阿凡达:潘多拉边境(Avatar:FrontiersofPandora)》已于今天登陆Steam平台(点此访问),目前本作正在平台...
- 甜蜜下潜藏的疯狂?和病娇美少女《米塔》在一起的冒险解谜游戏今日发售
-
由Aihasto开发制作,IndieArk发行的冒险解谜游戏《米塔》在今日上架Steam平台进行发售。售价人民币52元,首发-10%的折扣持续14天,折扣后仅需46.8元。该作同步支持日语和俄语配音...
- 十大必玩的合作单机游戏排行
-
合作模式一直是单机游戏中的重要元素,玩家可以和朋友一起组队、配合,共同完成游戏任务。在众多的合作单机游戏中,哪些才是最值得一试的呢?本文将为大家介绍十大必玩的合作单机游戏排行。这些游戏不仅拥有精彩刺激...
- 原版20周年献礼:《战争机器:重装上阵》游戏8月26日发行
-
IT之家5月6日消息,微软官方XboxWire博客昨日(5月5日)发布博文,官宣《战争机器:重装上阵》(GearsofWar:Reloaded)游戏,将于2025年8...
- 十款免费的战斗单机游戏推荐之网络版
-
这篇文章主要介绍了十款免费的战斗单机游戏,并对它们进行了排行。这些游戏涵盖了不同类型和风格,包括角色扮演、射击、策略等。每款游戏都有详细的介绍和评价,读者可以根据自己的喜好选择适合自己的游戏。对于喜欢...
- 十大必玩的合作单机游戏:打造完美团队
-
合作模式一直是单机游戏中的重要元素,玩家可以通过合作来共同完成游戏任务,增加游戏的趣味性和挑战性。在本文中,我们将为您介绍十大必玩的合作单机游戏。这些游戏不仅拥有精彩刺激的剧情和画面,还提供了多种合作...
- 十款好玩的战斗单机游戏:哪个更好玩
-
战斗单机游戏一直是玩家们的最爱,而好玩的战斗单机游戏更是备受期待。在众多的战斗单机游戏中,哪些更好玩呢?本文将为您介绍十款备受好评的战斗单机游戏,并进行详细比较分析。无论您是喜欢动作还是策略,都能在这...
- 一周热门
- 最近发表
- 标签列表
-
- 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 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)