AI工具站拆解系列02：排名第一的 Nano Banana 网站流量全面拆解及复刻

昨天在 Google 搜索“nano banana”的时候，我被震惊到了：一个刚上线不到半个月的小网站，居然把 Google 官方的发布页面压下去，直接稳居第一！

短短12天，它吸引了 37 万访问量，页面停留时长超过 3 分钟，这已经不是“幸运爆红”，而是一套冷启动 + SEO 运营的精心组合拳。

今天我就带你拆解这个网站，看看它是怎么凭借精准的域名、快速的外链布局和SEO优化，在一片混乱的信息洪流里杀出重围。后半篇文章里我还会带大家实操复刻，零基础也能做一个属于你自己的“nano banana”网站。

本文大纲：

• 科普 Nano Banana
• 流量分析
• SEO 分析
• 冷启动分析

---

一、快速科普 Nano Banana

Nano Banana 是 Google 最新推出的一款 AI 图像编辑模型，正式名称叫 Gemini 2.5 flash image。

用一句话概括，Nano Banana 能让任何人用普通话描述（而不是专业操作），迅速高质量修改图片内容，且极大提升了人物一致性和风格真实感，相信大家也看到很多介绍评测文章了，简单展示一下手办模型生图效果后，我们就直接进入网站的拆解分析。

二、流量分析

• 网站域名：nanobanana.ai
• 注册时间：2025-08-14 05:16:58

分析：注册时间非常快，拿到了非常好的域名，几乎就是音译过来最直接的域名，会带来非常好的品牌背书；但同时也有一定的风险，如果服务商有该商标版权，未来可能会发邮件要求收走域名或被下架（但可提前自行下架通过301转嫁域名权重）。

再来看看流量数据，因为网站这个月刚上，所以很多数据分析网站的内容会缺失或者不够准确，这时候可以用 Similarweb，能看到相对客观的数据：

仅仅 10 天时间，就带来了 37 万的访问量，非常可观的数据，其中 70% 都是电脑访问，平均停留接近3分钟时间，访问3~4个页面（目前网站已经有29个页面）。

看看流量分布，基本每种流量都有数据，广告投放了 Google，有发邮件营销（可能是Newsletter类），AI 也带来了不少流量，外链在这里也非常可观。

接着关键词热度，第一天上线就有 5k 的搜索量！

截止目前网站也只有三种语言（英语、韩语、中文），这里的韩语流量份额，猜测可能是有较大的搜索比重后增加上去的。

流量来源最大的一些链接，有两个韩国大型社区，这也是韩国流量高的原因。

因为上线时间太短，暂时还看不到自然搜索关键词相关数据。所以流量这边暂时看一个大盘情况。

三、SEO拆解分析

3.1 基础层

网站基础信息设置是过关的，关键词密度 2% 左右也ok的，仅有个小问题，就是标题结构问题，存在两个 H1 标签；还有就是 og 图没有设置，链接分享到社交媒体后不会有图片出现。

建议：基础的设置问题一般使用 AITDK 插件检查一下就 ok，尽可能作为没有任何 issue。

3.2 精细化运营

外部链接

外链显示147个，但只有49个独立域名，有些网站外链是多次重复计算（如页脚、相关推荐等），日均增长 4个。

最多的外链来自：aimusiclab.co 直接加在页脚，一个85k月访问量的音乐生成站（怀疑是作者朋友的网站），最高权重(63)的外链来自：dirs.cc（导航站）。

该网站的所有外链内容我都已经整理好，免费分享给大家,如有需要可在页面底部加我。

模型集成页

在8月26日 Google 官宣模型正式名称 Genimi Flash Image 之后，作者也做了对应的模型集成页面；不过作者还没来得及加入其他模型页面（比如在关键词中出现过的 flux kontext ）

做模型集成页旨在捕获其他品牌词搜索流量。

小工具页面

目前已经增加了去除背景和批量修改页面，开始捕获更多长尾词需求场景。

多语言页面

目前仅3种语言，这一块还有很大空间。

博客文章

缺少相关模块和内容，博客文章非常有利于长期的 SEO 建设。

四、冷启动分析

作为一个蹭词的网站，没有办法去大规模推广，看起来作者选择的是默默发外链+投入一些广告的方式，通过域名的极大便利性（大部分人搜索 nano banana ai），让部分网友参与无意识的分享行为，逐步提升了网站的权重。

