1. Demo 简介
-
**是什么：** 城市盲盒漫游是一款以"盲盒+城市探索"为核心玩法的微信小程序，用游戏化方式打破"不知道去哪玩"的困境。用户选择主题和预算后，系统生成一条"盲盒路线"，只有到达当前站点后才会解锁下一站的线索，让每一次出门都充满惊喜。
**面向谁：** 18-35岁的城市年轻人——周末想出门但选择困难的文艺青年、想给约会增加新鲜感的情侣、寻找亲子新奇去处的年轻家庭、以及到陌生城市出差想本地化探索的商务人士。
**主要功能：**
1. **盲盒路线生成** — 选择主题（文艺漫步/美食寻味/城市冒险/怀旧时光）和预算后，系统从16个目的地池中随机抽取3个地点组成专属路线，出发前只显示模糊线索，到达后才解锁完整信息。
2. **渐进式解锁探索** — 每一站以"神秘地点"呈现，点击"到达此地"后才会揭开目的地名称、描述和消费预估，营造真正的盲盒惊喜感。
3. **出片指南** — 每个目的地到达后解锁专属拍照攻略：最佳拍摄机位（具体到角度和位置）、拍摄技巧、推荐滤镜风格。如旧书书店的"书架过道仰拍，顶部天光洒下"，让用户轻松拍出朋友圈大片。
4. **任务打卡与徽章收集** — 每个目的地配有2个探索任务（如"找到一本1980年代的诗集"“和老板聊十分钟天”），完成任务可解锁额外徽章，收集4种主题徽章解锁隐藏成就。
5. **组队模式** — 支持单人探索或组队出发，创建队伍后可邀请队友加入。组队时路线探索界面顶部展示队友头像，完成任务时弹出"队友完成了任务！"提示，增强社交陪伴感。
6. **本周探索排行榜** — 三大榜单（探索里程榜/任务达人榜/出片王者榜）展示Top5玩家，当前用户排名高亮显示，前三名金银铜装饰，激发持续探索动力。
7. **城市足迹地图** — 6×4网格城市区域地图，完成探索后随机点亮2-3个新区域（24个真实地名如老城北、艺术区、湿地园），localStorage持久化保存进度，直观展示"你点亮了城市的多少角落"。
-
主要功能：列出 2–3 个核心功能，建议配产品截图或界面展示，让评审一眼看懂。
2. Demo 创作思路
-
**灵感来源：**
周末和朋友约出门，两个人对着大众点评刷了半小时还是没定下来去哪。最后还是老三样：吃饭、看电影、逛街。明明住在一座两千多万人的城市，活动半径却只有家附近3公里。后来刷到"盲盒"概念——拆开前不知道里面是什么，那种期待感让人上瘾。我想，如果把"盲盒"的未知惊喜感和"城市探索"结合起来呢？
**想解决的问题：**
- 选择困难症：信息过载时代，推荐越多越难决定，用户需要"被安排"的快感
- 路线固化：每次出行都是重复模式，缺乏发现城市新角落的契机
- 新鲜感缺失：在一座城市住久了却只熟悉一小片区域
- 攻略疲劳：网红打卡攻略千篇一律，去了发现不是自己的风格
**为什么做这个方向：**
本地生活赛道竞争激烈（美团、大众点评、小红书），但它们解决的是"找到已知地点"的问题，没有解决"不知道去哪"的决策疲劳。盲盒漫游反过来——不让你选，直接给你惊喜，用"未知"本身作为产品价值。这个差异化定位在当前"选择过载"的背景下特别有共鸣。
3. Demo 体验地址（三选一）
-
交互式可体验的HTML格式文件
生活娱乐 · 城市盲盒漫游.zip (18.7 KB)
4. TRAE 实践过程
-
拆成4个递进任务，每个任务一个 TRAE 对话 Session：
| 阶段 | 任务目标 | TRAE 能力 | 产出 |
|------|---------|-----------|------|
| ① 创意提案 | 从模糊想法到完整方案 | 对话生成+结构化输出 | 痛点/用户画像/功能清单 |
| ② 静态页面 | 方案→可视觉展示页 | 代码生成+CSS动画 | 完整HTML展示页 |
| ③ 交互开发 | 静态页→可交互体验 | 多文件编辑+状态机设计 | 4屏切换+盲盒动画+数据池 |
| ④ 功能增强 | 加情绪价值功能 | 需求拆解+批量实现 | 出片/组队/排行/足迹 |
### 阶段一：创意提案生成
**关键 Prompt：**
> “我想做一个城市探索+盲盒结合的产品。用户不知道去哪玩，系统像拆盲盒一样给惊喜路线。帮我梳理痛点、目标用户、核心功能和价值分析，输出完整的创意方案。”
**TRAE 做了什么：**
- 自动拆解为4个模块：痛点洞察（选择困难/路线固化/新鲜感缺失/攻略疲劳）
- 生成4个用户画像（文艺青年/约会情侣/年轻家庭/出差达人），每个带年龄/职业/城市/原话引述
- 列出5个核心功能并排序优先级
- 用"商业价值/社会价值/用户价值"三维度分析
**踩坑：** 最初方案里功能太多（含AR导航、AI推荐等），我让 TRAE 砍掉非核心功能，聚焦"盲盒+探索+任务"三个核心闭环，避免 Demo 贪多嚼不烂。
### 阶段二：静态页面搭建
**关键 Prompt：**
> “基于这个创意方案，生成一个完整的HTML展示页。要求：暖色系渐变（珊瑚红+薄荷绿+暖黄），有Hero区、痛点卡片、产品mockup、用户画像、价值分析。用CSS变量统一设计语言，加浮动动画和hover效果。”
**TRAE 做了什么：**
- 一次生成完整HTML（440行），包含6个section
- CSS变量统一管理颜色（–primary/–secondary/–accent）
- Hero区标题用 `clamp()` 响应式字号 + `float` 动画
- 产品mockup用 `perspective(1000px) rotateY(-5deg)` 做3D倾斜效果
- 痛点卡片顶部渐变色条 + hover上浮
**踩坑：** 最初生成的mockup卡片在移动端布局错乱。用 TRAE 追加了一段 `@media (max-width: 768px)` 响应式适配，把 `product-showcase` 的双列改单列。
### 阶段三：交互功能开发（核心）
**关键 Prompt：**
> “把这个静态页升级为可交互体验。设计4个屏幕：①设置（选主题+预算滑块）②盲盒拆开动画 ③路线探索（渐进式解锁）④完成统计。要有多屏状态机切换、16个真实目的地数据池、任务打卡、徽章收集。盲盒动画要shake再burst。”
**TRAE 做了什么：**
- 设计 `state` 对象管理全局状态（theme/budget/route/currentStop/arrived/tasksDone/collectedBadges）
- `switchScreen(id)` 函数控制4屏切换，配合CSS `fadeIn` 动画
- 盲盒动画分两阶段：`.shaking`（0.5s shake旋转）→ `.opening`（0.8s burst缩放消失）
- 16个目的地按4主题分组，每个含emoji/name/tag/desc/budget/tasks
- `renderRoute()` 根据到达状态渲染：未到达显示模糊线索（`filter:blur(4px)`），到达后显示完整卡片
- 渐进式解锁：`getHint(dest)` 根据 tag 返回模糊提示（如"附近有书香味"）
**踩坑1：** 盲盒动画结束后礼物图标不消失，导致下一屏还能看到。解决方案：在 `burst` 动画结束后用 `setTimeout` 切屏，而非立即切屏。
**踩坑2：** 任务勾选后重新渲染会导致整个路线区域闪烁。解决方案：`toggleTask()` 只更新 `tasksDone` 状态再调 `renderRoute()`，配合CSS `cardReveal` 动画过渡。
**踩坑3：** 徽章收集去重——用户多次完成同主题路线会重复获得同个徽章。解决方案：`if (!state.collectedBadges.includes(badge))` 判断去重。
### 阶段四：功能增强（情绪价值）
**关键 Prompt：**
> “在现有Demo基础上增加4个功能：①每个目的地的出片指南（机位/技巧/滤镜）②组队模式（邀请队友+任务同步提示）③本周排行榜（3个tab+Top5）④城市足迹地图（6×4网格+localStorage持久化）。全部要真实可交互，不能有空壳。”
**TRAE 做了什么：**
- 给16个目的地各加了 `photo` 字段（2个机位+技巧+滤镜）
- 组队模式：开关切换 + 邀请按钮随机加入2个队友 + 路线顶部队友条 + 任务完成toast
- 排行榜：3个tab（里程/任务/出片）切换，Top5数据硬编码，前三名金银铜色边框，当前用户高亮
- 足迹地图：6×4=24格城市区域，`completeExperience()` 时随机点亮2-3格，`localStorage.setItem(‘blindboxFootprint’, …)` 持久化
**踩坑：** localStorage 在沙盒环境可能不可用。加了 try-catch 保护，读取失败时返回空数组降级。
-
附开发关键步骤截图
-
附关键任务对话的 Session ID
-
.1259392514922280:1597cdcb80b3d501699990eaf0466b63_6a4c991958cd500c44811b3f.6a4c993e58cd500c44811b53.6a4c993e467fb9ed6287a53b:Trae CN.T(2026/7/7 14:14:22)
-
.1259392514922280:5bd5c82fa675a7c77e8efe4dfb82ba80_6a4c991958cd500c44811b3f.6a4dbd9e100426e793fb247d.6a4dbd9d1bfd0c46fe0e3d31:Trae CN.T(2026/7/8 11:01:50)
-
.1259392514922280:e969fe7f4384c33152380c47569fdc0d_6a4c991958cd500c44811b3f.6a4dc494100426e793fb25a8.6a4dc4931bfd0c46fe0e3d32:Trae CN.T(2026/7/8 11:31:32)
5. 对应的报名审核通过的帖子链接
已投票！