【生活娱乐赛道 】梦盒DreamBox — 拍一张照片，从 AI 设计到建材采购的一站式家装落地平台

TRAE AI 创造力大赛 【大赛初赛专区】
1

【生活娱乐赛道 】 梦盒DreamBox — 拍一张照片，从 AI 设计到建材采购的一站式家装落地平台

【标签】 生活娱乐

【标题】 生活娱乐赛道 · DreamBox — 拍一张照片，从 AI 设计到建材采购的一站式家装落地平台

【正文】

1. Demo 简介

是什么： DreamBox 是一款跨平台（Android App + Web）的 AI 全景家装一站式落地平台。用户拍一张房间照片，AI 在 1-2 分钟内生成 360° 全景设计效果图，并可一键对接商城中的施工队、设计师、建材家具，实现"看见设计 → 买到材料 → 找人施工"的完整闭环。

面向谁： 准备装修的业主、想预览改造效果的租客、需要快速出图的室内设计师、房产中介。

核心亮点：

  • 拍照即见结果： 打开 App 对准房间拍一张照片（或长按上传全景图），选择风格后 1-2 分钟内生成多套 360° 全景效果图，手指滑动即可沉浸式预览"新家"的样子。

    首页
    首页1080×2412 136 KB
    预览界面
    预览界面1080×2412 190 KB

  • 8 大风格 × 3 种变体： 内置北欧简约、日式原木、现代轻奢、工业复古、奶油风、新中式、侘寂风、极简白 8 种风格，每种风格可生成自然光影版、艺术陈设版、功能收纳版 3 种变体，一次生成最多 4 套方案。

    风格选择页面
    风格选择页面1080×2412 186 KB

  • 360° 全景沉浸预览： 生成结果支持全屏拖动旋转查看，顶部底部渐变遮罩呈现 Apple 风格的沉浸视觉，方案之间可一键切换对比。

    我的方案
    我的方案1080×2412 159 KB
    生成结果预览页
    生成结果预览页1080×2412 268 KB

  • 从设计到落地的一站式商城： 这是 DreamBox 最核心的差异化能力。在结果页点击「对接落地」，系统会自动携带当前设计稿 ID，跳转到商城对应的类目，用户可按需找施工队、找设计师、找家装公司，或直接购买建材、软装、家具、家电——把"看到的效果"变成"装得出来的家"。

    商城
    商城1080×2412 245 KB

    商城 8 大类目覆盖家装全链路：
    | 类别 | 类目 | 示例 |
    |------|------|------|
    | 落地服务 | 施工队 | 水电木瓦油全工种、老房翻新（¥8000 起） |
    | | 设计师 | 北欧风定制、软装搭配设计（¥200 起） |
    | | 家装公司 | 全包整装、高端定制（¥50000 起） |
    | 实体商品 | 建材 | 乳胶漆、木地板、瓷砖 |
    | | 软装 | 窗帘、地毯 |
    | | 家具 | 沙发、餐桌、单人椅 |
    | | 家电 | 空调、扫地机器人 |

2. Demo 创作思路

灵感来源： 装修最大的痛点不是"看不到效果图"，而是"看到了也装不出来"。市面上的 AI 设计工具只负责生成图片，生成的方案和真正落地之间隔着巨大的鸿沟——业主拿着效果图不知道去哪买同款家具、不知道找谁能施工、不知道预算够不够。我想做一个从"看见"到"买到"再到"装好"全打通的工具。

想解决的问题：

  • 传统 AI 设计工具只出图不对接落地，效果图沦为"画饼"
  • 业主不知道去哪买方案里的家具建材、找谁能按图施工
  • 全景效果图制作成本高、周期长，普通人消费不起

为什么做这个方向： 只有把"AI 生成"和"真实供应链"连起来，才是真正有用的家装工具。DreamBox 的设计稿携带对接机制（designId 贯穿生成→商城→咨询全流程）让"看到即可买到"成为现实，这是纯出图工具无法替代的价值。

3. Demo 体验地址

  • Web 端体验链接： http://120.27.160.252:8081/
  • Android APK 下载： 通过网盘分享的文件：dreambox-release.apk 链接: https://pan.baidu.com/s/13XlZnbXA-2ssOrH-1JFH9Q?pwd=vjji 提取码: vjji

