一周复刻一个产品

整体概览：这门课在做什么？

这是一门用一周时间复刻一个图片/视频生成站（AI 工具站）的实战课，教你从 0 到 1：

• 选品与竞品拆解（尤其是 Z-Image）
• 用现成脚手架快速跑通网站（Next.js + 多模型图片生成）
• 接入登录、数据库、对象存储、模型 API
• 部署到 Vercel，绑定域名，接入 Cloudflare，加 GA 做数据分析
• 结合 SEO、内容营销、关键词策略和获客成本，做一个可上线、可迭代的 MVP

课程分三场直播 + 若干附录材料，每一场对应产品落地的关键阶段。

第一场直播：拆解竞品 + 跑通模板

1. 课程目标与准备工作

目标是：一周内用脚手架复刻一个图片/视频生成工具站。脚手架已内置：

• 登录 / 用户管理
• 数据库 / API 调用（已接入图片生成模型）
• 图片工具页面（压缩、图片转提示词）
• 多语言支持

需要提前准备：

• 账号：GitHub、Google Cloud（OAuth）、Vercel、Supabase、Cloudflare
• 开发环境：VS Code/Trae、Node.js、pnpm、Git
• AI 编程工具：Claude Code（主推）、Codex、智谱 GLM 4.7 等
• 数据分析辅助：SimilarWeb / Semrush、Chrome 插件

Cloudflare 被强调为“宝藏”：10GB 免费 R2、免费出站流量、免费 DNS + HTTPS 代理。

2. 浏览器工作原理与 DevTools

先从“输入网址到页面渲染”的完整链路讲基础 Web 知识：

• DNS 解析 → 缓存检查 → TCP 三次握手 → SSL/TLS 握手（HTTPS）
• 服务器处理（CDN、负载均衡、权限、数据库）→ 返回 HTML
• 浏览器解析 HTML/CSS/JS，构建 DOM 树、布局、绘制、合成

通过 Chrome DevTools（F12）建立调试习惯：

• Network：看请求类型、耗时、大小、缓存状态（memory cache 表示命中内存）
• Performance：关注 LCP / CLS / INP，后面性能优化和 SEO 要用

3. 竞品关键词与流量分析（以 Z-Image 为例）

以 Z-Image 为典型案例：域名仅注册一个月就做到 60 万月访问量，完全靠 SEO。

关键词与流量分析工具：

• Google Trends：看趋势，不看具体搜索量
• Google Ads 关键词规划师：给出月搜索量（官方数据）
• Semrush：看搜索量、流量结构、关键词意图、反向链接等

发现点：

• 核心流量来自自然搜索，几乎无付费广告
• 反向链接来自多个导航站和高权重站
• 拆竞品的反向链接，可以找到自己可以提交的导航站，获取外链

4. 竞品产品与 SEO 策略拆解

Z-Image 的产品设计特征：

• 简洁大气 UI、底部菜单
• 单页应用（SPA），多模型切换（FLUX、DALL·E 3、SD 等），左侧参数、右侧结果
• 底部关键词区 + 多语言切换

SEO 策略：

• 每个模型单独页面，便于被索引
• 多语言（十几种），把页面数量成倍放大
• 最终被 Google 索引 500+ 页面

转化设计：

• 频繁的付费弹窗、倒计时和动画特效制造紧迫感
• “免费”“省钱”等文案 + 积分体系
• Blog 高质量内容导流主页：文章 → 主站形成闭环，人工 + AI 混合撰写，避免低质 AI 文

5. 脚手架安装与项目结构

代码获取方式两种：下载压缩包或 Git Clone 公共仓库。

项目结构关键目录：

• i18n/：多语言文案（按语言 + 页面划分）
• app/：主要功能逻辑
• components/：UI 组件
• api/：聚合调用 EvoLink（打火机）等 API
• docs/：AI 参考文档说明（如 Google 鉴权）
• .env：环境变量

强调 CLAUDE.md 的作用：这是给 AI（Claude Code）看的“项目说明 + 编码规范”，重点规范：

• 不写冗余代码、不乱改已有代码、不重复造轮子
• 配置放环境变量，不要硬编码
• 不让 AI 自己启动服务，避免看不到日志
• 复杂功能先讨论方案，再开发
• 建议 AI 写规划文档记录进度

