0.先和大家打个招呼吧 
**我是谁：**前程序员，现自由职业者。写过几年代码，后来决定自己做点事情，发现最难的不是写代码，而是——对着镜头开口说话。
我是怎么用 TRAE 把 Demo 做出来的：
说实话，作为一个写过代码的人，我第一反应是"这东西我自己写也行"。但当我真的坐下来想把这个想法变成产品时，发现最大的阻力不是技术，而是设计决策。
我跟 TRAE 的对话过程更像是一个"产品经理 + 设计师"在跟它协作。我把脑海里的产品概念讲给它听：“我想要一个直播时的实时教练，不是提词器，是能在我说错话的时候立刻提醒我……”
让我最惊讶的有两个时刻：
-
第一个是它把我说的一堆模糊需求，直接结构化成了 7 个功能模块。我自己可能要在白板上画半天，它 10 秒钟就理清楚了。
-
第二个是 UI 设计。我原以为自己需要找设计参考、调 CSS 半天，结果它生成的第一版界面就已经很有质感了——深色主题、合理的信息密度、流畅的动画。后续的迭代更像是在"调优"而不是"从零搭建"。
它帮我跨过的最大一个坎，是实时反馈的交互设计。我一直在纠结：右侧的面板到底该显示什么？滚动日志？静态统计？TRAE 给了一个非常好的建议——“直播时用户没有时间看滚动内容，应该只显示当前最需要关注的一条建议 + 动态统计”。这个设计决策直接决定了产品的可用性。
我相信，每个作品背后都有一个真实的人。我做这个产品，是因为我自己就是那个"想做直播但张不开口"的人。如果它能帮到我，也一定能帮到更多人。
1.Demo 简介
**是什么：**一个交互式网页应用（单文件 HTML），模拟 AI 实时直播教练的完整体验。包含欢迎页、实时练习页、复盘报告页三个核心界面。
面向谁：
-
想做自媒体直播但完全没经验、不敢开口的普通人
-
已经有一定直播经验，想系统性提升表达质量的专业主播
-
任何需要在公开场合说话、希望减少口头禅的职场人士
主要功能（3 个核心）：
① 实时冗余词检测与闪烁高亮
模拟 AI 语音识别引擎，逐字显示直播字幕。当检测到"然后"“嗯”“额”"那个"等填充词时，文字以红色高亮 + 闪烁动画提醒用户。每个字的入场都带有 blur→focus 的聚焦效果，模拟真实的语音识别体验。
② 动态表达反馈面板
右侧实时显示：当前建议（如"停顿比填充词更好"）、冗余词统计（仅在使用后才出现）、内容结构进度（痛点→介绍→背书→互动→号召 五步走）、实时五维评分（流畅度/逻辑性/感染力/信息密度/互动引导）。
③ 结构化复盘报告
练习结束后自动生成包含 6 大模块的深度复盘：综合评分（100 分制，带环形动画）、核心洞察（数据驱动的 3-4 条结论）、逐句精析（问题句标红 + 优化建议 + 标签）、词语替换建议（模糊词→精确词对照表）、行为模式分析（填充词模式/直接性评分/说服力结构三维度）、下次练习重点（按优先级排序的改进清单）。
2.Demo 创作思路
灵感来源：
我自己想做直播很久了。看了无数教程，买了提词器，甚至写好了一摞稿子——但每次按下录制键，脑子就一片空白。后来我发现，问题不是没内容，而是表达习惯太差：一紧张就说"然后"，一思考就"嗯嗯啊啊"，稿子上明明写得很清楚，嘴里说出来全变了味。
我需要一个工具，不是帮我想说什么，而是在我说的时候实时纠正我怎么说的。就像健身教练在旁边喊"核心收紧"，我需要一个"口才教练"在旁边提醒我"别说然后"。
想解决的问题：
-
**填充词成瘾：**很多人不知道自己说了多少个"然后"“嗯”，因为没有实时反馈。本产品通过 AI 实时标红高亮，让用户"看见"自己的问题。
-
**内容结构混乱：**新手直播往往想到哪说到哪，缺少"痛点→方案→证明→号召"的完整结构。本产品在右侧实时显示当前处于哪个环节，帮助用户把控节奏。
-
**缺乏复盘依据：**传统的自我复盘靠感觉，本产品提供数据化的逐句分析、词语替换建议、行为模式标签，让改进方向清晰可见。
为什么做这个方向：
直播行业正在爆发，但"教你怎么做直播"的产品几乎都是教"怎么选品"“怎么投流”，很少有产品关注"怎么说话"这个最基础也最致命的能力。说话能力不像选品知识可以查资料，它必须通过刻意练习 + 实时反馈才能提升。这是 AI 最擅长的事情——7×24 小时在线、永远有耐心、不会嘲笑你卡壳。
3.Demo 体验地址
livecoach-demo.html.zip (19.5 KB)
快速体验指南：
-
点击「开始练习」进入模拟直播界面
-
点击「开始」按钮启动实时字幕模拟
-
观察左侧提词器、中间字幕区（注意红色闪烁高亮）、右侧实时反馈面板
-
等待模拟结束后自动跳转复盘报告，或点击顶部「复盘」标签查看
4.TRAE 实践过程
完整开发流程：
Step 1：需求澄清与产品定义
我向 TRAE 描述了我的原始想法："想做一个帮助直播新手训练口才的产品，能实时检测口头禅并标红。"TRAE 帮我扩展成了 8 个可商业化的功能模块，并生成了完整的产品提示词文档。
Step 2：读取大赛规则并设计界面
TRAE 读取了大赛官方论坛的规则页面，理解了需要提交"创意提案 HTML + 交互式 Demo"的要求。基于产品提示词，设计了三屏 SPA 架构（Welcome → Practice → Review），并一次性完成了基础代码框架。
Step 3：多轮迭代优化 UI/UX
这是整个过程中迭代最密集的阶段，共进行了 4 轮大改：
-
**第 1 轮：**将静态内容改为实时模拟直播，右侧"口头禅检测"改为"表达反馈"，按钮简化为开始/暂停/结束三态。
-
**第 2 轮：**逐字稿从整行出现改为逐字显现 + 闪烁高亮效果；右侧从滚动日志改为动态统计 + 单条建议卡片；左侧增加可展开的关键词提示功能。
-
**第 3 轮：**参考 localhost:3456 的排版风格，升级中文字体渲染（Noto Sans SC）、行高 1.9、blur 入场动画、扫描线纹理；声纹从柱状改为波浪曲线。
-
**第 4 轮：**前两句加入冗余词让演示更直观；每行添加 speed 参数模拟不同语速；根据提示词重写 Review 页面，新增 6 大复盘模块。
Step 4：复盘报告模块深度开发
根据用户提供的详细提示词，TRAE 实现了包含评分计算公式、核心洞察、逐句精析、词语替换、行为模式分析、练习重点的完整复盘系统。所有数据基于实际录制的 SIM 数据动态生成，不是写死的模板。
关键步骤截图：
【截图 1：想法变成方案】
【截图 2：根据方案和大赛的要求生成最初的UI界面】
【截图 3：产品功能细节及用户体验的打磨
【截图 4：复盘报告页，展示综合评分环形图 + 核心洞察 + 逐句精析】
关键任务对话的 Session ID：
Session ID 1：产品需求扩展与提示词生成
367702252982547:0edf63a6fc9b9176091251052ff1b4fa_6a567085aee806502254281a.6a567085aee806502254281d.6a567085aee806502254281b:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 01:23:17)
Session ID 2：界面设计与 Demo 架构搭建
367702252982547:8f2852760d595d47606d877e40b5de29_6a567085aee806502254281a.6a56c4b6aee806502254284a.6a56c4b5aee8065022542848:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 07:22:30)
Session ID 3：UI 迭代与复盘模块开发
367702252982547:2773850815feec3bae988d3dbb283fae_6a567085aee806502254281a.6a56ca36aee8065022542873.6a56ca36aee8065022542871:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 07:45:58)
367702252982547:230776dbc709225067eea15ba59435fd_6a567085aee806502254281a.6a56e268aee80650225428fd.6a56e268aee80650225428fb:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 09:29:12)
367702252982547:37274f7526f3423f7eda8baf00705301_6a567085aee806502254281a.6a56f128aee806502254292d.6a56f127aee806502254292b:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 10:32:08)
367702252982547:b82a95166b7f7b6b524ceb864b097c5b_6a567085aee806502254281a.6a56faa4aee80650225429d7.6a56faa3aee80650225429d5:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 11:12:36)
367702252982547:0420e47a79462b9df3a1376b4f4d45a6_6a567085aee806502254281a.6a56fbd2aee80650225429fa.6a56fbd2aee80650225429f8:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 11:17:38)
Session ID 4：复盘与报告页面的功能增加与优化
367702252982547:11b67c2b2a372fe330b3c7df0cdb6ee7_6a567085aee806502254281a.6a56fd78aee8065022542a39.6a56fd78aee8065022542a37:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 11:24:40)
Session ID 5：作品提交文档的生成
367702252982547:c7ec66da6471cec9c51ee3aaa938610c_6a567085aee806502254281a.6a57017caee8065022542a68.6a57017caee8065022542a66:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 11:41:48)