前言

2026年美加墨世界杯，48支球队，万众瞩目。

作为一名资深球迷，每次世界杯我都想亲临现场，但现实总是—— 签证搞不定、机票太贵、门票抢不到、请假不批……

今年，我突发奇想：既然去不了现场，能不能用AI"去"一次？

于是我用vibe coding工具做了一个AI视频创作平台——"演员请就位-美加墨世界杯"，让用户上传一张照片，就能生成自己身披世界杯球衣、站在赛场中央的宣传片和定妆照。

这篇文章，我会从产品构思、技术实现、测试中发现的问题、迭代方向四个维度，完整复盘这个项目的开发过程。

---

一、产品构思：从"痛点"到"解法"

1.1 核心痛点

做这个产品之前，我先问了自己一个问题：

球迷在世界杯期间最想要什么？

答案很直接：参与感。

• 想穿自己喜欢的球队球衣站在赛场上
• 想和喜欢的球星"同框"
• 想在社交媒体上发一条"我在世界杯"的视频

但这些，没有一个是普通球迷能轻易实现的。

1.2 解法：AI + 世界杯 = 低门槛参与感

借助AI图像生成和视频合成技术，我们可以：

• 把用户的照片，换成身穿世界杯球衣的角色
• 把角色放进世界杯赛场的场景中
• 合成一段带有氛围感的宣传片视频

整个流程，用户只需要上传一张照片，点几下按钮，30秒内完成。

这就是"演员请就位-美加墨世界杯"的核心设计思路。

---

二、技术实现方案

2.1 整体架构

用户上传照片
    ↓
AI 人脸检测 + 换脸（定妆照生成）
    ↓
根据选定剧本，生成场景剧照
    ↓
多张剧照 + 背景音乐 → 合成宣传片视频
    ↓
用户下载 / 分享

2.2 技术选型

模块	技术方案	说明
前端框架	低代码平台	快速搭建，无需从零写前端
AI 换脸	AI图生图	生成定妆照
剧本管理	JSON 数据结构	22个剧本，支持动态扩展
视频合成	FFmpeg + WebCodecs	前端合成，无需后端服务器
部署	云部署	一键发布，自动 CDN 加速

2.3 核心设计：剧本驱动

这是整个产品最重要的设计决策——不是让用户从零创作，而是提供丰富的剧本模板，用户只需要"选角"。

每个剧本包含：

• 场景描述（赛场/更衣室/球迷广场等）
• 角色设定（球队、球衣、站位）
• 台词提示（让生成的视频有故事感）

json

{
  "id": "world_cup_semifinal",
  "name": "绿茵场对决",
  "scene": "卢塞尔体育场，八万人现场，灯光聚焦在你身上",
  "characters": [
    { "team": "阿根廷", "jersey": "蓝白条纹", "role": "主角" },
    { "team": "法国", "jersey": "深蓝", "role": "对手" }
  ]
}

好的剧本，让AI生成的视频有故事感，而不只是一张静态照片。这是产品差异化的关键。

---

三、测试中发现的问题与优化

产品上线后，我邀请了一批球迷朋友内测，发现了不少问题。记录在这里，供参考。

---

问题1：弹窗频繁弹出，用户体验差 😅

现象：

每次切换页面（首页→剧本库→片场），都会弹出"美加墨世界杯主题震撼上线！"的公告弹窗。内测用户反馈："看一次就够了，每次都弹很烦。"

原因分析：

弹窗的关闭状态没有持久化，每次页面加载都重新判断，导致反复弹出。

解决方案：

用 sessionStorage 记录"本次会话已关闭"，同一次访问只弹一次；进一步可以用 localStorage 记录"今日已关闭"，一天最多弹一次。

提示词参考：

公告弹窗每次切换页面都会弹出，体验很差。请优化：用 sessionStorage 记录关闭状态，同一次会话只弹一次；再用 localStorage 记录关闭日期，同一天不再弹出。

---

问题2：角色库和院线页面显示为空

现象：

未登录状态下，角色库页面卡片全部空白；院线页面也只有框架没有内容。内测用户以为"功能坏了"。

原因分析：

• 角色库：数据接口需要登录态，游客模式下返回空数组，但前端没有做"请先登录"的提示
• 院线：功能尚未完成，页面是占位框架

解决方案：

游客模式下，角色库显示"预览角色"（部分免费角色），并明确提示"登录后可解锁全部角色"；院线页面增加"敬请期待"占位内容，避免空白。

---

问题3：4步创作流程，后3步默认禁用，用户不知道怎么办

现象：

进入"片场"后，定妆/剧照/预告三个标签页全部是 disabled 状态，新用户不知道需要先从"签约"步骤上传照片才能继续。

解决方案：

• 未完成上一步时，后续标签显示"✅ 请先完成签约"的提示文字，而不是静默禁用
• 增加进度条指示器，直观展示当前所在步骤

---

四、产品迭代方向

基于内测反馈，我整理了以下迭代优先级：

4.1 短期迭代（已完成 / 进行中）

•  修复弹窗频繁弹出问题
•  角色库增加游客预览模式
•  增加"示例作品"展示区，让用户知道最终效果是什么样
•  优化移动端适配（微信内置浏览器横屏方案）

4.2 中期迭代（规划中）

•  支持用户自定义剧本（上传自己的故事/照片）
•  增加视频时长（目前约15秒，计划扩展到30-60秒）
•  增加配音功能（用户可录制自己的解说）
•  支持导出高清视频

4.3 长期规划

•  打造"AI+体育"系列（NBA/奥运会都可以做）
•  开放API，让其他开发者也能接入
•  探索商业化路径（付费高清导出/品牌定制剧本等）

---

五、效果展示

5.1 用户创作的优秀案例

5.2 数据表现

指标	数据
上线时间	2026年6月
剧本数量	22个（持续增加中）
支持球队	5支豪门（阿根廷/巴西/葡萄牙/英格兰/西班牙）
分享率	约35%

---

六、写在最后

从"想去世界杯现场"到"用AI自己做了一个世界杯创作平台"，这个过程让我深刻体会到：

AI 工具最大的价值，不是替代人类，而是让普通人也能实现以前只有专业人士才能做到的事情。

以前，制作一支有"大片感"的宣传片，需要摄影师、剪辑师、特效师，成本几万块起步。 现在，一个普通球迷，上传一张照片，30秒就能生成。

这就是 AI 带来的改变。

---

如果你也在做 AI 应用，或者对这个项目感兴趣，欢迎在评论区交流！

如果这篇文章对你有帮助，欢迎点赞 + 收藏 + 关注 ⭐