6. 环境配置与 Google 登录

基础流程：

• pnpm install 安装依赖 → pnpm dev 在 3006 端口启动
• 根目录创建 .env / .env.local，填环境变量；修改后必须重启服务

Google OAuth 配置步骤：

• 在 Google Cloud Console 创建 OAuth 客户端，类型选 External
• 授权 URL 填本地地址（如 http://localhost:3006）
• 配置回调地址为项目的登录回调 API
• 获取 Client ID / Client Secret，填进 .env

关键点：本地调试必须开系统级全局代理（包含终端/TUN 模式），仅浏览器代理不够，否则后端访问不了 Google OAuth 接口。

7. API 接入与图片生成

使用 EvoLink（打火机）的聚合 API，实现图片生成：

• 异步调用模式：提交任务（返回 task_id）→ 根据 task_id 轮询状态 → 进度与结果 URL
• 返回包含 progress（0–100）、status（pending/processing/completed/failed）、图片 URL

费用示例（人民币）：

• 1 积分 = 0.1 元
• 逆向 Light 版：约 0.23 元/张
• 官方 API：约 0.76 元/张（1K），约 1.2 元/张（4K）

强调：API 返回的图片 URL 通常是临时的，必须上传到自己的存储（R2/S3/OSS 等），再用自己的永久 URL 给用户访问。

8. AI 辅助页面复刻方法

两种高效复刻竞品 UI 的方式：

• 截图法

截图 → 喂给支持图像理解的 AI（如 Claude Code） → 要求按截图还原 UI + 功能。先让 AI 给方案，再写代码。

• 代码复制法

用 DevTools 选中页面元素 → Copy element → 把 HTML 给 AI，要求按照这段结构实现页面。适合要精确还原样式的场景。

工具对比简述：

• Claude Code：当前编程能力最强，Sonnet 4.5（快）+ Opus（更准）
• Codex：性价比高，价格更低
• Cursor：类似，但讲者更偏爱配合 Trae 使用

还提到 DevTools MCP，可让 Claude 自动调试页面。

9. Supabase 数据库与 Git 控制

数据库：

• 使用 Supabase 的 PostgreSQL，需创建项目 → 获取 URL 和 API Key → 写入 .env
• 在 Supabase SQL Editor 执行课程提供的初始化 SQL，生成四张核心表：

• users：用户信息
• credits：积分余额
• credit_records：积分流水
• orders：订单信息（订单号、金额、过期时间等）

强调 Supabase 免费版限制：2 个激活项目、50 万次 API/月、500MB DB。

Git 使用建议：

• 每完成一个功能就提交一次，有清晰 commit message
• 利用暂存区保护“当前稳定版本”，AI 改坏了就回滚
• 在 VS Code/Trae Git 面板看差异，必要时回退到某个 commit

10. 服务器部署与课后作业

内容包括：

• 用 Semrush 更细致区分关键词类型（信息型/商业型/导航型/交易型）
• 服务器推荐：Google Cloud、DigitalOcean；但前期 Vercel + Supabase 免费额度足够
• 当免费方案的限制成为瓶颈（比如 Supabase 项目数、Vercel 请求大小）再自建服务器
• 提到 Creem 作为支付网关（后续补充）

课后作业：理解直播内容，准备第二场需要的账号，配置好环境变量，把项目在本地跑起来。

第二场直播：登录、存图、接模型

11. 鉴权与 Google 登录原理

区分“认证”（你是谁）和“授权”（你能做什么）：

• 认证：使用 Google OAuth 确认用户身份（邮箱、头像）
• 授权：用 NextAuth 中间件根据会员级别控制权限（Starter/Pro）

Google 登录流程：点击按钮 → 跳到 Google 授权 → 用户确认 → Google 回调 → 应用拿到用户信息，入库。

多种登录方式对比：

• Google 登录：体验好，但依赖代理环境
• 邮箱登录：普适，但容易被脚本批量注册
• GitHub 登录：不一定要代理，但用户群偏程序员

Supabase Auth 也可做认证，但本项目用 NextAuth + Google OAuth 组合。

12. Supabase 数据库配置细节

再次演示实操流程：

