【学习工作赛道】AI装修小工 — 初赛Demo作品帖

刘泳 · 2026 年6 月 18 日 23:15

【学习工作赛道】AI装修小工 — 初赛Demo作品帖

参赛赛道：学习工作
报名帖：https://forum.trae.cn/t/topic/22548
提交时间：2026年6月19日
Session ID：6a2d405f9d11ec64b3fa8477

一、Demo 简介

产品是什么？

「AI装修小工」 是一款 AI 驱动的装修方案智能生成工具。用户只需选择房间类型、装修风格和预算，AI 即可在数秒内生成 3套完整装修方案（含真实效果图）、专业配色建议、分项预算明细、智能家具推荐以及 AR空间测量分析，一站式解决装修小白"不会设计、不懂预算、不知道买什么家具"的三大痛点。

产品形态：可直接在浏览器运行的 HTML Demo（单文件，无依赖，解压即用）

面向哪些用户？

用户群体	核心痛点	本 Demo 的解决方案
首次装修业主	完全不了解装修流程	AI 自动生成完整装修方案
时间紧张的上班族	没精力研究大量攻略	一键生成，30秒出方案
小户型业主	预算有限，需精准控制	AI 分项预算，避免超支

核心功能一览

功能	说明	AI 能力
AI生成方案	上传房间照片，生成 3 套效果图	MiniMax image-01 文生图，真实渲染
智能配色	根据风格推荐墙面/地板/家具/点缀色	AI 实时生成 HEX 色值
预算估算	面积滑块 × 档次选择 → 分项费用	AI 分析城市级别市场价格
家具推荐	4-5件家具，含尺寸/材质/匹配度	MiniMax-Text-01 智能推荐
AR 测量	模拟 AR 扫描 + 空间分析	AI 理解空间，给出摆放建议
装修流程	9阶段任务清单与验收建议	进度追踪与提醒

二、Demo 创作思路

灵感来源

作为一个经历过装修的人，我深刻体会到装修的三大"坎"：

不会设计：看了几百张案例图，依然不知道自己的房间该装成什么样
预算失控：装修到一半发现超支，只能降级或追加预算
不知道买什么：网上攻略看了无数篇，品牌价格参差不齐，无从下手

装修是一个极度信息不对称、专业门槛高的领域，而 AI 大模型在"理解需求 → 生成方案"这件事上天然有优势——于是我想到：如果用 AI 来替代设计师的一部分工作，是不是可以让每个人都拥有自己的"专属装修顾问"？

「AI装修小工」 由此诞生。

想解决的问题

Plain Text

用户痛点                    本 Demo 解决方案
─────────────────────────────────────────────────────
不知道怎么设计      →      AI 根据风格 + 面积自动生成 3 套效果图
预算无法把控      →      面积滑块 × 档次选择 + AI 分项详细报价
不知道买什么家具  →      AI 根据风格/面积/预算推荐匹配度最高的清单
AR 测量不会用     →      AI 分析空间数据，给出专业摆放建议

为什么做这个方向？

需求真实：装修是大多数人一生中最重要的消费决策之一，市场巨大
AI 赋能明显：大模型在"生成设计方案"上有显著优势，大幅降低专业门槛
差异化赛道：垂直场景的 UX 设计和流程优化，带来更好的用户体验

三、Demo 体验地址

直接下载体验

下载 ZIP 包 → 解压 → 双击 ai-decoration-demo.html → 浏览器中完整体验
无需服务器，无需安装任何软件，Windows/Mac/Linux 均可运行

AI装修小工-Demo体验包.zip（约 280KB）

四、TRAE 实践过程

开发全程记录

本 Demo 从需求分析到交互原型，全程使用 TRAE IDE 开发完成。以下是关键实践：

第1步：赛道分析与创意构思

通过 TRAE 调研小程序赚钱方向，分析个人开发者适合切入的垂直赛道。核心 Prompt：

Plain Text

帮我分析当前小程序市场的热门方向，重点关注：
1. 个人开发者能做的小程序方向
2. 有真实付费意愿的用户群体
3. AI 能显著提升效率的场景

经过多轮分析，最终锁定"AI + 装修"这个高频需求场景——用户痛点真实、市场空间大、AI 赋能效果明显。

第2步：产品架构设计

使用 TRAE 规划产品结构：

Plain Text

页面架构（8个页面）：
  - 首页（功能入口 + AI 配置面板）
  - AI生成方案（照片上传 → 风格选择 → 效果生成）
  - 智能配色（风格标签 → HEX 色值推荐）
  - 预算估算（面积滑块 × 档次选择）
  - 家具推荐（AI 智能匹配 → 清单展示）
  - AR 测量（模拟扫描 → AI 空间分析）
  - 装修流程（9阶段任务清单）
  - 个人中心（偏好设置 + 数据管理）

状态管理：localStorage 持久化偏好设置和方案收藏
AI 方案：MiniMax-Text-01（对话）+ image-01（文生图）

第3步：核心功能开发

AI 生成方案模块：调用 MiniMax 文生图 API，实现分步动画 + 真实效果图渲染。

JavaScript

// 关键 Prompt 片段
const userPrompt = `请为以下用户生成 3 套装修方案，以纯 JSON 数组返回。
每个方案含：name（方案名）、desc（简短描述）、match（匹配度，整数85-99）、
budget（如"8-12万"）、tag（"推荐"/"热门"/"个性"）、
color 配色对象：{ wall, floor, accent, sofa, decor } 都是16进制颜色值，
imagePrompt（英文，50词以内，用于文生图）...
仅输出 [ {...}, {...}, {...} ]，不要任何解释。`;

// 调用文生图
const urls = await callMiniMaxImage(imgPrompt, '1024x1024');

