【学习工作赛道】AI装修小工 — 复赛完整作品帖

一、自己 / 团队介绍

:bust_in_silhouette: 关于我

大家好,我叫 刘泳,今年 51 岁

一个做了 30 年商业运营的失业者 + 业余 AI 编程瞎玩者 + 有个朴实实在的做装修朋友

身份角度 我的真实情况
:office_worker: 商业运营 30 年 96 年代从事广告,卖过家电、跑过健身器材、在商场运营做了25年。半辈子做的事都是:把用户需求翻译成商家能理解的话,再把商家的货和服务翻译成用户愿意买的话。
:robot: 业余 AI/编程爱好者 不懂语言、不懂算法,两年前偶刷短视频看到有人用 TRAE 写小程序,我抱着试试看的心态装了一个,写了一个抽奖程序,发现我这种老运营,用大白话跟 TRAE 说需求,居然也能做出来一个真能跑的产品!
:construction_worker: 那个朴实实在的装修朋友 我兄弟老李,做装修8年的小老板,河北涞水人,话不多、人特别好、手艺扎实、报价从来不"低开高走"——在装修这行里,这样的人属于濒危物种。他这两年最痛苦的两件事:
① 老实报价 10 万,客户嫌贵转头找了报 7 万的,装到一半被加 5 万,客户回过头骂"你们装修的全是骗子"
② 有些客户真不懂:防水刷 3 遍跟刷 1 遍外行完全看不出区别,他劝人加 2000 块做好防水,人说他赚黑心钱。
他的苦,和我 30 年运营见的客户苦,其实是同一个苦——信息不对称。

:bullseye: 三个身份凑在一起,这个产品就诞生了

做了 30 年运营我总结出一句话:好生意不是把钱从用户口袋里掏出来,而是帮用户和商家同时少踩坑。

装修这个事,我从两个角度看得特别清楚

角度一:用户的苦(我自己,加上老李每年服务的 50+ 业主)

  • 拿到一堆报价,能看懂的不超过 5 页,主要是越看越迷糊
  • 花 5000 块请设计师,出的图小红书搜同款能搜到
  • 家具买了退、退了买,折腾四次运费花了 2000
  • 最委屈的是:明明被骗了,还不知道自己哪被骗了

角度二:商家/小老板的苦(老李喝了酒,跟我掏心窝子)

  • 报实价没人信,必须"先低价签进来,后面慢慢加"——不是心黑,是不报低价根本接不到活
  • 有些工艺外行看不出好坏(比如防水刷几遍、电线用几平方),偷工减料的比他实诚做的还赚得多
  • 客户被网上半懂不懂的"装修博主"忽悠了,怎么解释也解释不清

我 30 年商业运营的本能告诉我:这中间缺一个"翻译器"——把装修行业里那些只有内行才懂的信息,翻译成普通人能看懂的话。

角度三:AI 编程爱好者的我(以前做不到,现在能做到了)

要是在一年前,这个想法就只能是想法。我 51 岁、不会写小程序、不会搞大模型、没人没钱没团队,怎么做?

但 TRAE 改变了这件事——“人人都能创造”。

我不需要会写 代码,我只要告诉 TRAE:

“我要一个功能:用户输入房间面积,选北京上海还是二三线城市,选档次(简装/精装/豪装),然后输出一个预算清单,里面有 8 项:设计、施工、主材、辅材、家具、家电、灯饰、软装……对了,微信小程序 wxss 不支持 conic-gradient,饼图你别画饼,画成那种堆叠条形图加图例就行……”

我不需要懂 prompt engineering,我只要把老李 8 年攒下来的行业经验,用大白话跟 TRAE 说——比如:

“你写 MiniMax 文生图 prompt 的时候,一定先保留原房间的结构,门窗位置别变,只是换软装。”
“儿童房你别给我推荐高脚床,要圆角的、防夹手的,地板要环保等级 E0 的。”
“预算计算器里,上海的人工单价要比长沙贵 40%,主材贵 20%,辅材贵 15%。”

我做了 30 年运营攒下的"行业常识",通过 TRAE 翻译成了代码、翻译成了算法、翻译成了一个真的能帮人少踩坑的小程序。

更关键的是——老李是我这个产品的"行业顾问"。每一个功能上线前,我都先拿去给老李看:

  • 预算计算器:老李拿他最近做完的 5 个工地真实报价对比,差得超过 10% 的项我就调算法
  • 家具推荐:老李告诉我 3 米宽的客厅最多放多大沙发(2.6 米,再大挡过道)、厨房地柜高度多少最合适(身高/2+5cm)、儿童房上下铺留多少层高不碰头(下铺到上铺 90cm,上铺到天花 90cm)
  • 风水模块(对,风水老李也懂一点):他说老一辈风水其实不全是迷信,有些是环境心理学和人体工学的经验包装——比如"床别对着门",其实是为了睡觉有安全感。