• New Project → 拿 URL + API Key → 写入 .env → 重启项目
• 在 SQL Editor 执行 data/ 目录中的 SQL
• 在 Table Editor 验证四张表已创建

表字段大致包括用户 ID、邮箱、创建时间、订单金额、积分余额、积分变更记录等。

13. Cloudflare R2 对象存储接入

R2 用来存放图片/视频结果，特点是：出站流量免费、10GB 免费空间、自带 CDN，加速和省成本。

配置步骤：

• 在 Cloudflare 创建一个 R2 bucket
• 在 API 令牌页创建自定义 Token，给读写权限
• 获取 Account ID、Access Key ID、Secret Access Key，写进 .env

技术点：

• R2 兼容 S3 协议，可以直接使用 AWS SDK v3
• 实现上传、读取、删除、生成预签名 URL（前端直传场景）

建议：直接把 R2 API 文档复制给 AI，让它按文档实现上传逻辑。

14. 域名解析与 HTTPS 代理

使用 Cloudflare 代理的原因：

• 自动处理 HTTPS 证书
• 提供安全防护（防攻击、劫持等）
• 免费加速

链路：用户（HTTPS）→ Cloudflare →（HTTP）你的服务器。用户侧是加密的，服务器与 CF 可以简单配置。

托管操作：

• 在 Cloudflare 添加站点，选择免费计划
• Cloudflare 给出两条 NS 记录
• 回到域名注册商，把 NS 改为 Cloudflare 提供的
• 生效后，在 Cloudflare DNS 中配置 A/CNAME 指向服务器或 Vercel 域名

15. 视频生成 API 接入

视频生成的逻辑与图片类似，也是异步任务：

• 提交任务（video 接口）→ 得到 task_id → 轮询状态直到完成

VIDU V3 模型常见参数：

• model、prompt、size、type（文生/图生/首尾帧）、enhance、quality（720P/1080P/4K）、reference_image 等

价格示意：Light 版约 0.96 元/8 秒，官方 API 约 3 元/4 秒等。

实现方法同样是：找到 EvoLink 的 VIDU 文档 → 复制给 AI → 指定写在哪个页面 → 实现视频生成功能。

强调：不需要所有功能都做完再上线，一个核心功能能跑就可以先发布。

16. 产品灵感与“蹭词”策略

产品灵感来源：

• 刷 Toolify 月榜，关注 50 名以后的新站，看哪些功能可以简单复刻
• 搜“video generator”“image to video”等关键词，看 SERP 上的产品形式

蹭词站 vs 品牌站：

• 蹭词站：抢注新模型名（如 sora、nano）的域名，短期吃热点流量，窗口期很短
• 品牌站：用自己的品牌名（如 Polo AI），前期没自然流量，但长期价值大
• 功能词站：使用通用功能词（如 image generator），对应稳定搜索需求

课程教练团队主要在做品牌站。

第三场直播：从本地到线上部署

17. Vercel 部署流程

Vercel 用于托管 Next.js 项目，自动从 GitHub 仓库拉取并构建：

基本步骤：

• 登录 Vercel，创建项目，绑定 GitHub 仓库
• 在 Vercel Environment Variables 中填入 .env 中所有变量
• 点击 Deploy，完成后会得到 xxx.vercel.app 域名

部署失败常见原因是 TypeScript 编译错误：

• 建议本地先跑 pnpm build
• 或直接让 AI 尝试编译并修复类型问题

重点：Vercel 不支持直接上传 .env 文件，所有变量必须手动填。

18. 域名绑定与 Cloudflare 解析

自定义域名绑定流程：

• 在 Vercel 项目设置中添加自定义域名
• 在 Cloudflare 的 DNS 中加 CNAME 记录，指向 Vercel 提供的值
• 生效后，Vercel 显示绿状态

同时需要：

• 在 Google Cloud Console 将授权 URL 和回调 URL 都换成正式域名
• Cloudflare 代理模式设置为 Full，确保 HTTPS 正常
• 主域名和 www 建议都做解析

19. PageSpeed 性能优化

使用 Google PageSpeed Insights 检测：

• 输入你的域名，获取 PC 和移动端的性能与基础 SEO 评分
• 关注 LCP / CLS / INP 指标及优化建议

常用优化手段：

