深夜球场：我做了一个2026世界杯观赛指南

6月12日凌晨3点，2026世界杯揭幕战开球。北京时间深夜到凌晨，时差党的老问题又来了：

• 今天哪几场？几点开？

• 收藏的比赛怎么提前提醒？

• 想分享观赛计划，手动截图排版太累

我花一个下午做了这个：深夜球场·我的世界杯观赛指南

它解决什么

不是又一个赛程表。是从筛选到提醒到分享的完整闭环：

1. 今日赛场

黑底首屏，逐秒倒计时到下一场开球，当天所有比赛一眼扫完。

不用翻日历找今天的赛程，开页面就是「距加拿大 vs 波黑 还有 12:58:27」，直播中的比赛实时标注状态。

2. 筛选收藏

12个小组 + 淘汰赛阶段、8座城市、48支球队、104场比赛，点星标收藏。

可以只看巴西的、只看决赛圈的、只看洛杉矶主办的，筛选逻辑叠加，收藏状态带 hash 参数可分享。

3. 日历提醒

收藏后一键加手机日历，开球前30分钟提醒。

关键细节：iOS/Android 点按钮直接唤起日历导入页（不走下载目录），背后是 Cloudflare Pages Function 从静态全量日历里按收藏 ID 实时过滤，返回 Content-Disposition: inline。

4. 观赛长图

生成带二维码的观赛计划长图，发朋友圈/群聊，朋友扫码一键导入你的收藏。

长图自动排版、插入站点二维码（QRCode.js 生成），移动端点下载走 Web Share API 直达相册，不进文件夹。

核心断点：不是缺赛程信息，是「北京时间」+「选择性订阅」+「可分享」这三件事没有一站式工具。

技术实现（vibe coding 验证点）

零构建纯静态 + 边缘函数，全程一个 Claude Code 对话完成。

架构选择

worldcup-2026/
├── index.html          # 单文件，零依赖，本地 file:// 直接可用
├── data.js             # 唯一数据源：104场赛程+转播平台+站点URL
├── wc26-full.ics       # 全量静态日历（工具生成）
├── functions/cal.js    # Pages Function：按收藏ID过滤日历
└── tools/gen-ics.cjs   # Node脚本：从data.js生成ICS

为什么不用 React/Vue：

• 不需要状态管理（收藏用 localStorage + URL hash）

• 不需要路由（单页全展示）

• 不需要构建（改完 push 就部署）

为什么需要 Pages Function：

• 静态 ICS 是全量 104 场，个性化日历需要运行时过滤

• Function 无状态边缘计算，从 /wc26-full.ics 读取 → 按 UID 过滤 → 返回 text/calendar inline

• 手机才会直接唤起日历导入，不走下载

数据驱动设计

data.js 是唯一事实来源：

const MATCHES_RAW = [
  ['06-12','03:00','A','墨西哥','MEX','南非','RSA','墨西哥城'],
  // 字段: [日期, 时间, stage, 队1, 码1, 队2, 码2, 城市]
]

const TV_PLATFORMS = [
  { name:'CCTV5 / 央视频', url:'https://tv.cctv.com/live/cctv5/' },
]

const SITE_URL = 'https://wc26.operonai.com/';

日常维护循环（每天早上，淘汰赛对阵确定后）：

vim worldcup-2026/data.js  # 把「待定/TBD」替换为真实队名
node worldcup-2026/tools/gen-ics.cjs  # 重新生成全量ICS
git push  # Cloudflare Pages 自动部署，日历订阅用户自动同步

改一处，全链路同步：HTML 读 data.js 渲染页面、ICS 生成器读 data.js 写日历、Function 从静态 ICS 过滤。

品牌设计

2026 美加墨世界杯官方品牌语言：

• 三国旗色：墨西哥绿 #00754a、加拿大红 #d2122e、美国深蓝 #15356e、奖杯金 #d4a72c

• 顶部色带：6px 固定高度 ribbon，三国色交替

• 标题红色空心圆环：间隔号位置（不是句号），垂直对齐字高中线

• 官方图形语言：方形 + 四分之一圆单元条（.tiles class）

没用世界杯官方会徽和吉祥物素材，球迷自制工具，与 FIFA 无关。

vibe coding 全程

