上传一张截图,直接生成网页,这也太强了吧!

最近经常有小伙伴和我说,能不能写一写 AI 编程相关的内容,我内心其实是很想写的。

因为萝卜哥本身也是编程出身,最近也一直在研究相关的内容,比如市面上的 Cursor,Trae 等专业 AI 编程工具,还有 DeepSeek,Claude 等大模型,它们确实都很强,各自在自己擅长的领域比较能打。

不过我个人觉得,Google 的 Gemini 更符合我的胃口,这个大模型甚至支持把上传的图片直接转化成网页,这个能力太强了,而且对于没有编程经验的人来说,这不就是降低门槛的最大诚意吗。

复刻静态网页

Gemini 在复刻静态网页方面是非常强的,比如下面这个微信登录的页面

图片

复制到 Gemini 当中,然后一句简单的提示词即可

图片

Gemini 的 Canvas 功能,类似一种所见即所得,可以立即渲染代码,让我们看到效果是什么样子的。

图片

可以看到这个复刻效果,除了背景 Banner 图片略有不同之外,其他元素基本完全复刻出来了。

整个过程,不到1分钟,生成的 html 代码一次运行通过。

我们再来换一个网页截图

图片

同样的方法,提示词也类似

图片

可以看到这次 Gemini 也是完美的复刻了,就连网页的布局也是一模一样。

图片

制作小红书卡片

Gemini 也可以一键生成直接发布的小红书卡片,还支持直接下载哦

AI编程,常见的应用场景有哪些,帮我总结出来,以HTML知识卡片的形式展示,需要符合小红书的审美要求,需要有下载按钮,点击下载按钮可以分别下载每一张卡片

生成的效果如下,我们把鼠标悬浮在卡片上,就能看到下载按钮,点击按钮就能下载相对应的卡片图片了。

图片
图片

只不过这种卡片发小红书似乎有点太素了,我们再换一个话题试试

帮我总结一份一个月30天的减肥食谱,以HTML知识卡片的形式展示,需要符合小红书的审美要求,每张卡片以粉红色为底色,卡片主体适当增加少女喜欢的颜色和装饰,不能太素。需要有下载按钮,点击下载按钮可以分别下载每一张卡片

这种减肥食谱,肯定是要求图片精美的,毕竟大部分都是小姐姐爱看嘛~

本来是想着精美一些,不过 Gemini 似乎不是特别擅长这方面,当然也有可能是我的提示词不够好,大家可以在评论区讨论一下哈~

图片
图片

这里不吹不黑,我用同样的提示词给到 DeepSeek R1,表现就好很多呀。

图片
图片

让图片动起来

我们还可以通过一张草图,就生成可以动起来的网页

图片
图片

看看这个效果,是不是很棒呀,轨迹完美遵循

图片

再看一个炫酷的

图片
图片

点击屏幕或者定时一段时间都会出现闪电的效果,挺炸裂的!

图片

不得不感慨,Gemini 太强了,帮助我们普通人把梦想照进了现实啊!

一键制作小游戏

借助 Gemini 强大的代码能力,我们甚至可以实现一张图片到游戏的转变

图片
将图片转换为网页小游戏
图片

整体来说除了恐龙不是很像之外,其他没有毛病,游戏体验也是比较流畅的。

图片

下面是灵魂画手上线,我随手画了一个贪吃蛇的游戏画面,然后给到 Gemini,让它根据自己的理解来生成游戏。

图片

仅仅指定了游戏画面风格

图片

虽然在提示词当中我没有提到是贪吃蛇游戏,但是 Gemini 还是很好的捕捉到了图片的细节,并且给出了一个还不错的类贪吃蛇游戏。

图片

再制作一个

图片
图片

因为我要求的是复古风格,所以画面没有那么绚丽,不过游戏框架是有了的

图片

写在最后

以前写代码对于大多数人来说都是遥不可及的事情,但是随着 AI 技术的发展,越来越多非科班出身的人投入到这个领域,而且拿到了很不错的成绩。

很多人说学习了 AI 不知道做什么,甚至不知道应该学习哪方面的 AI 技能。

其实大家都是被琳琅满目的 AI 信息迷住了双眼,我们学习新知识,首先想到的一定是怎么应用,怎么提高效率,进而怎么赚钱。

先想好自己的诉求,然后再有的放矢的去寻找和确定所需的 AI,行动方向就会清晰很多了!

比如今天介绍的 AI 编程小技巧,就非常适合普通人做一些简单的工具,比如教师的随堂练习,白领一族的述职报告等等。

没有永远的和最好的 AI 工具,只有最适合自己的 AI 工具。

我们一起加油~

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发

    暂无评论内容