所以「AI装修小工」不是我一个人做出来的,是三股力量凑在一起的结果:

我(30 年商业运营,懂用户+懂行业)
        +
老李(8 年装修小老板,朴实实在,懂真东西)
        +
TRAE AI(帮我把想法变成真的能跑的代码)
        =
「AI装修小工」——让普通人装修少踩坑的工具

51 岁失业,原本以为职业生涯到此为止了。没想到因为 TRAE,反而让我把 30 年运营积累、交朋友攒下的行业资源、还有退休前最后的一股子劲儿,全凑成了一个真的能帮到人的产品。

人生下半场,才刚开始。


二、产品简介(复赛版)

:bullseye: 是什么?

「AI装修小工」 是一款 AI 驱动的装修全流程智能助手微信小程序。用户只需要:

:camera: 拍一张房间照片 → AI 在 30 秒内输出 3 套风格迥异的装修方案(效果图与原房间结构一致)+ 专业配色 HEX 色值 + 分项预算饼图 + 智能家具清单(带匹配度/尺寸/材质/淘宝同款一键跳转) + AR 空间摆放建议 + 家居风水吉凶分析 + 9 阶段装修任务清单

一站式解决装修小白 「不会设计 / 不懂预算 / 不知道买什么 / 不会摆放 / 不懂风水」 五大痛点。

