零基础复刻100万美金年收入的 AI 图片生成站

今天我将从零编程基础的视角出发，给大家演示如何低成本复刻该网站。

全程使用 v0.dev 进行对话交互生成代码，不需要有编程基础，任何人都可以轻松复刻。

在最初的版本，该网站仅两个核心页面，首页 Landing Page，和图片生成页，我们会遵循先分析拆解，再模拟复刻的阶段进行，会尽量按照 MVP 的版本进行复刻。

一、页面分析

2024年8月2日发布了第一版，目前看不到缓存页面；不过能看到8月7日发布的第二版本，这期间网站只有四个页面，考虑到 Google 收录页面会有时间延迟，并且查看8号收录就多了很多页面，那么这里可以推测第一个版本中应该只有这五个页面。

• Landing Page首页
• Create 文生图页面
• Prompt 提示词优化
• Privacy Policy 页面
• Terms and Conditions 页面

后续从流量上也发现了其中两个流量最大的子页面，分别是 flux1.1 和 ghibli 关键词的页面，都是在关键时期给网站带来巨大流量的页面：

这两个页面跟生图编辑页面差异不大，主要是在图生图+特定风格提示词，再到特定模型

接下来我们会详细复刻图片生成页面和首页，看看如何快速复刻最小 MVP 打造自己的AI生图网站。

二、图片生成

图片生成是核心功能页面，我们可以对比第一版和最新版的差异：

• 新增了多模型选择（最初只有 Flux 一个模型）
• 新增了很多图片编辑功能（每个功能一个子页面）
• 新增了多图生成（Pro功能）
• 水印（Pro用户可去除）

第一版	最新版

我们复刻的目标如下：

• 支持提示词生成图片
• 图片可以展示可下载
• 支持多种尺寸选择

2.1 获取文生图 API

首先，我们要拿到 Flux 的生图模型 API，借助 API 服务能力帮我们生图。这里我通过 fal.ai 来获取。（这是一个集合了各种图片视频类大模型的产品，可以在里面找到丰富的模型调用）

登录/注册 → 个人中心 → API Keys

先来创建一个 Key，创建后出现的复制界面一定要复制出来，否则就再看不到这个key了。

2.2 获取 API 示例

接着我们在站内搜索到 Flux Dev 模型，这里的 Playground 可以输入提示词测试生图效果（但注意大部分模型可能需要花钱测试）。

输入提示词，点击 Run，看到有效结果：

然后把左侧 Input 切换到 cURL 模式，右侧 Result 切换到 JSON 模式。这样就拿到我们基于该模型的输入示例和输出示例。 仔细看这里有一个变量 $FAL_KEY，这就是我们刚才创建的 API Key。

2.3 输入AI提示词

拿到这三者后就可以丢给 AI 去编程，开发可以文生图的界面，我们打开 V0，输入以下提示词：

我的 API key：xxxxxxxxxxxxxxxxxxxxxxxxxx  
输入示例：  curl --request POST --no-buffer --url https://fal.run/fal-ai/flux/dev/stream --header "Authorization: Key $FAL_KEY" --header "Content-Type: application/json" --data '{"prompt": "Extreme close-up of a single tiger eye, direct frontal view. Detailed iris and pupil. Sharp focus on eye texture and color. Natural lighting to capture authentic eye shine and depth. The word \"FLUX\" is painted over it in big, white brush strokes with visible texture.","image_size": "landscape_4_3","num_inference_steps": 28,"guidance_scale": 3.5,"num_images": 1,"enable_safety_checker": true,"output_format": "jpeg","acceleration": "none"}'  
输出示例：  {"images": [{"url": "https://v3.fal.media/files/monkey/xobSxijWb3g_DDBOvKtUu.jpeg","width": 1024,"height": 768,"content_type": "image/jpeg"}],"timings": {},"seed": 1651342301,"has_nsfw_concepts": [false],"prompt": "Extreme close-up of a single tiger eye, direct frontal view. Detailed iris and pupil. Sharp focus on eye texture and color. Natural lighting to capture authentic eye shine and depth. The word \"FLUX\" is painted over it in big, white brush strokes with visible texture."}  
要求：  - 支持提示词生成图片- 图片可以展示可下载- 支持多种尺寸选择  

测试输入内容，点击生成，成功生图图片即代表集成 Flux 生图模型成功。

接下来，我们让这个网页的内容更完整，在设计风格上靠拢 Flux1，并且增加首页，后续我们将前往首页继续优化，参考提示词如下，此时我加入了 https://flux1.ai/create 页面的整页截图作为参考：

因为我们截图是最新版本，所以 AI 额外加入了一些功能，我们通过对话让其去掉即可，最终我们获得了一个简单可用的 AI 文生图页面：

三、Landing Page

接下来我们会简单分析 Flux1.ai 的首页，让我们知道每个部分都在传递什么信息，然后我们再尝试复刻。

总体点评： 作者在首页花费心思较少，即便快一年后，也几乎没有做什么更新。

现在我们梳理了所有内容，主要有以下内容，这也是我们给 AI 的提示词：

- Header：首页和生图页面，需要保持滚动时可见- Hero 区域：网站核心利益点 Flux AI Image Generator By Flux1 AI，引导进入生图页面按钮- 图片轮播区域：展示竖版9:16图片，左右滚动轮播，鼠标hover时候暂停移动- Features 功能区域：介绍六大模型相关功能- Examples 示例区域：包含4张图片和对应的提示词，可以方便复制提示词- 流程展示区域：介绍四步骤使用流程，文字展示，图形化- Q&A常见问题- CTA召回区域- Footer：按照我们网站真实页面设计，不要虚构链接- 补充 Privacy Policy 和 Terms of Service 页面

对于网站图片的复刻，可以直接 Copy 图片链接，告诉AI，哪些位置的图片用哪些链接即可。

再通过对话修改一些小问题，这时候就可以完整看到我们复刻出的页面：

在 V0 制作的网站发布也很简单，直接右上角点击 Publish 即可，会自动进行部署发布，发布之后我们获得一个可以供大家访问的 URL 链接。

网站已经可以在线访问，我部署在自己的二级域名，方便大家访问：

flux.ameng.blog

P.S. 为了大家体验顺畅，已经充值了几美金，大家酌情生图（每张图都要钱...）

最后总结，我们通过完整分析了套壳AI图片站 Flux1.ai 的数据流量情况和冷启动事件，知道了他们是如何做前期推广以及如何借助图片模型的发布东风走上了流量颠覆，最后我们也能非常简单快速的复刻 AI 生图网站和首页，快速打造 MVP 产品。

对于我们的价值，一方面如果自己有生图的需要，这种使用方案可以更低成本，也可以打造更多适合自己的产品功能；另一方面如果你想开启副业，那么在下一个图片模型发布的时候，就是你我的机会。

好了，本期的复刻内容就到这里了，如果有疑问可以留言，如果有需要后期也考虑录制视频出来。

下周我们将继续拆解 AI 工具站，敬请期待，如果大家有想要拆解的网站也可以留言告诉我！