用 ChatGPT 和 Codex 做一个让新手惊讶的世界杯 AI 应用

最终效果#

我们要做的应用叫：2026 AI Match War Room。

打开页面后，用户能看到一个类似比赛指挥中心的大屏：

• 左侧是比赛列表和赛程入口。
• 中间是动态战术板，有球员站位、传球线路、热力区域。
• 右侧是 AI 解说面板，可以切换“专家版”“小白版”“朋友圈版”。
• 底部是胜率曲线、关键事件时间线、比赛数据统计。
• 点击按钮可以生成一张赛后分享海报。

这里有一个关键点：新手演示不一定要接真实直播 API。

真实 API 会带来鉴权、限流、数据格式、网络稳定性这些不适合现场演示的问题。我们这次用模拟数据，把重点放在“产品体验”和“Codex 执行能力”上。只要数据结构设计得像真的，视觉和交互足够完整，演示效果就会很好。

整体流程#

这次全程只分两类工具：

ChatGPT 负责想清楚做什么、怎么讲、提示词怎么写。

Codex 负责创建项目、写代码、跑起来、修 bug、做视觉优化。

流程是这样的：

你可以按下面 5 步现场演示：

1. 用 ChatGPT 把想法变成产品方案。
2. 用 ChatGPT 生成给 Codex 的开发提示词。
3. 把提示词交给 Codex，让它生成可运行应用。
4. 继续让 Codex 增强战术板、AI 文案、海报功能。
5. 用 Codex 验证页面，再现场打开给用户看。

第一步：先让 ChatGPT 帮你定产品#

打开 ChatGPT，输入下面这段提示词。

1
我想给完全不懂编程的新手演示 Codex 的能力。
2

3
背景是：2026 年世界杯热度很高，我想结合这个热点做一个现场能演示的 Web 应用。目标不是做真实商业产品，而是让观众一眼觉得“这个太厉害了，AI 真的能把想法变成产品”。
4

5
请你帮我设计 3 个应用方向，并对比它们的演示效果、实现难度、现场风险。最后推荐一个最适合用 ChatGPT + Codex 从零制作的方向。
6

7
要求：
8
1. 视觉冲击要强。
9
2. 不依赖真实付费 API。
10
3. 适合 30 到 60 分钟内做出可运行 Demo。
11
4. 最好能包含 AI 生成文案、数据可视化、交互动画。

ChatGPT 通常会给出几个方向，比如赛程助手、预测工具、战术分析板。你可以顺势追问，让它收敛成一个方案。

继续输入：

1
我选择“2026 世界杯 AI 战情室”这个方向。
2

3
请你把它设计成一个适合 Codex 实现的产品规格说明。
4

5
请输出：
6
1. 应用名称
7
2. 一句话介绍
8
3. 首页应该有哪些区域
9
4. 每个区域展示什么数据
10
5. 需要哪些模拟数据
11
6. 需要哪些交互
12
7. 哪些功能第一版必须做，哪些可以之后再做
13
8. 给 Codex 实现时应该使用什么技术栈
14

15
注意：不要依赖真实 API，先用 mock 数据。不要使用官方 FIFA logo、真实球队徽章、真实球员肖像，避免版权和肖像风险。

这一步的价值是让 ChatGPT 先帮你把“脑子里的想法”变成“工程师能执行的需求”。很多人用 Codex 失败，不是 Codex 写不出来，而是他们给的需求太散。

第二步：让 ChatGPT 生成给 Codex 的总提示词#

拿到产品方案后，不要自己手写需求。继续让 ChatGPT 把它压缩成 Codex 能直接执行的提示词。

输入：

1
请把上面的产品规格，整理成一段可以直接发给 Codex 的开发提示词。
2

3
我的目标是让 Codex 从零创建一个可运行的前端应用。
4

5
请提示词里明确要求：
6
1. 使用 Vite + React + TypeScript。
7
2. 使用 Tailwind CSS 做样式。
8
3. 使用 lucide-react 做图标。
9
4. 可以使用 Recharts 做胜率曲线。
10
5. 所有数据先写在本地 mock data 里。
11
6. 页面打开就是完整应用，不要做营销落地页。
12
7. 视觉要像体育赛事指挥中心，不要像普通后台。
13
8. 完成后要运行项目并告诉我本地访问地址。
14
9. 不使用真实 FIFA 标识、真实球队徽章、真实球员肖像。
15

16
请输出一段完整提示词，不要解释。

这里你会得到一段比较长的 Codex 指令。你可以直接复制，也可以使用我下面这版。

第三步：把完整开发提示词发给 Codex#

在 Codex 里，新建一个空目录，然后输入：

1
请从零创建一个可运行的前端应用，应用名叫 2026 AI Match War Room。
2

3
目标：做一个适合新手演示 Codex 能力的 2026 世界杯 AI 战情室。页面打开后应该直接进入应用本体，不要做营销落地页。
4