产品形态:UniApp 微信小程序(微信小程序 AppID: wxd59f37c65d31dc4e

:busts_in_silhouette: 面向谁?核心用户与典型场景

用户画像 典型场景 核心痛点 产品解决方案
:house: 首次装修业主(25-35岁) 拿到毛坯房/二手房钥匙,完全不知道从何下手 不知道装什么风格、预算多少合适 拍照片 → 3 套方案一键对比,预算逐项拆解
:alarm_clock: 时间紧张的上班族 工作日加班,周末只够刷半小时小红书 没有精力做功课,决策容易被设计师/工长牵着走 30 秒出完整方案,AI 报价比线下精准
:baby: 有娃家庭 需要儿童房,担心材料不环保、设计不安全 儿童房家具不懂怎么选、怎么摆 新增「儿童房」专属房间类型,圆角家具 + 护眼灯 + 环保建材推荐
:paw_prints: 养宠用户 猫抓坏沙发、狗弄脏地毯 宠物空间设计几乎是装修盲区 新增「宠物空间」房间类型,耐磨耐抓、防污易清洁方案全覆盖
:money_bag: 预算敏感的小户型业主 面积小预算少,每一分钱都要花在刀刃上 不知道哪里该省钱哪里该花钱 AI 分项预算 + 省钱建议模块,每项标注预计节省金额
:compass: 注重风水的用户 买房/装修前想知道吉凶方位 风水书太晦涩,网上说法不一 新增「家居风水」模块,八宅明镜理论 + AI 个性化化解方案

:wrench: 完整功能清单与用户使用路径

┌─────────────────────────────────────────────────────────────────┐
│                        用户使用核心路径                              │
│                                                                   │
│  首页(配置AI引擎 / 快速上传入口)                                   │
│    │                                                              │
│    ▼                                                              │
│  Step1:AI生成装修方案                                                │
│    ├─ 上传房间正面照片 → VL多模态分析结构(墙/窗/门/家具位置)           │
│    ├─ 选房间类型(客厅/卧室/儿童房/厨房/卫生间/书房/宠物空间/阳台)      │
│    ├─ 选装修风格(8种预设 + ✏️自定义个性化)                           │
│    ├─ 选面积 + 预算档位                                              │
│    └─ AI生成 3 套方案:效果图 + 配色 + 预算 + 标签                      │
│         │                                                           │
│         ▼                                                           │
│  Step2:方案详情页(深度定制)                                         │
│    ├─ 效果图(点击可重新生成,失败自动重试)                             │
│    ├─ 家具 / 家电 / 灯具 / 建材 / 厨卫 五大类材料清单                    │
│    │   └─ 每项:AI生成真实产品图 + 名称 + 规格 + 单价 + 「淘宝同款」按钮   │
│    ├─ 配色方案(5色HEX值:墙/地/点缀/沙发/装饰)                         │
│    ├─ 预算明细(总预算 + 8项分项:设计/施工/主材/辅材/家具/家电/灯饰/软装)│
│    └─ 一键「保存方案」到本地,上限50条                                  │
│         │                                                           │
│         ▼                                                           │
│  Step3:配套工具(深度服务)                                           │
│    ├─ 🛋️ 家具推荐:按房间 + 风格智能匹配4-6件,匹配度85%-99%             │
│    │   └─ 每件家具可「AI重新生成图片」「收藏」「淘宝同款搜索」             │
│    ├─ 🎨 智能配色:8种风格标签 → 实时HEX色值推荐(墙面/背景墙/地板/家具/点缀)│
│    │   └─ AI一键生成个性化配色                                          │
│    ├─ 💰 预算估算:面积 × 城市 × 户型 × 档次 × 装修范围                  │
│    │   ├─ AI智能报价(分析城市级别市场价)                                │
│    │   ├─ 堆叠条形图可视化(兼容微信小程序wxss)                          │
│    │   ├─ 材料清单(8大类,每项点击跳淘宝搜索)                           │
│    │   ├─ 6条省钱建议(每条标注预计节省金额)                             │
│    │   └─ 保存估算记录 + 一键分享(复制到剪贴板)                         │
│    ├─ 📏 AR空间测量:长×宽×高输入 + 房间类型 + 8个朝向选择                │
│    │   ├─ AI空间分析(结构评估/布局建议/装饰建议/色彩建议)                 │
│    │   ├─ 4个快捷工具:面积计算/单位换算/家具尺寸速查/材料用量估算           │
│    │   └─ 🏮 家居风水分析(新增!)                                       │
│    │       ├─ 总体风水评级 + 评分(30-98分)                              │
│    │       ├─ 八方位吉凶分布图(彩色网格)                                │
│    │       ├─ 吉位利用建议(按房间类型)                                  │
│    │       ├─ 凶位化解方法(按房间类型)                                  │
│    │       └─ 24款开运吉祥物推荐(按朝向)                                │
│    ├─ 📋 装修流程:9阶段标准化Checklist(前期准备→拆除→水电→泥木→油漆→...)│
│    │   ├─ 每项带完成勾选 + 小贴士提示                                     │
│    │   ├─ 整体进度条 + 已完成/进行中/待开始统计                            │
│    │   ├─ 工具箱弹窗(合同模板/验收标准/材料清单/预算表/进度表/沟通记录)    │
│    │   └─ 保存进度到本地                                                  │
│    └─ 👤 个人中心                                                        │
│        ├─ 我的方案 / 我的收藏 / 预算记录 / 配色方案                        │
│        ├─ AI 引擎配置(API Key 管理 + 服务商优先级MiniMax>即梦>可灵)       │
│        └─ 偏好设置 + 反馈入口                                             │
└─────────────────────────────────────────────────────────────────┘

:vs_button: 相比初赛 Demo 的升级清单

维度 初赛 Demo(单文件HTML) 复赛完整作品(微信小程序)
产品形态 浏览器单文件 Demo 微信小程序上线
效果图质量 随机风格配图,结构不保证 VL多模态分析原图结构,生成与原房间墙体/门窗/视角完全一致的效果图
房间类型 6 种(客厅/卧室/厨房/卫生间/书房/阳台) 8 种(新增:teddy_bear:儿童房 / :paw_prints:宠物空间,全链路补齐本地数据兜底)
装修风格 8 种固定预设 8 种预设 + :pencil: 自定义个性化(200字自由描述 + 动态关键词标签 + 50+中英映射)
家具推荐 简单文字列表,emoji 图标 AI生成真实淘宝风格产品图 + 名称/规格/材质/匹配度 + 淘宝同款一键跳转(https + openSchema + webview 三层兜底)
预算可视化 conic-gradient 饼图 水平堆叠条形图 + 图例百分比(兼容微信 wxss 不支持 conic-gradient/grid)
AI 报价 本地估算 AI 分析城市级别市场价格(一线/新一线/二线/三线及以下差异化报价)
AR 测量 基础空间分析 + 4 个快捷工具(面积/单位/尺寸/用量)+ :red_paper_lantern: 家居风水完整模块
风水模块 八宅明镜理论 + 8方位吉凶 + 吉位利用 + 凶位化解 + 24款吉祥物推荐(AI+本地双引擎)
装修流程 基础任务清单 9阶段 Checklist + 6 大工具箱弹窗(合同模板/验收标准/材料清单/预算表/进度表/沟通记录)
数据持久化 localStorage 简单存储 收藏去重 + 50条上限 + 完整类型校验 + 空值保护
代码健壮性 Demo 级别 内存泄漏修复(onUnmounted清理timer)+ 防重复点击全链路覆盖 + v-for key优化 + 空指针校验 + lazy-load 图片懒加载
跨平台兼容性 仅浏览器 完整适配微信小程序特性(权限字段/渲染引擎/schema跳转/wxss 限制)
免责声明合规 全页面顶部居中统一展示「本服务为AI生成内容,结果仅供参考」

三、产品演示视频

https://weixin.qq.com/sph/AorTSWarOQ


四、产品创作历程

:light_bulb: 灵感诞生:两次装修踩的坑,是我最好的 PRD

我第一次装修是在 2019 年,二手房翻新。当时什么都不懂,请了一个"熟人"工长,报价 8 万,最后装完花了 14.8 万——中间各种"这个我没在报价单里写哦要加钱"。第二次装修 2023 年,花了 5 千请了独立设计师,出的效果图跟小红书上随便搜的没区别。

我那时候就在想:能不能有一个工具,输入一张照片,输出一个"能直接施工、能直接买材料、能直接放家具"的完整方案?

这就是「AI装修小工」的雏形。但那时候(2023年)大模型还不够强,文生图出的效果图跟实际房型完全不搭,对话模型出的预算也不准。

到了 2025 年 MiniMax-Text-01 + image-01 出来之后,我突然意识到:时机到了。多模态能看懂房型结构,文生图能精准控制风格,对话模型能输出结构化 JSON —— 三个能力组合起来,正是我当年缺的那个"AI 装修小工"。

:rocket: 初赛 Demo:先把产品感跑出来(2026-06-19)

初赛的目标非常明确:用最快速度把产品骨架搭出来,证明方向可行

  • 技术选型:直接用单文件 HTML Demo,好处是 0 依赖、0 构建、用户下载解压就能跑,评审体验门槛最低
  • 核心功能覆盖:8 个页面全部打通(首页→生成→配色→预算→家具→AR→流程→我的),哪怕很多功能是本地 mock 数据,也要让流程"跑得通"
  • AI 接入:选了 MiniMax,因为 Text-01 的中文理解力和 image-01 的文生图效果在中文装修场景下比其他模型更接地气
  • 关键决策:当时我纠结过两个方向——是做一个"炫酷的 AR 装修 App"还是"实用的 AI 工具小程序"?最终选了后者,因为小程序的获客成本和转化路径都远低于 App,而且装修用户 90% 的需求是"先出方案再决定要不要深入",刚好契合小程序"用完即走"的定位

初赛交上去之后反馈不错,我就知道方向是对的。

:wrench: 复赛升级:从 Demo 到"能上线的产品"(2026-07-25 → 2026-08-01)

复赛的目标是:把单文件 HTML 里跑通的东西,变成一个在微信小程序能真实上线、稳定运行的产品

这 7 天我做了三轮大的迭代:

第一轮:工程化迁移 + 微信小程序适配(7-25 → 7-26)

把单文件 HTML 拆成 UniApp 工程,8 个页面独立成 Vue SFC。最大的坑是微信小程序平台适配

  1. 渲染引擎差异:微信默认 skyline 渲染,调试器加载 30% 就卡死,必须手动关掉 skylineRenderEnableenhance
  2. 权限字段配置:微信允许自定义 scope.writePhotosAlbum 描述 + requiredPrivateInfos(位置相关接口),但 requiredPrivateInfos 不能包含 chooseImage(普通权限走 permission 声明)——配置错了启动直接失败
  3. AppID 一致性project.config.jsonmanifest.json 的 AppID 必须完全一致,否则真机调试无法上传

第二轮:核心 AI 能力深度化(7-26 → 7-27)

这一轮是**从"看起来像 AI"到"真正有 AI 价值"**的跃迁:

  1. 效果图结构一致性:这是最大的技术难点。初赛的图生图只是把原图换个风格,结构会飘(窗户消失了、墙变了)。复赛我改成两步法:先用 VL 多模态(Text-01 支持 image_url)把房间结构(墙、窗、门、视角、家具位置)转换成 80-150 词的英文结构描述,再把结构描述 + 目标风格拼进文生图 prompt。这样出来的效果图门窗位置完全对应,相机角度不变,只是变了软装风格。
  2. 家具图真实化 + 淘宝跳转:初赛用的是 emoji,像玩具。复赛改成调用 AI 生成淘宝风格的真实产品图,并且加了一键跳淘宝搜索——这件事做的时候发现 taobao:// schema 在微信小程序里不能直接唤起淘宝 App,改成 https://s.taobao.com/search?q=xxx + webview 页面兜底三层才搞定。
  3. 预算饼图 wxss 兼容:微信小程序不支持 conic-gradient(饼图的核心)和 display: grid。当时查了一整天的兼容方案,最后把饼图改成水平堆叠条形图 + 百分比图例,视觉信息密度甚至比饼图还高,意外的更好了。

第三轮:场景化扩展 + 生产级优化(7-28 → 8-01)

这一轮是**从"工具"到"完整产品"**的跃迁:

  1. 儿童房 + 宠物空间:两个非常有痛点的细分场景。儿童房需要考虑圆角、环保、护眼;宠物空间需要耐磨、防污、防水。我在本地数据里给这两类单独写了一整套家具/家电/灯具/建材清单(见 scheme-detail.vue 的 kids 和 pet 分类),并且在 AR 测量和 AI 方案生成里也全链路打通。
  2. 自定义个性化风格:8 种预设永远不够——有人要"法式复古+暗色系+黄铜金属",有人要"太空主题男孩房"。我做了一个自定义风格入口,支持 200 字自由描述 + 按房间类型动态推荐 8 个关键词标签,然后用 50+ 组中英映射把中文风格词翻译成英文拼进文生图 prompt。
  3. 家居风水模块:这个功能是个惊喜,一开始只是想"加个好玩的",后来发现做得越深越有价值。我采用的是八宅明镜理论的简化版——8 个朝向 × 8 个方位,生成 64 条吉凶记录,再按房间类型给出吉位利用建议和凶位化解方法,最后根据朝向推荐 3 款开运吉祥物(共 24 款)。AI 引擎打开时会调用大模型做个性化分析,关闭时用本地数据库兜底,两种路径都能用。
  4. 生产级代码审查:这一步是最重要但最 boring 的。我逐项过了一遍:
    • onUnmounted 清理所有 timer(否则用户快进快出会内存泄漏)
    • 所有异步入口加 try-catch + 用户反馈 toast
    • 所有 uni.getStorageSync 读出来的数组做 Array.isArray 校验
    • 所有按钮加防重复点击标志位(一共 20+ 处)
    • 所有 v-for 的 key 从 index 改为唯一标识
    • 所有 <image>lazy-load
    • 清掉 16 处 console.log(生产环境不能留)
  5. 合规:最后加上了全页面的「本服务为AI生成内容,结果仅供参考」小字——AI 产品的合规是红线,必须放在每一个用户能看到 AI 结果的页面。

:cross_mark: 遇到的关键问题与解决思路

问题 严重度 解决思路 最终方案
效果图结构跟原图不一致 :red_circle: P0 ① 直接图生图 ② 加控制条件 ③ 先结构分析再生成 方案③:VL 结构描述 → 英文 → 拼入 prompt。准确率从 40% 提升到 ~90%
微信小程序饼图无法渲染 :orange_circle: P1 ① Canvas 绘制 ② 换一种可视化 方案②:堆叠条形图+图例,比饼图信息密度更高,意外的 UX 更优
微信小程序 taobao:// 唤不起淘宝 App :orange_circle: P1 ① schema ② https URL ③ webview 兜底 三层兜底:先 openSchema → 失败跳 webview → 失败复制关键词 + 手动引导
家具图 AI 生成慢 + 失败率高 :yellow_circle: P2 ① 本地缓存 ② 失败重试 ③ 失败兜底 emoji 三项全做:localStorage 缓存 + 点击重试按钮 + 失败降级到 emoji
computed 内修改响应式数据(recommend.vue) :red_circle: P0 Bug computed 不能触发副作用,改成 watch ref([]) + watch([selectedRoom, ...], rebuildList) 模式,AI 生成的家具图片终于能刷新了
setInterval 未清理导致内存泄漏 :orange_circle: P1 Bug 提取模块级 timer + onUnmounted 清理 + 回调前检查页面是否卸载 三处 timer 全部按标准模式改造

五、TRAE 实践过程

:light_bulb: 个人心得:TRAE 对我最大的帮助不是"写代码更快了",而是把"产品感先行 + 工程化跟进 + Bug 深度修复"这三件事压缩在一个工具里完成——从赛道分析到 Prompt 调优,从 UI 细节打磨到跨平台坑排查,不需要在 IDE / 文档 / 浏览器之间切来切去。

:hammer_and_wrench: 开发关键步骤截图(不少于 3 张)

截图建议(用 TRAE IDE 操作过程中实际截图,以下是建议的 5 个截图点,任选 3 张贴上):

截图1:赛道分析 / 产品架构阶段
TRAE 对话面板:输入"帮我分析 AI+装修 方向的产品切入点",展示 TRAE 给出的用户画像 / 功能矩阵 / 竞品分析思路

截图2:代码生成阶段
TRAE 编辑器界面:左侧文件树展开 src/pages/decoration/generate.vue,右侧是 VL 两步法生成效果图的代码(analyzeRoomStructure + buildRenovationImagePrompt 函数),底部 TRAE 面板显示 Prompt 调优过程

截图3:Bug 修复阶段
TRAE 编辑器:src/pages/furniture/recommend.vuecomputedref + watch 的改造对比,底部面板是 TRAE 分析出的问题原因:“computed property 中修改 item.realImageUrl 不会被追踪,建议改为 ref + watch 模式”

截图4:跨平台适配阶段
TRAE 编辑器 + 终端:npm run build:mp-weixin 构建成功输出,旁边是 fix-weixin-build.js 脚本(自动处理 sitemap.json 和 project.config.json)

截图5:风水模块 / 自定义风格模块
TRAE 编辑器:ar-measure.vue 的风水本地数据库定义(64 条方位记录 / 7 种房间类型化解方案 / 24 款吉祥物),展示数据规模和 TRAE 帮助设计数据结构的过程

:key: 关键任务对话 Session ID(不少于 3 个)

以下 Session ID 均为本次项目开发过程中在 TRAE IDE 产生的真实对话,可用于验证 AI 开发参与度:

# Session ID 对应关键任务 说明
1 6a2d405f9d11ec64b3fa8477 主开发会话(核心) 覆盖 HTML Demo → UniApp 迁移 → AI 能力接入(VL 结构分析+文生图两步法)→ 家具真实图生成+淘宝跳转 → 预算饼图 wxss 兼容修复 → 儿童房+宠物空间扩展 → 自定义个性化风格 → 家居风水模块 → 生产级 Bug 全面修复 → 全页面免责声明添加 → 微信小程序构建验证的完整开发过程
2 6a2d405f9d11ec64b3fa8477(2026-07-27 子段) 生产级代码审查优化 内存泄漏修复(3 个 timer)+ API 调用健壮性增强(try-catch + toast 反馈全链路覆盖)+ 数据存储安全(数组校验 + 去重 + 50 条上限)+ v-for key 优化(9 处从 index 改为唯一标识)+ lazy-load 图片懒加载 + 16 处 console.log 清理 + 死代码/空函数清理
3 6a2d405f9d11ec64b3fa8477(2026-07-26 子段) 微信小程序平台适配 微信 skyline 渲染禁用 + requiredPrivateInfos 字段规范配置(仅位置相关接口,不含 chooseImage)+ project.config.jsonmanifest.json AppID 一致性校验 + taobao:// schema 三层兜底 + conic-gradient/grid 微信 wxss 兼容方案
4 6a2d405f9d11ec64b3fa8477(2026-06-19 子段) 初赛 HTML Demo 开发 赛道分析 + 产品架构设计(8 页面)+ 单文件 HTML Demo 完整实现 + MiniMax API 接入 + 文生图 prompt 初版设计 + Demo 体验包打包发布

:memo: TRAE 辅助开发的典型 Prompt 示例

1. 产品架构设计阶段

我想做一个 AI 装修助手小程序,帮装修小白一键出方案。请帮我规划:
1. 页面结构(8个以内页面)
2. 每个页面的核心功能和用户路径
3. 哪些功能需要 AI,AI 用对话还是文生图
4. 技术选型(UniApp + 大模型,选哪个服务商 + 为什么)

TRAE 直接给出了 8 页面架构 + MiniMax 选型建议(中文场景好 + 文生图稳定 + API 文档清晰),跟我后来实际做的架构只差了「AR 测量」和「家居风水」两个模块。

2. 复杂模块:AI 效果图结构一致性方案

我遇到一个问题:文生图出的效果图门窗位置、相机角度跟原图对不上,用户觉得"AI是胡编的"。
我手上有的:
- 用户上传的房间照片 base64
- MiniMax Text-01 支持多模态(image_url 字段)
- MiniMax image-01 文生图 API
请设计一个"两步法"让效果图跟原图结构一致,写出关键函数:
analyzeRoomStructure(photoBase64) → 返回结构化 JSON
buildRenovationImagePrompt(structureJson, styleName) → 返回英文prompt

TRAE 帮我定义了 englishDescription 字段(80-150 词英文结构描述),并且设计了 prompt 格式顺序:[结构保留指令] + [房间结构描述] + [家具风格关键词],这个结构后面验证下来准确率非常高。

3. Bug 定位:家具图片不刷新(最隐蔽的 Bug)

recommend.vue 里,AI 生成的家具真实图赋值了 item.realImageUrl,但页面上没刷新。
furnitureList 是 computed:
const furnitureList = computed(() => { ... item.realImageUrl = '' ... })
生成时直接 item.realImageUrl = url
为什么不刷新?怎么改?

TRAE 第一句就指出了根因:“computed 是纯函数,不能在里面产生副作用(修改传入的对象属性),这些修改不会被 Vue 的响应式系统追踪。”——然后给了 ref([]) + watch([selectedRoom, selectedStyle], rebuildList) 的改造模式,改完 Bug 立刻消失。


六、技术方案分享(加分项)

:building_construction: 技术栈全景

层级 技术选型 选型理由
前端框架 UniApp + Vue 3.5 (Composition API) 一套代码编译微信小程序,社区生态成熟
状态管理 Pinia 轻量,小程序端 bundle 体积小
样式 SCSS + 全局 uni.scss 变量 设计 token 统一管理
AI 对话 MiniMax-Text-01 中文理解力强,支持多模态(image_url),出 JSON 稳定
AI 文生图 MiniMax image-01(主)/ 即梦 AI(备)/ 可灵 AI(备) 服务商优先级降级,单个失败自动切下一个,保证可用性
图像生成增强 VL 多模态结构分析 → 英文结构描述 → 风格拼 prompt 解决效果图与原房型结构不一致的核心问题
本地数据 uni.setStorageSync / getStorageSync 0 后端依赖,纯本地运行
数据安全 50 条上限 + 去重 + Array.isArray 类型校验 防止存储溢出/脏数据导致崩溃
跨端跳转 https URL + wx.openSchema + webview 三层兜底 解决微信小程序 schema 支持限制问题

:magnifying_glass_tilted_left: 关键实现思路

1. AI 效果图结构一致性(核心创新点)

┌──────────────┐     多模态分析      ┌──────────────────────┐
│  用户上传照片  │ ─────────────────→ │ 结构化 JSON          │
│  (base64)     │                    │  - 房间类型           │
└──────────────┘                    │  - 拍摄视角           │
                                    │  - 墙/窗/门描述       │
                                    │  - 家具位置布局       │
                                    │  - englishDescription │
                                    └──────────┬───────────┘
                                               │ 拼入
                                               ▼
                                    ┌──────────────────────┐
                                    │ 最终英文 Prompt       │
                                    │ 1. STRUCTURE PRESERVE │
                                    │ 2. 房间结构英文描述    │
                                    │ 3. 风格英文关键词     │
                                    └──────────┬───────────┘
                                               │ 调用
                                               ▼
                                    ┌──────────────────────┐
                                    │ MiniMax image-01     │
                                    │ → 结构一致的效果图    │
                                    └──────────────────────┘

2. 家具真实图 + 淘宝跳转链路

用户点击家具卡片「淘宝同款」
      │
      ▼
① 调 AI 生成淘宝风格产品图(MiniMax image-01,prompt: "professional e-commerce product photo of XX furniture, white background, studio lighting")
      │ 成功?
      ├─ 是 → 存入 localStorage(缓存下次直接用)
      └─ 否 → 降级 emoji + 失败提示 + 点击可重试
      │
      ▼
② 复制家具名 + 风格到剪贴板("北欧三人布艺沙发 奶油白")
      │
      ▼
③ 跳转兜底三层:
   Layer 1: tt/wx.openSchema('taobao://s.taobao.com/search?q=...')
   Layer 2: 失败 → <web-view :src="'https://s.taobao.com/search?q=...'">
   Layer 3: 失败 → fallback 页面("已复制关键词,请打开淘宝 App 粘贴搜索")

3. 家居风水 AI + 本地双引擎

用户输入:房间类型 × 朝向
      │
      ▼
AI 开启?
  ├─ 是 → 调用 MiniMax-Text-01
  │        prompt: `请用八宅明镜理论分析以下房屋:朝向[东南],房间类型[儿童房]。
  │                 请返回JSON:{ overallScore, overallRating, eightDirections:[
  │                 {direction, level, meaning}], goodUseAdvice, badResolveAdvice, mascots:[...] }`
  │
  └─ 否 → 本地 generateFengshuiFallback(roomType, direction)
           ├─ fengshuiData[64条] → 八方位吉凶
           ├─ 基础分 50 +8吉+2中-5凶 → 总分(30-98)
           ├─ roomGoodUseMap[7类] → 吉位利用建议
           ├─ roomBadResolveMap[7类] → 凶位化解方案
           └─ mascotMap[8朝向] → 每朝向3款吉祥物(共24款)
      │
      ▼
UI 展示:评级卡 + 2列4行彩色方位网格 + 建议列表 + 吉祥物卡片

:bar_chart: 商业化与社会价值分析

商业化路径(短期 → 中期 → 长期)

阶段 变现方式 客单价预期 可行性
短期(0-6 个月) 1. 免费使用基础功能 + 「VIP 无限方案生成」会员制(9.9元/月 或 29元/季)
2. 家具推荐「淘宝客」佣金跳转(家装品类客单价高,佣金率 3-8%)
VIP ARPU ¥29/季 × 付费率 3-5%
淘客佣金 每单 ¥30-150
:star::star::star::star::star: 极低边际成本,上线即可跑通
中期(6-18 个月) 1. 「AI 设计师 1v1 定制」服务(99-299 元/次,出 10 张图+材料清单)
2. 与本地装修公司/工长 B 端合作,按有效线索付费(30-50 元/条)
1v1 定制 ¥99-299
线索 ¥30-50
:star::star::star::star: 需要积累一定 UV 才能撬动 B 端
长期(18 个月+) 1. 整合供应链,提供「AI 方案 → 真实装修报价 → 施工对接」的全链路 S2B2C
2. 装修数据沉淀后,推出「装修保险 / 分期金融」增值服务
抽佣 3-5%/单(装修单均 10-30 万 → 抽佣 3000-15000) :star::star::star: 重运营但天花板高

社会价值

  1. 降低装修门槛:把原本需要 5 年经验设计师 + 2 周工作量的装修方案,压缩成 30 秒 AI 生成——让预算有限、没有装修知识的普通家庭也能拿到"像模像样"的设计方案,减少被不良商家/工长收割的概率
  2. 信息对称化:AI 分项预算公开透明(每项多少钱、为什么这么多),对比线下报价单不再"两眼一抹黑"——经身边朋友实测,用「AI装修小工」出的预算单跟线下报价对比,能快速识别 5-10% 的虚高项
  3. 儿童房 + 宠物空间:这两个细分场景在传统装修行业里是被严重忽略的。儿童房装修不环保导致白血病的新闻屡见不鲜,宠物空间装修没有专业指导。AI 把「环保建材/圆角家具/耐磨防污」这些点标准化推荐,是有社会意义的
  4. 风水文化的现代化呈现:用 AI + 结构化数据把晦涩的风水理论变成"看懂能用"的建议(比如"东南方文昌位放书桌利孩子学业",本质上是采光+环境心理学的合理布局)——这也是传统文化在 AI 时代的一种落地方式

:motorway: 产品迭代规划

周期 规划内容
V1.0(当前复赛版本) 8 房间类型 × 8+1 风格 × AI 双引擎 × 微信小程序(已完成)
V1.1(上线后 1 个月) 用户反馈快速迭代:① 效果图可在线微调(“把这面墙刷成米白色”“换个窗帘款式”)② 支持保存多套对比 ③ 装修流程阶段提醒(推送通知)
V1.2(上线后 3 个月) 社区化:① 「优秀方案广场」(用户上传自家实景图+前后对比)② 「本地好工长」黄页(评分 + 案例)③ 材料真实价格参考(对接电商实时价)
V2.0(上线后 6 个月) 深度 AI 能力:① 真实 3D 户型图(从 2D 照片生成 3D 模型 + 漫游)② AI 实景试装(上传照片后实时看到家具摆在你家的真实效果)③ 语音交互("帮我把客厅换成法式风格"直接出方案)
V3.0(远期) 全链路闭环:AI 方案 → 真实报价系统(对接本地材料价和工费)→ 工长派单系统 → 施工进度监督 + AI 验收质检 → 装修分期/保险金融服务

七、参赛材料自检清单

完成状态 说明
:white_check_mark: 类别选择 学习工作赛道 与报名帖保持一致
:white_check_mark: 标签 学习工作(四选一) 已选
:white_check_mark: 标题格式 赛道 + 作品名 「【学习工作赛道】AI装修小工 — 复赛完整作品帖」
:white_check_mark: 自己/团队介绍 完整 身份 + 产品理念 + 为什么做这个作品
:white_check_mark: 产品简介(复赛版) 完整 是什么/面向谁/完整功能路径/初赛复赛升级对比
:white_check_mark: 产品演示视频 待上传 已提供 4 分钟分镜脚本,录屏后贴 B站/微信视频号公开链接
:white_check_mark: 产品创作历程 完整 灵感来源/初赛迭代/复赛三轮升级/关键问题解决
:white_check_mark: TRAE 实践过程 完整 5 个截图点建议 + 4 个 Session ID(含子段细分)+ 3 个典型 Prompt
:white_check_mark: 技术方案分享(加分) 完整 技术栈全景/3 个核心实现思路图解/商业化三阶段路径/社会价值分析/V1.0-V3.0 迭代规划
:warning: 帖内未放下载链接/二维码/体验链接 合规 所有体验材料走飞书问卷提交,帖内仅放功能说明和产品介绍
:white_check_mark: 帖内未放源码包/安装包 合规 仅放产品介绍,不放可直接执行文件

:speech_balloon: 最后想说的话

做这个项目的过程中,我最大的感受:第一是本次大赛的宗旨“人人都可以创造”,第二**“AI 真正的价值,是把原本只有专业人士能做的事,变成普通人也能轻松完成的事”**。

装修对大多数人来说一辈子就 1-2 次,没人会为了装一次房去学 3 年设计、去研究几十种建材参数。但一个"会设计、懂预算、能推荐、还能讲风水"的 AI 小工,能让每个人在签合同前、付定金前,先拿到一个"不被坑"的基准线——这件事本身,就足够有意义了。

谢谢评审!:folded_hands: