一、项目介绍
作品名称：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.ai @抖音科技 @DOU+小助手 https://v.douyin.com/FTsyoCx3GpM/ 复制此链接，打开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.6a462f7488eacc3b686d03d1.6a462f73e27b4d7e9c63c4e7:Trae CN.T(2026/7/2 17:29:2 4)
> 2.盲盒核心功能开发的对话截图
.766838137694076:d0e88b50c309323354f3ce7f0c370c58_6a3206f7f35a170f5bb1c489.6a46413288eacc3b686d064a.6a464131e27b4d7e9c63c4ea:Trae CN.T(2026/7/2 18:45: 06)
> 3.开盒后的行程页
.766838137694076:26f69988172880baa7d81a9a404f4145_6a3206f7f35a170f5bb1c489.6a44e64988eacc3b686cff37.6a44e649e27b4d7e9c63c4d8:Trae CN.T(2026/7/1 18:04:57)
> 4. UI细节打磨与Bug修复的对话截图
.766838137694076:67444ab3e42b96b5335ca8b3f8992ac9_6a3206f7f35a170f5bb1c489.6a447514048712278006a680.6a447513441ff3b5c928875f:Trae CN.T(2026/7/1 10:0 1:56)
六、技术架构概览
┌─────────────────────────────────────────────────┐
│ 前端（Vue 3 + Vite） │
│ Web端页面 │ APP风格移动端 │ 共享组件/状态 │
└─────────────────────────────────────────────── ──┘
│
┌───────┴─── ────┐
▼ ▼
┌─────────────────┐ ┌─────────── ──────┐
│ IGA Functions │ │ 独立Node 服务 │
│ (Serverless API)│ │ (Socket. IO联机)│
└─────────────────┘ └──────── ─────────┘
│ │
▼ ▼
┌───────────────────────────────────── ────────────┐
│ Supabase持久化 │ 本地内存存储 │ 前端缓存层 │
└─────────────────────────────────── ────── ──────── ┘
七、产品亮点总结
>一句话介绍TripBox：
>用盲盒帮你决定去哪，用 AI帮你规划怎么 玩，用社区和游戏让你想回来。
五大亮点：
1. 创意记忆点：用旅行盲盒重构目的地选择方式
2. AI实际价值：AI不只聊天，生成可保存、可分享的结构化行程
3. 
产品闭环：盲盒 → 行程 → 收藏 → 订单 → 积分 → 社区 → 游戏
4. 
工程完整度：前后端分离、真实认证、多用户隔离、持久化方案
5. 场景覆盖：PWA +离线+ LBS，覆盖旅行全场景