当世界杯遇上 AI，当 VibeCoding 遇上前端开发——我只用了不到一小时，零手写代码，就让一个功能完整、设计在线、数据实时的世界杯可视化看板跑了起来。
01 为什么我要做这个？
2026 世界杯期间，想看实时赛况，打开直播平台要么广告满天飞，要么界面笨重到找不到比分。我想要的很简单：
- 📊 实时比分——一眼看到今天谁在踢、比分多少
- 📅 完整赛程——不用翻页，按日期摊开看
- 🏆 积分榜——每组排名清清楚楚
- 📰 赛事资讯——最新新闻聚合
说白了，我需要的是一个轻量级、自定义、无广告的世界杯数据面板。与其等别人做，不如自己用 AI 做一个。
02 工具选择：为什么是 OpenCode？
做这个项目之前，我试过 Cursor、GitHub Copilot，甚至 OpenAI 的 Codex。但它们要么订阅费太贵，要么对国内网络不友好。
这次我选了 OpenCode，原因很直接：
- ✅ 免费额度充足——注册就送 $5，跑完整个项目完全够用
03 第一步：Plan——让 AI 帮我做架构设计
打开 OpenCode，我直接丢了一段需求：
"做一个 2026 世界杯数据可视化系统，React + TypeScript，要能刷新实时数据。"
AI 没有直接开始写代码，而是先进入了 Plan 模式，跟我确认了整整 6 个关键问题：
| 确认项 | 我的选择 |
|---|---|
| 前端框架 | React 18 + TypeScript + Vite |
| UI 风格 | 孟菲斯撞色风——浅色主题、粗边框、大圆角、强阴影 |
| 数据来源 | 聚合数据世界杯 API（免费额度） |
| 展示维度 | 赛程、积分榜、射手榜、晋级路线、资讯 |
| 刷新策略 | 手动刷新——保护 API 调用次数 |
| 部署方式 | 本地预览，后续可扩展 |
这个过程让我意识到：AI 编程不是取代思考，而是帮你把模糊的需求变成清晰的架构。
第一次 Plan 开始，AI 在梳理需求
AI 制定的完整开发计划
04 第二步：Build——看着 AI 写代码
确认计划后，AI 切到 Build 模式，开始自动创建项目文件。
整个过程中，我基本上在刷视频，偶尔抬头看一眼终端——AI 在默默完成这些：
- 🏗️ 初始化 Vite + React + TypeScript 项目
- 🎨 配置 Tailwind CSS，定义孟菲斯配色变量
- 📡 封装聚合数据 API 层（赛程、积分榜、资讯、详情）
- 🧩 编写公共组件（比赛卡片、积分榜表格、资讯卡片）
- 📄 构建四大页面（Dashboard、赛程、积分榜、资讯）
- 📊 集成 ECharts 可视化图表（柱状图、饼图、雷达图、晋级树）
大概 15 分钟后，AI 说："项目已创建完成，正在启动开发服务器..."
浏览器自动弹开，我看到了第一个界面。
05 第三步：修 Bug——AI 不是万能的
初版跑起来后，我发现了一个问题：跨域（CORS）。
浏览器控制台报红，聚合数据的 API 请求被浏览器拦截了。AI 第一次尝试解决时，只是在代码里加了个 headers，没有真正解决问题。
这时候前端专业知识就派上用场了——我打开控制台看了具体报错，明确告诉 AI：
"这是跨域问题，请在 Vite 配置里加 proxy 代理。"
AI 立刻反应过来，修改了 vite.config.ts，加上代理配置，同时把 API 层改成开发环境走相对路径。问题解决。
手动提示 AI 解决跨域问题
这个经历很重要：AI 能帮你写 90% 的代码，但最后 10% 的调试和决策，还是需要你懂前端。
06 第四步：加功能——让系统更完整
基础版本跑通后，我继续让 AI 做了几轮优化：
🔍 资讯筛选排序
- 按时间排序（最新在前）
- 按标题排序
- 按新闻来源筛选
- 搜索关键词实时过滤
🧪 Mock 数据模式
- 把 API 数据拉下来存成本地 JSON
- 新增
npm run mock命令 - 零网络请求、零 API 消耗，纯本地预览
📰 资讯详情弹窗
- 点击资讯卡片弹出详情
- HTML 内容正确渲染
- 支持关闭和返回
让 AI 增加排序等功能的对话
每一轮优化，都是一句话需求 → AI 自动改代码 → 自动验证 → 浏览器刷新看效果。全程我几乎没有碰过键盘写代码。
07 最终效果：一个完整的可视化平台
从零到跑通，总共不到 1 小时（中间我在刷短视频）。
最终交付的是一个功能完整的 2026 世界杯数据可视化系统：
📱 桌面端效果
首页 Dashboard——今日赛程、数据概览、积分榜速览
赛程页——按日期分组，支持状态筛选
积分榜页——12 组完整排名 + 雷达图对比
资讯页——瀑布流卡片 + 筛选排序
📲 移动端适配
移动端首页
移动端赛程
移动端积分榜
整套系统同时兼容桌面端和移动端，响应式布局自动适配。
08 项目架构一览
worldcup2026-dashboard/
├── src/
│ ├── api/juhe.ts # API 封装（支持 mock/真实切换）
│ ├── types/index.ts # TypeScript 类型定义
│ ├── components/ # 公共组件（孟菲斯风格）
│ ├── pages/ # Dashboard / 赛程 / 积分榜 / 资讯
│ ├── hooks/useWorldCupData.ts # 数据获取 + 缓存
│ └── utils/format.ts # 日期/比分/状态格式化
├── public/mock/ # 本地 Mock 数据
├── vite.config.ts # 代理配置解决跨域
└── package.json
技术栈：React 18 + TypeScript + Vite + Tailwind CSS + ECharts
设计风格：孟菲斯撞色风——粗边框、大圆角、强阴影、亮黄/电蓝/玫红撞色
09 VibeCoding 体验总结
什么是 VibeCoding？
简单来说，就是**"跟着感觉走，让 AI 写代码"**。你不需要记住 API 细节，不需要手写 CSS，甚至不需要敲键盘——只要把需求说清楚，AI 会帮你完成从架构到部署的全过程。
前端开发者用 AI 的优势
- ✅ 懂需求——你能把模糊的想法翻译成 AI 能理解的结构化需求
- ✅ 会调试——AI 生成的代码有 bug 时，你能快速定位（比如跨域问题）
- ✅ 懂设计——孟菲斯风格、响应式布局、组件拆分，这些审美和架构判断 AI 做不来
- ✅ 会决策——API 选哪个、刷新频率怎么设、缓存策略怎么做
这个项目的启发
- AI 是放大器，不是替代者——它放大你的开发效率，但前提是你懂基础
- Plan 模式很重要——先规划再动手，比盲目生成代码效率高 10 倍
- Mock 数据是神器——API 有调用限制时，本地 Mock 让开发和演示零成本
- 一小时足够做 MVP——从想法到可演示的产品，AI 让时间压缩到小时级
写在最后
这次世界杯可视化项目，是我第一次完整用 AI 从零构建一个前端应用。
最大的感受是：以前需要一天的工作量，现在一小时就能出可演示的 MVP。 而且效果不差——孟菲斯风格的 UI、ECharts 数据可视化、响应式布局、Mock 数据模式，这些放在以前至少需要一个前端 + 一个设计折腾两三天。
AI 不会取代前端开发者，但会用 AI 的前端开发者，正在取代不会用的。
如果你也对 VibeCoding 感兴趣，推荐从 OpenCode 开始试试。注册用我的邀请链接，可以额外获得 $5 免费额度：
