实测地表最强AI模型Gemini 3 pro，一键复刻网站，前端工程师真要失业了！！奥特曼的头要被Google按在地上摩擦！

昨晚谷歌发布了大家期待已久的Gemini3，真的是炸裂，用网友的话说：奥特曼的头要被Google按在地上摩擦了！

如何用上Google的地表最强模型Gemini3模型呢？

很简单，直接进入谷歌搜索Google AI studio，进入官网https://aistudio.google.com/：

（注：有些人进不去，可能会显示你所在的区域受限。这时你需要将IP地址切换一下，新加坡、美国、日本、欧洲好像都可以，不行的话多换几个节点试试。进入之后直接在左上角选用 Gemini 3 模型。）

为什么要测它？具体到哪个场景呢？

因为我看推特上很多人说 Gemini 3 的网页复刻能力强得离谱。

刚好我之前有一个想要复刻的网站，我觉得设计挺复杂的，正好拿来做个压力测试，看看它能不能帮我复刻出 UI。

我的提示词（Prompt）：

https://marketingexamples.com/ 你能够帮我复刻一下这个网站的ui吗？（同时附上了网站的截图，如下）

原网站长这样，我觉得很好看。难点在于它的二级页面有类似手写体，风格很独特，和以前看到的常规网站不一样。而且，我只是把一张截图发给了 Gemini 3。

我们来看看效果：

这是 Gemini 3 复刻后的网页界面，简直不要太像！！！妈耶，太好看啦！ 我甚至可以直接把代码复制下来用。

我们再来深入看一下细节，看看里面的内容复刻得如何：

我还让它给我增加了字体，这样可以更改，这里还没完全实现我想要的效果，里面的文字有点少，上下两张图片是固定的，所以我让它进行修改。

真的是完美达到我想要的效果，你看下面图片中的字体都能改动，而且像是手写的，真离谱，太强了！！

然后我觉得下面这张图中的标注和划线等很好看，所以我让它继续提升并且解释一下原理。

我的提示词：这张图片里面的标注你也能够实现吗？我看很好看，跟手写笔记一样，你给我解释一下原理，然后去实现它好么。

下面是Gemini3复刻的，我真服了！！这特么太顶了呀！！不能风格说很像吧，简直一模一样好吧！！强到离谱。

它轻轻松松，用一句话就搞定了。我之前让Claude code、codex复刻的时候，不仅浪费口舌，还惨不忍睹。

而且还非常专业地给我进行了解释：

原理解析要在网页上实现这种效果，我们不需要真的去“画图”，而是通过HTML + CSS + SVG的组合拳来实现：手写字体 (Handwritten Fonts): 我们使用像Caveat或Permanent Marker这样的 Google Fonts，让文字看起来像手写的。
绝对定位 (Absolute Positioning): 这是核心。
我们将每条笔记（如箭头、文字说明）设置为position: absolute，然后相对于它们要标注的段落 (position: relative) 进行微调偏移 (top, left, right)。这就像在书页的空白处写字一样。
SVG矢量图 (SVGs): 箭头、下划线、圈圈等图形最好的实现方式是 SVG。我们可以控制路径 (path) 的形状，让它们看起来像马克笔画出来的（使用stroke-linecap="round"）。
CSS 变换 (Transforms): 人的手写字从来不是完全水平的。给笔记加上一点点旋转 (rotate-2或 -rotate-1)，会瞬间让效果变得自然生动。

我看它实现了一个复刻，因为我有9个页面，所以我让它发挥想象力，给我其他九个页面的子页面也用不同的形式给我做一下：

非常好看，嘎嘎猛，其他的卡片里面你也这样给我处理一下，多弄几种风格给我看看，总共我们有9个案例，你多试试看，让我看看你的想象力和能力，好不好

这是处理后的9个字页面的设计，有些是动态的，有些是视频、图像各种形式都有，很难相信这是一次性生成的，最好点开放大看：

继续挑战更高级的动画！

原网站的两侧黑色部分有一点点动画，我觉得蛮好看的，所以我继续让它修改：

提示词：我发现原来的网站两侧的黑色部分，它黑色背景上面有彩色的跟晚上看天上银河上的星星一样，而且还在动，往下流动，就像银河中的星星在往下流动一样，不过速度不算很快，但是真的很好看呀，你能不能帮我实现一下这个动效，这是网站地址https://marketingexamples.com/，同时做完之后你给我解释一下这个动效的原理原理

这个是我让它根据我的描述给我修改成的，两侧加了滚动的点状动画，非常有银河系的星星感觉。因为gif太大上传不了，只能放截图了。

甚至还能改成星星形状的，也只是一句话的事情。

总体这个流程走下来，我感觉Gemini3的前端能力是真的强，强到能让前端工程师失业的那种。你给它一个对标，马上就能复刻出来。

但是，用得好的前提是——你有比较好的审美，能给它找一个“高审美”的对标。

同样让它复刻独立开发者大神Marc Lou的网站，简直一模一样

所以还真就是应了那句话：出海做产品，你的审美就是你产品的天花板。

出海做产品，你的产品品味，就是你的天花板

所以我在推特上看到一句话很应景：

随着AI工具的能力越来越强，技术门槛被无限拉低，我更需要修炼的，是对产品的判断能力。

你能判断 AI 生成的东西是否是“好东西”吗？ 你能看出 AI 生成的东西哪里“不够好”，然后指导它去修改吗？

这只能依赖个人品味了，这急不来，只能多看多实践。

当然，Gemini3还有更多更强大的功能，今天就拆解Gemini3的这一项能力。

后续我会继续将我深度使用Gemini3，及谷歌同时发布的AI编程工具Antigravity的相关实践分享出来，欢迎关注。

如果觉得这篇文章对你有用，欢迎点赞、评论、收藏，并分享给身边的朋友！

关注我—刘辣可AI出海，带你解锁更多AI神器。