我用 AI 做了第一个产品,聊聊全过程和踩过的坑

很多技术人员心里都有一个"做产品"的梦想，但真正动手的人并不多。原因很现实：门槛太高。要写前端、后端、数据库，还要考虑部署、运维、安全……全栈开发的知识储备就把大多数人拦在门外。找外包？质量难以把控；招团队？成本又太高。

AI 编程工具的爆发正在改变这个游戏规则。当 Cursor 和 Claude Code 这类工具成熟之后，一个人从想法到上线一个可用产品，所需的时间从几个月压缩到了几天，甚至更短。 那些以前只有创业公司才能做的事，现在一个技术人员借助 AI 工具就能完成。

本文记录了作者用这套工具组合开发一个 AI 视频生成网站的完整过程——从需求分析、技术选型，到具体开发、踩坑修复，再到最终部署上线。没有神话，只有真实的经验和教训。

一、需求分析：先想清楚要做什么

动手之前，花了两周时间做需求分析。很多人觉得这个阶段是在浪费时间，恨不得马上写代码。但 AI 编程工具的本质是执行效率极高，决策效率不变。如果需求本身不清楚，AI 只会让错误的方向走得更快。

这个阶段的核心问题是：目标用户是谁，他们真正需要什么？

经过调研，发现目标用户有两类：一类是短视频创作者，他们需要快速生成配图和开场视频，节省拍摄成本；另一类是中小商家，他们需要批量制作产品展示视频用于电商详情页或社交媒体推广，但没有预算请专业视频团队。

这两类用户的共同需求是"快"和"便宜"。 现有市场上的 AI 视频工具，要么价格太高（Runway、Pika 等月费在 20-100 美元），要么操作复杂（需要阅读大量文档和学习曲线），要么生成质量不够稳定。作者决定做一个中间地带的产品：操作足够简单（不需要任何教程就能上手）、价格亲民（月费 9.9 美元起）、生成质量基本可用（能用在非专业场景）。

具体的功能清单在需求分析阶段就定了下来：

• 输入文字描述，自动生成 5-15 秒视频
• 提供多个视频风格模板，用户可以自定义主体和场景
• 支持导出 MP4，兼容抖音、快手、小红书等平台尺寸要求
• 基础版免费，高级功能订阅制
• 支持草稿保存和批量生成

需求文档用了约 2000 字，把"做什么"和"不做什么"都写清楚了。 "不做什么"同等重要——它避免了产品长成四不像，也让 AI 编程时有了清晰的边界。AI 擅长在给定边界内快速产出，但如果边界模糊，它产出的内容也会跟着模糊。

二、技术选型：Cursor + Claude Code 组合

技术选型是整个过程中最关键的一步，选对了可以事半功倍，选错了则会步步踩坑。作者的目标很明确：用最少的自己写代码，组合现有的成熟工具和服务，最大化 AI 编程工具的效率。

为什么选 Cursor

Cursor 是目前最成熟的 AI 代码编辑器之一，基于 VS Code 定制开发，核心优势在于深度集成 LLM 的 IDE 体验。相比普通 IDE，Cursor 能理解整个项目的上下文，在编写代码时实时给出建议，甚至能直接帮你修改文件，不需要手动复制粘贴。

在开发 AI 视频生成网站的过程中，Cursor 的最大价值体现在三个方面：

第一，代码补全的精准度。 Cursor 的代码补全不是简单的字符串匹配或模板填充，而是理解代码语义之后给出的建议。在写 React 组件时，它能准确预测你想写的下一个函数调用，甚至能理解你定义的类型系统，给出符合 TypeScript 类型要求的代码。这种理解上下文的补全能力，让写代码的流程变得非常流畅。

第二，多文件编辑能力。 当你需要修改多个相关文件时，Cursor 的 Composer 模式可以把多个文件的改动一次性生成。它能理解这些文件之间的依赖关系，确保修改是一致的，而不是各自为政。这避免了来回切换文件的碎片化问题，也让 AI 生成的内容更有整体性。

第三，错误解释和修复功能。 遇到 bug 时，Cursor 能直接解释这段代码为什么会出错，并给出修复建议。这个功能在调试复杂的视频处理逻辑时特别有用——视频相关的代码往往涉及多线程、流式处理等复杂概念，AI 的解释能帮你快速定位问题根源。

为什么选 Claude Code

Claude Code 是 Anthropic 官方推出的 CLI 工具，通过命令行直接调用 Claude 的能力。它的核心优势是强大的推理能力和超长上下文窗口。Claude Code 能读取整个代码库，理解项目结构，然后给出精准的建议。

在开发过程中，Claude Code 主要负责三类任务：

