我和 TRAE AI聊了聊，它帮我为五迷老师们做了个城市漫游小程序！

最近得空参加胡彦斌安利的TRAE AI创造力大赛，提交了Demo：【生活娱乐赛道】MaydayLand · 五月天·城市漫游：跟着歌词，发现城市里的五迷角落希望大家能为我投票哈~ （本篇内容源引该Demo帖子）

0. 先和大家打个招呼吧 👋

你是谁：

一名热爱五月天、也热爱用技术把想法落地的独立开发者。平时喜欢逛城市角落、看演唱会，也喜欢把粉丝社群里的真实需求做成产品。

你是怎么用 TRAE 把 Demo 做出来的：

整个 MaydayLand 从核心闭环 H5、移动端游戏门户、ModelScope 部署到每日自动新闻更新，都是我与 TRAE 一句句「聊」出来的。我的方式是把需求拆成小块：先讲清楚一个页面要长什么样、用户点击后该发生什么，TRAE 就能帮我补全 HTML 容器、CSS 样式和 JS 逻辑。

最让我惊讶的是游戏门户的实现 ------ 原本以为 8 款游戏 + 3 款工具需要写很多文件，结果在 TRAE 的帮助下，全部浓缩进单文件 `app.js` 和 `index.html`，零前端框架、零 UI 库，移动端也能流畅运行。TRAE 帮我跨过的最大一道坎是部署：从浏览器上传超时、MySQL 连接报错，到 SQLite 语法兼容，都是它一步步排查并修复的。

1. Demo 简介

是什么：

MaydayLand · 五月天·城市漫游 是一款面向五月天粉丝（🥕 五迷老师 🥕）的移动端 H5 单页应用，由 Flask 后端 + 原生 HTML/ES5/CSS 前端构成，目前部署在 ModelScope 创空间，无需下载即可访问。

在线体验： modelscope.cn/studios/sou...
GitHub 仓库：github.com/xiaoyesoso/...

面向谁：

核心用户是 18--35 岁的五月天粉丝：

演唱会前后想找同好据点续场；
周末想进行歌词主题 citywalk；
出差/旅行时想发现当地五迷角落；
演唱会间隔期想玩轻量五月天主题小游戏。

主要功能：

歌词角落地图：北京、上海、长沙、台北等城市中的五迷咖啡馆、书店、涂鸦墙、唱片行、快闪展等 12+ 个角落，按「情绪标签」筛选，到店 200m 可打卡，到店 1km 宽松打卡。

打卡卡片 + 同好暗号：到店后一键生成拍立得 / 票根 / 胶片三种主题卡片，Canvas 合成歌词 + 地点 + 日期；输入店铺暗号解锁限定徽章并留足迹。

五月天人格测评 + 移动端游戏门户：20 题 5 维度全曲库人格测评生成专属海报；底部 TabBar「游戏」入口聚合人格测评 + 8 款小游戏（猜歌名 Wordle、二选一、Emoji 猜歌、十秒猜歌、歌词选择、合成大月天、记忆配对）+ 3 款工具（朋友圈、DIY 刮刮乐、图库），全部本地可玩。

每日自动更新官方动态：服务启动后每 24 小时自动从相信音乐官网抓取五月天相关新闻，保持资讯新鲜度。

2. Demo 创作思路

灵感来源：

五月天的歌词陪伴了无数人的青春。每次演唱会散场后，五迷们往往会自发聚在体育场周边的咖啡馆、餐酒馆继续合唱，但这些「五迷据点」信息散落在微博、小红书、点评里，没有一个集中的发现入口。于是想做一张「只有五迷能看懂的城市地图」。

想解决的问题：

痛点	解法
歌词主题角落信息零散	专属于五迷的 LBS 城市地图，带情绪标签与歌词关键词匹配
缺少「同好滤镜」	店铺暗号 + 一次性 token 校验，筛出真五迷
打卡分享缺乏仪式感	Canvas 合成 3 套主题歌词卡片，体现「歌词 × 我 × 城市」
演唱会散场后同好迅速流失	人格测评 + 歌单解锁 + 海报分享裂变
演出间隔期缺少互动	移动端游戏门户，8 款游戏 + 3 款工具随时可玩

为什么做这个方向

生活娱乐赛道天然适合粉丝社群产品。五月天拥有稳定且活跃的粉丝基础，2025--2026 年「5525 回到那一天」巡回演唱会热度极高，但围绕「演唱会前后同城社交」的产品却极少。选择这个方向，既能验证 LBS + 打卡 + 人格测评 + 游戏门户的组合在五迷群体中的接受度，也能沉淀一套可复用的「粉丝城市漫游」产品模板。

3. Demo 体验地址

在线体验（ModelScope 创空间）

modelscope.cn/studios/sou...