我这边能溯源到的，只有作者发布的一个帖子，从作者以往的精力来看，也做过好几个生图网站，甚至还有 AI 套壳网站（不过之前的网站似乎都没有做起来），这也给作者积累了一些经验。在我查看社媒讨论的时候，还有人信以为真是 nano banana 模型，说明前期的模型和提示词选择也让用户生图效果接近了“传闻”效果，这也是需要做网站积累经验的。

这里就说一下网站发布后前两天追溯到的主要信息。

2025-08-14 发布第一天

当日流量：今日的直接访问 577，自然搜索 5238，外链 718。

接近下午5点时，作者开始在 v2ex 发帖宣传（1个评论）

有用户将网站分享到了海外社区（11个赞，13条评论）

一个月均5k访问量的套壳网站，发布了博文提到

2025-08-15 发布第二天

当日流量：直接访问 2942，自然搜索 12083，外链 3656。

开始在韩国多个网站上出现，这可能也是韩国访问量开始契机

同时15号开始，X 上开始有人分享此网站

更多……

---

到这里，我们已经把 NanoBanana.ai 这个蹭热度网站的流量到启动逻辑拆解完毕：精准域名 + 外链布局 + SEO优化 + 小额广告投放，再叠加“Google 新模型”的巨大热度，才让它在短短十天里登顶搜索结果。

接下来我将从页面结构到小工具搭建，一步步带你复刻属于你的 Nano Banana 网站。

我会带你从零开始，零基础复刻这个爆红网站，让你不仅能看懂背后的逻辑，还能亲手搭建出属于自己的 AI 生图站。

我们的目标：

• 接入 Gemini 2.5 flash image 模型（文生图 & 图生图）
• 搭建一个完整的 Landing Page 页面
• 可真实上线使用

这部分将完全复刻上线的流程，跟着做就能跑通。

五、复刻网站-提示词构建

我们现在需要去 v0.dev（或者所有其他的 AI 编程工具，如 Cursor、Claude code、Bolt、Lovable 等等都是同样道理）进行克隆指令的发送，尽量把提示词内容准备完整，一次性给 AI 进行设计开发。

这里我们需要思考需要哪些内容的提示词，提示词不是死记硬背，而是根据我们的需要能够去设计去拼接，我们这里的要求是：

• 克隆对象：需要尽可能100%的复刻，那么提供的内容效果最好依次是：代码 > 截图 > 描述；这里为了简化操作，我们就用全屏截图+网址的方式给到AI
• 生图模型：找到在线提供模型的API，并且提供输入示例跟输出示例，方便AI知晓格式和调取要求；
• 技术方案：为了方便效果接近和后期维护便利，我们现在常用 nextjs，其他一些技术方案可以借助插件或直接询问 AI

最后，我们就需要用这么一串提示词：目标 + 克隆对象 + 生图模型 + 技术方案

目标和克隆对象很简单，下面分析一下模型和技术方案。

5.1 生图模型

Gemini 2.5 flash image 官方披露的合作对象包括：Openrouter 和 Fal.ai，这里我们用 Fal。 其实在上篇文章《AI工具站拆解系列01：AI图片网站 Flux1.ai 拆解及复刻》我们讲到了使用 fal.ai 获取 API 和示例代码的教程，这里就快速示意一下。

模型搜索：gemini 2.5 flash image ，edit 是图生图模型，必须上传图片；基础模型文生图。

获取输入示例和输出示例：

最后在个人账户里生成自己的 API KEY，就可以组合成我们所需的模型上下文：

• API KEY
• 图生图模型（示例输入+示例输出）
• 文生图模型（示例输入+示例输出）

注意：

1. 在 Fal 注册账号后需要绑定支付方式，先充值后才可用 API
2. 在 V0 中有集成 Fal 可以直接从 v0 里创建账号连接 Fal，但我测试过之后不推荐，一是容易失败，二是自动充值的设置很不友好（至少充值5美金）

5.2 技术要求

设计上，因为有参考目标，可以不用额外说明，其他的技术方案，如果自己不熟悉不知道用什么好，这时候可以用浏览器插件 Wappalyzer 来查看克隆网站的技术方案，最后把截图丢给 AI 问一下自己是复刻 mvp 产品，使用哪些技术方案合适？

所以技术上的描述就可以简化成一句话：技术栈使用 Next.js + React + Tailwind CSS + shadcn/ui + Lucide

完整提示词：

帮我克隆这个AI生成图片的网站首页，网址：https://nanobanana.ai/，参考截图的设计风格进行设计，确保首页内容模块完整，动态效果和操作交互完整。 

