1. Demo 简介
是什么：一款基于 React + Vite + TypeScript 构建的网页应用（Web App），围绕"中国 34 个省级行政区"打造集图鉴收集、梗 PK、猜梗挑战、每日任务于一体的地域文化轻游戏。
面向谁：
-
18-35 岁、喜欢刷社交媒体的年轻人
-
对地域文化、梗文化、图鉴收集感兴趣的休闲玩家
-
朋友聚会 / 社交破冰场景中需要"话题制造机"的用户
主要功能：
功能一：省份图鉴收集
点击中国地图任意省份，解锁「省份卡」：刻板印象标签（如「广东人什么都吃」「内蒙古人骑马上学」）、真实数据对比、稀有度评级和趣味解锁文案；未访问省份地图以雾化效果呈现，激励"集齐 34 省"。
功能二：每日任务 / 经验等级 / AI 配额
完成"探索 3 个省"、“生成 1 张海报”、"赢 1 局 PK"等每日任务获得经验值，升级解锁新功能；AI 换梗作为稀缺资源，每日 3 次基础配额 + 任务奖励额外次数，既保持新鲜感又控制成本。
功能三：梗 PK + 猜梗小游戏
-
梗 PK（本地 1v1）：随机配对两个已探索省份的梗，本地投票决出胜负，记录战绩。
-
猜梗挑战：从真实数据 / 段子中随机出题，验证用户对地域梗的判断力。
-
附带 AI 梗解释 / AI 梗生成 功能，让"梗"持续保鲜。
2. Demo 创作思路
灵感来源： 刷小红书、微博时，地域相关话题评论区永远最热闹。“广东人什么都吃”、“山东人爱考公”、“四川人顿顿吃辣”……这些梗有的是段子、有的是真实，但散落在各处。我想做一个地方，能把"刻板印象"和"真实数据"放在一起呈现，同时让用户像玩图鉴游戏一样"反复回来"。
想解决的问题：
-
内容散落 → 用一张互动地图把 34 省梗集中收纳。
-
看完就走 → 引入"图鉴解锁 + 任务 + 等级"循环，把"看"变成"玩"。
-
缺乏话题感 → 用 PK / 猜梗制造"你和朋友比一比"的传播钩子。
-
AI 滥用 → 每日 AI 配额 + 任务奖励，让 AI 换梗成为稀缺资源而非噱头。
为什么做这个方向：
-
地域 + 梗 = 天然社交货币：自带分享属性，朋友聚会、破冰、朋友圈都好用。
-
图鉴 + 任务循环是验证过的轻量玩法模型：Pokemon、动森、各类抽卡游戏都证明"收集 + 进度反馈"能让用户每天回来 3 分钟。
-
本地优先可落地：34 省数据 + localStorage 即可完成 v1，不依赖后端，适配 TRAE 赛期内的开发节奏。
3. Demo 体验地址
4. TRAE 实践过程
整个 Demo 从需求梳理、UI/UX 设计、组件拆分、状态管理、到游戏化循环搭建，全程在 TRAE CN 内通过自然语言对话完成。下面是关键步骤（附 Session ID 证明）：
Step 1 · 需求定位 + 文档结构化
-
在 TRAE 中讨论"v1 静态地图不够好玩"，明确 v1 改造方向：图鉴收集 + 小游戏 + 每日任务 + AI 配额。
-
借助 TRAE 自动生成
.planning/PROJECT.md/REQUIREMENTS.md/ROADMAP.md/STATE.md四份核心文档，把"省份图鉴 / 任务系统 / PK / 猜梗 / 成就 / 大区挑战"拆成 4 个阶段、11 个里程碑（M13-M23）。
关键 Session ID：
3235238444541241:5e71986c081c91cddbad9127bd4d8296_6a33a042ee048ccfe781563c.6a462a892ff8d014b7f86d4a.6a462a8704761a3df693cfa6（2026/7/2 17:08:25）
Step 2 · Phase A 阶段规划与任务拆解
-
在 TRAE 中执行
/gsd:plan-phase A，TRAE 自动输出 8 份分阶段执行计划（PLAN-01~PLAN-08），覆盖状态管理选型（React Context + useReducer）、usePlayer Hook 拆分、任务/经验/AI 配额 store 设计、单元测试覆盖策略。 -
同步形成 4 个 Wave 的执行节奏，把"先骨架后细节"的开发节奏落地为可勾选的 checklist。
关键 Session ID：
3235238444541241:779e4d5224afdd55c473515b573287cc_6a472a989f04d3b2f2b92857.6a472aa99f04d3b2f2b92859.6a472aa910abb423e04e9ae4（2026/7/3 11:21:13）
Step 3 · 代码实现 + 工具链搭建
-
用 TRAE 搭建工程：React 18 + Vite 6 + TypeScript 5 + Vitest + ESLint + d3-geo + TopoJSON 地图数据。
-
在 TRAE 对话中逐文件生成：
-
src/hooks/usePlayer.ts—— 玩家状态、经验、等级、任务进度、AI 配额统一管理 -
src/views/PlayView.tsx—— 猜梗 / 真假辨辨辨 小游戏主视图 -
src/views/DailyTaskView.tsx—— 每日任务中心 -
src/views/CabinetView.tsx—— 34 省图鉴柜 -
src/views/AchievementView.tsx—— 成就墙 -
src/views/LeaderboardView.tsx—— 本地排行榜 -
src/components/PkModal.tsx/QuizModal.tsx/MemeExplainModal.tsx/PosterModal.tsx/ChatModal.tsx—— 各类交互弹窗
-
-
TRAE 同时帮助设计
src/types/index.ts全局类型、Zustand / Context 状态分层、localStorage 持久化策略。 -
关键步骤截图（待自传，≥ 3 张）：
-
TRAE 对话中输出项目结构 + 状态管理选型结论的截图
-
某段组件代码（如 usePlayer Hook）由 TRAE 生成的对话截图
-
多个 PLAN 文件批量生成的截图 +
dist打包产物截图
-
关键 Session ID：
3235238444541241:ec47eecec656c9deaf76c1dd26aa8979_6a472dc59f04d3b2f2b929cd.6a472dee9f04d3b2f2b929cf.6a472ded10abb423e04e9ae5（2026/7/3 11:35:10）
附：报名帖链接
通过的社区报名帖：https://forum.trae.cn/t/topic/28720
