一、项目介绍
作品名称：TripBox旅行盲盒规划师
赛道：生活娱乐
独立个人参赛，全流程由TRAE IDE辅助开发，从创意构思到完整产品实 现
二、产品简介
产品形 态
TripBox是一款AI驱动的旅行盲盒规划平台，支持Web端+ APP风格移动端双端使用，具备完整的用户系统、行程管理、社区互动、积分商城、游戏大厅等功能模 块。
核心解 决的问题
|痛点| TripBox的解 决方 案|
|------|------------- – —|
|选择困难：想出去玩但不知道去哪|盲盒机制让用户告别选择焦虑，开箱 即得 目的地|
|攻略繁琐：手工做攻略耗时耗力| AI智能生成完整行程，从想法到可执行 方案 一键完成|
|体验单一：传统旅行工具“用完即走” |积分、社区、游戏大厅形 成持 续互动闭环|
|信息碎片化：攻略分散在各平台|收藏、笔记、订单、 优惠 券一站式管理|
|移动场景受限：景区网络不稳定| PWA +离线缓存+ LBS定位， 覆 盖真实旅行场 景|
目标用户：
-想出去玩但“ 选择 困难”的年轻用户
-喜欢盲盒 、抽 卡、随机惊喜体验的用户
-希望快速生 成行 程、不愿手工做攻略的用户
-需要一站式旅行工具（收 藏、 离线、订单、优惠券）的用户
- 喜欢 社交互动和积分成就的活跃用户
完整功能清单：
核心功能：
- 
旅行盲盒系统：配置预算/天数/偏好 →3D开盒 动 画 →AI生成目的地+行程
- 
AI行程规划：根据偏 好 生成结构化行程，支持保存、分享、编辑
- 
目的地推荐：热门目的地、小众秘 境、详情展示（ 含坐标 、照片、推荐理由）
用户系统：
- 
注册登录（JWT认证）、多用户数据隔离
- 
个人中心、成就徽章、会员等级、积分体系
- 
消息通知 （系统 /订单/活动推送）
商业闭环：
- 
行程 详情/编辑/管理、订单列表、优惠券领取使用
- 
积分商城兑换、收藏夹、旅行笔记
社区与互动：
- 
社区内容展示、UGC发布、评论互动
- 
游戏大厅（谁是卧底/ 狼人杀，支持 So cket.IO联机+ AI兜底）
技术增强 ：
- 
APP风格移动端 （ 底部Tab导航）
- 
LBS定位发现附近盲盒
- 
离线缓 存（Service Worker + In dexedDB ）
相比初赛的升级
| 维度|初赛|复赛|
|------|------|------|
|产品完整度| Dem o级盲盒原型|完整产品，含用户系统/行程/社区/游戏等全模块|
| AI链路|简单生成| AI规划+保存+编辑+分享完整链路|
|用户体验|单页面演示| Web + APP双端、真实登录、数据持久化|
|技术深度|前端静态 页面|真实API、JWT认证、Socket.IO联机、PWA离线|
|创新维度|盲盒创意|盲盒+ AI +社区+游戏 四重复合创新|
三、产品演示视频
2.33 :4pm G@I.Vl Mjc:/ 03/19 厌倦反复刷攻略、纠结去哪旅行？ 第二期 TripBox介绍 独创旅行盲盒核心交互功能，把未知旅途的惊喜感融入智能行程规划。输入预算与出行时长即可自动生成小众游玩行程，网页规划 + 手机同步导航双端联动，解决做攻略耗时、网红景点拥挤的出游痛点，实现零门槛轻松规划旅行。 # vibecoding大赏 # TRAEAI创造力大赛 # ai # ai新星计划 # 旅行推荐 @TRAE.aiTRAE.ai @抖音科技 @DOU+小助手 https://v.douyin.com/ FTsyoCx3 GpM/ 复制此链接，打开Dou音搜索，直接观看视频！
四、产品创作历程
灵感来源
“ 现在的旅行app让人越来越不会玩了——打开就是搜索、比价、筛选，旅行的惊喜感去哪了？”
我们观察到：年轻人不是不想旅行，而是不想做选择。盲盒机制 恰好能把“选择题”变成“体验题”，让旅行决策回归到“期待与惊喜”本身 。
关键问题与解决思路 ：
1.问题：如何让盲盒不只是随机，而是真的“适合我” ？
思路：结合用户偏好（预算/天数/风格）进行加权推荐，而非 纯随机，同时保留盲盒的 惊喜感。
2.问题：AI生成的行程只是文本，如何真正 用起来？
思路：把AI输出结构化为可保 存、可编辑、可分享的行程对象，打通“生成 → 保存 → 收藏 → 订单 → 出发” 的完整链路。
3.问题：旅行产品用完即走，如何 让用户 回来？
思路：引入积分商城、成就徽章、社区内容、联机游戏等游戏化机制 ，形成持续互动。
重要设计与技术决策
-前端架构：Vue 3 + Vite + Pinia ，选择轻量技术栈快速迭代
-三端设计：Web端注重信息密度，APP端注重移动端体验，路由共享、组件 复用
-后端架构：Node.js + Express，拆分独立游戏服务（So cket.IO）处理长连接
-部署方案：IGA Pages + IGA Functions主路径，Supabase持久化，本地端口穿透方案
五、TRAE实践过程
> 1.优化目的地行程景点
.766838137694076:ffb0b2656742ef366e269e89c2a6bad5_6a3206f7f35a170f5bb1c489.6a462f7488eacc3b6 86d03d1.6a462f73e27b4d7e9c63c4e7:Trae CN.T(2026/7/2 17:29:2 4)
> 2.盲盒核心功能开发的对话截图
.766838137694076:d0e88b50c309323354f3ce7f0c370c58_6a3206f7f35a170f5bb1c489.6a46413288eacc3b 686d064a.6a464131e27b4d7e9c63c4ea:Trae CN.T(2026/7/2 18:45: 06)
.766838137694076:67444ab3e42b96b5335ca8b3f8992ac9_6a3206f7f35a170f5bb1c489.6a4475140487122 78006a680.6 a447513441ff3b5c928875f:Trae CN.T(2026/7/1 10:0 1:56)
新增id：.766838137694076:ef2819947005ad7ccde6d445162ba6b3_6a657a04b4168410395c14d1.6a6805a6b4168410395c1a3d.6a6805a53f3d96737c816185:Trae CN.T(2026/7/28 09:28:06)
.766838137694076:a24805251c522441d072964b1db21052_6a657a04b4168410395c14d1.6a65d663b4168410395c1832.6a65d6623f3d96737c81617b:Trae CN.T(2026/7/26 17:41:55)
.766838137694076:007e55a88292b5cfb8e4540f1960ef7e_6a657a04b4168410395c14d1.6a657f64b4168410395c1602.6a657f643f3d96737c816170:Trae CN.T(2026/7/26 11:30:44)
六、技术架构概览
┌───────────────────────────────────────── ────────┐
│ 前端（Vue 3 + Vite） │
│ Web端页面 │ APP风格移动端 │ 共享组 件/状态 │
└─────── ────────────────────────────────── ────── ──┘
│
┌───────┴─── ────┐
▼ ▼
┌────────────── ───┐ ┌─────────── ──────┐
│ IGA Functions │ │ 独立Node 服务 │
│ (Serverless API)│ │ (Socket. IO联机)│
└─────────────────┘ └──────── ─── ──────┘
│ │
▼ ▼
┌────────────────────── ─────────────── ────────────┐
│ Supabase持久化 │ 本 地内存 存储 │ 前 端缓存层 │
└────── ───────────────────────────── ────── ────── ── ┘
七、产品亮点总结
>一句话介绍TripBo x：
>用盲盒帮你决定去哪，用 AI帮你规划怎么 玩，用社区和游戏让 你想回来。
五大亮点：
1. 创意记忆点：用旅行盲盒重构目的地选择方式
2. AI实际价值：AI不只聊天，生成可保存、可分享的结构化行 程
3. 
产品闭环：盲盒 → 行程 → 收藏 → 订单 → 积分 → 社区 → 游戏
4. 
工程完整度：前后端分离、真实认证、多用户隔离、持久化方案
5. 场景覆盖：PWA +离线+ LBS，覆盖旅行全场景