第一，技术调研和方案设计。 当你不确定某个技术方案时，直接问 Claude Code，它能给出详细的方案对比和推荐，包括每个方案的优缺点、适用场景和大概的实现思路。这比在搜索引擎上东一块西一块地找答案要高效得多。

# 询问视频处理方案
claude-code "我需要在前端实现视频的客户端转码，有什么好的库推荐？需要支持在浏览器里把用户上传的视频压缩到 720p，耗时控制在 30 秒以内"

第二，代码片段生成。 对于复杂的业务逻辑，先在 Claude Code 里写好代码片段，确认逻辑正确后再粘贴到 Cursor 里使用。这种方式避免了 AI 生成的代码在项目里四处分散、难以管理的问题。Claude Code 擅长处理复杂的多步骤逻辑，而 Cursor 擅长在已有项目结构中精准修改文件。

第三，API 对接代码。 对接第三方 AI API（OpenAI、Replicate 等）时，Claude Code 能直接生成完整的调用代码，包括错误处理、重试逻辑、超时控制、参数校验等。这种标准化的代码生成避免了人工编写时容易遗漏的边界情况。

开源模板：不要从零开始

踩过的第一个大坑就是"从零开始"。 第一次尝试时，作者想自己搭一个完整的前后端框架，用了 Next.js + Prisma + PostgreSQL 的组合，还自己设计了数据库 schema。结果光是配置开发环境就花了一整天，AI 编程工具在这时候反而成了负担——你得先理解框架怎么工作，才能让 AI 帮你写代码；如果你对框架本身不够熟悉，AI 给的建议你也判断不了对错。

第二个思路是从开源模板出发。作者找到了 Vercel 上的一个 AI SaaS 模板（基于 Next.js 14 + Supabase），这个模板已经解决了大量基础问题：

• 用户认证（支持 Google OAuth 和邮箱密码登录）
• 数据库 schema 和 CRUD API（已完成设计）
• 订阅支付集成（Stripe 测试模式已跑通）
• 基础的管理后台（用户列表、订阅管理）
• 邮件通知模板（注册、订阅、到期提醒）

基于这个模板改造，核心功能开发只用了 3 天，而从零开始搭建同等质量的基础架构据说需要 2 周。核心功能从零开始需要 2 周，基于模板改造只用了 3 天，效率差距是 5 倍以上。 这个经验教训很重要：AI 编程工具在现有框架基础上写业务代码时效率最高，从零搭框架时反而束手束脚，因为 AI 不理解你自己设计的架构逻辑。

最终技术栈

经过选型，最终的技术栈如下：

• 前端框架： Next.js 14（App Router）+ Tailwind CSS + Shadcn UI
• 后端： Next.js API Routes + Supabase Edge Functions
• 数据库： Supabase PostgreSQL（包含 Auth、Storage、Database 三大服务）
• AI 模型： Replicate API（调用开源视频生成模型）+ OpenAI API（GPT-4o 生成优化 Prompt）
• 支付： Stripe（订阅制）
• 部署： Vercel（前端）+ Supabase（后端服务）

选择这个栈的原因很简单：Supabase 提供了数据库、存储、认证一体化的后端服务，减少了自己维护服务器的工作量；Replicate 提供了无需自己训练和部署的 AI 模型 API，按调用次数计费；Stripe 则是最成熟的 SaaS 支付解决方案。所有组件都是经过大量项目验证的，出了问题容易找到解决方案。

三、开发过程：从"能跑"到"能用"

第一阶段：骨架搭建（2天）

基于模板搭建出产品骨架是最快的。这个阶段主要做两件事：替换 UI 品牌和配置第三方服务。

用 Cursor 的 Composer 模式，把模板里的品牌色、Logo、首页文案全部替换成自己的内容，涉及约 15 个文件，改动量不大，大概花了 4 个小时。

配置 Supabase 和 Stripe 花的时间更长一些。Supabase 的配置相对简单，主要是创建项目和设置 RLS（Row Level Security）策略。这里踩了第一个坑：Stripe CLI 的本地转发没有配置好，导致支付 webhook 一直收不到事件，订阅状态无法同步到数据库。

最终解决方案是直接用 Stripe 官方提供的测试卡片完成支付流程验证，不需要每次都依赖 CLI 转发：

# 启动 Stripe CLI 转发到本地
stripe listen --forward-to localhost:3000/api/webhooks/stripe

# 用测试卡号验证支付流程
# Stripe 测试卡号：4242 4242 4242 4242（任意未来日期 + 任意 CVC）

第二阶段：核心功能开发（5天）

这是最耗时、也是踩坑最多的阶段。AI 视频生成的核心流程是：

1. 用户在前端输入文字描述（Prompt）
2. 后端调用 Replicate API 创建视频生成任务
3. 前端建立 SSE 连接，实时接收任务状态更新
4. 视频生成完成后，在服务器端压缩并上传到 Supabase Storage
5. 返回视频 URL 给前端，用户可以预览和下载

