我要投稿

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

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

你好，我是郭震

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的测评总结就到这里。

以上全文2958字，26张图。如果觉得这篇文章对你有用，可否点个关注。给我个三连击：点赞、转发和在看。若可以再给我加个⭐️，谢谢你看我的文章，我们下篇再见。

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

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

承诺：免费场景POC验证，效果验证后签署服务协议。零风险落地应用大模型，已交付160+中大型企业

相关资讯

2025-05-10

初识 MCP Server

2025-05-10

利用Cherry Studio+硅基流动免费搭建一个强大的本地AI知识库！

2025-05-10

特征工程、模型结构、AIGC——大模型在推荐系统中的3大落地方向｜文末赠书

2025-05-10

Meta发布全新3D资产生成AI系统，宣称实现"质的飞跃"

2025-05-10

AI应该能让发达国家GDP增长10%，Meta创始人扎克伯格对话微软CEO萨提亚：文档、应用程序和网站之间的界限消失于模型时代

2025-05-10

来玩一下AI工作流：阿里通义百炼工作流应用

2025-05-10

Q Developer重磅更新！你的AI开发助手又双叒叕进化了！

2025-05-10

一文说清：什么是算法备案、大模型备案、大模型登记

了解更多

160+中大型企业正在使用53AI

立即咨询预约演示

把握AI发展的机遇，共同探索、共同进步

2025-01-22

如何打造基于GenAI的员工服务机器人

2025-01-22

热点资讯

本地部署大模型？看这篇就够了，Ollama 部署和实战

2024-08-13

16个具有“联网搜索”功能的AI：总有一个适合你！

2024-06-13

Cursor 一个真正让程序员产生危机感的 AI 编程工具

2024-08-21

OpenAI o1与GPT4o的对比分析

2024-09-23

大模型｜“上下文长度”和“上下文窗口”不再傻傻分不清楚！

2024-07-31

一文带你了解大模型——智能体（Agent）

2024-05-28

50+个AI大模型在不同领域的应用案例

2024-08-04

全面对比dify、coze、streamlit、chainlit

2024-04-26

【深度】AI搜索产品深度分析-搜索原理和商业模式分析

2024-07-09

一文读懂OpenAI新发布o1系列大模型

2024-09-17

大家都在问

微软 Copilot 再添猛将！Researcher Agent 如何从数据到PPT一气呵成？

2025-05-09

阿里云发了MCP，意味着什么？

2025-05-08

AI Agent“虚火”过旺，或沦为“假Agent”？

2025-05-07

o3 深度解读：OpenAI 终于发力 tool use，agent 产品危险了吗？

2025-04-30

打起来了！MCP VS A2A，谁才是Agent的未来事实标准？

2025-04-29

Google 的 A2A 与 MCP 该如何选择？还是两种都用？

2025-04-29

精华好文！用LLM评估LLM，真的靠谱吗？技术上如何实现？

2025-04-29

大模型是否有必要本地化部署？

2025-04-28

热门标签

内容创作大模型技术个人提效 langchain llamaindex 多模态技术 RAG技术智能客服知识图谱模型微调 RAGFlow coze Dify Fastgpt Bisheng Qanything AI+汽车 AI+金融 AI+工业 AI+培训 AI+SaaS 提示词框架提示词技巧 AI+电商 AI面试数字员工 ChatBI 知识管理开源大模型智能营销智能硬件智能化改造 AI+医疗 MaxKB