AI一小时前端VibeCoding打造世界杯数据可视化初体验

01 为什么我要做这个？

2026世界杯期间，想看实时赛况，打开直播平台不是广告轰炸，就是界面设计得让人找不到比分。需求其实很简单，核心就四点：

• 实时比分——一眼看清今天哪队出战、战况如何
• 完整赛程——不用来回翻页，按日期摊开一目了然
• 积分榜——每组排名清清楚楚
• 赛事资讯——最新新闻聚合推送

说白了，缺的就是一个轻量级、可自定义、没有广告的世界杯数据面板。与其等着别人做，不如自己动手，正好试试AI能帮到什么程度。

02 工具选择：为什么是 OpenCode？

做这个项目之前，试用过Cursor、GitHub Copilot，甚至OpenAI的Codex。但它们要么订阅费不便宜，要么对国内网络不太友好。

最终敲定OpenCode，理由很简单：免费额度足够用——注册送5美元，跑完整个项目绰绰有余。

03 第一步：Plan——让 AI 帮你做架构设计

打开OpenCode，直接丢了一段需求描述：

AI没有立刻开始写代码，而是先进了Plan模式，认认真真确认了6个关键问题：

这个过程让人意识到：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：

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选哪个、刷新频率怎么设、缓存策略怎么做

这个项目的启发

1. AI是放大器，不是替代者——它放大开发效率，但前提是懂基础
2. Plan模式很重要——先规划再动手，比盲目生成代码效率高10倍
3. Mock数据是神器——API有调用限制时，本地Mock让开发和演示零成本
4. 一小时足够做MVP——从想法到可演示的产品，AI让时间压缩到小时级

写在最后

这次世界杯可视化项目，是第一次完整用AI从零构建一个前端应用。最大的感受是：以前需要一天的工作量，现在一小时就能出可演示的MVP。而且效果不差——孟菲斯风格的UI、ECharts数据可视化、响应式布局、Mock数据模式，这些放在以前至少需要一个前端加一个设计折腾两三天。

AI不会取代前端开发者，但会用AI的前端开发者，正在取代不会用的。