踩过的三个主要坑：

坑一：Replicate API 的异步任务处理不当。 Replicate 的视频生成是异步的，任务创建后会返回一个 prediction ID，前端需要通过这个 ID 查询任务状态。一开始的实现直接在前端 setInterval 轮询，结果当用户生成视频后关掉页面，轮询还在继续——大量无用的 API 调用既浪费钱又给服务器增加负担。

修复方案是使用 Server-Sent Events（SSE），让服务器在视频生成完成时主动推送结果给前端，前端收到后立即关闭连接：

// pages/api/video/generate.ts
export async function GET(req: Request) {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      const pollInterval = setInterval(async () => {
        const status = await checkReplicateStatus(predictionId);
        // 每 5 秒推送一次状态
        controller.enqueue(encoder.encode(`data: ${JSON.stringify(status)}\n\n`));
        if (status.status === 'succeeded' || status.status === 'failed') {
          clearInterval(pollInterval);
          controller.close();
        }
      }, 5000);
    }
  });
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

坑二：视频文件太大，上传超时。 生成的视频文件通常在 50MB 以上，直接上传到 Supabase Storage 超时频繁，用户体验很差。服务器带宽有限，大文件上传容易在高并发时拖垮整个服务。

解决方案是先在服务器端用 FFmpeg 压缩再上传：

# 安装 FFmpeg（macOS）
brew install ffmpeg

# 压缩视频到 720p，码率 2Mbps，音频 128kbps
ffmpeg -i input.mp4 -vf "scale=-2:720" -b:v 2000k -c:a aac -b:a 128k output_compressed.mp4

Node.js 调用 FFmpeg 的代码：

const { spawn } = require('child_process');
const path = require('path');

async function compressVideo(inputPath, outputPath) {
  return new Promise((resolve, reject) => {
    const ffmpeg = spawn('ffmpeg', [
      '-i', inputPath,           // 输入文件
      '-vf', 'scale=-2:720',   // 等比缩放高度到 720p
      '-b:v', '2000k',          // 视频码率 2Mbps
      '-c:a', 'aac',            // 音频编码 AAC
      '-b:a', '128k',           // 音频码率 128kbps
      outputPath
    ]);
    ffmpeg.on('close', (code) => {
      if (code === 0) resolve();
      else reject(new Error(`FFmpeg exited with code ${code}`));
    });
  });
}

压缩后的视频文件通常能减少 60-70% 的体积，从平均 50MB 降到 15MB 左右，上传时间从 2 分钟缩短到 15 秒。

坑三：没有内容安全审核机制。 AI 视频生成工具如果被滥用来生成不适当内容，会带来严重的法律和声誉风险。上线前必须补上这环。

最终方案是接入了阿里云的内容安全 API，在用户提交 Prompt 时和视频生成完成后各做一次检测，违规内容直接拒绝生成并记录日志：

