【Code With SOLO】用 SOLO 零成本搭建纯前端 AI 会议效率工具「会声」,可以过滤领导一些场面话的功能喔

1. 摘要

我是一名 AI 短视频内容创作者,日常需要高效管理创作会议、项目对齐会等沟通场景。借助 TRAE SOLO,从零搭建了一个纯前端 AI 会议效率工具「会声」——无需服务器、双击 HTML 即可使用,支持阿里云百炼(通义千问)和智谱 GLM 双平台 AI,一键生成会议摘要、行动项矩阵和工作周报,将原本 1 小时的会后整理压缩到 5 分钟。

2. 背景

我是一个人在运营抖音/快手内容矩阵的创作者,同时还在参加 TRAE SOLO 挑战赛做 AI 会议效率工具方向。

核心痛点很直接:

  • 会议记录靠脑子:经常开完会就忘了谁承诺了什么
  • 周报全靠编:没有系统沉淀,全凭记忆写流水账
  • 工具要钱又要部署:市面上现成的会议工具要么要会员,要么需要复杂的服务器部署

我的目标是:做一款零门槛、零成本、打开浏览器就能用的 AI 会议助手


3. 实践过程

第一步:用 SOLO 生成完整产品设计框架

Prompt 示例:

我想做一个 AI 会议效率工具,叫「会声」,核心功能包括:录音/文本→智能摘要、提取行动项(带负责人/截止日期/优先级)、一键生成工作周报、跨部门需求对齐。请帮我梳理完整的产品定位、核心功能架构和技术方案,重点关注中文语义理解和职场场景的实际需求。

SOLO 帮我梳理出了清晰的四层功能架构

  • 智能摘要(会议说了什么)
  • 行动项矩阵(谁做什么、什么时候做)
  • 周报生成(本周工作闭环)
  • 跨部门对齐(冲突点识别+共识方案)

这直接形成了我写 project-intro-optimized.md 的骨架,省去了大量来回摸索的时间。

第二步:用 SOLO 生成前端页面代码

Prompt 示例:

请帮我生成一个现代感十足的 HTML 会议助手页面,包含以下功能区:

  1. 顶部导航栏 + Hero 区域(价值主张)
  2. 录音/文本输入区(支持点击录音和粘贴文本)
  3. 会议分析结果展示区(摘要 / 决策 / 行动项表格)
  4. 周报生成区(支持日报/周报切换)
  5. 跨部门对齐区(三方需求输入)
    使用 Tailwind CSS,设计风格偏向 Notion/Figma 的简洁专业感。

SOLO 一次性生成了完整的页面结构,我在其基础上做了两轮微调(色调和间距),核心布局基本没改。

第三步:SOLO 帮我把 Node 后端架构改为纯前端

遇到一个问题:我的电脑没有安装 Node.js,服务器起不来。

Prompt 示例:

我的电脑上无法运行 Node.js,请帮我把 app.js 里的所有 /api/* 请求改为直接在前端调用阿里云百炼 API(base URL: https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions),兼容 OpenAI 协议,同时加一个 API Key 配置界面,用户可以在页面上直接输入 Key,无需任何后端。

SOLO 一次性完成了架构改造,并且还额外帮我加入了智谱 GLM 的支持,实现了一键切换两个 AI 平台的功能。

第四步:解决 API 调用的兼容性问题

第一次接入时遇到了 CORS 跨域问题,SOLO 给了两个解决方案:

  1. 使用阿里云百炼的 compatible-mode 端点(已解决)
  2. 如果用户自己部署,换一个后端代理

最终选择了方案 1,实现了完全零后端。

踩过的坑

解决方案
电脑无 Node.js,无法启动服务器 改为纯前端,直接浏览器调 AI API
API 跨域被拦截 使用阿里云百炼 compatible-mode 端点
两个 AI 平台 Key 无法共存 localStorage 分平台独立存储,页面可随时切换

4. 成果展示

产品名称:会声 HuiSheng — AI 会议生产力专家

Slogan:让每一场会议,都从「信息黑洞」转化为「行动闭环」

展示过程

把四个功能简单展示一下

1、我觉得最牛逼的功能就是可以过滤老板说的废话,把那些什么叫小刘努努力、加加油等废话去除(可以看看录音内容,挺有趣的)请看展示:

2、接着是把右侧的智能摘要和决策发送到看板(对于完成状态可以自己调整)

3、然后的功能就是经典周报功能,但我加入了一些要纪风格(必须充分考虑对老板和对团队的不同场面话,显示情商时刻):

我那直接上级风格作演示吧:

4、需求对齐各个部门的需求,这个也是挺重要的,不然项目常常做到一半就一堆不协调的事:

生成后:

项目地址(直接下载使用)
C:\Users\Lenovo\Desktop\al\index.html(双击即可在浏览器打开,无需任何服务器)

核心功能截图路径C:\Users\Lenovo\Desktop\al

技术架构

用户浏览器(HTML + Tailwind CSS + Vanilla JS)
        ↓ 直接调用(无后端)
阿里云百炼(通义千问 Qwen-Plus/Max)
   或 智谱 AI(GLM-4-Plus/Flash/Long)

支持平台:阿里云百炼(Qwen)/ 智谱 AI(GLM),随时在页面内切换(这个贴心好用,特别是加入了智谱这个有免费模型的想法):


5. 效果与总结

提效数据

  • 会议纪要整理:从原来 60 分钟 → 现在 5 分钟(约 92% 提效
  • 周报生成:从原来 30 分钟编记忆 → 现在 2 分钟 AI 提炼
  • 跨部门对齐:从原来 来回拉齐半天 → 现在 5 分钟出冲突分析报告

SOLO 在我的流程中扮演了什么角色

  • 0→1 阶段:帮我快速搭建产品骨架和代码框架
  • 迭代阶段:帮我把 Node 架构迁移到纯前端,解决 CORS 问题
  • 增强阶段:主动建议接入智谱 GLM,双平台备份

可复用的方法

  1. 先让 SOLO 写产品文档(PRD/定位),再让它按文档生成代码——这样迭代最快
  2. 遇到报错直接贴给 SOLO,比搜索引擎定位问题快 3 倍
  3. 架构选择上让 SOLO 帮你评估,比如选纯前端还是后端,它能给出清晰的取舍分析

:light_bulb: 核心心得:SOLO 不只是帮你写代码,更是帮你思考"怎么做最快"。把问题描述清楚,比写好代码更重要。


「会声」— 让职场沟通更有力量。

大佬,厉害

1 个赞

确实挺有趣的,而且只要前端打开一个web就可以,挺方便的。

2 个赞

认可认可:heart:

2 个赞

大家有什么新思路,我刚刚想到了可以试试能不能用于英语状态的录音,可以一起交流一下

1 个赞

方便补一下SOLO开发的截图吗

1 个赞
  • 感觉应该用 wails 或者 tauri ,做成桌面软件
2 个赞

1 个赞

solo开发基本都是问一些简单直接的问题(比如想实现录音功能我需要完成什么前提条件之类的),我一般是先让gpt和我交流一下项目思路,然后给出prd文件再去用trae来做。

1 个赞

API Key 存localstorage ?AI不给你报安全风险吗 :rofl:

1 个赞

作为个人使用,而且本地存储,使用便捷快速。可能企业级别要使用更加安全的服务器端密钥管理方案,要变成企业级应用的话确实可以。:+1:因为我考虑纯前端也是觉得不用后端存储云服务器的费用可以省掉,而且也方便。

1 个赞