建议使用移动端浏览器或微信内置浏览器打开，体验最佳。桌面端可打开 DevTools 切到 iPhone 12/375×812 视口。

4. TRAE 实践过程

整个项目从核心闭环 H5、移动端游戏门户、ModelScope 部署、多仓库同步到每日自动新闻更新，均由 TRAE 辅助完成。关键开发步骤包括：

4.1 从需求文档与 OpenSpec 到可运行 Demo

输入：MaydayLand移动端-研发需求文档.md + openspec/changes/mayday-cityroam-mvp/ + openspec/changes/maydayland-mobile-portal/ + assets/MaydayLand/ 素材。
输出：在 app/templates/index.html 中完成单页 11 个页面容器（发现 / 角落详情 / 打卡 / 人格测评 / 演唱会 / 我的 / 游戏门户首页 / 8 款游戏 / 3 款工具）；在 app/static/app.js 中实现路由切换、地图渲染、打卡卡片 Canvas 合成、暗号核销、人格测评、全部游戏与工具逻辑；统一使用 ml_ 前缀的 localStorage 持久化战绩与用户信息。

4.2 移动端游戏门户实现

在发现页移除原有的人格测评与游戏门户入口，统一迁移到底部 TabBar「游戏」页。
实现门户首页：Hero Banner、战绩概览、热门游戏网格、更多游戏、工具行、昵称设置。
8 款游戏全部可玩：猜歌名 Wordle（中文候选字键盘）、二选一（30 首曲库）、Emoji 猜歌（20 组题库）、十秒猜歌（14 球倒计时）、歌词选择（20 题 4 选 1）、合成大月天（Canvas 物理引擎）、记忆配对（3 关卡翻牌）。
3 款工具：五迷朋友圈动态流、DIY 刮刮乐 Canvas 擦除 + 分享图生成、专辑封面图库瀑布流。

4.3 ModelScope 创空间部署与多仓库管理

新增 ms_deploy.json 与修改 Dockerfile：端口 80 → 7860，启用 SQLite 自动回退。
解决线上部署问题：ModelScope 默认读取 master 分支，而 GitHub 主分支是 main；84MB 专辑封面浏览器上传超时，改为 Git 推送。
将 git push origin main + git push modelscope master 同步规范写入 AGENTS.md。
解决 SQLite ON UPDATE CURRENT_TIMESTAMP 语法错误，使容器能成功建表与启动。

4.4 每日自动更新官方动态

新增 app/news_fetcher.py：使用 urllib.request + BeautifulSoup 从相信音乐官网 https://www.bin-music.com.tw/news 抓取五月天相关新闻。
新增 app/news_refresh.py：daemon 线程，服务启动 60 秒后首次执行，之后每 24 小时自动更新数据库。
新增 POST /api/refresh-news 手动触发接口，便于测试与紧急刷新。
按 URL 去重，已存在新闻不重复插入；失败仅记录日志，不影响主服务。

开发关键步骤截图

TRAE 聊天中实现游戏门户核心逻辑的对话窗口 （覆盖 HTML 容器、CSS、app.js 游戏实现）。
ModelScope 创空间部署成功页面截图 （状态：运行中，URL 为 https://modelscope.cn/studios/souljoy/MaydayLand）。
浏览器中打开应用，底部 TabBar「游戏」入口及猜歌名 Wordle 页面截图 。
调用 /api/refresh-news 后，查看返回的截图 ，证明自动新闻抓取生效。

关键任务 Session ID

基于4个维度评分与spec实施研发：

.1950965202689113:9b2b090da87e43ca5c7558d01cc758d9_6a30b60089b773e2301c1429.6a3399a3067c6c28db220ecd.6a3399a239211ca9995c59cd:Trae CN.T(2026/6/18 15:09:23)

.1950965202689113:98bb072b0260092fd7346b64f4676940_6a30b60089b773e2301c1429.6a339d5b067c6c28db22136a.6a339d5a39211ca9995c59ce:Trae CN.T(2026/6/18 15:25:15)

.1950965202689113:ca6503fb2a1e683addda1f30494bc37a_6a30b60089b773e2301c1429.6a33ad8d067c6c28db2229ee.6a33ad8b39211ca9995c59d3:Trae CN.T(2026/6/18 16:34:21)

移动端游戏门户实现（含 8 游戏 + 3 工具 + TabBar）：

.1950965202689113:6eebb3b22fb65e06bc973a12138d2b3b_6a30b60089b773e2301c1429.6a38d20e067c6c28db223c98.6a38d20d3e296c5c42e31b02:Trae CN.T(2026/6/22 14:11:26)

.1950965202689113:3c14b36d1a411a65391882d4bd1ab649_6a30b60089b773e2301c1429.6a38d401067c6c28db223d03.6a38d4013e296c5c42e31b06:Trae CN.T(2026/6/22 14:20:05)

