从 0 到 1 开发一个 AI 视频提示词生成工具：我的「导演工具」项目复盘

产品地址：story.limw.top | 技术栈：Next.js 16 + PostgreSQL + 多模态视觉模型

一、为什么要做这个工具？——需求洞察

做电商的朋友都经历过：拍一条 15 秒的产品视频，从写脚本、画分镜、到找素材、请剪辑，动辄几天起步。而 AI 视频生成工具（Runway、Pika、即梦、可灵）已经能产出相当质量的视频，但最大的门槛不再是生成能力，而是"提示词"本身——大多数人根本不知道该怎么写一段能让 AI 生成高质量视频的 prompt。

这个工具要解决的就是这个痛点：用户上传商品图片，自动输出 9 镜头专业分镜头脚本，包括每个镜头的景别、运镜、画面内容、卖点方向，以及直接可用的英文 AI 视频提示词。

目标用户很清晰：跨境电商卖家、国内电商运营、短视频内容创作者——他们需要大量产品视频素材，但缺乏视频导演的专业能力。

二、产品设计思路

核心交互极简：上传图片 → 选择参数 → 生成分镜，三步完成。

表单区只有四个选择：商品类型（箱包/服装/数码/美妆）、视频风格（高级感/日常/户外/商务/轻奢）、投放平台（TikTok/抖音/Amazon）、时长（15s/30s）。选择这些参数不是为了让操作变复杂，而是为了让 AI 生成的内容更精准——不同品类的分镜套路完全不同，箱包卖的是材质和容量，美妆卖的是质地和妆效。

商业模式上采用了"后付费"机制：用户提交任务时不扣费，拿到满意结果后才扣，避免 AI 抽风导致用户白花钱。新用户注册即送 3 次免费试用，4 档付费套餐覆盖测试到重度使用。

三、技术架构

┌─────────────────────────────────────────────┐
│                 Next.js 16 App Router        │
│  ┌──────────────────────────────────────┐   │
│  │        page.tsx (单页 SPA)            │   │
│  │  form → polling → storyboard display │   │
│  └──────────────┬───────────────────────┘   │
│                 │ HTTP                       │
│  ┌──────────────▼───────────────────────┐   │
│  │           7 个 API Routes             │   │
│  │  auth/sms | generate | tasks | pay   │   │
│  └──────────────┬───────────────────────┘   │
│                 │                            │
│  ┌──────────────▼───────────────────────┐   │
│  │          Service Layer                │   │
│  │  storyboard-engine | ai-service      │   │
│  │  prompt-templates | billing-service  │   │
│  └──────────────┬───────────────────────┘   │
│                 │                            │
│  ┌──────────────▼───────────────────────┐   │
│  │    PostgreSQL (Supabase) + Prisma     │   │
│  └──────────────────────────────────────┘   │
└─────────────────────────────────────────────┘

前端：Next.js 16 App Router，单页面应用（"use client"）。放弃多页路由，所有状态在一个页面内流转：idle → loading → success/error，配合登录弹窗、支付弹窗的按需弹出。UI 全部 Tailwind CSS v4 + Lucide 图标，深色主题。

后端：7 个 API Route，承载认证、生成、任务轮询、支付回调四块功能。生成链路是异步的——提交即返回 202 + taskId，前端每 3 秒轮询任务状态（最长 120 秒超时）。

数据库：PostgreSQL (Supabase 托管)，Prisma ORM，5 张表：User、VerificationCode、Usage、Order、Task。

AI 层：OpenAI 兼容接口抽象，一套代码同时支持豆包（doubao-seed-1-6-vision）、智谱（GLM-4V-Plus）、GPT-4o 三个视觉模型，环境变量切换即可，零代码改动。

四、核心功能实现：从图片到专业分镜脚本

这是整个项目最有技术含量的部分，拆成四个环节：

4.1 图片解析

浏览器端用 FileReader 读文件并校验尺寸（最大 4096px、10MB、JPG/PNG/WebP/HEIC），服务端用 Buffer 转 base64。两套代码路径严格分离，因为 FileReader 和 Image 对象只在浏览器环境可用。

// 客户端：FileReader + Image (获取尺寸)
const reader = new FileReader();
reader.readAsDataURL(file);
const img = new Image();
img.src = url; // 获取 naturalWidth / naturalHeight

// 服务端：Buffer 直转
const buffer = Buffer.from(await file.arrayBuffer());
const base64 = buffer.toString("base64");

转换后的 base64 图片直接嵌入 OpenAI 兼容 API 的 image_url 块中发送给视觉模型，不走任何中间存储，节省了对象存储的成本。

4.2 Prompt 工程

System Prompt 将 AI 角色设定为"专业电商视频导演"，强制 JSON-only 输出，并给出 7 个字段的精确 schema：