5
技术要求：
6
- 使用 Vite + React + TypeScript。
7
- 使用 Tailwind CSS 做样式。
8
- 使用 lucide-react 做图标。
9
- 使用 Recharts 做胜率曲线。
10
- 所有数据先使用本地 mock data，不接真实 API。
11
- 完成后安装依赖、启动 dev server，并告诉我本地访问地址。
12

13
页面结构：
14
1. 左侧：比赛列表，包含进行中比赛、未来比赛、比分、时间、状态。
15
2. 中间：战术视图，显示足球场、球员点位、传球线路、关键传球、热力区域。
16
3. 右侧：AI 解说面板，包含三个切换标签：专家版、小白版、朋友圈版。
17
4. 底部：胜率曲线、关键事件时间线、比赛统计。
18
5. 顶部：应用名称、当前比赛、模式切换、生成海报按钮。
19

20
交互要求：
21
- 点击不同比赛，页面数据切换。
22
- 点击 AI 解说标签，展示不同风格的解说文案。
23
- 战术板要有轻微动画，比如传球线路、球员点位、热区呼吸效果。
24
- 点击“生成海报”后，弹出一张赛后分享海报预览，包含比分、关键事件、AI 金句、胜率变化。
25
- 页面需要适配桌面和移动端，但优先保证桌面演示效果。
26

27
视觉要求：
28
- 整体像体育赛事指挥中心，科技感、数据感、现场感强。
29
- 不要做成普通管理后台。
30
- 不使用官方 FIFA logo、真实球队徽章、真实球员肖像。
31
- 可以使用虚构球队名，例如 FC Blue、Reds United、City Athletic。
32
- 颜色不要只有一种蓝色，要有绿色球场、红蓝对抗、黄色关键事件、紫色 AI 面板点缀。
33

34
验收标准：
35
- `npm run build` 可以通过。
36
- 本地页面无明显报错。
37
- 页面第一屏就能看出这是一个完整的世界杯 AI 战情室。
38
- 所有按钮和切换都有反馈。

这一步是整个演示的核心。

现场观众最容易被打动的地方，不是你解释了多少技术，而是他们看到 Codex 自动创建文件、安装依赖、写组件、修错误、启动页面。你要做的是把目标说清楚，然后让 Codex 工作。

第四步：让 Codex 继续把效果做“哇”#

第一版跑起来之后，通常已经能看。但要让人惊讶，还需要继续抛光。

给 Codex 输入：

1
现在请增强这个应用的演示效果，但不要引入真实 API。
2

3
重点优化三件事：
4
1. 战术板更有生命力：传球线路有动画，关键传球用黄色高亮，危险区域用热力渐变表现。
5
2. AI 解说更像真的：专家版要有战术术语，小白版要通俗解释，朋友圈版要适合直接发社交平台。
6
3. 生成海报更完整：海报里包含比分、比赛时间、关键事件、胜率变化、AI 金句和“由 AI Match War Room 生成”的底部标识。
7

8
请保持代码简洁，不要过度抽象。完成后运行构建检查。

这一段很重要。第一版应用解决“能不能做出来”，第二版优化解决“够不够惊艳”。

如果你发现页面太像后台，可以继续输入：

1
这个页面现在还是有点像普通后台，请你把它调整得更像世界杯比赛日的实时指挥中心。
2

3
要求：
4
1. 第一眼要看到球场、比分、比赛状态。
5
2. 数据面板要紧凑，但不要拥挤。
6
3. 增加比赛直播氛围，比如 Live 状态、关键事件脉冲、战术线条动画。
7
4. 保持专业感，不要做成游戏风。
8
5. 检查移动端不要出现文字重叠。
9

10
修改后请再次运行构建检查。

如果现场时间足够，再加一个“演示模式”：

1
请增加一个 Demo Mode。
2

3
开启 Demo Mode 后，应用每 5 秒自动模拟一个比赛事件，比如射门、进球、黄牌、换人、关键传球，并同步更新：
4
1. 关键事件时间线
5
2. AI 解说
6
3. 胜率曲线
7
4. 战术板高亮
8

9
这个功能只用于演示，数据可以随机但要合理。请提供一个明显的开关。

这会让演示从“静态页面”变成“像一个真的系统在运行”。

第五步：让 ChatGPT 生成 AI 解说文案#

虽然 Codex 可以直接写 mock 文案，但我更建议让 ChatGPT 专门生成一批高质量解说素材。

输入：

1
请为一个世界杯 AI 战情室应用生成 mock 解说数据。
2

3
比赛设定：
4
- FC Blue 2:1 Reds United
5
- 当前时间 73 分钟
6
- FC Blue 控球率 58%，射门 14 次，射正 6 次
7
- Reds United 下半场加强反击
8
- FC Blue 的 8 号中场是关键球员
9

10
请输出 JSON 数组，每条包含：
11
- minute
12
- type
13
- expertText
14
- beginnerText
15
- socialText
16

