【Code with SOLO】魔镜拍照：让每一家小店都有自己的 AI 打卡增长引擎

用户34382 · 2026 年4 月 28 日 07:28

## 摘要

用 TRAE SOLO 从 0 到 1 搭建了一套面向线下门店的 AI 出片式营销系统——「魔镜拍照」。顾客扫码选 AI 场景，大屏同步切换，灯光联动，拍照分享后领券复购。整个项目前后端、WebSocket 实时通信、招商门户、商家后台全部由 SOLO 全流程参与开发。

## 背景

我是一名独立开发者，同时也在关注线下实体店的数字化营销问题。

很多咖啡店、民宿、甜品店、剧本杀店都面临同一个痛点：**顾客消费了，但没有足够强的理由拍照、分享、二次到店。**

而现在年轻用户愿意为「好看、好拍、能发社媒」的体验停留。所以我想做一套系统，让一块普通屏幕变成门店里的「魔镜打卡点」。

## 实践过程

### 1. 任务拆解

我把整个项目拆成了这些模块：

- **招商门户网站** — 展示产品能力，吸引商家合作

- **魔镜 H5 场景选择页** — 顾客手机端操作入口

- **手机控制端** — 实时控制大屏内容

- **大屏展示端** — 100 寸竖屏同步显示 AI 场景

- **WebSocket 推屏同步** — 手机选场景，大屏实时切换

- **灯光控制模块** — 根据场景自动切换灯光色温

- **商家打卡券系统** — 口令解锁 → 拍照 → 领券 → 核销

- **场景素材库** — 海边、星空、东京街头、节日主题等

- **设备对接规范** — 屏幕厂家、灯控厂家的接口文档

### 2. SOLO 在其中的角色

**SOLO 不是帮我写了一个页面，而是参与了整个项目的全流程：**

- 前端页面开发（H5 + 大屏 + 招商门户）

- 后端 API 设计与实现（Node.js）

- WebSocket 实时通信搭建

- 设备对接规范文档撰写

- 灯光控制协议设计

- 商家运营闭环设计（口令 → 拍照 → 领券 → 复购）

- 数据埋点方案设计

### 3. 关键实现

**手机控制大屏的实时同步：**

顾客在 H5 选择场景后，通过 WebSocket 实时推送到大屏端，延迟控制在 200ms 以内。

**灯光联动：**

不同 AI 场景对应不同的灯光色温和亮度参数，拍照时自动切换到最佳灯光模式。

**商家打卡券闭环：**

顾客消费后获得口令 → 扫码进入 H5 → 选场景拍照 → 发布社媒 → 领取下次使用的优惠券。

### 4. 踩过的坑

- 大屏素材分辨率适配：不同尺寸的竖屏需要不同的素材比例，最后统一用 1080×1920 作为基准

- WebSocket 在弱网环境下的重连机制：加了心跳检测和自动重连

- 灯光控制协议不同厂家不统一：设计了统一的抽象层来适配

## 成果展示

### 体验链接

- 招商门户：https://lingxiyuanhub.cn/

- H5 场景选择：魔镜拍照 H5｜场景选择与全屏播放

- 大屏控制端：魔镜相机｜手机控制端

### 技术栈

| 模块 | 技术 |

|------|------|

| 前端 | H5 + 原生 JS + CSS3 |

| 大屏端 | HTML5 + WebSocket Client |

| 后端 | Node.js + Express |

| 实时通信 | WebSocket |

| 灯光控制 | 自定义协议 + 抽象适配层 |

| 部署 | Nginx + PM2 |

### 已完成功能

- 招商门户网站

- 魔镜 H5 场景选择页

- 手机控制端

- 大屏展示端

- WebSocket 推屏同步

- 魔镜拍照站位提示

- 灯光控制页面

- 商家打卡券口令解锁

- 场景素材库分类

- 商家/屏幕厂家/灯控厂家对接规范

- 用户行为埋点方案

## 效果与总结

### SOLO 在这个项目里做了什么？

**全流程参与。** 从产品规划、技术选型、前后端开发、到设备对接文档，SOLO 不是代码补全工具，而是真正意义上的「AI 开发搭档」。

一个人 + SOLO，完成了原本需要一个小团队才能做的事情：

- 3 个前端（H5 / 大屏 / 门户）

- 1 个后端服务

