PiggyBlog
0%
Published on

Gemini 3 Pro AI 复刻实验

Authors

项目背景

最近新出的Gemini 3 Pro号称复刻大师，我想测试一下 Gemini 3 Pro 在前端界面复刻方面的实际能力。做法是让 AI 根据截图重新还原网站 yysuni.com 的首页设计，看看它到底能做到什么程度。

整个过程使用了：

  • Gemini 3 Pro（谷歌最近新发布的AI Model）
  • Google Antigravity IDE（谷歌最近新发布的 AI IDE）
  • 一个谷歌账号用于登录 Antigravity 登录时如果出现认证回调失败，可以尝试开启代理软件的 TUN 模式。

原站地址：https://www.yysuni.com/

复刻结果：https://spring-piggy-blog.netlify.app/

复刻流程记录

第一步：项目初始化

使用 Next.js 创建项目：

npx create-next-app@latest gemini3pro-copy-test --typescript --tailwind --app --no-src-dir --import-alias "@/*"

第二步：向 AI 提供提示词

将网站截图交给 Gemini 3 Pro，并补充提示，例如：

请基于我当前的项目结构，
使用 Next.js 16（App Router）+ TypeScript + Tailwind CSS4，
复刻截图中的界面设计。

要求：

请根据我提供的图片，使用我已经初始化好的项目结构，
严格按照 Next.js 16（App Router）+ TypeScript + Tailwind CSS 4 的最佳实践，
完整复刻同款界面。

要求如下：

1. 技术栈统一使用：
   - Next.js 16（App Router）
   - TypeScript
   - Tailwind CSS
   - 遵守组件拆分、布局结构、语义化 HTML 最佳实践

2. 你需要输出：
   - 完整的项目结构（哪些文件放在哪些目录）
   - 所需的布局文件（layout.tsx）
   - 页面文件（page.tsx）
   - 可复用组件（components）的代码
   - 工具类
   - Tailwind 配置
   - 任何资源引用（如图标、颜色、阴影、圆角、间距等）

3. 风格要求：
   - 完全复刻图片 UI，做到像素级相似
   - 保持 Tailwind 命名风格整洁
   - 组件拆分合理，避免过长文件
   - 响应式设计，适配移动端
   - 保留 Next.js 最佳实践（例如 Metadata、Image 优化）

建议使用 Fast 模式搭配 Gemini 3 Pro（High）。

第三步：AI 生成初版代码

AI 会提示安装必要依赖：

npm install lucide-react clsx tailwind-merge date-fns

随后会生成页面结构、组件以及布局代码，项目基本可以运行。

第四步：持续优化

AI 一次性很难做到完全一致，需要你：

  • 继续截图细节部分给它

  • 描述哪些地方需要微调

  • 多轮对话迭代

⚠️ 非常重要： 每完成一点小功能就提交一次代码。Antigravity 偶尔会给出大改动，甚至改崩项目，回退功能也不太稳定。

使用体验总结

优点

  • 图像识别能力不错，但复杂布局仍存在理解偏差
  • 生成代码整体规范
  • 组件划分比较合理
  • 响应速度较快（避开高峰期时表现更明显）

不足

  • 细节还原度与预期有差距
  • 需要大量人工指导与调整
  • 稳定性一般，偶尔会出现报错

整体来看，在 UI 复刻方面相比 GPT5 和 Claude 4.5 略有优势，但还远未达到“给一张图就能一次性完整复刻”的程度,仍然需要微调。

项目运行方式

克隆项目

https://github.com/XIAOZHUXUEJAVA/spring-piggy-blog.git
cd spring-piggy-blog

安装依赖

npm install

启动开发环境

npm run dev

打开 http://localhost:3000 查看效果。

构建生产版本

npm run build

结尾说明

本项目仅用于学习和技术验证，原网站设计版权归原作者所有。

View on GitHub