【标签】 按所选赛道选择话题标签：生活娱乐/学习工作/社会服务/硬件交互，必须四选一；参加附加赛题的还可加选 社会公益 标签。（需要跟报名通过的赛道保持一致）
【标题】【生活娱乐/社会服务】+店红了
【正文】 至少包含以下 4 个部分，可以增加额外的部分（比如自我介绍、经验总结、踩坑复盘等）
0. 先和大家打个招呼吧 
-
你是谁： 独立开发者
-
你是怎么用 TRAE 把 Demo 做出来的： 先让trea分析市场行情，把想法告诉trea，让它分析提取，生成想要的东西，能够直接输出原型很好用
-
（我们相信，每个作品背后都有一个真实的人。这段不计入评分，但真诚的分享，会让你的作品更有温度、也更容易被看到
）
1. Demo 简介
-
是什么：**「店红了」** 是一款面向线下实体小微商家的 **「拍视频 → 自动获客 → 到店核销」一体化 App / 小程序**。它将 AI 视频生成能力与本地生活垂直数据打通，直接对齐小店老板唯一在乎的指标：今天多来了几桌客人。
-
面向谁：核心用户是****线下本地生活的小微商家****：
- 餐饮夫妻店、奶茶/烘焙店
- 美甲美睫、理发店
- 宠物店、健身工作室
- 社区便利店
核心画像：一个人身兼老板 + 员工 + 运营、35 岁以上、不懂剪辑、没预算养团队的个体经营者。
-
主要功能：**功能一：AI 拍视频**
-
早上开店前，用零碎 5 分钟拍两张菜品/门店照，AI 当场生成一条带定位和团购卡的视频。支持多种风格模板、智能文案生成、自动配字幕。
**功能二：数据看板**
-
打通「视频 → 团购券 → 到店核销」数据回路，让老板第一次能看清每条视频带来了几个客人。从"凭感觉发"升级为"看数据发"。
**功能三：活动策划**
提供周年庆、新品上市、清仓特卖、会员日等场景化活动模板，AI 帮忙选题、写文案、做素材，一键发布。
-–
2. Demo 创作思路
-
灵感来源：市面上的 AI 视频工具（如小云雀的"复刻爆款"）已经能"生成一条好看的视频"，但对小店老板来说，“视频好看"不等于"有人进店”。真正的痛点不在生产，而在****从视频到到店客人的这条闭环断了****。
-
想解决的问题：| 痛点 | 真实场景 |
|------|---------|
| 不会做 | 面对剪辑软件的时间线、蒙版、转场直接劝退，拍十条塌房九条 |
| 不敢投 | 找代运营 3000–8000 元/月，效果全靠对方一张嘴，钱花了不知道值不值 |
| 看不懂 | 平台后台只有播放量、点赞，但老板要的是"到店客人数"，两者对不上号 |
| 跟不上 | 同城爆款打法一周一变，一个人根本没精力研究选题和文案 |
-
为什么做这个方向：用一个几十元/月的订阅，替代 3000–8000 元/月的代运营团队，直接切进中国数千万本地小微商家这个高频刚需市场。**别人卖"一条视频"，我们卖"多来的客人"**——这是通用 AI 视频工具做不到、也不愿做的脏活累活，正是壁垒所在。
3. Demo 体验地址（三选一）
-
部署随时可公开访问的体验链接；
-
交互式可体验的HTML格式文件，请使用Zip格式打包上传到社区；
-
硬件交互赛道可用演示视频替代在线体验（视频请上传第三方平台后附公开链接）。
store-go-red-demo.zip (1.1 MB)
4. TRAE 实践过程
-
### 开发流程
整个 Demo 从需求分析到最终交付，全程使用 TRAE 完成，总耗时约 15 分钟。
#### 第一步：需求分析（Step 0.5）
将用户提供的产品创意文档（PRD 格式，约 2000 字）进行结构化解析：
- ****业务上下文****提取：行业（本地生活）、目标用户（小微商家）、品牌名（店红了）、定位（AI 获客工具）
- ****页面清单****提取：从需求中识别出 7 个核心页面（产品概览、痛点分析、核心功能 ×3、价值差异化、开发流程）
- ****视觉方向****提取：温暖红色品牌色（红火=中国语境）、接地气风格、移动优先
- ****功能需求****提取：每个页面的具体内容、数据指标、交互流程
#### 第二步：设计规划（Step 1-2）
- **品牌色彩系统**：定义主色 #E8392B（红色/红火）、暖色 #FF8C42（橙色/温暖）、中性色系
- **字体方案**：PingFang SC + Microsoft YaHei，中文无衬线体系
- **圆角规范**：4px / 8px / 12px / 16px / full 五级圆角
- **阴影系统**：静态表面 alpha ≤ 0.05，仅浮动层使用更深阴影
- **页面规划**：确定 7 页线性导航结构、每页内容密度分类（showcase / information-dense / task-driven）
- **项目初始化**：创建 `.design` 画布入口文件，注册所有页面节点和图片节点
#### 第三步：视觉素材生成（Step 2.5）
并行生成 4 张 AI 插画（同时进行，节省时间）：
| 素材 | 用途 | 提示词策略 |
|------|------|-----------|
| 产品英雄插画 | 首页主视觉 | 小店老板持手机、社交图标环绕、温暖红橙色调 |
| 痛点场景插画 | 痛点页配图 | 疲惫的店主、杂乱桌面、蓝色压抑色调 |
| 智能视频流程图 | 功能页演示 | 手机屏幕内食物→AI 处理→视频成品的转变 |
| 数据看板预览 | 数据页展示 | 仪表盘 UI、KPI 卡片、趋势图表 |
同时将用户上传的品牌全景图注册为项目素材。
#### 第四步：页面开发（Step 3）
并行调度 7 个页面子任务（分两批，每批 4/3 个同时执行）：
- **第一批（4 页并行）**：首页、痛点页、智能视频页、数据看板页
- **第二批（3 页并行）**：活动策划页、价值对比页、开发流程页
每个子任务包含：
1. 调用 `fill-html-head.mjs` 生成 HTML 骨架（自动注入品牌 CSS + Tailwind CDN）
2. 编写完整页面内容（标题、卡片、图表、CTA）
3. 注入 `data-dom-id` 交互锚点
#### 第五步：导航配置与验证（Step 3.5 + Step 4）
- 注册 6 条页面间可见导航连线（线性链式结构）
- 运行 `scan-design-directory.mjs` 自动化验证：
-
7 个 HTML 文件完整性检查
-
5 个图片素材注册检查
-
导航连线 targetPageId 引用检查
-
Tailwind/主题/图标基础设施检查
### 开发关键步骤说明
1. **品牌色彩系统搭建**：通过 CSS 自定义属性定义完整的色彩/字体/间距/圆角/阴影体系，支持亮色和暗色双模式
2. **核心页面设计**：7 个页面各具特色，从 showcase 叙事页到 information-dense 数据页，再到 task-driven 表单页，覆盖多种页面类型
3. **数据看板开发**：纯 CSS 实现的柱状图（7 天客流趋势），无需 JavaScript 图表库
-
-
附开发关键步骤截图（不少于 3 张）；
-
附关键任务对话的 Session ID（不少于 3 个），用于证明作品由 TRAE 开发完成。
-
1342932674690088:bf0776ac16887a985ebabfc5b834f2b9_6a572598cbdfe162097e50c9.6a574277cbdfe162097e52ce.6a574277cbdfe162097e52cc:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/15 16:19:03)
-
1342932674690088:fc7d5094b8eae4f652289141194c854c_6a549ab14d7d1f5ce17988a2.6a54a9d24d7d1f5ce17988fd.6a54a9d14d7d1f5ce17988fb:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/13 17:03:14)
-
1342932674690088:1a6d5a18edfe95f595d9143ea823e074_6a572598cbdfe162097e50c9.6a572598cbdfe162097e50cc.6a572598cbdfe162097e50ca:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/15 14:15:52)
5. 对应的报名审核通过的帖子链接
Session ID 在哪找？ Session ID 是 TRAE 每段对话任务的唯一标识，用来证明作品确实由 TRAE 开发完成。请在创作时保留关键任务的对话记录，发帖时附上对应 Session ID——双击 TRAE 的对话复制出来即可。（如下图）
