2026年7月2日 周四晚上19:30,报名腾讯会议了解“如何构建自进化的动态知识库(Brain)”(限30人)
免费POC, 零成本试错
FDE知识库

FDE知识库

学习大模型的前沿技术与行业落地应用


收藏

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

发布日期:2025-05-10 20:06:05 浏览次数: 2558
作者:郭震AI

微信搜一搜,关注“郭震AI”

推荐语

Gemini 2.5 Pro模型升级,让编程和设计更高效!
核心内容:
1. Gemini 2.5 Pro模型更新,前端截图直接生成HTML代码
2. 测试不同复杂度的前端页面截图转代码效果
3. 文字直接生成小红书风格的HTML知识卡片

杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家

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文件即可,想要获取完整html文件的朋友可在下面我的公众号,回复智能体
看到这种生成效果,咱们更有必要了解下背后的基本原理。
大概来说,Gemini会会像一个经验丰富的程序员在接到需求后,先理解需求,然后根据类似项目的经验,设计架构,再具体编码实现,并融入特定的美术风格,大概步骤如下:
Gemini通过多模态能力,看明白了给它的草图,识别出了游戏布局,不同角色及形状,这步非常关键:
5 总结一下
Gemini2.5Pro最新升级后,在Arena榜单成为第一名,代码能力进一步迎来提升,本文设计了4类案例测评了其代码能力,具体来说,

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

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

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

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

不过我们也需要看到,目前的大模型都不是完美的,咱们必须要了解一些大模型背后的基本运作原理,最起码要知道它能做什么,不能做什么,这点很重要。
客观的测评不应该一味说它有多好,而完全不考虑它的缺陷,咱们必须要辩证两面看问题,比如在复杂几何关系、空间布局精确还原等场景下,它依然存在理解偏差和推理不足的问题。
好了,今天关于Gemini2.5Pro的测评总结就到这里。

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询

扫码登录
登录即表示您同意《53AI网站服务协议》
服务协议

欢迎您使用【53AI 官方网站】(以下简称“本网站”或“我们”)。本《会员服务协议》(以下简称“本协议”)是您(以下简称“会员”或“用户”)与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。

在您注册或登录前,请务必审慎阅读、充分理解各条款内容,特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时,即视为您已完全理解并同意接受本协议的全部内容。

一、 定义

本网站:指由【深圳市博思协创网络科技有限公司】运营的,域名为【53ai.com】的网站及相关移动端页面。

会员服务:指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。

知识库内容:指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。

二、 账号注册与登录

登录方式:本网站支持以下登录方式,您可根据实际情况选择:

微信公众号授权登录:您同意将您的微信OpenID信息授权给本网站,用于创建或关联会员账号。

手机验证码登录:您需提供真实有效的手机号码,并通过短信验证码完成身份验证与登录/注册。

账号安全:您的账号仅限您本人使用,禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失,由您自行承担。

实名认证:根据相关法律法规要求,我们可能要求您在特定功能下完成实名认证。如您拒绝提供,可能无法使用部分或全部服务。

未成年人保护:若您未满18周岁,请在法定监护人的陪同下阅读本协议,并在征得监护人同意后使用本服务。

三、 服务内容与规范

知识库查阅权限:会员登录后,有权按照其会员等级对应的权限范围,在线浏览、检索本网站知识库中的相关文章及内容。

服务变更:我们有权根据业务发展需要,调整、变更或终止部分服务内容,并将以网站公告、公众号消息等方式提前通知。

禁止行为:您在使用服务时不得实施以下行为:

利用技术手段批量爬取、下载、转存知识库内容;

将知识库内容用于商业目的或未经授权地向第三方传播;

干扰本网站正常运行或侵犯其他用户合法权益;

发布违法违规信息或从事违反公序良俗的活动。

四、 知识产权声明

权利归属:本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有,受《中华人民共和国著作权法》等法律保护。

有限许可:本网站授予会员一项非独占、不可转让、不可转授权的普通许可,仅限于个人学习、研究之目的在线查阅知识库内容。

侵权追责:未经书面许可,任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现,我们保留追究其法律责任的权利。

五、 个人信息保护

我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息,请单独阅读 《隐私政策》。

您通过微信公众号授权或手机号验证所提供的信息,我们将严格按照《个人信息保护法》的规定处理,仅用于身份识别、服务提供及安全验证等必要用途。

您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。

六、 免责声明

内容准确性:知识库内容仅供参考,不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证,您应自行判断并承担使用风险。

不可抗力:因自然灾害、政策法规变化、网络故障、第三方平台接口异常(如微信接口维护、运营商短信通道故障)等不可抗力导致的服务中断或延迟,我们不承担违约责任。

第三方链接:本网站可能包含指向第三方网站的链接,该等网站的内容和服务不受我们控制,请您自行甄别风险。

七、 违约责任

如您违反本协议约定,我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施,并保留要求赔偿损失的权利。

如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失,您应承担全部赔偿责任(包括但不限于罚款、赔偿金、律师费、公证费等)。

八、 法律适用与争议解决

本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。

因本协议产生的或与本协议有关的任何争议,双方应友好协商解决;协商不成的,任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。

九、 其他

本协议构成双方就本服务达成的完整协议,取代此前任何口头或书面约定。

本协议任一条款被认定为无效或不可执行的,不影响其他条款的效力。

我们对本协议享有最终解释权,并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效,继续使用服务即视为同意修订内容。


已查阅