这正是我一直验证的 vibe coding：不写需求文档，边对话边成型，从想法到上线不离开一个会话。

时间线：

• 13:00 提出需求：做个北京时间赛程表

• 13:15 第一版上线：静态 HTML + 数据驱动

• 14:30 加入今日倒计时、筛选收藏、海报生成

• 15:45 边缘函数实现个性化日历

• 16:20 手机端优化：Web Share API 直达相册

• 16:40 最终部署、Git 仓库初始化、CLAUDE.md 文档

Claude Code 做了什么：

• 联网核实转播平台（央视/咪咕/小红书持权公告）

• 从多个公开报道汇总 104 场赛程（Sky Sports / NBC Sports）

• 生成符合 2026 官方品牌的视觉设计

• 本地截图验证（Edge 无头浏览器）

• 部署到 Cloudflare Pages（wrangler CLI）

• 实时调试边缘函数（curl 验证 /cal 端点）

人做了什么：

• 提需求、视觉反馈（「红点太小了」「链接不对」）

• 真机验证（手机日历导入、微信内打开）

• 最终确认部署

80% 的实现、调试、部署都在对话里完成，我只需要在关键决策点确认方向。

为什么值得收藏

不只是「好用」，是可迁移的产品思路：

1. 单文件 HTML 的复兴

2026 年了，零构建纯静态仍然是最快的产品验证方式。

不是「回到过去」，是现代边缘计算 + 老派静态文件的组合拳：

• 静态部分：CDN 全球分发，秒开

• 动态部分：Pages Function 边缘计算，个性化不引入后端

• 开发体验：改完 push 就部署，无构建等待

什么时候该用单文件 HTML：

• 数据量 <1000 条（客户端渲染无压力）

• 无复杂状态管理（localStorage + URL hash 够用）

• 快速验证产品假设（一天上线）

2. 数据驱动的日常维护

赛程更新只改一个 data.js，HTML/ICS/Function 自动同步。

这是「单一事实来源」在小工具里的实践：

• HTML 直接 <script src="data.js"> 引入渲染

• ICS 生成器 require('./data.js') 读取写文件

• Function 从静态 ICS 过滤（data.js 变化后重新生成 ICS）

对比常见做法：

• ❌ 赛程硬编码在 HTML → 改一场要全局搜索替换

• ❌ 赛程存数据库 → 每次改都要上后台、写 SQL

• ✅ 赛程在 data.js → vim 改完 push，三分钟上线

3. 闭环思维

不止给信息，给完整动作链。

产品设计的闭环：

• 筛选 → 收藏（带 hash 可分享）

• 收藏 → 日历提醒（移动端一键导入）

• 收藏 → 观赛长图（带二维码可传播）

每个环节都省一步：

• 不用手动复制粘贴到日历

• 不用截图拼接海报

• 不用朋友问「你收藏哪几场」再转发

对比常见赛程表：

• 只给信息 → 用户要自己订阅、自己记

• 只给提醒 → 没法分享给朋友

• 只给长图 → 没法导入日历

闭环的本质是：让用户在你的产品里完成完整任务，不跳出去补齐缺失环节。

可复用的技术链路

如果你也在做小工具或内部效率产品，这条链路可以直接复用：

需求 → Claude Code 对话 → 单文件 HTML + data.js → 
Cloudflare Pages 部署 → Pages Function 补个性化 → 
一个下午上线

适合场景：

• 团队内部工具（OKR 看板、值班表、会议室预订）

• 临时活动页（报名表、投票、日程安排）

• 数据可视化（日报/周报生成、指标 Dashboard）

• 个人效率工具（习惯打卡、账单记录、阅读清单）

核心优势：

• 无构建：改完立刻部署

• 无后端：静态 + 边缘函数够用

• 可维护：数据集中在一个文件

• 可验证：vibe coding 全程可回溯

站点：wc26.operonai.com
代码：github.com/jason-create-cmd/wc26-guide（private，感兴趣可申请访问）

6月12日到7月20日，深夜不错过。

如果你在做类似工具，或想了解 vibe coding 的完整实践，欢迎在评论区交流：

• 你现在最卡筛选、提醒还是分享？

• 你的工作流里有哪些环节可以「闭环」优化？

• 你试过零构建 + 边缘函数的组合吗？