大家好，我是一名 AI 独立开发者。平时自己也喜欢做饭，但跟着抖音视频学做菜翻过无数次车——反复拖进度条、搞不清「少许」是多少、手忙脚乱到处找替代方案。于是就想，如果刷视频的时候，右下角有个小搭子，点一下就能跟着做，该多好。
这个 Demo 几乎全程和 TRAE 对话完成。起初我担心没写过前端，结果把自己的想法一段段描述给 TRAE 后，它直接帮我生成了完整的交互页面——从抖音视频页的悬浮窗、解析弹窗，到跟做路线图、步骤计时器、AI 问答，再到买菜清单页。最震撼的一刻是：我说「帮我加一个步骤计时器，能识别 30秒、10-15分钟 这种中英文混排时间」，几分钟后它就给我一个能跑起来的实现。原来「把想法变成能摸到的产品」真的可以这么简单。
1. Demo 简介
是什么：一个嵌入抖音的悬浮窗 AI 厨房搭子（Web Demo）。刷到美食视频时，右下角浮出搭子入口，点开即可进入跟做模式。未来计划升级为真正的抖音浮窗 + 语音手势无接触交互。
面向谁：18-35 岁「想做饭但怕翻车」的年轻人。中国青年报 2026 年调查显示，56.7% 的年轻人每周做饭 3 次以上，但跟做翻车率高达 72%。
核心功能：
- 一键解析：粘贴抖音链接或上传本地视频，AI 自动解析出食材清单、分步教程、时间轴
- 跟做模式：步骤路线图 + 视频时间轴同步，点哪步跳哪步；智能计时器自动识别「10-15分钟」这种表达并倒计时；AI 问答助手知道你在做哪道菜、做到哪一步，精准回答「没有蚝油怎么办」
- 做菜前先买菜：自动提取食材清单，按超市动线排序（番茄排在食盐前面），点击任意食材一键跳转淘宝搜索下单
2. Demo 创作思路
灵感来源：抖音 1200 万条美食视频，日均播放 80 亿次，但 83% 的跟做翻车都来自同一个问题——视频是给人「看」的，不是给人「跟着做」的。我自己就是受害者之一。
想解决的问题：
-
步骤断层：反复拖进度条找刚才那一步
-
量化模糊：「少许盐」「一勺生抽」「适量清水」——新手没有任何参考
-
无人答疑：临时缺料、油温判断，举着锅铲没人能问
-
场景割裂：看视频在抖音，查步骤去下厨房，搜问题去百度——三个 App 来回切
为什么做这个方向：市面上懒饭、下厨房依赖人工 PGC 制菜谱，最多几万道，永远覆盖不了抖音的长尾内容。而我们是「内容重构者」——不生产内容，只重构内容。抖音有多少美食视频，我们就有多少道菜。更重要的是，我们沉淀的是一套通用 视频→解析→步骤拆分→交互封装 引擎，可一键复用到美妆、健身、手工等领域。
3. Demo 体验地址
交互式 HTML 文件已打包为 Zip，见附件 百味撷取_Demo.zip。
解压后双击 大赛提交_百味撷取.html 即可在浏览器中完整体验全部流程。
4. TRAE 实践过程
开发流程概述：
-
创意提案阶段：把项目 idea 描述给 TRAE Work，生成创意展示 HTML 作为报名帖附件
-
核心页面搭建：用 TRAE 逐屏搭建——先做抖音视频页（模拟 Feed 流 + 悬浮助手），再做解析弹窗（链接/本地双入口），最后做跟做模式（路线图 + 步骤卡片 + 计时器 + AI 问答）
-
买菜功能追加：向 TRAE 描述「小时达」买菜页的需求——分类标签筛选、食材卡片、购物车、一键跳转——TRAE 一次性生成完整页面
-
联调打磨：将三个页面串联（视频页→跟做页→买菜页），反复和 TRAE 对话调整交互细节和视觉风格
关键步骤截图：
关键任务 Session ID：
7603656751276295189
5. 对应的报名审核通过的帖子链接
6. 附件
百味撷取_Demo.zip (11.6 KB)