{
  "id": 1,
  "duration": 1.5,
  "shot": "特写",
  "camera": "推进",
  "content": "中文画面描述（50-100字）",
  "selling_point": "卖点方向（10-20字）",
  "prompt_en": "英文 AI 视频提示词（≤200字符，纯英文）"
}

User Prompt 部分则根据商品类型注入不同的"分镜套路"。以箱包为例，9 个镜头分别对应：

镜头	目的
1	Logo/材质特写 → 建立品质感
2	360度旋转 → 展示包型轮廓
3	通勤场景佩戴 → 场景代入
4	打开内部 → 展示容量
5	五金/缝线特写 → 做工信任
6	多角度快速切换 → 全面展示
7	不同搭配 → 百搭属性
8	核心卖点强化 → 购买理由
9	品牌收尾定格 → 转化引导

这套模板来自实际电商视频的套路总结，四种品类（箱包/服装/数码/美妆）各有一套，确保了生成内容的专业性和一致性。

4.3 AI 调用与容错

Provider 抽象：OpenAICompatibleProvider 封装了所有 OpenAI 兼容接口的视觉模型。豆包走火山方舟（ark.cn-beijing.volces.com），智谱走 open.bigmodel.cn，GPT-4o 走默认地址。三个 provider 共享完全相同的调用代码，切换只需改环境变量。

JSON 提取：视觉模型偶尔会在 JSON 外包一层 markdown code block，或者在前面加几句"Here is the storyboard:"的废话。解析器做了两层防御：

// 1. 正则剥离 markdown code block
const match = text.match(/```(?:json)?\s*([\s\S]*?)```/);
// 2. 查找 JSON 起止大括号位置
const start = text.indexOf("{");
const end = text.lastIndexOf("}");
cleaned = text.slice(start, end + 1);

自动重试：JSON 解析失败时自动重试一次（不是无限重试，避免消耗过多 token）。实测下来，首次成功率约 85%，二次重试后成功率达到 98%+。

4.4 prompt_en 的硬约束

prompt_en 是最关键也是最有挑战的字段——它必须 ≤200 字符、≤50 个英文单词、纯英文无中文。这是为下游 AI 视频生成工具（Runway/Pika/即梦）适配的硬性限制。System Prompt 里反复强调了这个约束，并在解析阶段做了长度校验，超长的会被要求重试。

4.5 30 秒视频的分段处理

15 秒视频直接用 9 个镜头。30 秒视频则在生成 9 个镜头后，在第 5 个镜头处拆分：part1（1-5 镜头）和 part2（6-9 镜头），各带独立的 full_prompt，方便用户在视频工具中分段生成再拼接。

五、后付费计费系统

"先出结果，后扣费"的异步扣费模型：

提交时只校验余额 ≥ 1，不扣费
后台异步生成，完成后结果写入 Task 表
前端轮询到 status === "completed" 时，触发首次扣费
扣费成功后标记 isCharged = true，返回结果

并发安全靠 PostgreSQL 的原子更新保证：

UPDATE User SET credits = credits - 1
WHERE id = $userId AND credits >= 1

Prisma 的 updateMany 配合 where: { credits: { gte: 1 } } 实现了 TOCTOU 防护——两人同时拿同一个结果时，只有一个人能扣成功。

六、部署与成本控制

部署在单台 2C4G 的轻量云服务器上，每月成本不到 100 元。用到的几个低成本策略：

利旧 PostgreSQL：复用 Supabase 免费额度（500MB 数据库），不用额外部署数据库
无对象存储：图片 base64 直传 AI API，不落盘，无需 OSS
纯 API Route：没有独立的 Node.js 后端服务，全部用 Next.js API Route，减少运维复杂度
PM2 进程守护：next start 由 PM2 管理，自动重启
一键部署脚本：本地打包 → scp 上传 → 解压安装依赖 → pm2 reload，一行命令完成

遇到的坑：Next.js 16 生产模式下编译需要较多内存，1G 内存的机器 npm run build 会 OOM。解决方案是在本地 build 后把 .next 目录一起打包上传，服务器只跑 next start。

七、下一步优化方向

更多商品品类：目前支持 4 种，扩展到 10+ 种需要补充对应的分镜规则模板
生成结果评分/反馈：收集用户对生成结果的满意度，用于优化 prompt 模板
视频预览：生成分镜后如果能直接调用视频生成 API 产出一段预览，闭环体验会大幅提升
边端函数加速：AI 调用耗时 15-30 秒，如果改成 SSE 流式返回生成过程，用户等待体验会更好

写在最后

这个项目从 idea 到上线大约花了两周时间。最大的感受是：AI 时代的产品开发，核心竞争力不再是"能不能调用 AI"，而是"你能把 AI 封装得多好用"。prompt 工程的质量、领域知识的注入、交互流程的打磨，这三件事决定了用户是否愿意为你的产品付费。

如果你也在做类似的 AI 工具产品，欢迎交流。