• 图片压缩和尺寸优化，将资源放在 CDN（R2 等）
• 控制 JS 体积，避免 AI 生成巨型组件
• 页面结构和资源加载顺序调整

看不懂报告时，可以把报告链接给 AI，帮你翻译成具体要做的改动。

20. 获客成本与品牌策略

讲者用实战数据说明：投了几千块广告换来约 1000 注册，但早期转化几乎没有，因为产品不成熟。

获客成本不仅是广告费，也包含：

• API 调用的成本
• 免费积分/免费额度本身也是成本

提升转化的思路：

• 降低门槛：免登录试用，让用户先体验价值
• 增加黏性：签到送积分（参考“不要泡了”这种签到体系）
• 功能迭代 + 版本更新通知，唤回老用户
• 用“漏斗”看全流程：曝光 → 注册 → 使用 → 付费

再次强调：品牌站是长期资产，蹭词站更多是短期套利。

21. 登录方案与代理配置细节

针对“Google 登录超时”问题的深度说明：

• 浏览器能上 Google ≠ 后端能调用 Google API
• 必须开系统代理 + TUN/增强模式，让终端也通过代理出网
• 在终端 ping google.com 检查连通性

如果就是搞不定：

• 可以考虑邮箱登录、GitHub 登录或 Supabase Auth 的其他方式
• 使用支持 TUN 的代理客户端（如 Clash Verge），也可以购买稳定的海外固定 IP

22. 数据埋点与 MVP 验证

上线后用 GA4 做基础数据分析：

• 核心指标：用户停留时长、跳出率
• 跳出率建议控制在 50% 以下；停留时长短说明产品价值不够

前提是要有“精准流量”：广告不要打给完全不对齐的用户群，否则数据没有参考价值。

接入 GA4：

• 在 Google Analytics 创建 GA4 资源，获取 Measurement ID
• 在项目中接入 GA4 代码（可交给 AI 实现）
• 上线后通过 GA4 看实时和历史数据

附录部分：上线检查与实用清单

上线检查清单

分为 4 大类：

• 功能测试：登录、图片/视频生成、积分扣减、支付、多语言等是否正常
• 移动端适配：布局、按钮可点、图片自适应、弹窗可关闭
• 性能：PageSpeed 移动端 > 60，桌面 > 80，LCP < 2.5 秒，CLS < 0.1，首页加载 < 3 秒
• 环境变量与配置：Vercel 的环境变量是否全配、OAuth URL 是否更新、Supabase / R2 / API Key 是否可用

最终确认 HTTPS 证书正常、自定义域可访问、GA 已接入、全功能测试通过。

域名注册参考

推荐平台：Namecheap、Cloudflare、GoDaddy、阿里云等。

选域名建议：简短、易记，尽量 .com，其次 .ai / .io / .co，适当包含产品或功能关键词，避免连字符和数字。

竞品拆解模板

提供了一套可以直接套用的模板：

• 竞品基础信息：名称、网址、注册时间、流量、流量来源、核心关键词、付费模式
• 功能拆解表：哪些必须有，哪些可选
• UI/UX 分析表：首页布局、交互体验、付费引导、移动端适配点，以及你的改进思路

环境变量配置参考

集中列出了项目所需的所有环境变量，包括：

• Google OAuth（客户端 ID、密钥）
• NextAuth（SECRET、URL）
• Supabase（URL、Key）
• Cloudflare R2（Account ID、Access Key、Secret、Bucket Name）
• EvoLink API Key 等

每一项给出用途和获取路径，方便照着填 .env。

常见问题汇总

针对高频坑做了统一回答，例如：

• Google 登录超时（必须开系统代理 + TUN）
• Supabase 免费版限制
• Vercel 编译失败（多是 TS 类型问题）
• 环境变量修改不生效（要重启）
• AI 代码质量差（先出方案、配合 Git 暂存与回滚）
• 域名解析延迟
• Vercel 请求大小限制（建议前端直传到 R2）

整体来说，这页内容相当于一份完整的“AI 图片/视频站一周复刻指南”：从基础 Web 知识、竞品和 SEO，到技术落地（脚手架、OAuth、数据库、R2、API）、再到部署、性能、获客和数据分析，已经涵盖了从 0 到 1 做一个海外 AI MicroSaaS 工具站的大部分关键步骤和思路。