:light_bulb: 建议同时提供，方便评审在不同设备上体验完整闭环。

4. TRAE 实践过程

技术栈

层级 技术选型
移动端 React Native + Expo v56 + TypeScript + Zustand
Web 端 React + Vite + TypeScript
后端 Fastify + TypeScript + SQLite + better-sqlite3
AI 生成 ComfyUI + Diffusion360 全景工作流
全景渲染 Pannellum（Web iframe）/ 原生 WebView（App）

开发流程

整个项目从 0 到 1 使用 TRAE IDE 完成，以下是关键开发步骤：

步骤一：搭建三端架构与核心拍照流程

使用 TRAE IDE 搭建 monorepo（mobile + backend + web），完成首页相机交互。TRAE 帮我处理了跨平台相机权限、Web 端 <input type="file"> 替代方案、长按/短按快门判定（300ms 阈值区分拍照与全景上传）等细节。

截图01
截图011920×1040 189 KB

Session ID： .203886080297936:9d539287f3ba774cc315ccae168248f8_6a3b68d3cd96886b5d88587d.6a3b9c24cd96886b5d885add.6a3b9c223d3fbc4956c2c560:Trae CN.T(2026/6/24 16:58:12)

步骤二：AI 全景生成链路对接

通过 TRAE 完成后端与 ComfyUI Diffusion360 工作流的对接：图片上传 → 创建任务 → 轮询状态 → 全景图生成 → 圆形融合消除拼接痕迹。TRAE 帮我解决了宽高比判断（≥1.8 走 Diffusion360，否则走 NFoV 兜底）、任务队列、进度阶段文案等复杂逻辑。

截图02
截图021920×1040 159 KB

Session ID： .203886080297936:cc3026e3c84e25bf3b1638c33eb59c03_6a45db0e68917a510e35b7bc.6a464a90d92838e8a88aba59.6a464a8fe11a522e74c82c10:Trae CN.T(2026/7/2 19:25:04)

步骤三：设计稿携带的商城对接机制（核心差异化）

这是 DreamBox 最关键的功能——让设计稿跟随用户进入商城。通过 TRAE 实现了 designId 参数贯穿：

  • 结果页汉堡菜单「找施工/找设计/找公司」携带 designId 跳转商城
  • 商城类目页顶部显示金色横幅"已附带你的设计稿，将一并咨询"
  • 详情页高亮提示"用此设计稿咨询此服务"

TRAE 帮我梳理了 8 大类目的数据结构（服务类/商品类区分 priceUnit）、MallCard 组件复用、MallActionBar 按类型区分操作（服务类立即咨询 vs 商品类加入清单/立即购买）。

截图03
截图03364×180 22.6 KB

Session ID： .203886080297936:9ca4dca7c5f904eb88898ff3aa52fad3_6a45db0e68917a510e35b7bc.6a45e54168917a510e35b7be.6a45e540747d9727eb809982:Trae CN.T(2026/7/2 12:12:49)

步骤四：用户体系与积分商业化

使用 TRAE 完成完整的用户认证（SVG 图形验证码 + 邮箱验证码 + 频率限制）和积分体系（1 元 = 10 积分，三档套餐：免费/Pro¥99/企业¥999，支持自定义充值¥30-¥500，管理员审核订单）。AI 每次生成消耗积分，形成可持续的商业闭环。

截图04
截图041920×1040 88.3 KB

Session ID： .203886080297936:b0281f84832e2b570829b2aac7e7367f_6a45db0e68917a510e35b7bc.6a4b0604d92838e8a88abc44.6a4b0600e11a522e74c82c12:Trae CN.T(2026/7/6 09:33:56)

开发心得

  1. 设计稿携带机制是点睛之笔——TRAE 在讨论商城时主动建议把 designId 贯穿全流程，让"设计→落地"的闭环真正成立，这是产品差异化的关键。
  2. 跨平台兼容性自动处理——Web 端不支持 expo-camera、react-native-webview，TRAE 自动给出 iframe 和文件上传的替代方案。
  3. 复杂业务逻辑拆解能力强——8 大类目、3 种变体、积分体系、订单审核，TRAE 都能梳理清楚数据流和状态管理。

报名帖链接： [https://forum.trae.cn/t/topic/29114](https://forum.trae.cn/t/topic/29114)

1 个赞