01 为什么我要做这个？
2026世界杯期间，想看实时赛况，打开直播平台不是广告轰炸，就是界面设计得让人找不到比分。需求其实很简单，核心就四点：
- 实时比分——一眼看清今天哪队出战、战况如何
- 完整赛程——不用来回翻页，按日期摊开一目了然
- 积分榜——每组排名清清楚楚
- 赛事资讯——最新新闻聚合推送
说白了，缺的就是一个轻量级、可自定义、没有广告的世界杯数据面板。与其等着别人做，不如自己动手，正好试试AI能帮到什么程度。
02 工具选择：为什么是 OpenCode？
做这个项目之前，试用过Cursor、GitHub Copilot，甚至OpenAI的Codex。但它们要么订阅费不便宜，要么对国内网络不太友好。
最终敲定OpenCode，理由很简单：免费额度足够用——注册送5美元，跑完整个项目绰绰有余。
03 第一步：Plan——让 AI 帮你做架构设计
打开OpenCode，直接丢了一段需求描述：
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：
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的前端开发者，正在取代不会用的。
