当世界杯遇上 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 项目架构一览
bash
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 免费额度：