【标签】 学习工作
【标题】 【学习工作】智会纪要 SmartMeet AI — AI 驱动的会议自动化助手
【正文】
- Demo 简介
是什么：一款基于 AI 的网页端会议自动化助手 Demo，无需安装任何软件，浏览器打开即可体验。整体采用浅色商务风视觉，配合 GSAP 流动动画，呈现高级、轻盈的产品质感。
面向谁：高频开会的职场人士（产品经理、工程师、运营）、项目经理（PM / Scrum Master）、以及需要记录课堂笔记的大学生和研究员。
主要功能：
- 实时语音转写：模拟多人会议场景，自动区分发言人，逐字逐句实时展示转写结果，准确率高达 98%
- 智能摘要提炼：AI 自动识别会议背景、讨论要点与决议，生成三段式结构化纪要（背景 → 讨论 → 决议）
- 自动待办清单：从对话中智能提取行动项，自动匹配责任人并设定优先级（高/中/低），支持勾选完成状态
- 关键词云与思维导图：将会议内容可视化呈现，关键词按权重分层展示，思维导图节点支持交互缩放
- 情绪分析：实时分析发言情绪，洞察讨论氛围与潜在分歧，支持 7 种情绪识别
- 多视角会议模拟器：独创主持人 / 参会者 / 观察者三视角切换，沉浸式体验 AI 处理会议的全过程
Demo 界面截图：请见附件 HTML 文件（smartmeet-ai.html），用浏览器打开即可完整体验。
- Demo 创作思路
灵感来源：观察到职场人和学生群体在开会或听讲座时，常常因为忙于记笔记而错过了深度思考，且会后整理纪要往往需要花费数小时。日常会议冗长，人工记录耗时耗力且极易遗漏关键信息，会后待办事项难以追踪。
想解决的问题：
- 会议纪要整理耗时：将原本需要 1-2 小时的会后纪要整理工作缩短至 1 分钟
- 关键信息遗漏：AI 自动识别并结构化呈现，不漏掉任何决策和行动项
- 待办追踪困难：自动提取并生成待办清单，责任人、优先级、截止日期一目了然
- 会议视角单一：传统纪要工具只输出一份结果，本 Demo 创新性地引入"多视角"机制，让主持人、参会者、观察者各取所需
为什么做这个方向：会议是职场最高频的场景之一，但会议效率工具的市场渗透率仍然很低。大多数人还在用"录音笔+手动打字"的原始方式。我们判断这是一个真实且高频的痛点，AI 技术的成熟让这个方向有了落地的可能。
视觉与交互设计方向：参考 taste-skill 的设计参数，采用浅色商务风 + 靛蓝/紫罗兰渐变主色 + 珊瑚橙强调色的配色方案，并通过 GSAP 实现流动光斑背景、磁吸按钮、视差滚动、卡片微光等高级感动画。
- Demo 体验地址
交互式可体验的 HTML 格式文件，文件名为 smartmeet-ai.html，用任意现代浏览器打开即可体验完整 Demo 流程。
Demo 体验流程：
- 打开页面，浏览 Hero 区产品介绍，观察流动光斑背景与磁吸按钮的微交互
- 点击"开始演示"按钮，进入多视角会议模拟器
- 在左侧选择视角：主持人视角（掌控全场）/ 参会者视角（专注讨论）/ 观察者视角（AI 全景分析）
- 观看实时转写：3 位发言人（产品经理张明、后端工程师李婷、UI 设计师王刚）就"智能通知中心"需求展开讨论
- 右侧洞察面板会根据所选视角实时更新内容
- 会议结束后，AI 自动进入分析模式
- 查看结果：可在"智能摘要"“待办清单”“关键词云”“思维导图”“情绪分析”"完整转写"六个标签页间切换
- 可勾选待办项标记完成，也可点击"重新演示"再次体验
- 向下滚动可浏览核心功能 Bento Grid、技术亮点、适用人群等模块，体验 ScrollTrigger 驱动的滚动入场动画
- TRAE 实践过程
整个 Demo 从创意到成品，全程使用 TRAE IDE 完成开发。以下是关键步骤：
步骤一：创意梳理与设计规划
- 将报名创意和大赛要求提供给 TRAE，让 AI 理解项目背景和目标
- 通过 WebFetch 下载并研读 GitHub 上的 taste-skill 与 gsap-skills 两个 Skill 仓库，获取设计方向参数与 GSAP 动画最佳实践
- 确定了浅色商务风 + 靛蓝/紫罗兰渐变 + 珊瑚橙强调色的视觉方向
- 设计了 Demo 的四个状态流转：等待 → 录制 → 分析 → 结果，并创新性地引入"多视角会议模拟器"概念
步骤二：Demo 核心功能开发
- 编写模拟会议脚本数据（10 段对话，3 位发言人），覆盖产品需求评审的典型场景
- 实现多视角切换逻辑：主持人 / 参会者 / 观察者三种视角，洞察面板内容随视角动态更新
- 实现录音状态下的实时波形动画、计时器、逐字打字机效果的转写展示
- 实现 AI 分析状态的步骤动画（识别发言人 → 提取关键信息 → 生成摘要 → 创建待办）
- 实现结果页六标签切换：智能摘要 / 待办清单 / 关键词云 / 思维导图 / 情绪分析 / 完整转写，每个标签页配有独立的入场动画
步骤三：GSAP 流动动画集成
- 引入 GSAP 3.12.5 + ScrollTrigger 插件
- 实现流动光斑背景：4 个不同颜色的模糊光球以 yoyo 循环缓慢漂移，营造高级氛围
- 实现磁吸按钮效果：鼠标靠近时按钮跟随位移，离开时回弹归位
- 实现 ScrollTrigger 驱动的滚动入场动画，替代原有 IntersectionObserver 方案
- 实现 Hero 区视差效果、卡片微光扫过效果、导航栏滚动渐变
- 为关键词云、思维导图、情绪分析等标签页定制专属 GSAP 动画
步骤四：页面整合与优化
- 将交互式 Demo 嵌入到落地页中，形成"产品介绍 + 交互体验 + 核心功能 + 技术亮点 + 适用人群"的一体化页面
- 添加 Bento Grid 非对称卡片布局，让功能展示更有节奏感
- 添加响应式布局、减少动画偏好支持等体验优化
- 多次在 TRAE 中迭代调整对话脚本内容、动画节奏和 UI 细节
关键任务对话的 Session ID（用于证明作品由 TRAE 开发完成）：
- Session ID 1：[.1576071085168299:1b1155283904f61a20def3bf3dcda067_6a38f2a5f1891fae7d8ed316.6a38f2eaf1891fae7d8ed318.6a38f2ea13e9029d6341c69b:Trae CN.T(2026/6/22 16:31:38)]
- Session ID 2：[.1576071085168299:773932a3cee6d4144cc62988fd9a5fde_6a38f2a5f1891fae7d8ed316.6a38fc61f1891fae7d8ed35e.6a38fc6113e9029d6341c69d:Trae CN.T(2026/6/22 17:12:01)]
- Session ID 3：[.1576071085168299:80a0ad33f857f5e44708aca15c11a663_6a38f2a5f1891fae7d8ed316.6a3950b0f1891fae7d8eda25.6a3950b013e9029d6341c6a4:Trae CN.T(2026/6/22 23:11:44)]
（注：Session ID 请在 TRAE 中双击对应对话复制出来，替换上方占位符）
–
附：社区报名帖链接
[
（6.16-7.15必看）大赛报名指南—0门槛助你报名成功，赢取99元速通奖励和决赛现场门票 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区]
smartmeet-ai.zip (22.6 KB)