17
要求：
18
1. expertText 要像专业战术分析。
19
2. beginnerText 要让不懂球的人也能理解。
20
3. socialText 要短、适合发朋友圈。
21
4. 不要使用真实球员名和真实国家队。
22
5. 生成 8 条。

然后把 ChatGPT 给你的 JSON 复制给 Codex：

1
请把下面这组 AI 解说 mock 数据接入应用。
2

3
要求：
4
1. 替换现有解说数据。
5
2. 三个标签页分别展示 expertText、beginnerText、socialText。
6
3. 点击不同关键事件时，右侧解说面板自动定位到对应解说。
7
4. 保持 TypeScript 类型清晰。
8

9
数据如下：
10
[把 ChatGPT 生成的 JSON 粘贴到这里]

这就是 ChatGPT 和 Codex 的分工：ChatGPT 更适合生成内容和结构，Codex 更适合把内容变成应用。

第六步：让 ChatGPT 生成配图提示词#

如果你还想让教程或演示材料更完整，可以让 ChatGPT 帮你生成图片提示词。

输入：

1
请为“2026 世界杯 AI 战情室”这个 Codex 演示教程生成 3 张配图的图片提示词。
2

3
需要：
4
1. 文章封面图：未来感体育赛事指挥中心。
5
2. 应用界面图：AI Match War Room 的桌面端 dashboard。
6
3. 流程图：Idea、Prompt、Build、Verify、Demo 五步，用 ChatGPT 和 Codex 完成。
7

8
要求：
9
- 16:9。
10
- 不使用官方 FIFA logo。
11
- 不使用真实球队徽章。
12
- 不使用真实球员肖像。
13
- 文案尽量少，避免图片中文字错误。
14
- 每张图给出英文提示词，适合直接用于 AI 生图。

如果你是现场演示，可以不在现场生成图片。图片生成比较耗时，而且文字容易出错。更稳的做法是提前准备好图片，把现场时间留给 Codex 写应用。

第七步：现场演示怎么讲#

演示不要从代码讲起，要从一个普通人能理解的目标讲起。

你可以这样开场：

“今天我们不写 Todo List。我们做一个世界杯 AI 战情室。你可以把它想象成比赛直播间背后的指挥中心：它知道比分、知道战术变化，还能自动生成三种风格的解说和赛后海报。”

然后你现场打开 ChatGPT：

“第一步，我不直接写代码。我先让 ChatGPT 帮我把想法变成产品规格。”

接着复制第一段提示词。

等 ChatGPT 输出后，你说：

“现在我们把产品规格交给 Codex。Codex 不只是回答问题，它会真的创建项目、写文件、安装依赖、运行应用。”

然后切到 Codex，复制完整开发提示词。

等页面跑起来后，重点展示三件事：

第一，点击不同比赛，整个战情室数据变化。

第二，切换 AI 解说风格，同一场比赛可以给专家、小白、朋友圈用户看。

第三，点击生成海报，看到应用能把比赛结论变成可分享内容。

最后你可以补一句：

“这就是 AI 编程真正有意思的地方。它不是帮你写一小段代码，而是把一个产品想法快速变成可以体验的东西。”

第八步：常见翻车点#

第一个翻车点是需求太泛。

不要只对 Codex 说“帮我做一个世界杯应用”。这句话太空了。你要告诉它页面结构、数据、交互、视觉风格、验收标准。

第二个翻车点是现场接真实数据。

新手演示最怕卡在 API。第一版先用 mock 数据，等产品体验打磨好了，再考虑接真实数据。

第三个翻车点是版权意识不足。

不要使用官方 FIFA 标识，不要直接使用真实球队徽章，不要生成真实球员肖像。演示产品完全可以用虚构球队和模拟数据。

第四个翻车点是只生成页面，不验证。

每次让 Codex 改完，都要让它运行：

1
请运行构建检查，并修复发现的问题。修复后告诉我结果。

如果页面需要浏览器验证，可以继续说：

1
请启动本地开发服务器，并用浏览器检查页面是否能正常打开。重点检查：首屏是否完整、按钮是否可点击、移动端是否有文字重叠。

最后总结#

这个教程真正想展示的不是世界杯，也不是某个前端框架。

它展示的是一种新的工作方式：

先用 ChatGPT 把想法说清楚，再用 Codex 把想法做出来。中间不断补充需求、修正效果、运行验证。一个普通人不需要从空白代码开始，也能参与产品设计和产品实现。

如果只是让新手看 AI 写函数，他们不会惊讶太久。

但如果他们看到一个“世界杯 AI 战情室”从一句想法变成一个可点击、可切换、可生成海报的应用，他们会更容易理解：Codex 的价值不是写代码片段，而是把事情往前推进。

参考资料：

• FIFA：World Cup 2026 fixtures, results and stadiums
• FIFA：How the FIFA World Cup 26 will work with 48 teams
• FIFA：World Cup 2026 official tournament page