最近得空参加胡彦斌安利的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 创空间无需下载即可访问。- 在线体验 https://modelscope.cn/studios/souljoy/MaydayLand- GitHub 仓库https://github.com/xiaoyesoso/MaydayLand面向谁核心用户是 18–35 岁的五月天粉丝- 演唱会前后想找同好据点续场- 周末想进行歌词主题 citywalk- 出差/旅行时想发现当地五迷角落- 演唱会间隔期想玩轻量五月天主题小游戏。主要功能1.歌词角落地图北京、上海、长沙、台北等城市中的五迷咖啡馆、书店、涂鸦墙、唱片行、快闪展等 12 个角落按「情绪标签」筛选到店 200m 可打卡到店 1km 宽松打卡。2.打卡卡片 同好暗号到店后一键生成拍立得 / 票根 / 胶片三种主题卡片Canvas 合成歌词 地点 日期输入店铺暗号解锁限定徽章并留足迹。3.五月天人格测评 移动端游戏门户20 题 5 维度全曲库人格测评生成专属海报底部 TabBar「游戏」入口聚合人格测评 8 款小游戏猜歌名 Wordle、二选一、Emoji 猜歌、十秒猜歌、歌词选择、合成大月天、记忆配对 3 款工具朋友圈、DIY 刮刮乐、图库全部本地可玩。4.每日自动更新官方动态服务启动后每 24 小时自动从相信音乐官网抓取五月天相关新闻保持资讯新鲜度。2. Demo 创作思路灵感来源五月天的歌词陪伴了无数人的青春。每次演唱会散场后五迷们往往会自发聚在体育场周边的咖啡馆、餐酒馆继续合唱但这些「五迷据点」信息散落在微博、小红书、点评里没有一个集中的发现入口。于是想做一张「只有五迷能看懂的城市地图」。想解决的问题痛点解法歌词主题角落信息零散专属于五迷的 LBS 城市地图带情绪标签与歌词关键词匹配缺少「同好滤镜」店铺暗号 一次性 token 校验筛出真五迷打卡分享缺乏仪式感Canvas 合成 3 套主题歌词卡片体现「歌词 × 我 × 城市」演唱会散场后同好迅速流失人格测评 歌单解锁 海报分享裂变演出间隔期缺少互动移动端游戏门户8 款游戏 3 款工具随时可玩为什么做这个方向生活娱乐赛道天然适合粉丝社群产品。五月天拥有稳定且活跃的粉丝基础2025–2026 年「5525 回到那一天」巡回演唱会热度极高但围绕「演唱会前后同城社交」的产品却极少。选择这个方向既能验证 LBS 打卡 人格测评 游戏门户的组合在五迷群体中的接受度也能沉淀一套可复用的「粉丝城市漫游」产品模板。3. Demo 体验地址在线体验ModelScope 创空间https://modelscope.cn/studios/souljoy/MaydayLand建议使用移动端浏览器或微信内置浏览器打开体验最佳。桌面端可打开 DevTools 切到 iPhone 12/375×812 视口。4. TRAE 实践过程整个项目从核心闭环 H5、移动端游戏门户、ModelScope 部署、多仓库同步到每日自动新闻更新均由 TRAE 辅助完成。关键开发步骤包括4.1 从需求文档与 OpenSpec 到可运行 Demo输入MaydayLand移动端-研发需求文档.mdopenspec/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 主分支是main84MB 专辑封面浏览器上传超时改为 Git 推送。将git push origin maingit push modelscope master同步规范写入AGENTS.md。解决 SQLiteON UPDATE CURRENT_TIMESTAMP语法错误使容器能成功建表与启动。4.4 每日自动更新官方动态新增app/news_fetcher.py使用urllib.requestBeautifulSoup从相信音乐官网https://www.bin-music.com.tw/news抓取五月天相关新闻。新增app/news_refresh.pydaemon 线程服务启动 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. 对应的报名审核通过的帖子链接https://forum.trae.cn/t/topic/227506. 技术栈与亮点后端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减少了很多返工。遇到报错不要慌把日志直接贴给 TRAEModelScope 部署时出现过 MySQL 连接拒绝、SQLiteON UPDATE语法错误、浏览器上传超时等问题。我把报错日志完整贴进去TRAE 能快速定位根因并给出修复方案比自己查文档快得多。保持单文件前端是 TRAE 的舒适区我让 TRAE 把 8 款游戏 3 款工具全部写进app.js和index.html零前端框架、零构建步骤。TRAE 对单文件大脚本的理解很好上下文不会断片反而比多文件项目更容易维护。多 Session 协作比一个大长对话更稳我把游戏门户、部署、新闻抓取拆成不同 Session。每个 Session 只聚焦一个目标TRAE 的上下文更集中需要关联时再让它读取已有文件或 AGENTS.md 即可。献给每一位陪伴五月天走过的五迷 ❤