// 内容安全检测
async function checkContentSafety(text) {
  const response = await fetch('https://green-cn-hangzhou.aliyuncs.com/green/text/scan', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.ALIYUN_ACCESS_KEY}`
    },
    body: JSON.stringify({
      content: text,
      categories: ['politics', 'violence', 'porn', 'ad']
    })
  });
  const result = await response.json();
  return result.data[0].suggestion === 'pass';
}

第三阶段：UI 优化和用户体验（3天）

功能能用之后，开始优化体验。这个阶段 AI 工具的优势最明显——让 AI 帮你写 UI，比自己写要快得多，而且 Shadcn UI 的组件质量本身就不错，不需要从零设计。

主要做了三件事：

第一，简化视频生成流程。 原来的流程是"输入描述 → 选择模板 → 配置参数 → 生成视频"四步，改成"输入描述 → 一键生成"，模板在后台根据 Prompt 内容自动匹配合适的风格。用户只需要想清楚"要什么"，不需要知道"怎么选"。

第二，增加实时 Prompt 预览。 在用户输入 Prompt 的同时，调用 DALL-E 生成一张参考预览图，让用户在正式生成视频前就能看到 AI 理解的内容大致是什么样的。这个功能大幅减少了"生成完了发现不对"的情况，也降低了用户重新生成的次数，间接节省了 API 调用成本。

第三，优化移动端体验。 产品上线后发现手机访问比例超过 40%，但原来只做了桌面端适配，移动端布局混乱，操作按钮过小。Cursor 的 AI 在这个阶段帮忙重写了移动端的 CSS 布局，响应式改造只花了大半天，关键就是在 Tailwind 的响应式类名里正确表述需求。

四、部署上线：从本地到生产环境

本地开发完成后，部署到 Vercel 反而是最顺利的部分。这主要得益于 Next.js 和 Vercel 的深度集成，以及模板本身已经做好了部署适配。

但还是踩了两个坑：

坑一：环境变量配置不一致。 本地开发用的 .env.local 文件里有 20 多个环境变量，包括 Supabase 的 URL 和 Key、Stripe 的密钥、Replicate 的 Token、阿里云的内容安全 Key 等等。手动在 Vercel Dashboard 里一个个配置既繁琐又容易出错漏掉。

用 Vercel CLI 一次性导入搞定：

# 从本地 .env 文件拉取到 Vercel 项目环境变量
vercel env pull .env.production

# 生产环境部署
vercel --prod

坑二：Stripe 生产环境与测试环境的 Webhook 密钥不同。 上线前一直在用测试模式（Stripe Test Mode），切换到生产模式时忘记在 Vercel 更新 Stripe 的 Webhook 端点，导致真实支付收不到确认事件，用户付了钱但订阅状态没有开通。这个 bug 持续了 6 个小时才发现，期间所有真实交易都没有正常开通订阅。 教训是：切换环境时必须建立 checklist，逐项核对，不能靠记忆。

坑三：Supabase Storage 的 CORS 配置缺失。 本地开发时没有跨域问题，部署到 Vercel 后视频播放报 CORS 错误，浏览器拦截了请求。在 Supabase 后台给 Storage bucket 添加了正确的 CORS 规则后解决：

{
  "CorsRule": [
    {
      "AllowedOrigins": ["https://your-domain.com"],
      "AllowedMethods": ["GET", "POST", "PUT", "DELETE"],
      "AllowedHeaders": ["*"],
      "MaxAgeSeconds": 3600
    }
  ]
}

部署完成后，作者把产品链接发到了几个技术社群和小红书，第一周就自然增长了 300 多个注册用户，付费转化率约 8%。 这个数字比预期好很多——说明市场需求确实存在，产品找到了对应的人群。

五、复盘：做了这些才真正有价值

回头看整个过程，有几件事对项目成功起了决定性作用，还有一些事则是纯粹浪费了时间。

真正有价值的事：

第一，开源模板的选择。 基于成熟的 SaaS 模板开发，节省了大量"造轮子"的时间。模板已经解决了认证、支付、数据库设计这些基础但麻烦的问题，AI 编程工具在现有框架基础上写业务代码时效率是最高的。

第二，需求足够聚焦。 只做"文字生成视频"这一个功能，没有在一开始就铺去做图、配音、剪辑等周边功能。单点突破，把一件事做到 80 分，比做十件事都只有 40 分更有价值。 资源有限的时候，做减法比做加法更重要。

第三，快速发布验证需求。 产品上线第一周就收到了大量真实用户的反馈。有人抱怨视频生成速度太慢（平均 3-5 分钟），有人说手机端操作不跟手，还有人说希望支持竖屏视频。这些反馈直接指导了第二版迭代的方向，是坐在家里想象用户需求永远得不到的信息。

第四，持续学习 AI 工具的进阶用法。 Cursor 和 Claude Code 都有很多进阶功能，比如自定义 AI 提示词模板、配置项目知识库让 AI 更懂你的代码结构、使用快捷命令自动化常见任务等。把这些工具用熟之后，开发效率还有 30-50% 的提升空间。

浪费了时间的事：

从零搭建框架的那两天是最大的时间浪费。如果一开始就选择用开源模板，那两天可以省下来用到更重要的功能开发上。另外，过早优化了一些还没验证的需求，比如花了两天做的"批量生成视频"功能，上线后发现使用率极低，大部分用户只需要单次生成。

六、总结：AI 降低了做产品的门槛，但没有消除它

用 AI 工具做产品的体验，用一句话总结就是：它让"做出来"变得更容易，但"做对"还是要靠人。

Cursor 和 Claude Code 能帮你快速写代码、快速试错、快速验证想法，但需求分析、用户体验设计、商业逻辑这些事情，AI 帮不了你。一个需求想不清楚，用 AI 写代码只会让错误的方向走得更快。AI 是杠杆，你的认知是支点——支点不稳，杠杆越长，偏差越大。

对于想用 AI 工具做产品的技术人员，作者最实在的建议是：先从一个小而美的点开始做，边做边学。 不要一开始就想着做一个"平台"或"生态"，先验证一个具体需求是否真实存在、是否有人愿意为此付费，比什么都重要。想清楚一个小问题，比解决一堆大问题更有价值。

AI 视频生成这个赛道现在还处于早期，模型能力在快速提升，应用层的空间还很大。 Runway、Pika 这样的先行者已经在教育市场，Sora 的到来更是点燃了大家对 AI 视频的想象。如果你也有想做的产品想法，现在就是最好的时间窗口——工具足够成熟，市场还在教育早期用户，大家愿意尝试新东西。关键是，先动手。