腾讯云开发者社区https://cloud.tencent.com/developer/article/2695673 本文代码与截图全程由腾讯混元Hy3模型驱动完成Hy3 正限时两周免费体验7 月 6 日 – 7 月 22 日文末附上手方式。一、为什么想做这个每年夏秋台风路径图都是热搜常客。但市面上的台风产品要么要装 App要么数据滞后、界面花哨。作为一个前端开发者我一直想做一个属于自己、打开网页就能看、数据真实、还能离线运行的台风监测面板。传统做法搭一套 Vue 工程、装 ECharts、找地图 GeoJSON、调 CORS、对接气象 API……半天起步。而这次我全程只做了一件事把需求用自然语言告诉 WorkBuddy底层正是刚发布的腾讯混元 Hy3 模型让它替我写代码、调样式、修 bug、跑验证。下面是这台「台风实时监测仪」从一行需求到可运行产品的真实过程。 截图于 2026-07-15面板显示第9号台风「巴威」(2609) 已停编路径右上角四台风芯片(巴威/海神/美莎克/米克拉)同屏。状态标签「◼ 已停编」 数据年龄「19小时前」二、第一步一句话搭出骨架我的原始需求直接丢给 WorkBuddy用 Vue3 ECharts 做一个台风路径实时追踪网页能显示活跃台风位置、过去 24h 路径、未来预测路径和概率锥5 分钟自动刷新深色海洋背景 渐变路径 动画台风点 时间轴滑块。WorkBuddy 直接产出了一套可运行的 Vue3 单页应用。但这里踩到了第一个坑——坑 1CDN 不可达。默认用公共 CDN 引 Vue/ECharts离线或网络受限时整页白屏。解决把vue.prod.js、echarts.min.js下载到本地并写了一个 node 脚本把世界地图 GeoJSONworld.geo.js一起内联进单个 HTML。最终交付物是一个2.2MB 的typhoon-tracker.html——双击即用零网络依赖。这一步让我意识到WorkBuddy 不只是「生成代码」它还能根据运行环境主动选择工程化方案本地内联而非依赖 CDN这是有经验的工程师才会做的判断。三、第二步接入真实数据骨架有了但一开始显示的是演示数据。我要的是真实的台风。WorkBuddy 帮我调研并锁定了数据源中央气象台 nmc.cn 的免费接口免密钥、开启 CORS、支持 HTTPSlist_default—— 获取当前台风列表含 id、名称、编号、状态view_{id}—— 获取单个台风的完整路径点历史 CMA 预报坑 2JSONP 双括号解析失败。nmc.cn 返回的是callback(({...}))这种双层括号包裹的格式常规 JSON.parse 会失败导致永远回退到演示数据。解决写了一个鲁棒的解析器抓「第一个{/[」到「最后一个}/]」之间的内容再JSON.parse并兼容单/双括号。同时修复了「选台风逻辑」——优先选start活跃状态全部停编时选观测时间最新的那一个避免拿到过旧的数据。顺带一提我还设计了三级数据回退中央气象台 nmc.cn → 美国 NHC经 CORS 代理→ 内置演示数据。任何一层挂了面板都不会白屏。四、第三步反复打磨交互最见功力的部分骨架 真实数据跑通后真正的「产品感」来自一轮轮打磨。这部分 WorkBuddy 的迭代能力体现得最充分——我每次只说一句「哪里不对」它就定位 修复 重建 截图验证。1. 地图空白 Bug一度所有数据正常、信息面板有内容但地图画布全白。WorkBuddy 用无头浏览器做 DOM 级诊断发现根因#chart的两条 CSS 规则互相覆盖导致 ECharts 的 canvas高度塌陷为 0。诊断输出canvasW: 1366 ✅ / canvasH: 0 ❌→ 修复后canvasH: 791 ✅这种「数据对了但画不出来」的玄学 bug靠人眼很难定位但让 WorkBuddy 跑一个诊断脚本两分钟就锁死了。2. 城市标注从「太稀」到「太密」再到「刚好」第一版只标了 24 个城市太空我让它「像中国天气网那样把主要城市都标出来」它一度扩充到214 个又太密最终方案是按行政级别分级默认只显示约20 个核心节点北京、上海、广州、东京、马尼拉等放大到 5× 才渐进显示全部 214 个并用hideOverlap自动避让重叠。3. 陆地美化从「死黑一片」到「地形层次」原来陆地是纯色#0b2236和海洋区分度低。WorkBuddy 基于每个国家的 centroid 纬度做了分层设色landColor(lat)低纬偏青绿、高纬偏冷蓝像真实的地形/气候带图再加台风活跃区的径向高光和更淡的经纬网整体立刻「专业地图」了起来。4. 状态透明度为什么不是「实时」有次我发现「坐标时刻」停在昨天。WorkBuddy 诊断 nmc.cn 后发现当时根本没有活跃台风12 个全是已停编status:stop。它没简单甩锅而是加了三处透明化设计台风状态标签● 实时追踪绿/◼ 已停编橙/◎ 演示模式紫数据年龄观测时刻2026-07-14 19:0014小时前选台逻辑自动挑「观测时间最新」的停编台风而非 id 最大但更旧的这一改用户看到旧数据也不会困惑——界面自己说清楚了自己为什么不是实时的。5. 多台风同屏我后来问「海神和巴威要同时显示吗」WorkBuddy 直接把单台风模型重构为typhoons[]数组并行拉取前 8 个候选按末次观测排序取最新 4 个每个台风独立配色8 色调色板循环面板顶部加可点击的切换 chips。6. 时间轴真正回放原来时间轴滑块只是「摆设」——拖动时地图上的大点不动面板数字也不变。WorkBuddy 重构了整个数据流新增replay计算属性取track[playhead]实时算出当前点的位置/风速/气压/移动方向速度/最近城市新增updateReplayMarker()轻量更新 ECharts 大点坐标不重绘整张图性能友好面板全部指标改为跟随replay拖一下滑块大点沿轨迹走、风速跟着变、「预测」标签在预报段才亮默认停在最后一个真实观测点不是预报末点避免一打开就看到未来数据效果就像视频进度条——拖到哪台风就走到哪。五、第四步视觉降噪多台风全画概率锥 动画时画面又「乱」了。WorkBuddy 做了一次「视觉降噪」元素降噪前降噪后台风数6 个全画全套4 个聚焦 1 个完整、其余弱化成「幽灵路径」非聚焦台风概率锥 粗线 动画仅细淡路径 小点 名称字城市默认 50 个挤一起~20 个核心节点5× 才显全部经纬网 / chips偏重更淡、更紧凑六、核心能力一览最终产品具备✅时间轴回放拖动即走大点沿轨迹移动面板指标实时跟随风速/气压/位置/移动方向✅多台风同屏最多 4 个独立配色、一键切换聚焦✅真实数据中央气象台 nmc.cn含历史路径 CMA 未来预报 概率锥✅三级回退nmc.cn → NHC → 演示永不白屏✅演示模式醒目横幅琥珀色呼吸横幅一眼区分真实与演示数据✅陆地分层 城市分级专业地图观感疏密有致✅状态透明活跃/停编/演示 数据年龄一目了然✅5 分钟自动刷新 倒计时(m:ss)加载态 spinner交互完整✅图例配色一致色块 线条身份色不再用强度色阶误导✅单文件零依赖双击即用可离线、可部署七、立即体验在线 Demo点击这里打开可交互的台风追踪器打开后即可拖动时间轴看台风沿轨迹回放面板指标实时跟随点击右上角芯片切换多台风聚焦 查看实时路径 CMA 预报 概率锥⏱️ 观察每 5 分钟自动刷新倒计时显示无需安装任何东西浏览器直接打开。(注Demo 连接中央气象台 nmc.cn 接口若当前无活跃台风会自动进入带醒目标识的演示模式)八、用 WorkBuddy 的真实体验作为全程只动嘴和偶尔读代码确认的「产品经理 验证官」我的真实感受它真的会跑验证。每次改动不是「我觉得改好了」而是用无头浏览器截图、读 DOM、查 console 错误零 JS 错误才交付。这比很多人类实习生都稳。它能在合适层级做工程决策。该内联就内联、该加回退就加回退、该做诊断就做诊断——不是机械执行指令而是在「交付一个能跑的东西」这个目标下自己补位。迭代极顺。「地图空白」「太密了」「太乱了」这种模糊反馈它能精准定位 CSS 覆盖、数据阈值、视觉噪音等根因且全程零环境配置——我不需要自己装 node、配构建。而这次最让我惊喜的是——驱动这一切的是 WorkBuddy 刚接入的腾讯混元 Hy3 模型。它在任务规划、长文本处理和多工具调用上明显加力尤其前端 Coding 表现突出从「说清需求」到「跑出能用的结果」中间少了很多来回解释和手动修补。这篇征文的代码、截图、甚至文字润色也都是 Hy3 在本地一气呵成的。对一个想快速把想法落成可用产品、又不想被脚手架和环境折磨的开发者来说WorkBuddy Hy3 是那种「你说需求它给结果你只管验收」的搭档。九、结语从一行「帮我做个台风追踪网页」到一个能接真实数据、多台风同屏、时间轴回放、视觉清爽、可离线运行的监测仪整个过程我没有打开过一次 IDE 配环境。这就是我理解的「从 0 到 1」——不是从空文件写起而是从一个想法到一件能用的东西中间最费劲的活都交给了会干活的 AI 搭档。现在就能玩在线 Demo 已部署拖时间轴、切台风、看预报——全都可以交互。如果你也想试试直接把需求丢给 WorkBuddy切到混元 Hy3 模型然后像我一样做个「只验收不写码」的甩手掌柜就行。顺手薅个羊毛混元 Hy3 正在限时两周免费体验7 月 6 日 – 7 月 22 日 23:59打开 WorkBuddy 在模型列表切到 Hy3 即可白嫖免费期内消耗倍率 0×、不扣额度。同期还有「腾讯混元 Hy3 超能力挑战赛」Coding / Agent 双赛道投稿至 7 月 22 日——用 Hy3 做个能跑的作品去投稿说不定顺手把奖品也拿了。本文配套代码与截图均由 WorkBuddy 在本地环境生成台风数据来自中央气象台 nmc.cn 公开接口。