.1950965202689113:bc86d6939024282f5a0ffcecbca59d42_6a30b60089b773e2301c1429.6a38e348067c6c28db223e63.6a38e3473e296c5c42e31b0b:Trae CN.T(2026/6/22 15:24:56)

.1950965202689113:ff703854b9bb551c6f3f8fa5de8a8854_6a30b60089b773e2301c1429.6a39e3b6067c6c28db2254d2.6a39e3b53e296c5c42e31b2f:Trae CN.T(2026/6/23 09:39:02)

.1950965202689113:645268f1d577f0c8ecbd221fcf10f412_6a30b60089b773e2301c1429.6a39e911067c6c28db225cb4.6a39e90f3e296c5c42e31b32:Trae CN.T(2026/6/23 10:01:53)

.1950965202689113:dcd97724f9ba1e32e03bc8c97720033d_6a30b60089b773e2301c1429.6a3a063f067c6c28db226667.6a3a063e3e296c5c42e31b33:Trae CN.T(2026/6/23 12:06:23)

.1950965202689113:964007ef230bfeb4ad11e79b3a900742_6a30b60089b773e2301c1429.6a3a183e067c6c28db226f69.6a3a183d3e296c5c42e31b34:Trae CN.T(2026/6/23 13:23:10)

ModelScope 创空间部署、多仓库同步与 SQLite 兼容修复

.1950965202689113:95b8be49c1f3167c56d3ec5579732a38_6a30b60089b773e2301c1429.6a4c9e8dae654ddc49981c0d.6a4c9e8d7760b1313a686315:Trae CN.T(2026/7/7 14:37:01)

.1950965202689113:e7a0e86b4d13e3379da5d41946fd2a51_6a30b60089b773e2301c1429.6a4ca189ae654ddc49981c95.6a4ca1887760b1313a68631c:Trae CN.T(2026/7/7 14:49:45)

每日自动新闻抓取与数据库更新：

.1950965202689113:aead7fbbc6179c9c166b55949d0ee8a0_6a30b60089b773e2301c1429.6a4caa44ae654ddc49981d6c.6a4caa447760b1313a686321:Trae CN.T(2026/7/7 15:27:00)

5. 对应的报名审核通过的帖子链接

forum.trae.cn/t/topic/227...

6. 技术栈与亮点

后端：Flask 2.0 + Flask-SQLAlchemy 2.5 + PyMySQL + SQLAlchemy 1.4
数据库：SQLite（生产/本地统一，部署零配置）
前端：原生 HTML + ES5 JS + CSS，零前端框架、零 UI 库
部署：ModelScope 创空间 Docker 部署
自动更新：beautifulsoup4 定时抓取相信音乐官网五月天新闻
设计：五球配色贯穿，卜卜圆润几何 + STAYREAL 潮玩贴纸感
合规：
歌词仅展示 ≤ 30 字片段并标注词曲作者；
用户照片仅本地处理不上云；
定位仅用于到店核验；
新闻抓取仅从公开官网获取标题与摘要。

7. 经验总结

这次 Demo 让我第一次完整体验到「用自然语言驱动代码」的快感，也总结了几点和 TRAE 配合的心得：

把需求拆得越小，TRAE 越能精准命中：不要一次性说「帮我做个游戏门户」。我会先讲页面结构（TabBar 几个 tab），再讲每个 tab 里的区块，最后才进入具体游戏逻辑。分层描述后，TRAE 生成的代码结构清晰，改起来也快。
OpenSpec + AGENTS.md 是提效的秘诀 ：项目里有 openspec/ 规格文档和 AGENTS.md 研发指引。每次开新任务前，我先让 TRAE 读一遍这些上下文，它就能自动对齐技术栈、命名规范和禁止项（比如不能引入 React/Vue），减少了很多返工。
遇到报错不要慌，把日志直接贴给 TRAE ：ModelScope 部署时出现过 MySQL 连接拒绝、SQLite ON UPDATE 语法错误、浏览器上传超时等问题。我把报错日志完整贴进去，TRAE 能快速定位根因并给出修复方案，比自己查文档快得多。
保持单文件前端是 TRAE 的舒适区 ：我让 TRAE 把 8 款游戏 + 3 款工具全部写进 app.js 和 index.html，零前端框架、零构建步骤。TRAE 对单文件大脚本的理解很好，上下文不会断片，反而比多文件项目更容易维护。
多 Session 协作比一个大长对话更稳：我把游戏门户、部署、新闻抓取拆成不同 Session。每个 Session 只聚焦一个目标，TRAE 的上下文更集中；需要关联时，再让它读取已有文件或 AGENTS.md 即可。

献给每一位陪伴五月天走过的五迷 ❤