要求： 
1. 不需要 Batch Processing 这个功能 
2. 图片可以上传最多9张  
3. 注意网站上动态交互部分，比如 tab 的正常实现，保持active状态的统一 
4. FAQ部分的展开交互统一 
5. 上传图片的组件交互统一，特别是多张图片上传和已上传图片的删除 
6. 第二张截图为切换文生图tab后的样式 
   
技术： 
1. 技术栈使用 Next.js + React + Tailwind CSS + shadcn/ui + Lucide 

生图模型：
1. [API KEY]
2. [文生图模型名称+输入示例+输出示例](模型名称如：fal-ai/gemini-25-flash-image)
3. [图生图模型名称+输入示例+输出示例]

等待几分钟后，我们的网站就生成，是不是复刻完成度很高呢？这里我们已经可以体验测试生图，有时候可能会有 bug，直接点击 fix bug 让 v0 去修改即可。

我们来看看生成图片的效果吧（中文文字效果远不如4o啊）

六、网站打磨

6.1 图片存储

在这个案例中，有一个特殊的地方，因为我们没有加任何的图片存储服务，当我们上传图片发送给 Fal 进行模型处理的时候，实则上发送的是 base64 格式（可以理解为很大一串字符串，比图片原体积大 30% 左右），这种格式不利于传输大图片，所以会拖慢图片的生成速度甚至可能失败。

得益于 V0 的集成生态中有 Vercel 自己家的 Blob 服务（一种对象存储服务，存图片很好用），我们可以很方便的集成图片存储服务，点击 Integrations 选择 Blob 创建即可，顺着服务操作即可；当然你也可以在对话框直接跟 v0 对话，它也会弹出对应服务操作按钮。

小技巧：

1. 可以让 AI 修改，用户上传的图片在生成完成后自动删除（避免占用空间，也避免后期产生费用）
2. 可以让 AI 把生成的图片存储（配合提示词一起），以后做画廊或隐藏生成照片的付费功能时都能用上

6.2 组件优化

图片上传是这次的重点，因为很多有趣的玩法都是基于图片的编辑创造，我们先观察一下这两个图片上传组件有什么差异？

可以明显看到右边多出来一个很重要的功能：通过 URL 上传图片

这种交互的好处在于，你在网上寻到的合成素材不需要下载到本地，只需要输入网址就能粘贴，对用户的体验极大提升。

我朋友 DHJ 做了一个在线试衣的网站，试想一下如果我复制粘贴淘宝链接就可以试衣，是不是比我把每张图片下载再上传要节省非常多的步骤（欢迎体验 xxxxxx）？

其实还有很多细节可以优化，这次作为案例就拿这个组件改造示范，这里的对话可能不容易一次改到位，有时候 AI 会把基础的交互逻辑弄混乱，这里把完整的修改内容发出来供大家参考：

[提供截图][提供网址]
请优化图生图功能的图片上传组件，参考 fal.ai 的设计风格，实现以下功能：

上传方式：

1. URL输入上传：提供输入框让用户粘贴图片链接，包含"添加图片"按钮和"添加链接"按钮
2. 拖拽上传：支持将图片文件直接拖拽到上传区域
3. 点击上传：保留传统的文件选择上传方式

**图片展示：

1. 网格布局：一行显示3-4张图片（响应式：小屏3张，大屏4张）
2. 容器样式：使用4:3的矩形容器替代正方形
3. 图片适配：使用 `object-contain` 确保图片完整显示在容器内，按最长边缩放
4. 图片信息：显示每张图片的分辨率（如1024x768）和文件大小
5. 删除功能：每张图片右上角提供删除按钮

最终效果：

6.3 完整首页

最后调整局部细节，这样一个12天拿到37万流量的网站就被我们复刻出来啦！此时你可以选择把代码下载到本地继续优化，也可以选择在 v0 中加入 Supabase 等数据库服务接入用户的登录系统（甚至接入积分和支付服务后就持续在 v0 中做小步迭代也不是不可以）。

现在我已经把这个网站上线

人人都能访问，人人都能使用 nano Banana 模型，但是因为每一张都要钱，大家酌情生图哦！

访问👉🏻 banapic.com

---

到这里，我们已经成功复刻了 Nano Banana 网站的核心功能：文生图、图生图、完整页面交互，甚至连上传组件和存储优化都做了升级。

如果你跟着实操，应该已经能跑出属于你自己的 AI 生图站了。

👉 我已经整理好了本次复刻中用到的完整提示词 + 代码示例 + 外链清单，想要领取的同学可以直接加我微信获取。

别忘了点个关注，我会持续分享更多爆款网站的复刻教程和流量案例。