Gemini把截图转html,草图直接变游戏,这波操作太赞了!
myzbx 2025-05-15 19:59 36 浏览
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,即可领取完整版资料
相关推荐
- vue3和web网页直接操作微信小程序云开发数据库
-
我们开发好小程序以后,有时候需要编写一个管理后台网页对数据库进行管理,之前我们只能借助云开发自带的cms网页,但是cms网页设计的比较丑,工作量和代码量也不够,所以我们今天就来带大家实现用vue3编写...
- WebCurl:极致轻量的跨平台 HTTP 请求调试工具
-
在接口开发与测试领域,工具的轻量化、兼容性与安全性往往直接影响工作效率。WebCurl作为一款纯原生、无依赖的网页版API测试与调试工具,凭借极简架构与全场景适配能力,重新定义了接口调试工具的使...
- webapi 全流程_webapi项目
-
C#中的WebAPIMinimalApi没有控制器,普通api有控制器,MinimalApi是直达型,精简了很多中间代码,广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...
- Nodejs之MEAN栈开发(四)-- form验证及图片上传
-
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R...
- CodeSpirit.Amis.AiForm 智能表单使用指南
-
概述AiForm是CodeSpirit.Amis框架的智能表单功能,专为AI驱动的长时间处理任务设计。它自动生成一个多步骤的用户界面,包含表单输入、进度监控、日志显示和结果展示等功能。功能特点...
- 初级、中级、高级前端工程师,对于form表单实现的区别
-
在React项目中使用AntDesign(Antd)的Form组件能快速构建标准化表单,特别适合中后台系统开发。以下是结合Antd的最佳实践和分层实现方案:一、基础用法:快速搭...
- Bun v0.7 大版本发布,与 Vite 牵手来破局?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。今天给大家带来...
- 「前端」界面可视化开发框架formio.js
-
简介formio是一个前端可视化开发框架,无需写css/js就可以开发一套前端界面。直接在界面内拖拽就可以完成界面的布局及开发。数据交互也是固定的,表单校验也可以配置,功能非常强大。特性使用ES6...
- 小伙给同事爬取数据竟获取不到,竟要使用这种请求方式才能获取?
-
Http请求中FormData和RequestPayload两种参数的区别?AjaxPost请求中常用的两种的形式:formdata和requestpayload一、默认的表单方式...
- WinForm + Win32 API 自定义无边框窗口实战(工业软件必备)
-
前言随着.NET9.0AOT(Ahead-of-Time)的发布,便萌生了用代码测试AOT编译效果的想法,同时评估未来是否为NanUI开发支持AOT编译的新版本。关于NanUI项目,若大家尚未了...
- DeepSeek从入门到精通(11)——网页版、APP、API使用方式比较
-
DeepSeek提供了三种主要的使用方法:网页版、手机APP和API调用。这三种方式各有特点,适用于不同的使用场景。下面从使用方法和主要特点两方面进行比较:一、网页版使用方法:直接通过浏览器访问De...
- 初略Web API Notification 桌面通知
-
HTML5WebNotificationsAPI通知接口用于向用户配置和显示桌面通知弹窗。例如,Email邮件通知、来电提醒、聊天信息提醒或任务提醒等。关于Web开发技术中Notificat...
- 什么是API网关?——驱动数字化转型的“隐形冠军”
-
什么是API网关API网关(APIGateway)是一个服务器,位于应用程序和后端服务之间,提供了一种集中式的方式来管理API的访问。它是系统的入口点,负责接收并处理来自客户端的请求,然后将请求路由...
- .NET 7使用 Entity Framework Core 制作增删改查(CRUD) Web API 教程
-
在本文中,我们将使用EntityFrameworkCore(EFCore)实现一个.NET7WebAPICRUD示例。WebAPI是一个构建HTTP服务的框架,可以从浏览器、移动设备和...
- C# ASP.NET Core Web Api 与 MVC 模式下 body 参数传递,post 参数方式
-
在ASP.NETCore中,WebAPI和MVC模式在处理HTTP请求时,特别是POST请求,使用body参数来传递数据的方式非常相似。两者都使用模型绑定来自动将请求体中的数据映射到C#对象上。下...
- 一周热门
- 最近发表
- 标签列表
-
- 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)