预算估算模块：面积滑块 × 档次选择 → 实时计算分项费用饼图；启用 AI 时调用大模型获取城市级别详细报价（含主材费/人工费/辅材费/家具家电/设计管理费的百分比分配）。

家具推荐模块：调用对话大模型，根据房间类型、风格、面积、预算推荐匹配家具清单（含名称/尺寸/材质/价格/匹配度/推荐理由）。

第4步：全面代码审查与 Bug 修复

使用 TRAE 进行系统性代码审查，发现并修复了多个问题：

删除了会导致页面加载报错的遗留函数（引用了不存在的 DOM 元素）
修复了家具推荐中未定义变量导致的显示异常
为所有 AI 调用添加了 Fallback 机制，确保 API 不可用时也能展示本地示例数据
优化了交互细节：配色切换动画、预算滑块防抖、家具卡片渲染逻辑

关键开发步骤截图

以下为开发过程中的核心界面截图：

截图1：TRAE 开发环境 — 产品架构设计

screenshot-1

image947×5071 654 KB

截图2：AI 配置面板 — MiniMax API 接入

screenshot-2

image956×888 143 KB

截图3：AI 生成方案 — 效果图渲染结果

screenshot-3

image963×6253 942 KB

截图4：预算估算页 — 分项费用饼图

screenshot-4

image937×3109 274 KB

截图5：家具推荐页 — AI 智能匹配结果

screenshot-5

image961×3527 441 KB

Session ID

对话内容	Session ID
需求分析 + 创意构思 + 项目初始化	`6a2d405f9d11ec64b3fa8477`
核心页面开发（8个页面 + 全部交互）	`6a2d405f9d11ec64b3fa8477`
AI 集成（MiniMax API 对话 + 文生图）	`6a2d405f9d11ec64b3fa8477`
Bug 修复 + 细节优化 + 作品帖撰写	`6a2d405f9d11ec64b3fa8477`

说明：以上 Session ID 均来自同一会话的不同对话阶段，完整记录了从创意到 Demo 的全流程。

五、技术实现亮点

技术栈

层级	技术选型	说明
前端框架	原生 HTML/CSS/JS	单文件 Demo，无框架依赖
AI 能力	MiniMax-Text-01 + image-01	对话大模型 + 文生图
数据存储	localStorage	偏好设置、方案收藏、浏览记录
样式设计	CSS Grid/Flexbox + 渐变 + 动画	响应式、现代感

设计亮点

紫色渐变主题：专业感与科技感并重，契合 AI 产品调性
四步分析动画：AI 生成过程可视化，增强用户信任感
实时面积滑块：交互流畅，预算结果即时反馈，无延迟感
配色 HEX 值展示：点击色块即可显示色值，方便落地使用
AI 气泡提示：每一步 AI 操作都有明确的 Loading → 成功状态反馈

AI 接入架构

Plain Text

┌──────────────────────────────────────────────┐
│              用户交互层                       │
│  （方案生成/配色/预算/家具/AR测量）           │
└────────────────┬─────────────────────────────┘
                 │ 优先调用
                 ▼
┌──────────────────────────────────────────────┐
│         MiniMax 大模型（真实 AI）            │
│  • Text-01：对话生成 JSON 数据              │
│  • image-01：文生图生成真实效果图            │
└────────────────┬─────────────────────────────┘
                 │ 调用失败时
                 ▼
┌──────────────────────────────────────────────┐
│           本地 Fallback 数据                │
│  （内置示例方案/配色/家具/空间数据）          │
│  确保 Demo 在任何情况下都能正常展示           │
└──────────────────────────────────────────────┘

六、后续发展计划

阶段	目标	说明
当前	HTML Demo	验证核心交互和 AI 集成方案
下一阶段	微信小程序	uni-app + Vue 3 移植，真实 AR 测量
长期	装修社区	用户分享方案，UGC 内容沉淀
商业化	电商对接	家具一键下单，佣金变现

七、自检清单

Demo 核心功能可正常体验（8个页面全覆盖）
MiniMax API 已集成，支持真实 AI 生成（效果图/配色/预算/家具/AR）
UI 设计美观（紫色渐变主题 + 流畅动画）
ZIP 包可下载，HTML 可独立运行（Windows/Mac/Linux）
使用 TRAE 完成开发，附 Session ID
包含关键步骤说明和代码片段
报名帖已通过审核
作品帖正文结构完整

如果你觉得这个 Demo 还不错，欢迎在评论区交流！

ai-decoration-demo.html (183.4 KB)

AI装修小工-Demo体验包.zip (393.9 KB)

耿家威PhpJavaGo用户17 · 2026 年6 月 19 日 02:38

参考数据怎么来ai websearch吗

说实话我之前尝试过，不太准确

【学习工作赛道】AI装修小工 — 初赛Demo作品帖

【学习工作赛道】AI装修小工 — 初赛Demo作品帖

一、Demo 简介

产品是什么？

面向哪些用户？

核心功能一览

二、Demo 创作思路

灵感来源

想解决的问题

为什么做这个方向？

三、Demo 体验地址

直接下载体验

推荐体验路径

四、TRAE 实践过程

开发全程记录

第1步：赛道分析与创意构思

第2步：产品架构设计

第3步：核心功能开发

第4步：全面代码审查与 Bug 修复

关键开发步骤截图

截图1：TRAE 开发环境 — 产品架构设计

截图2：AI 配置面板 — MiniMax API 接入

截图3：AI 生成方案 — 效果图渲染结果

截图4：预算估算页 — 分项费用饼图

截图5：家具推荐页 — AI 智能匹配结果

Session ID

五、技术实现亮点

技术栈

设计亮点

AI 接入架构

六、后续发展计划

七、自检清单