- 1 套实时通信系统

- 1 套商家运营闭环

- 2 份设备对接规范文档

### 提效了多少？

原本预估 2-3 周的开发量，实际 1 周内完成了可运行的 Demo 闭环。

### 可复用的方法

1. **先拆模块，再逐个击破** — 不要试图一次让 SOLO 写完整个项目，按功能模块拆分，每次只做一个模块

2. **设备对接先写规范** — 在写代码之前，先用 SOLO 帮你梳理设备接口规范，避免后面返工

3. **运营闭环和技术闭环同步设计** — 不只做技术实现，同时设计商业闭环（口令→拍照→领券→复购）

## 下一步计划

- 接入真实商家试点

- 完善用户反馈数据后台

- 优化 100 寸竖屏大屏素材生产工作流

- 接入灯光控制和身高站位算法

- 建立门店 AI 场景素材库

- 推出咖啡店、民宿、商场、剧本杀、文旅场景的行业模板

-–

**魔镜拍照不是拍照设备，而是门店的 AI 传播引擎。**

用户34382 · 2026 年4 月 28 日 07:39

魔镜拍照：让每一家小店都有自己的 AI 打卡增长引擎

大家好，我这次带来的作品是「魔镜拍照」，一个面向线下门店的 AI 出片式营销系统。

它不是普通拍照亭，也不是简单 P 图工具，而是把 AI 场景内容、门店大屏、手机控制端、灯光联动、打卡券、数据反馈组合成一套可以落地的小店增长工具。

项目解决什么问题？

很多咖啡店、民宿、甜品店、剧本杀店、商场快闪空间都面临一个问题：

顾客进店消费了，但没有足够强的理由拍照、分享、二次到店。

而现在年轻用户愿意为“好看、好拍、能发社媒”的体验停留。
所以我想做一套系统，让一块普通屏幕变成门店里的“魔镜打卡点”。

用户怎么使用？

顾客进店消费，获得魔镜拍照口令
手机扫码进入 H5
选择海边、星空、东京街头、咖啡店、节日主题等 AI 场景
大屏同步切换背景
系统提示站位，灯光根据场景切换
顾客拍照保存并发布朋友圈、小红书或抖音
发布后领取下次优惠券，形成复购

我已经完成了什么？

目前已经完成了一个可运行的 Demo 闭环：

招商门户网站
魔镜 H5 场景选择页
手机控制端
大屏展示端
WebSocket 推屏同步
魔镜拍照站位提示
灯光控制页面
商家打卡券口令解锁
场景素材库分类
商家/屏幕厂家/灯控厂家对接规范
后续数据反馈和用户行为埋点方案

项目地址：

H5 体验地址：

这个项目的特点

1. 不是单次拍照，而是门店增长闭环

传统拍照亭偏重“拍一次照”。
魔镜拍照更关注：

引流
停留
拍照
分享
领券
复购

它服务的是门店经营，而不只是娱乐拍照。

2. AI 内容可以持续更新

节日可以换七夕、圣诞、跨年主题。
城市可以换上海、东京、大理、海边、星空。
商家也可以根据自己的店铺风格定制专属场景。

3. 适合小店低成本落地

不需要一开始购买大型拍照亭。
一块竖屏、一个 H5、一个二维码、一套灯光，就能跑通试点。

4. 后续可以接入数据反馈

未来可以统计：

扫码人数
选图次数
拍照次数
热门场景
领券人数
二次到店率

让商家知道：哪种场景最能带来传播和复购。

为什么我想做这个？

AI 生成内容越来越强，但很多 AI 项目还停留在屏幕里。
我希望把 AI 内容真正带到线下场景里，让普通小店也能拥有更强的内容能力和传播能力。

未来的门店，不只是卖咖啡、甜品、住宿或体验。
它也可以拥有自己的 AI 场景、自己的出片空间、自己的社交传播资产。

下一步计划

接入真实商家试点
完善用户反馈数据后台
优化 100 寸竖屏大屏素材生产工作流
接入灯光控制和身高站位算法
建立门店 AI 场景素材库
推出咖啡店、民宿、商场、剧本杀、文旅场景的行业模板

一句话总结：

魔镜拍照不是拍照设备，而是门店的 AI 传播引擎。

用户18 · 2026 年4 月 28 日 09:50

好强啊，这是啥做的，太牛了