【Code with SOLO】领导让我每天写拍剪10条视频？没招了，于是我…
摘要
解决视频制作选题搜集问题和后续作品数据追踪问题。
它可以基于关键词、描述或视频在抖音深度搜索选题内容、获取视频的表层数据、高赞评论和文稿提取；持续观察最新爆款和行业相关最新视频；追踪某个作者或团队内账号的作品。
本次创作，我会使用 SOLO 制作一个前端页面，让同事能够可视化、更清晰便捷地查看 ai 在平台上搜索出来的内容，来决定后续要拍什么、哪些是可以放进选题库的。里面还内置了一个 Agent，同事可以使用以上的功能，并直接对采集的内容进行总结、分析甚至改写，形成全流程闭环。
以下我会介绍一下我这个项目从 1 →1.5 的完整过程，并在最后总结一些我们这种纯小白使用 SOLO 的时候可以用到的一些小技巧
背景
详情细节
我本是一个默默无名的小辈。
在一家小公司里做着最不起眼的内容"创作者"——每天为选题抓破头，10条视频写拍剪压得我喘不过气。
组里有个"老周"，工位离领导最近，嘴也离领导最近。
“小陈啊，效率不行啊。”
他当着全组的面"指导"我，眼角带着不易察觉的笑意。然后转头向老板提议：
“让小陈一个人负责选题吧，他效率高嘛。”
一个人？10条？
老板点了点头。
老周拍了拍我的肩，语气意味深长：“年轻人就要多吃点苦。”
多吃点苦？
呵呵，一个项目开启，初期选题准备要短的 1～2天长则一周，后续还要持续观察。更尴尬的是，刷抖音找选题会被认为"上班摸鱼"，老板表面上理解，但其实也并不完全信任你，下班做又等于无偿加班。这样的苦，周某怎么不自己去吃！
不过他可不知道，早在 TRAE IDE 时期，我就手搓了一个所有斗音人都梦寐以求的skill——五种模式，搜索、链接、创作者、关注、深度搜索，每一个工具都能让人实力大增。
他更不知道的是，这个五一假期，我要让这个只有我自己会用的小工具，变成一个连保洁阿姨都能操作的可视化平台。
老周，这一世，我不会再让你踩在我头上
我是一个新媒体公司的运营，在 TRAE IDE 时期，我已经搓了一个可用的 skill（w-hand），支持：
- 关键词/链接搜索：按关键词或视频链接搜索抖音/小红书内容
- 获取信息：获取视频的表层数据和文稿提取
- 追踪作者：追踪某个作者或团队的作品
- 深度搜索：基于关键词、描述或视频，在抖音搜索相关选题内容，然后对搜索出来的结果进行进一步的分析，再搜索。可以自定义筛选符合的内容，排除不想要的内容（如筛选出剧情向内容，排除简单的营销广告）
本次升级目标（1~1.5）
让同事能够可视化、更清晰便捷地看到搜索出来的内容，以便后续的内容制作流程更加顺畅。具体来说：
- 前端界面：让非技术人员也能轻松使用
- 搭配 Agent：可以直接对采集的内容进行总结、分析甚至改写
- 全流程闭环：从选题采集到内容分析，一站式完成
实践过程
阶段1：项目初期准备（4/28）
大家觉得这个项目的首要目标是什么，解决选题难题？是提升团队效率？是展示技术能力？都不是。首要目标是参加 SOLO 挑战赛啦～
所以我第一件事情就是在 AGENTS.md 文件里增加了一条提示词，让 solo 把我做的每一个任务、每一件事情都要写进一个叫"开发过程记录.md" 的文档里，以便后续我可以直接通过这个文档让 Agent 写出你现在看到的这篇文章。甚至可以让SOLO在过程中自己截图，给后续整理文章的时候使用。
开发过程记录.md（查看SOLO 记录的完整过程）
# 【Code with SOLO】不懂代码也能做爬虫：一个普通人与 AI 协作的真实记录
> 项目地址：w-hand - 多平台社交媒体数据采集工具
---
## 摘要
我是一名 TRAE IDE 的玩家，这个项目是我参加 TRAE SOLO 挑战赛的作品。这不是一个从 0 到 1 的新项目，而是从 1 到 2 的升级项目。在这之前，我已经在 TRAE IDE 里实现了这个项目的核心功能——多种模式抓取抖音数据和视频。
在这篇文章中，我想分享的不是代码本身，而是**一个普通人如何与 SOLO 高效协作**——从理解现有项目，到规划新功能，再到实际开发的全过程。我会记录下我摸索出的实用技巧、踩过的坑、以及 AI 帮我解决的真实问题。
如果你也有一个想升级的老项目，希望这些经验能帮到你。
---
## 背景：为什么做这个项目
### 我是谁
我是一名 TRAE IDE 的玩家，已经在使用 AI 编程领域探索了一段时间。
### 这个项目是什么（0→1 状态）
w-hand 是一个多平台社交媒体数据采集工具，支持抖音和小红书两大平台。在 0→1 阶段，我已经实现了以下核心模式：
| 模式 | 主要用途 |
|------|----------|
| **search（搜索模式）** | 按关键词搜索内容，支持分页、时间筛选、排序 |
| **link（链接模式）** | 通过视频链接或 ID 直接获取详情 |
| **creator（创作者模式）** | 获取创作者主页信息及其全部发布内容，可以用于蒸馏某位作者成 skill |
| **follow（关注模式）** | 主要是用于关注自身账号的数据增长情况，监控抖音创作者的最新动态，增量爬取 |
| **deepsearch（深度搜索模式）** | 设计初衷是希望可以在一个新的行业，要做账号的时候，快速的搜索相关的视频和信息，构建针对于这个行业的选题库或者是知识库。迭代式深度搜索，自动提取新关键词，聚合多轮搜索结果 |
这个阶段的主要设计目标是：设计好一些脚本和对应的 skill，供我个人使用。
### 为什么要升级到 2.0：从个人工具到团队工具
#### 痛点：同事无法使用
在 0→1 阶段的状态下，这个工具主要是给我自己用的。但是有一个问题：
- 我自己用命令行没问题
- 同事想看抓取的内容很不方便
- 同事不会用命令行，也看不懂技术细节
#### 为什么同事需要看什么
我们需要及时查看抖音平台上的行业视频和最新消息。这里有个现实问题：
- 常用的 AI Agent 一般只能获取到网页端的消息
- 但没办法获取到像抖音平台这样的消息
#### 本次 1→2 开发的目标
设计一个可视化界面，这样：
- 搜索最新的行业消息 → 通过可视化界面直接查看
- 持续观测我们自己账号的数据 → 通过可视化界面直接查看
让非技术人员也能方便使用这个工具。
---
## 实践过程
### 第一阶段：理解项目
#### 2026-04-28：初次接触
**我的目标**：理解这个项目到底在做什么
**我的做法**：
1. 直接问 SOLO："帮我分析这个项目，生成一份完整的文档"
2. SOLO 生成了 CODE_WIKI.md，包含了项目架构、模块职责、关键类说明
**学到的技巧**：
> 💡 **技巧 #1：让 AI 帮你"翻译"代码**
>
> 不懂代码没关系，让 AI 用自然语言解释给你听。你可以问：
> - "这个文件是做什么的？"
> - "这个函数的作用是什么？用简单的话解释"
> - "整个项目的架构是什么样的？画个图给我看"
**SOLO 的回答**：
> SOLO 详细分析了项目结构，告诉我这是一个 TypeScript + Playwright 构建的爬虫工具，有 CLI 层、爬虫层、API 客户端层、存储层等多个模块。
---
#### 2026-04-28：理解文档的作用
**我的疑问**：CODE_WIKI.md 和 AGENTS.md 有什么区别？
**SOLO 的解释**：
| 文档 | 目标受众 | 核心目的 |
|------|----------|----------|
| CODE_WIKI.md | 人类开发者 | 理解项目"是什么" |
| AGENTS.md | AI Agent | 指导开发"怎么做" |
**学到的技巧**：
> 💡 **技巧 #2：区分"知识文档"和"规则文档"**
>
> - 知识文档（如 CODE_WIKI）：帮你理解项目，适合阅读学习
> - 规则文档（如 AGENTS.md）：告诉 AI 该怎么写代码，适合约束行为
>
> 当你不知道某个概念时，问 AI "这个是什么"；当你想让 AI 按某种方式工作时，把规则写进 AGENTS.md
---
### 第二阶段：明确项目目标
#### 2026-04-28：确定 1→2 升级目标
**我的目标**：完善开发过程记录的摘要和背景，明确 1→2 升级的目标
**我的做法**：
1. 详细告诉 SOLO 项目的背景信息
2. 说明这是 1→2 升级项目，不是 0→1 新项目
3. 描述 0→1 阶段已实现的核心功能模式
4. 说明本次升级的痛点和目标
**学到的技巧**：
> 💡 **技巧 #4：用结构化的方式描述需求**
>
> 当你想让 AI 帮你写东西时，不要只给模糊的概念，而是结构化地描述：
> 1. 背景信息（现在是什么状态）
> 2. 已有功能（已经有什么）
> 3. 痛点问题（遇到什么问题）
> 4. 目标需求（想做成什么样）
>
> 这样 AI 才能更准确地理解你的需求，产出更好的内容。
**SOLO 的帮助**：
> SOLO 帮我整理了一个清晰的结构，包括摘要、我是谁、0→1 状态、1→2 升级的原因和目标。特别用表格清晰展示了已有的五种模式和用途。
---
### 第三阶段：完善记录机制
#### 2026-04-28：添加截图记录规则
**我的目标**：让开发过程记录更加生动，加入界面截图
**我的做法**：
1. 告诉 SOLO 我希望在记录开发过程时使用截图
2. 要求 SOLO 在关键节点截图整个 TRAE SOLO 界面
3. 要求 SOLO 把截图规则写入 AGENTS.md
**学到的技巧**：
> 💡 **技巧 #5：用截图让开发过程更生动**
>
> 不要只记录文字，适当在关键节点截图界面：
> 1. 重要问题总结后
> 2. 重大决策讨论时
> 3. 关键功能规划时
> 4. 问题解决完成后
> 5. 里程碑达成时
>
> 这样不仅记录了"做了什么"，还记录了"怎么做的"，让整个开发过程更真实、更有参考价值。
**SOLO 的帮助**：
> SOLO 在 AGENTS.md 中添加了完整的"截图记录规则"，包括截图时机、流程、保存路径和插入格式。这确保了后续截图记录的规范性。
---
#### 2026-04-28：第一次使用压缩功能
**我的目标**：保证上下文的宽裕，为后续开发留出空间
**我的做法**：
1. 在设计好本篇文章的框架之后
2. 在增加新的开发规范（截图记录规则）之后
3. 点击 TRAE SOLO 的压缩按钮，进行了第一次压缩
**学到的技巧**：
> 💡 **技巧 #6：善用压缩按钮，保证上下文宽裕**
>
> TRAE SOLO 有一个压缩按钮，这是一个非常重要的功能！
>
> **为什么要压缩？**
> - AI 的上下文窗口是有限的
> - 随着对话越来越长，上下文会越来越满
> - 上下文太满会影响 AI 的理解和响应质量
>
> **什么时候压缩？**
> - 完成一个阶段性任务后（比如设计好文档框架）
> - 添加了重要的规则或规范后（比如更新了 AGENTS.md）
> - 准备开始新的开发任务前
>
> **压缩的好处**：
> - 释放上下文空间
> - AI 会保留关键信息，丢弃冗余内容
> - 为后续开发留出足够的"呼吸空间"
>
> 保证上下文的宽裕是开发的重中之重！
**SOLO 的帮助**：
> SOLO 帮我完成了框架设计和规范添加，然后我主动进行了压缩，确保后续开发有足够的上下文空间。
---
### 第四阶段：记录开发过程
#### 2026-04-28：开始记录
**我的需求**：这个项目要参加 TRAE SOLO 挑战赛，需要提交一份记录开发过程的文档
**我的做法**：
1. 告诉 SOLO 我的需求和目标
2. 让 SOLO 帮我设计文档框架
3. 开始持续记录
**学到的技巧**：
> 💡 **技巧 #3：让 AI 帮你规划**
>
> 当你不知道文档该怎么写时，可以：
> 1. 给 AI 看几个参考案例
> 2. 告诉 AI 你的目标受众和目的
> 3. 让 AI 帮你设计框架
> 4. 在后续开发中持续完善
---
### 第五阶段：前端界面开发
#### 2026-04-29：脑暴前端设计方案
**我的目标**：设计一个可视化界面，让同事能方便地使用爬虫工具
**我的做法**：
1. 使用 brainstorming skill 与 SOLO 一起脑暴
2. 描述我想到的核心功能：输入窗口、输出窗口、任务区分
3. 让 SOLO 提出更多建议和布局方案
**SOLO 提出的布局方案**：
| 方案 | 描述 | 优点 | 缺点 |
|------|------|------|------|
| 方案 A | 任务卡片流 + 顶部筛选栏 | 简洁直观 | 任务多时滚动效率低 |
| 方案 B | 左侧任务列表 + 右侧内容详情 | 点击即看，切换快 | 需要较宽屏幕 |
| 方案 C | 模式 Tab + 任务列表 | 模式区分清晰 | 多了一层点击 |
**我的选择**：方案 C + 分页设计
**学到的技巧**：
> 💡 **技巧 #7：用脑暴 skill 让 AI 参与设计**
>
> 当你需要设计一个新功能或界面时，不要自己闷头想：
> 1. 调用 brainstorming skill
> 2. 描述你的初步想法
> 3. 让 AI 提出多个方案供你选择
> 4. 结合各方案的优点做出最终决定
>
> AI 可以帮你看到你没想到的角度，提出更专业的设计建议。
---
#### 2026-04-29：前端开发完成
**我的目标**：实现一个完整的 Web 可视化界面
**我的做法**：
1. 让 SOLO 基于设计方案实现前端代码
2. 使用 Next.js + React + Ant Design 技术栈
3. 实现任务列表、新建任务、内容查看等核心功能
**遇到的问题**：
- 任务数据格式不兼容：旧任务文件没有 id 字段
- API 返回 404：需要同时支持新旧两种格式
**解决方法**：
- 在 task-manager.ts 中添加任务迁移逻辑
- 自动将旧格式任务转换为新格式
**界面效果展示**：
*图：旧版本界面 - 深色科技风格，适合夜间使用*
*图：旧版本界面 - 切换到浅色主题*
*图：旧版本 - 新建任务弹窗*
---
#### 2026-04-29：升级到 Agent World 设计规范
**我的目标**：让界面更加温暖、优雅、专业
**我的做法**：
1. 找到一份优秀的设计规范（Agent World — The Parallel Web）
2. 让 SOLO 基于这个设计规范重新设计前端
3. 实现暖色调米色背景、衬线标题、大量留白的设计风格
**设计规范要点**：
| 设计元素 | 旧版本 | 新版本（Agent World） |
|----------|--------|----------------------|
| 背景色 | 深灰 #0a0a0a | 暖色米色 lab(95.37%) |
| 强调色 | 蓝色 #3b82f6 | 橙棕色 lab(46.85%) |
| 字体 | 无衬线字体 | 衬线标题 + 无衬线正文 |
| 风格 | 科技感 | 温暖优雅、极简主义 |
**新界面效果展示**：
*图：新版本界面 - Agent World 设计规范，温暖米色背景*
*图：新版本界面 - 深色主题同样优雅*
*图：新版本 - 新建任务弹窗，更加简洁美观*
**学到的技巧**：
> 💡 **技巧 #8：给 AI 一个设计参考**
>
> 当你对设计不满意时，不要只说"改好看点"，而是：
> 1. 找一个你喜欢的网站或设计规范
> 2. 把设计规范给 AI 看
> 3. 让 AI 按照这个规范来实现
>
> 这样 AI 就知道"好看"的具体标准是什么了。
---
#### 2026-04-29：保存两个版本的截图
**我的目标**：记录前端设计的演变过程
**我的做法**：
1. 让 SOLO 先恢复旧版本前端代码
2. 截图保存旧版本界面
3. 再恢复新版本前端代码
4. 截图保存新版本界面
5. 两个版本的截图都保存到 `trae-train/screenshots/` 目录
**学到的技巧**：
> 💡 **技巧 #9：保存开发过程中的版本快照**
>
> 在开发过程中，特别是涉及界面设计时：
> 1. 每个重要版本都要截图保存
> 2. 截图命名要规范（日期+描述）
> 3. 这样可以清晰展示设计的演变过程
>
> 这不仅是记录，也是展示你工作成果的最好方式！
---
#### 2026-04-30：修复状态持久化和界面问题
**用户反馈的问题**：
1. 网站没有完整的 cookie 功能，使用起来非常不流畅
2. 点击卡片后返回主页面，筛选模式没有保持
3. 顶部有两个重复的导航栏
4. 任务列表和筛选区域缺少视觉重心和分割线
5. 新建任务按钮位置和大小不正确，不美观
6. 模式标签在小屏幕上会挤压变形
7. 筛选区域留白太多，内容不居中
8. 字体不统一（标题用衬线，正文用无衬线）
**我的做法**：
1. 实现状态持久化：使用 Zustand 的 persist 中间件，将筛选条件、页码等保存到 localStorage
2. 修复双导航栏问题：移除 page.tsx 中重复的 Navbar 组件
3. 重新设计 Hero 区域：将简单的标题替换为模式简介卡片网格
4. 改进模式标签区域：添加横向滚动，固定按钮宽度，不会挤压变形
5. 优化筛选区域：减少留白，内容居中对齐
6. 统一字体：所有字体都改为无衬线字体，保持一致性
**关键代码改动**：
- `src/store/useTaskStore.ts`：添加 persist 中间件
- `src/app/page.tsx`：重新设计 Hero 和模式标签区域
- `src/components/task/TaskFilter.tsx`：优化筛选区域布局
- `src/app/globals.css`：统一字体样式
**测试验证**：
1. 点击不同模式标签，刷新页面后状态保持
2. 在小屏幕下模式标签可以横向滚动
3. 筛选区域居中，留白适中
4. 字体统一美观
**学到的技巧**：
> 💡 **技巧 #10：持续迭代优化**
>
> 开发不是一蹴而就的，需要根据用户反馈持续优化：
> 1. 先实现核心功能
> 2. 让用户试用，收集反馈
> 3. 逐个修复问题，提升体验
> 4. 每个小改进都会让产品变得更好
>
> 用户体验的提升往往来自这些细节的打磨！
---
#### 2026-04-30：调整字体和精简界面
**用户反馈的问题**：
1. 希望使用思源宋体而不是无衬线字体
2. Hero 区域的模式简介卡片太繁杂冗余
3. 希望移除"爬虫任务列表"标题
**我的做法**：
1. 将整个网站字体改回思源宋体（Noto Serif SC）
2. 精简 Hero 区域：移除标题，替换为一行小字 `关键词搜索 · 链接采集 · 创作者采集 · 关注采集 · 深度搜索`
3. 减小按钮和图标尺寸，使界面更紧凑
**关键代码改动**：
- `src/app/globals.css`：统一所有字体为思源宋体
- `src/app/page.tsx`：精简 Hero 区域，移除卡片网格
---
#### 2026-04-30：发现新问题：deepsearch 任务卡片内容为空
**问题描述**：
点击 deepsearch 任务卡片时，发现里面内容是空的。虽然任务有对应的 markdown 文件和一些 json 文件，但数据格式没有完全统一，导致无法完整地被前端使用，所以点进去任务卡片之后，并没有对应的视频内容和数据评论等东西。
**初步分析**：
1. deepsearch 任务产生的内容格式与其他模式不同
2. 需要统一所有模式的数据输出格式
3. 确保前端能正确解析和显示所有模式的任务内容
---
#### 2026-04-30：解决 deepsearch 任务显示问题 + Markdown 文案改进
**用户需求**：
1. 把 deepsearch 模式所生成的视频对接到真正的格式化结构，让前端能正常显示
2. deepsearch 任务详情页要显示：按轮次分组的视频 + 搜索路径 + 排除内容列表
3. 视频卡片要显示选题总结和内容结构
4. 文案文件从 txt 改为 md，方便 Markdown 渲染
**我的做法**：
**1. 数据存储层改造（output-store.ts）**
- 将文案文件从 `文案.txt` 改为 `文案.md`
- 新增 `saveAnalysis()` 方法，保存 deepsearch 的分析结果到标准位置
- 新增 `updateDeepsearchVideosIndex()` 方法，维护 videos.json 索引
- 改进 `appendDeepsearchAnalysis()` 方法，在添加分析时同时更新 round.json、analysis.json 和 videos.json
**2. 数据类型扩展（web-types.ts）**
- 给 `DouyinContent` 类型新增字段：`topicSummary`、`contentStructure`、`round`、`sourceKeyword`
- 新增 deepsearch 相关类型：`DeepsearchRound`、`DeepsearchExcludedVideo`、`DeepsearchVideoIndex`、`DeepsearchSession`、`GetDeepsearchSessionResponse`
**3. API 层增强**
- `src/app/api/content/route.ts`：改进 findTaskFile 方法支持获取 sessionId，改进 loadContentFromTask 支持从 videos.json 加载 deepsearch 数据
- `src/app/api/deepsearch/[sessionId]/route.ts`：新增 deepsearch API，返回完整的深度搜索会话数据
**4. 前端改造**
- `src/components/content/ContentCard.tsx`：完全重写，支持显示封面、标题、作者、轮次信息、数据指标、选题总结、内容结构、原视频链接
- `src/app/task/[id]/page.tsx`：完全重写，支持：任务详情展示、搜索路径概览、按轮次分组视频列表、视频展开/收起切换、显示排除内容列表
- 安装了 `react-markdown` 和 `remark-gfm` 用于 Markdown 渲染
**关键成果**：
✅ deepsearch 任务现在可以正常显示视频列表了
✅ 视频卡片会显示选题总结和内容结构（如果有）
✅ TaskDetail 页面支持按轮次分组显示视频
✅ 文案文件统一为 .md 格式，为后续 Markdown 渲染做好准备
---
#### 2026-05-01：探索 Agent 集成方案，安装 Claude Agent SDK
**用户需求**：
1. 网页没有具备使用五种模式创建任务的能力，因为没有集成 agent 和 llm
2. 想改成通过读取本地数据的方式来创建任务
3. 让其他 agent（如 Claude Code、Cursor）通过 skill 创建的任务和产出内容都能被网页显示
4. 集成 Claude Agent SDK
5. 支持双向通信实时对话
6. 使用 MiniMax API 而不是 Claude API
**我的做法**：
**1. 探索 Claude Agent SDK**
- 搜索了 Claude Agent SDK 的使用方式和技术资料
- 了解到 SDK 支持 TypeScript 和 Python 两种语言
- 项目已经有完整的 w-hand Skill（.agents/skills/w-hand/SKILL.md）
- 选择了 TypeScript 版本，与项目技术栈一致
**2. 安装 Claude Agent SDK**
- 安装了 `@anthropic-ai/claude-agent-sdk`
- 安装了 `@anthropic-ai/claude-code` 作为运行环境
- 创建了简单的测试脚本（test-agent.ts）
- 测试了 SDK，成功让 Agent 探索项目结构！
**3. 设计 Agent 集成方案**
- 创建了详细的设计文档（docs/superpowers/specs/2026-05-01-agent-integration-design.md）
- 设计了完整的架构：Next.js + WebSocket + MiniMax API + Claude Agent SDK + w-hand Skill
- 规划了分阶段实施：基础 WebSocket → MiniMax API → Agent 集成 → 任务扫描
**设计要点**：
- **实时通信**：使用 WebSocket 实现双向通信
- **MiniMax 集成**：由于 MiniMax API 兼容 Anthropic API 格式，可以直接使用
- **技能目录**：项目已有的 `.agents/skills/w-hand/SKILL.md` 可以直接使用
- **任务数据**：支持从 `data/task/` 和 `output/tasks/` 自动扫描任务
**关键成果**：
✅ Claude Agent SDK 已成功安装并测试通过
✅ 完整的设计方案已制定
✅ 开发路线已规划
**学到的技巧**：
> 💡 **技巧 #11：让 AI 帮你探索新技术**
>
> 当你需要集成新技术时：
> 1. 先让 AI 搜索相关文档和教程
> 2. 让 AI 帮你安装和测试
> 3. 先做个简单的 PoC（概念验证）
> 4. 等验证可行后再投入正式开发
>
> 这样可以避免在不确定的技术上浪费太多时间！
---
#### 2026-05-01：完成 Agent 前端集成！
**完成的内容**：
1. **创建 /agent 页面和基础布局**
- 左右分栏设计：左侧聊天窗口，右侧可视化输出区域
- 使用 Agent World 米色风格设计
- 截图保存验证完成
2. **创建聊天窗口组件（ChatWindow.tsx）**
- 消息列表显示，用户消息和 Agent 消息样式区分
- 输入框支持多行，Enter 发送，Shift+Enter 换行
- "正在思考..."加载状态
- Markdown 渲染（使用 react-markdown + remark-gfm）
- 集成到 /agent/page.tsx，截图验证
3. **创建可视化输出组件（VisualOutput.tsx）**
- 支持显示：任务列表、任务详情、内容卡片
- 复用现有组件：TaskList、TaskCard、ContentCard
- 视图切换机制
- 移除模拟数据，集成真实 API（taskManager）
- 截图验证完成
4. **创建 Agent 状态管理（useAgentStore.ts）**
- 消息列表、连接状态、运行状态、视图切换等状态
- 使用 Zustand + persist 中间件，localStorage 持久化聊天历史
- 关闭确认机制（isAgentRunning 状态）
- 集成 ChatWindow 和 VisualOutput 组件
5. **创建 WebSocket 服务器（ws-server.ts）**
- 安装 `ws` 和 `@types/ws` 依赖
- WebSocket 连接管理
- 消息协议实现（ClientMessage/ServerMessage）
- 集成 MiniMax API 调用
- 用户意图解析：查看任务、创建任务、查看内容、普通聊天
- 集成真实 taskManager，真正创建任务
6. **集成所有功能**
- WebSocket 客户端连接
- 消息发送和接收
- 视图切换和数据加载
- 测试所有功能：聊天、查看任务、创建任务、查看内容
- 截图验证所有功能
**新增文件**：
- `src/app/agent/page.tsx` - Agent 主页面
- `src/app/agent/_components/ChatWindow.tsx` - 聊天窗口
- `src/app/agent/_components/VisualOutput.tsx` - 可视化输出
- `src/app/agent/_store/useAgentStore.ts` - Agent 状态管理
- `src/ws-server.ts` - WebSocket 服务器
- `src/app/api/agent/ws/route.ts` - WebSocket 路由
- `.claude/settings.json` - Claude 项目配置
- `CLAUDE.md` - 项目说明（避免误识别）
**关键成果**：
✅ **完整的 Agent 聊天界面**，用户可以通过自然语言与工具交互
✅ **WebSocket 实时通信**，流畅的对话体验
✅ **真实 taskManager 集成**，真正创建和管理任务
✅ **MiniMax API 集成**，AI 理解和响应
✅ **可视化输出**，任务和内容在右侧展示
✅ **聊天历史持久化**，刷新页面后记录不丢失
✅ **关闭确认机制**，Agent 运行时关闭会提示确认
**服务信息**：
- Next.js 应用：http://localhost:3000/agent
- WebSocket 服务器：ws://localhost:8080
---
#### 2026-05-02：修复任务结果关联问题
**问题描述**：
前端任务详情页显示"暂无视频数据"，但实际数据已经抓取成功。
**问题分析**：
- TaskManager 使用 UUID 作为任务 ID（如 `da7a32d4-08cf-4c10-828a-12a5e4505c37`）
- CLI 保存结果时使用时间戳格式作为文件名（如 `20260502_184314.json`）
- 前端调用 `/api/content?taskId=uuid` 找不到对应的任务结果文件
**我的做法**：
1. 修改 `taskRecorder` 添加 `getExternalTaskId()` 方法
2. 修改 `outputStore.saveTaskResult` 支持使用外部任务 ID 作为文件名
3. 修改所有 CLI 调用传入 `externalTaskId`
4. 修改 `/api/content` 支持通过 UUID 查找任务结果文件
**关键成果**：
✅ 任务结果文件现在使用 UUID 作为文件名
✅ 前端可以正确查询到任务结果
---
#### 2026-05-02：实现 Headless 模式
**用户需求**：
开启任务时不打开浏览器窗口，在后台静默执行。
**我的做法**：
1. 修改 `ws-server.ts` 任务创建时添加 `headless: true` 选项
2. 修改 `agent-tools.ts` 所有工具添加 `headless: true` 选项
3. 增强 `douyin.ts` 和 `xhs.ts` 的反检测措施：
- 使用 `--headless=new` 替代旧模式
- 添加更多反自动化参数
- 增强 Navigator 对象隐藏特征
- 设置完整的浏览器上下文
**学到的技巧**：
> 💡 **技巧 #15：Headless 模式需要反检测**
>
> Headless 模式下浏览器会暴露自动化特征，导致被网站检测：
> 1. 使用 `--headless=new` 替代旧的 `--headless`
> 2. 添加 `--disable-blink-features=AutomationControlled` 等参数
> 3. 注入脚本隐藏 `navigator.webdriver` 等特征
> 4. 设置完整的 locale、timezoneId、geolocation 等
---
#### 2026-05-02：添加 WebSocket 自动重连机制
**问题描述**：
WebSocket 连接断开后，前端显示"这是一个模拟的 Agent 响应"，没有自动重连。
**我的做法**：
1. 添加 `reconnectTimer`、`reconnectAttempts`、`MAX_RECONNECT_ATTEMPTS`、`RECONNECT_DELAY` 变量
2. 在 `onclose` 回调中自动尝试重连（最多 5 次，每次间隔 2 秒）
3. 在 `sendMessage` 时检查连接状态，未连接则先尝试重连
4. 在 `disconnectWebSocket` 时清理定时器并重置计数器
**关键成果**：
✅ WebSocket 断开后自动重连
✅ 发送消息时检查连接状态
✅ 提供更好的用户体验
---
#### 2026-05-02：优化用户意图解析
**问题描述**：
用户说"帮我搜一下桃黑黑"，被解析为普通聊天而不是创建任务。
**我的做法**：
1. 扩展搜索关键词识别：添加 `搜一下`、`搜`、`抓取` 等
2. 简化关键词提取逻辑，使用更直接的替换方法
3. 确保能正确提取"桃黑黑"等关键词
**学到的技巧**：
> 💡 **技巧 #16：意图解析要覆盖多种表达方式**
>
> 用户表达同一个意图可能有多种说法：
> - "搜索xxx"
> - "搜一下xxx"
> - "帮我搜xxx"
> - "抓取xxx"
>
> 意图解析要尽可能覆盖这些变体，才能提供良好的用户体验。
---
#### 2026-05-03：持续优化 Headless 模式
**问题描述**：
Headless 模式下任务执行完成但采集数量为 0，浏览器没有正确加载页面。
**我的做法**：
1. 进一步增强浏览器启动参数
2. 添加更多上下文配置（colorScheme、deviceScaleFactor、hasTouch、isMobile）
3. 增强反检测脚本，伪造 permissions 和 platform
**关键代码改动**：
- `src/platforms/douyin.ts`：增强 headless 模式配置
- `src/platforms/xhs.ts`：同样增强配置
---
#### 2026-05-03：修复 T 区内容提取问题
**问题描述**：
右侧可视化输出区域（T 区）只能显示任务列表，无法查看任务采集的内容数据。
**问题分析**：
1. `VisualOutput` 组件没有实现内容查看功能
2. 任务完成后没有自动切换到内容视图
3. 选择任务后跳转到单独页面，而不是在当前页面显示内容
**我的做法**：
**1. 完善 VisualOutput 组件**
- 添加标签页切换按钮：任务列表、内容采集
- 根据 `currentView` 状态切换显示
- 任务列表视图：显示所有任务
- 内容采集视图：显示当前选中任务的内容
**2. 完善 ContentGrid 组件**
- 内容网格布局，响应式列数
- 内容卡片点击打开详情模态框
- 分页显示支持
- 集成 ContentModal 显示内容详情
**3. 修改任务选择行为**
- 选择任务后不再跳转到单独页面
- 直接在当前页面切换到内容视图
- 加载并显示该任务的采集内容
**4. 优化任务完成体验**
- 任务完成后自动切换到内容视图
- 显示采集数量和提示信息
**关键代码改动**：
- `src/app/agent/_components/VisualOutput.tsx`：重新实现，添加标签页切换和内容显示
- `src/components/content/ContentGrid.tsx`：重新实现，添加网格布局和模态框
- `src/ws-server.ts`：任务完成后发送 show_view 切换到内容视图
**关键成果**：
✅ 右侧区域现在可以显示内容采集数据了
✅ 任务完成后自动切换到内容视图
✅ 内容可以网格显示和分页浏览
✅ 点击内容卡片可以打开详情模态框
---
#### 2026-05-03：修复 Headless 模式登录问题 + 添加调试日志
**问题描述**：
1. Headless 模式下任务执行完成但采集数量为 0
2. 问题根源：Headless 模式下用户未登录，无法手动登录
3. 需要更好的调试信息定位问题
**问题分析**：
1. Headless 模式下浏览器在后台运行，用户看不到登录界面
2. 如果没有保存的 cookies，任务无法正常执行
3. 现有代码在未登录时会无限等待用户登录，导致超时
**我的做法**：
**1. 增强 Headless 模式登录检查**
- 在 `douyin.ts` 和 `xhs.ts` 中添加检查：如果是 headless 模式且未登录，直接抛出错误
- 错误信息明确提示用户：需要先在非 headless 模式下登录并保存 cookies
**2. 智能判断是否使用 Headless 模式**
- 在 `ws-server.ts` 和 `agent-tools.ts` 中添加 cookies 检测逻辑
- 只有当 cookies 目录存在且有内容时，才自动使用 headless 模式
- 否则使用非 headless 模式，让用户可以手动登录
**3. 添加调试日志**
- 在 `VisualOutput.tsx` 中添加详细的 console.log
- 记录任务加载、内容加载等关键步骤
- 帮助用户定位问题
**关键代码改动**：
- `src/platforms/douyin.ts`：添加 headless 模式登录检查
- `src/platforms/xhs.ts`：添加同样的检查
- `src/ws-server.ts`：添加 cookies 检测，智能判断是否使用 headless
- `src/agent-tools.ts`：同样添加智能判断逻辑
- `src/app/agent/_components/VisualOutput.tsx`：添加调试日志
**关键成果**：
✅ Headless 模式下未登录时会明确提示错误
✅ 自动检测 cookies 状态，智能选择是否使用 headless
✅ 添加详细的调试日志，便于问题定位
**学到的技巧**：
> 💡 **技巧 #17：Headless 模式需要登录状态**
>
> Headless 模式不是万能的，需要先有登录状态：
> 1. 首次使用时，先用非 headless 模式登录
> 2. 登录成功后，cookies 会被保存
> 3. 之后就可以使用 headless 模式了
> 4. 代码要检测 cookies 是否存在，智能选择模式
>
---
#### 2026-05-03：修复任务卡片内容显示和实时更新问题
**问题描述**：
1. 点击任务卡片后，内容采集区域不显示数据，但数据已保存到 output 目录
2. 任务状态和进度条不实时更新，需要刷新页面才能看到变化
**问题分析**：
1. **任务内容不显示问题**：爬虫没有把采集到的视频信息保存到任务结果文件的 `videos` 字段中
2. **实时更新问题**：WebSocket 服务器使用轮询方式获取任务状态，效率低且不够实时
**我的做法**：
**1. 修复爬虫保存 taskVideos 数据**
- **douyin.ts**：添加 `taskVideos` 数组，在各个模式下保存视频信息（包括 `author_id` 字段），任务结束时调用 `outputStore.saveTaskResult` 保存
- **xhs.ts**：同样添加 `taskVideos` 数组，在各个模式下保存笔记信息（包括 `author_id` 字段），任务结束时调用 `outputStore.saveTaskResult` 保存
**2. 增强实时更新机制**
- **task-recorder.ts**：添加 `onUpdate()` 和 `offUpdate()` 回调机制，任务状态变化时立即通知监听器
- **ws-server.ts**：修改 `monitorTaskProgress()` 函数，使用回调机制替代轮询，任务状态变化时立即通过 WebSocket 推送
**3. 增强内容 API 兼容性**
- **api/content/route.ts**：完全重写，添加 `findTaskFile` 先在 `data/task/` 目录查找任务，添加 `loadAllContentsFromPlatform` 扫描整个平台的内容作为备用（即使任务文件没有 `videos` 字段）
**4. 修复所有 TypeScript 错误**
- 修复了 `api.getContents` 参数不匹配问题
- 修复了 `douyin.ts` 和 `xhs.ts` 中类型定义问题
- 修复了 `ws-server.ts` 中导入问题
**关键代码改动**：
- `src/platforms/douyin.ts`：添加 taskVideos 管理，保存 author_id
- `src/platforms/xhs.ts`：添加 taskVideos 管理，保存 author_id
- `src/store/task-recorder.ts`：添加回调机制
- `src/ws-server.ts`：改用回调替代轮询
- `src/app/api/content/route.ts`：完全重写，添加备用扫描
- `src/app/agent/_components/VisualOutput.tsx`：修复 api 调用参数
- `src/lib/api.ts`：已有正确的类型定义
**关键成果**：
✅ 任务卡片现在可以正常显示采集到的内容了
✅ 任务状态和进度条实时更新，不需要刷新页面
✅ 内容 API 有备用机制，即使任务文件没有 videos 字段也能显示数据
✅ 所有 TypeScript 错误已修复，编译通过
---
#### 2026-05-03：改造 ContentModal 模态框为响应式
**用户需求**：
1. 手机端（< 768px）模态框占满整个屏幕
2. 将横向三栏布局改为纵向堆叠或标签页切换
3. 优化导航按钮的触摸体验（增大按钮尺寸）
4. 隐藏键盘快捷键提示（手机端不适用）
5. 平板端和桌面端保持原有横向三栏布局
**我的做法**：
**1. 添加响应式状态检测**
- 使用 `window.matchMedia` 检测屏幕宽度
- 监听屏幕宽度变化，动态切换布局
- 定义 `MOBILE_BREAKPOINT = 768` 作为断点
**2. 实现手机端标签页切换布局**
- 定义 `TabType` 类型：`'video' | 'data' | 'comments'`
- 创建三个标签页：视频、数据、评论
- 每个标签页独立显示对应内容
- 标签栏固定在底部，方便触摸操作
**3. 优化触摸体验**
- 关闭按钮从 32px 增大到 44px
- 导航按钮从 32px 增大到 44px
- 标签按钮最小高度 56px
- 使用 `env(safe-area-inset-bottom)` 适配 iPhone 底部安全区域
**4. 功能简化**
- 手机端隐藏键盘快捷键提示
- 导航按钮只显示图标，不显示文字
- 标签页切换有平滑过渡动画
**关键代码改动**：
- `src/components/content/ContentModal.tsx`：完全重写，添加响应式支持
- 添加 `isMobile` 状态和 `activeTab` 状态
- 添加 `renderMobileContent()` 函数
- 添加移动端样式：`overlayMobile`、`modalMobile`、`mobileTabBar` 等
- 添加标签页切换逻辑
**关键成果**：
✅ 手机端模态框全屏显示（100vw x 100vh）
✅ 手机端使用标签页切换，三个标签：视频、数据、评论
✅ 手机端按钮尺寸增大，方便触摸操作
✅ 手机端隐藏键盘快捷键提示
✅ 桌面端保持原有横向三栏布局
✅ 标签页切换有平滑过渡动画
**学到的技巧**：
> 💡 **技巧 #18：响应式设计要考虑不同设备的交互方式**
>
> 手机端和桌面端有完全不同的交互方式：
> 1. **布局差异**：手机端用纵向堆叠或标签页，桌面端用横向多栏
> 2. **触摸优化**：手机端按钮要更大（至少 44px），方便触摸操作
> 3. **功能简化**：手机端隐藏不适用的功能（如键盘快捷键提示）
> 4. **全屏利用**：手机端模态框可以占满整个屏幕
> 5. **独立滚动**：每个区域可以独立滚动，避免整体滚动
---
#### 2026-05-03：优化 ContentGrid 内容网格的移动端布局
**用户需求**：
1. 手机端（< 768px）使用单列布局
2. 增大卡片的触摸区域（整个卡片可点击）
3. 优化卡片的移动端显示：卡片占满宽度，显示封面图、标题、作者等关键信息，信息纵向排列
4. 平板端和桌面端（>= 768px）保持原有样式（多列网格布局）
**我的做法**：
**1. 添加响应式状态检测**
- 使用 `window.matchMedia('(max-width: 767px)')` 检测屏幕宽度
- 监听屏幕宽度变化，动态切换布局
- 使用 `useEffect` 添加事件监听器
**2. 实现手机端卡片布局**
- 单列布局（`grid-template-columns: 1fr`）
- 卡片横向排列：左侧封面图（120x90px），右侧信息区
- 信息区纵向排列：标题（最多2行）、作者、数据指标
- 标题使用 `-webkit-line-clamp: 2` 截断
**3. 优化触摸体验**
- 整个卡片可点击（`cursor: pointer`）
- 添加 `onMouseDown`、`onMouseUp`、`onMouseLeave` 事件
- active 状态：缩放到 0.98，背景色变为 `var(--accent)`
- 释放后恢复原状
**4. 保持桌面端原有布局**
- 使用 `repeat(auto-fill, minmax(280px, 1fr))` 多列网格
- 复用原有 `ContentCard` 组件
- 保持原有样式和交互
**关键代码改动**：
- `src/components/content/ContentGrid.tsx`：
- 添加 `isMobile` 状态和 `useEffect` 监听屏幕宽度
- 定义移动端样式对象：`mobileCardStyle`、`mobileCoverStyle`、`mobileInfoStyle` 等
- 根据 `isMobile` 条件渲染不同的卡片布局
- 添加触摸反馈事件处理
**关键成果**：
✅ 手机端单列布局，卡片横向排列（封面图+信息）
✅ 整个卡片可点击，触摸区域增大
✅ active 状态有视觉反馈（缩放+背景色变化）
✅ 标题最多显示2行，超出截断
✅ 桌面端保持原有网格布局
✅ 响应式切换流畅，屏幕宽度变化时自动调整
**学到的技巧**：
> 💡 **技巧 #19：移动端卡片布局要优化信息密度和触摸体验**
>
> 移动端内容卡片的设计要点：
> 1. **横向布局**：封面图在左，信息在右，充分利用屏幕宽度
> 2. **信息精简**：只显示关键信息（标题、作者、数据指标），避免信息过载
> 3. **触摸友好**：整个卡片可点击，添加 active 状态反馈（缩放、背景色变化）
> 4. **标题截断**：使用 `-webkit-line-clamp` 限制标题行数，避免过长
> 5. **使用 matchMedia**：用 `window.matchMedia` 检测屏幕宽度，动态切换布局
---
#### 2026-05-04：完成 Agent 页面的完整手机端响应式适配
**用户需求**：
整个前端界面没有对手机端进行适配，特别是打开视频后的横向三栏布局不适合在手机端展示。
**我的做法**：
**1. 全局断点变量**：
- 在 `globals.css` 中添加 `--breakpoint-mobile: 768px` 和 `--breakpoint-tablet: 1024px`
- 定义统一的响应式断点
**2. Agent 主页面适配**：
- 手机端：上下堆叠布局，左侧聊天窗口在上，右侧可视化输出在下
- 添加标签页切换（聊天 / 可视化）
- 桌面端：保持原有左右分栏布局
- 使用 `window.matchMedia` 检测屏幕宽度
**3. ChatWindow 聊天窗口适配**：
- 手机端：固定底部输入框，自适应高度（最多 4 行）
- 按钮最小高度 44px（符合 iOS HIG 标准）
- 使用 `env(safe-area-inset-bottom)` 适配 iPhone 底部安全区域
**4. VisualOutput 可视化输出适配**：
- 手机端：单列布局，大按钮样式
- 标签页按钮增大，方便触摸
- 内容网格单列显示
**5. ContentGrid 内容网格适配**：
- 手机端：单列布局，卡片横向排列（封面图+信息）
- 增大卡片触摸区域，添加 active 状态反馈（缩放+背景色变化）
**关键代码改动**：
- `src/app/globals.css`：添加全局断点变量
- `src/app/agent/page.tsx`：添加响应式布局和标签页切换
- `src/app/agent/_components/ChatWindow.tsx`：优化手机端输入框
- `src/app/agent/_components/VisualOutput.tsx`：添加响应式布局
- `src/components/content/ContentGrid.tsx`：增强手机端适配
**关键成果**：
✅ Agent 页面手机端完整适配（上下堆叠+标签页）
✅ ChatWindow 手机端固定底部输入框
✅ VisualOutput 手机端单列布局
✅ ContentGrid 手机端单列卡片布局
✅ 所有按钮触摸优化（最小 44px）
✅ iPhone 底部安全区域适配
**新增截图**：
- `trae-train/screenshots/2026-05-03_手机端_Agent页面.png`
- `trae-train/screenshots/2026-05-03_平板端_Agent页面.png`
- `trae-train/screenshots/2026-05-03_桌面端_Agent页面.png`
- `trae-train/screenshots/2026-05-03_手机端_ContentModal.png`
---
#### 2026-05-04：添加 ContentModal 手势交互
**用户需求**：
点击视频卡片后进入的模态框，点击黑色背景时无法退出。希望有更适配手机的交互：
- 上下滑动：切换到上一个视频或下一个视频
- 左右滑动：切换到数据/文案或评论
- 点击黑色背景：退出
**我的做法**：
**1. 修复点击背景关闭问题**：
- 修改 `onClick` 事件处理：只有点击遮罩层本身才关闭模态框
- 检查 `event.target === event.currentTarget`
**2. 添加触摸事件处理**：
- `handleTouchStart`：记录触摸起始位置和时间
- `handleTouchMove`：空（预留）
- `handleTouchEnd`：计算滑动方向和距离，触发对应操作
**3. 定义手势识别规则**：
- 最小滑动距离：50px
- 最大滑动时间：500ms
- 方向判断：`Math.abs(deltaX) > Math.abs(deltaY)` 则左右滑动，否则上下滑动
**4. 实现滑动操作**：
- **左右滑动**：在标签页间切换（视频 → 数据 → 评论）
- **上下滑动**：切换视频（向上=下一个，向下=上一个）
- 滑动时禁用过渡动画，提升流畅度
**关键代码改动**：
- `src/components/content/ContentModal.tsx`：
- 添加 `touchStartRef` 和 `isSwiping` 状态
- 添加 `handleTouchStart()`、`handleTouchEnd()`、`handleTouchMove()` 函数
- 修复遮罩层点击事件处理
- 滑动时禁用过渡动画
**关键成果**：
✅ 点击黑色背景可以正常退出模态框
✅ 向上滑动切换到下一个视频
✅ 向下滑动切换到上一个视频
✅ 向左滑动切换到下一个标签页
✅ 向右滑动切换到上一个标签页
✅ 手势识别灵敏，用户体验流畅
---
#### 2026-05-04：修复 deepsearch 模式缺少主命令的问题
**问题描述**：
深度搜索（deepsearch）任务执行失败，原因是：
1. CLI 中只有 `deepsearch-round`、`deepsearch-append`、`deepsearch-exclude` 等子命令，没有 `deepsearch` 主命令
2. 抖音爬虫（douyin.ts）中没有处理 `deepsearch` 模式的逻辑
**我的做法**：
**1. 在 CLI 中添加 deepsearch 主命令**：
- 使用 `commonOpts` 共享基础参数
- 添加 `--keywords` 必选参数
- 添加 `--limit`、`--max-pages` 可选参数
- 调用 `DouyinCrawler().run()` 执行
**2. 在 douyin.ts 中添加 doDeepSearch() 方法**：
- 自动生成 Session ID（`'ds_' + Date.now()`）
- 设置 `mode: 'deepsearch-round'`、`round: 1`
- 调用 `doDeepSearchRound()` 执行第一轮搜索
**3. 更新类型定义**：
- 在 `src/types.ts` 中添加 `'deepsearch'` 到 `CrawlerMode`
**4. 修复 TypeScript 错误**：
- 修复 `douyin.ts` 中 `configure` 导入问题
- 确保所有类型正确匹配
**关键代码改动**：
- `src/cli.ts`：添加 `deepsearch` 主命令
- `src/platforms/douyin.ts`：添加 `doDeepSearch()` 方法
- `src/types.ts`：更新 `CrawlerMode` 类型
- `src/platforms/douyin.ts`：添加 `configure` 导入
**关键成果**：
✅ CLI 现在有完整的 `deepsearch` 主命令
✅ Agent 对话中说"深度搜索xxx"可以正常创建任务
✅ deepsearch 任务可以正常执行
✅ 所有 TypeScript 错误已修复
---
#### 2026-05-04：修复文案显示问题
**问题描述**：
数据面板显示的是视频的标题，而不是硅基流动提取出来的视频文案。文案保存在 `文案.md` 文件中，格式为 `=== 视频文案 ===` 部分。
**我的做法**：
**1. 添加提取函数**：
- 创建 `extractTranscriptFromWenanMd()` 函数
- 读取 `文案.md` 文件
- 使用正则 `/=== 视频文案 ===\s*([\s\S]*?)(?=\n===|$)/` 提取内容
- 返回提取到的文案
**2. 更新内容加载逻辑**：
- 在 `loadContentFromTask()` 中调用提取函数
- 在 `loadAllContentsFromPlatform()` 中调用提取函数
- 将提取到的文案赋值给 `content.transcript`
**3. 更新 DataPanel 显示逻辑**：
- 优先显示 `content.transcript`
- 如果没有 transcript，回退显示 `content.desc`
- 复制文案按钮也使用同样的逻辑
**关键代码改动**：
- `src/app/api/content/route.ts`：添加 `extractTranscriptFromWenanMd()` 函数，并在两个加载函数中调用
- `src/components/content/DataPanel.tsx`：更新文案显示和复制逻辑
**关键成果**：
✅ 数据面板现在显示硅基流动提取的视频文案
✅ 如果没有视频文案，回退显示视频描述
✅ 复制文案功能正常工作
✅ 支持从旧任务文件中提取视频文案
---
## 下一步规划
### 已完成的阶段
✅ **阶段 1**：基础 WebSocket 和聊天界面 - 已完成
✅ **阶段 2**：MiniMax API 集成 - 已完成
✅ **阶段 3**：Agent 集成 - 已完成（使用 MiniMax 代替 Claude SDK）
✅ **阶段 4**：任务数据扫描和显示 - 已完成
✅ **阶段 5**：Headless 模式支持 - 已完成
✅ **阶段 6**：WebSocket 自动重连 - 已完成
✅ **阶段 7**：意图解析优化 - 已完成
✅ **阶段 8**：手机端响应式适配 - 已完成
✅ **阶段 9**：手势交互和文案显示 - 已完成
✅ **阶段 10**：deepsearch 主命令添加 - 已完成
### 未来可能的扩展
- 集成更多 AI 模型
- 支持更多语言对话
- 添加更多 Agent 技能
- 优化 Headless 模式的稳定性
---
## 踩坑与解决
### 坑 #1：不知道该问什么问题
**问题描述**：刚开始接触项目时，不知道从哪里入手
**解决方法**：
- 从大问题开始："这个项目是做什么的？"
- 逐步细化："这个模块是做什么的？"
- 具体化："这个函数是做什么的？"
### 坑 #2：任务数据格式不兼容
**问题描述**：旧的任务文件没有 id 字段，导致前端无法正确显示
**解决方法**：
- 在 task-manager.ts 中添加任务迁移逻辑
- 自动检测并转换旧格式任务
- 兼容新旧两种数据格式
### 坑 #3：设计不满意
**问题描述**：最初的前端界面虽然功能完整，但视觉上不够美观
**解决方法**：
- 找到一份优秀的设计规范（Agent World）
- 让 SOLO 按照设计规范重新实现
- 最终实现了温暖优雅的界面风格
### 坑 #4：任务结果文件名不匹配
**问题描述**：TaskManager 使用 UUID，CLI 使用时间戳，导致前端找不到任务结果
**解决方法**：
- 修改 CLI 保存结果时使用外部任务 ID
- 修改 API 支持通过 UUID 查找文件
### 坑 #5：Headless 模式无法采集数据
**问题描述**：Headless 模式下浏览器被网站检测为自动化工具
**解决方法**：
- 使用 `--headless=new` 替代旧的 `--headless`
- 添加反检测参数和脚本
- 设置完整的浏览器上下文
### 坑 #6：WebSocket 断开后无响应
**问题描述**：WebSocket 断开后前端显示模拟响应
**解决方法**：
- 添加自动重连机制
- 发送消息时检查连接状态
- 提供友好的错误提示
### 坑 #7：Headless 模式无法登录
**问题描述**：Headless 模式下用户看不到浏览器窗口，无法手动登录，导致任务执行失败
**解决方法**：
- 检测 cookies 是否存在，智能选择是否使用 headless
- Headless 模式下未登录时明确提示错误
- 先在非 headless 模式下登录保存 cookies，之后才能使用 headless
---
## 与 SOLO 协作的实用技巧
### 技巧 #1：让 AI 帮你"翻译"代码
不懂代码没关系，让 AI 用自然语言解释给你听。
**示例提问**：
- "这个文件是做什么的？"
- "这个函数的作用是什么？用简单的话解释"
- "整个项目的架构是什么样的？画个图给我看"
### 技巧 #2：区分"知识文档"和"规则文档"
- 知识文档：帮你理解项目，适合阅读学习
- 规则文档：告诉 AI 该怎么写代码，适合约束行为
### 技巧 #3：让 AI 帮你规划
当你不知道文档该怎么写时：
1. 给 AI 看几个参考案例
2. 告诉 AI 你的目标受众和目的
3. 让 AI 帮你设计框架
### 技巧 #4：用结构化的方式描述需求
当你想让 AI 帮你写东西时，不要只给模糊的概念，而是结构化地描述：
1. 背景信息（现在是什么状态）
2. 已有功能（已经有什么）
3. 痛点问题（遇到什么问题）
4. 目标需求（想做成什么样）
这样 AI 才能更准确地理解你的需求，产出更好的内容。
### 技巧 #5：用截图让开发过程更生动
不要只记录文字，适当在关键节点截图界面：
1. 重要问题总结后
2. 重大决策讨论时
3. 关键功能规划时
4. 问题解决完成后
5. 里程碑达成时
这样不仅记录了"做了什么"，还记录了"怎么做的"，让整个开发过程更真实、更有参考价值。
### 技巧 #6：善用压缩按钮，保证上下文宽裕
TRAE SOLO 有一个压缩按钮，这是一个非常重要的功能！
**为什么要压缩？**
- AI 的上下文窗口是有限的
- 随着对话越来越长，上下文会越来越满
- 上下文太满会影响 AI 的理解和响应质量
**什么时候压缩？**
- 完成一个阶段性任务后（比如设计好文档框架）
- 添加了重要的规则或规范后（比如更新了 AGENTS.md）
- 准备开始新的开发任务前
**压缩的好处**：
- 释放上下文空间
- AI 会保留关键信息，丢弃冗余内容
- 为后续开发留出足够的"呼吸空间"
保证上下文的宽裕是开发的重中之重！
### 技巧 #7：用脑暴 skill 让 AI 参与设计
当你需要设计一个新功能或界面时，不要自己闷头想：
1. 调用 brainstorming skill
2. 描述你的初步想法
3. 让 AI 提出多个方案供你选择
4. 结合各方案的优点做出最终决定
AI 可以帮你看到你没想到的角度，提出更专业的设计建议。
### 技巧 #8：给 AI 一个设计参考
当你对设计不满意时，不要只说"改好看点"，而是：
1. 找一个你喜欢的网站或设计规范
2. 把设计规范给 AI 看
3. 让 AI 按照这个规范来实现
这样 AI 就知道"好看"的具体标准是什么了。
### 技巧 #9：保存开发过程中的版本快照
在开发过程中，特别是涉及界面设计时：
1. 每个重要版本都要截图保存
2. 截图命名要规范（日期+描述）
3. 这样可以清晰展示设计的演变过程
这不仅是记录，也是展示你工作成果的最好方式！
### 技巧 #10：持续迭代优化
开发不是一蹴而就的，需要根据用户反馈持续优化：
1. 先实现核心功能
2. 让用户试用，收集反馈
3. 逐个修复问题，提升体验
4. 每个小改进都会让产品变得更好
用户体验的提升往往来自这些细节的打磨！
### 技巧 #11：让 AI 帮你探索新技术
当你需要集成新技术时：
1. 先让 AI 搜索相关文档和教程
2. 让 AI 帮你安装和测试
3. 先做个简单的 PoC（概念验证）
4. 等验证可行后再投入正式开发
这样可以避免在不确定的技术上浪费太多时间！
### 技巧 #12：善用调试日志定位问题
当遇到问题时，不要只看表面现象：
1. 添加详细的日志输出
2. 追踪数据流和执行路径
3. 定位问题的根本原因
4. 针对性地修复
日志是最好的调试工具！
### 技巧 #13：用自动化测试验证功能
完成功能后，用自动化测试验证：
1. 编写测试用例覆盖核心流程
2. 使用 Playwright 等工具自动化测试
3. 确保功能在不同场景下都能正常工作
4. 回归测试避免引入新问题
### 技巧 #14：流式 API 集成
集成 AI API 时，优先使用流式响应：
1. 用户体验更好（打字机效果）
2. 减少等待时间
3. 可以实时显示进度
4. 更像真实的对话
### 技巧 #15：Headless 模式需要反检测
Headless 模式下浏览器会暴露自动化特征：
1. 使用 `--headless=new` 替代旧的 `--headless`
2. 添加 `--disable-blink-features=AutomationControlled` 等参数
3. 注入脚本隐藏 `navigator.webdriver` 等特征
4. 设置完整的 locale、timezoneId、geolocation 等
### 技巧 #16：意图解析要覆盖多种表达方式
用户表达同一个意图可能有多种说法：
- "搜索xxx"
- "搜一下xxx"
- "帮我搜xxx"
- "抓取xxx"
意图解析要尽可能覆盖这些变体，才能提供良好的用户体验。
### 技巧 #17：Headless 模式需要登录状态
Headless 模式不是万能的，需要先有登录状态：
1. 首次使用时，先用非 headless 模式登录
2. 登录成功后，cookies 会被保存
3. 之后就可以使用 headless 模式了
4. 代码要检测 cookies 是否存在，智能选择模式
### 技巧 #18：响应式设计要考虑不同设备的交互方式
手机端和桌面端有完全不同的交互方式：
1. **布局差异**：手机端用纵向堆叠或标签页，桌面端用横向多栏
2. **触摸优化**：手机端按钮要更大（至少 44px），方便触摸操作
3. **功能简化**：手机端隐藏不适用的功能（如键盘快捷键提示）
4. **全屏利用**：手机端模态框可以占满整个屏幕
5. **独立滚动**：每个区域可以独立滚动，避免整体滚动
### 技巧 #19：移动端卡片布局要优化信息密度和触摸体验
移动端内容卡片的设计要点：
1. **横向布局**：封面图在左，信息在右，充分利用屏幕宽度
2. **信息精简**：只显示关键信息（标题、作者、数据指标），避免信息过载
3. **触摸友好**：整个卡片可点击，添加 active 状态反馈（缩放、背景色变化）
4. **标题截断**：使用 `-webkit-line-clamp` 限制标题行数，避免过长
5. **使用 matchMedia**：用 `window.matchMedia` 检测屏幕宽度，动态切换布局
---
## 成果展示
### 项目成果
- ✅ 完整的多平台爬虫工具（抖音 + 小红书）
- ✅ 五种核心采集模式
- ✅ 自动语音转录功能
- ✅ 深度搜索能力
- ✅ **全新的 Web 可视化界面**（本次升级）
- ✅ **Agent 聊天界面**（本次升级）
- ✅ **Headless 后台执行**（本次升级）
### 文档成果
- CODE_WIKI.md - 项目技术文档
- 本文档 - 开发过程记录
### 界面成果
从深色科技风格升级到温暖优雅的 Agent World 设计风格：
| 对比项 | 旧版本 | 新版本 |
|--------|--------|--------|
| 设计风格 | 深色科技感 | 温暖优雅 |
| 主色调 | 深灰/黑色 | 暖色米色 |
| 强调色 | 蓝色 | 橙棕色 |
| 字体 | 无衬线 | 衬线标题 + 无衬线正文 |
| 特点 | 科技感强 | 大量留白、极简主义 |
---
## 效果与总结
### 对我的改变
通过这次 1→2 升级，我实现了：
- 让同事能够通过可视化界面使用爬虫工具
- 不再需要命令行操作
- 界面美观、易用、专业
- 可以通过自然语言与工具交互
### 对 AI 协作的认知
与 SOLO 协作的关键在于：
1. **清晰表达需求**：结构化地描述你的目标
2. **善用工具**：brainstorming、webapp-testing 等 skill 很有用
3. **持续记录**：截图、文档让过程更有价值
4. **管理上下文**：及时压缩，保证 AI 的理解质量
5. **迭代优化**：根据反馈持续改进
### 给其他新手的建议
1. **不要怕问"傻"问题**：AI 不会嘲笑你，问得越具体越好
2. **让 AI 帮你规划**：不知道怎么做时，让 AI 给你方案
3. **保存过程记录**：截图、文档是展示成果的最好方式
4. **给 AI 参考**：有喜欢的风格就给 AI 看，让它照着做
5. **善用压缩功能**：保证上下文宽裕是开发的重中之重
6. **持续迭代**：不要追求一次完美，先做出来再优化
---
## 附录
### 开发日志
| 日期 | 事件 | 学到的技巧 |
|------|------|-----------|
| 2026-04-28 | 开始分析项目，生成 CODE_WIKI.md | 技巧 #1：让 AI 翻译代码 |
| 2026-04-28 | 理解文档区别 | 技巧 #2：区分知识文档和规则文档 |
| 2026-04-28 | 开始记录开发过程 | 技巧 #3：让 AI 帮你规划 |
| 2026-04-28 | 明确 1→2 升级目标，完善摘要和背景 | 技巧 #4：用结构化的方式描述需求 |
| 2026-04-28 | 添加截图记录规则到 AGENTS.md | 技巧 #5：用截图让开发过程更生动 |
| 2026-04-28 | 第一次使用压缩功能 | 技巧 #6：善用压缩按钮，保证上下文宽裕 |
| 2026-04-29 | 脑暴前端设计方案 | 技巧 #7：用脑暴 skill 让 AI 参与设计 |
| 2026-04-29 | 前端开发完成 | - |
| 2026-04-29 | 升级到 Agent World 设计规范 | 技巧 #8：给 AI 一个设计参考 |
| 2026-04-29 | 保存两个版本的截图 | 技巧 #9：保存开发过程中的版本快照 |
| 2026-04-30 | 修复状态持久化和界面问题 | 技巧 #10：持续迭代优化 |
| 2026-04-30 | 调整字体为思源宋体，精简界面 | - |
| 2026-04-30 | 发现 deepsearch 任务卡片内容为空的问题 | - |
| 2026-04-30 | 解决 deepsearch 任务显示问题 + Markdown 文案改进 | - |
| 2026-05-01 | 探索 Agent 集成方案，安装 Claude Agent SDK，完成设计文档 | 技巧 #11：让 AI 帮你探索新技术 |
| 2026-05-01 | ✅ 完成 Agent 前端集成！创建 /agent 页面、聊天窗口、可视化输出、WebSocket 服务器，集成 MiniMax API 和 taskManager！ | - |
| 2026-05-01 | ✅ 修复 MiniMax API 配置问题：修复 .env 加载路径、API 端点、模型名称 | 技巧 #12：善用调试日志定位问题 |
| 2026-05-01 | ✅ 使用 Playwright 自动化测试 Agent 页面，验证聊天、任务创建、深度搜索功能正常工作 | 技巧 #13：用自动化测试验证功能 |
| 2026-05-01 | ✅ 实现流式 Agent 响应：集成 Claude Agent SDK，实现打字机效果，支持实时流式显示 | 技巧 #14：流式 API 集成 |
| 2026-05-01 | ✅ 实现 Skill 执行功能：Agent 可直接调用 CLI 执行搜索、深度搜索等任务，实时推送进度 | - |
| 2026-05-01 | ✅ 端到端测试通过：Playwright 测试确认任务创建、执行、进度更新全流程正常 | - |
| 2026-05-01 | ✅ 服务启动成功：清理端口，后台启动 WebSocket 服务器（8080）和 Next.js（3000），提供预览链接 | - |
| 2026-05-02 | ✅ 修复任务结果关联问题：CLI 使用 UUID 作为结果文件名，前端可以正确查询任务结果 | - |
| 2026-05-02 | ✅ 实现 Headless 模式：任务在后台静默执行，不打开浏览器窗口 | 技巧 #15：Headless 模式需要反检测 |
| 2026-05-02 | ✅ 添加 WebSocket 自动重连机制：断开后自动尝试重连，发送消息时检查连接状态 | - |
| 2026-05-02 | ✅ 优化用户意图解析：扩展搜索关键词识别，简化关键词提取逻辑 | 技巧 #16：意图解析要覆盖多种表达方式 |
| 2026-05-03 | ✅ 持续优化 Headless 模式：增强反检测措施，添加更多浏览器上下文配置 | - |
| 2026-05-03 | ✅ 修复 T 区内容提取问题：完善 VisualOutput 和 ContentGrid 组件，支持内容显示，任务完成后自动切换视图 | - |
| 2026-05-03 | ✅ 修复 Headless 模式登录问题：智能检测 cookies 状态，添加调试日志，未登录时明确提示 | 技巧 #17：Headless 模式需要登录状态 |
| 2026-05-03 | ✅ 修复任务卡片内容显示和实时更新问题：修复爬虫保存 taskVideos 数据，增强回调机制实时推送，增强 API 兼容性，修复所有 TypeScript 错误 | - |
| 2026-05-03 | ✅ 改造 ContentModal 模态框为响应式：手机端全屏显示，使用标签页切换视频/数据/评论，优化触摸体验，隐藏键盘快捷键提示 | 技巧 #18：响应式设计要考虑不同设备的交互方式 |
| 2026-05-03 | ✅ 优化 ContentGrid 内容网格的移动端布局：手机端单列布局，卡片横向排列（封面图+信息），增大触摸区域，添加 active 状态反馈 | 技巧 #19：移动端卡片布局要优化信息密度和触摸体验 |
| 2026-05-04 | ✅ 完成 Agent 页面的完整手机端响应式适配：手机端上下堆叠+标签页切换，桌面端左右分栏，ChatWindow 固定底部输入框，VisualOutput 单列布局 | - |
| 2026-05-04 | ✅ 添加 ContentModal 手势交互：点击黑色背景关闭模态框，向上滑动切换下一个视频，向下滑动切换上一个视频，左右滑动切换标签页（视频/数据/评论） | - |
| 2026-05-04 | ✅ 修复 deepsearch 模式缺少主命令的问题：在 CLI 中添加 deepsearch 主命令，在 douyin.ts 中添加 doDeepSearch() 方法，添加 deepsearch 到类型定义，修复所有 TypeScript 错误 | - |
| 2026-05-04 | ✅ 修复文案显示问题：从文案.md 文件中提取视频文案而不是显示标题，支持解析 === 视频文案 === 部分，添加 extractTranscriptFromWenanMd() 函数，同时更新 DataPanel.tsx 显示逻辑 | - |
---
*本文档持续更新中...*
*最后更新：2026-05-04*
前期准备
- 安装 brainstorming skill：与 SOLO 一起脑暴项目方案。这是社区上爆火的一个叫 super power 的 skill，它会在真正开始做事情之前，跟你讨论好你要做的开发内容具体是什么，保证 Agent 在工作的时候往你想要的方向去实现。
- 增加 AGENTS.md 提示词：保证整个项目烹饪过程被完整记录
- 安装 webapp-testing skill：这个技能可以在 SOLO 左上角的技能仓库搜索到，它的作用就是可以自己操控浏览器来测试网页有哪些功能是不对的、不正常的，然后自己进行修改。
我还尝试了一下 SOLO 模式下的 CODE_WIKI，但是还没有摸清楚它的工作逻辑是什么，知道的朋友可以在下面评论区跟我分享
阶段2：前端开发（4/29-4/30）
脑暴设计方案
我的目标：设计一个可视化界面，让同事能方便查看对标视频的内容
我的做法：我使用 brainstorming skill 与 SOLO 一起脑暴，描述了我想到的核心功能（输入窗口、输出窗口、任务区分），然后我和 SOLO 最终通过 brainstorming 讨论出了整个前端的结构框架。
部分和 SOLO 交流后明确的内容
需要展示的数据和信息：
任务信息：任务名称、创建时间、任务状态（进行中/已完成/失败）、采集数量、平台类型
内容信息：视频/笔记封面、标题、作者、发布时间、点赞数、评论数、转发数、观看数
详情信息：视频文案、评论内容、作者主页信息
展示方式：
卡片式展示：每个任务和每个内容都用独立的卡片展示，视觉上清晰
列表式展示：任务列表用纵向列表，方便快速浏览
模态框详情：点击内容卡片时，弹出模态框显示完整详情
分页展示：内容列表支持分页，避免页面过长
分类和筛选：
平台分类：抖音、小红书分开显示
模式筛选：搜索模式、链接模式、创作者模式、关注模式、深度搜索模式
状态筛选：全部、进行中、已完成、失败
时间筛选：按创建时间排序
拓展规划：
预留了新平台接入的接口架构，后续可以方便添加微博、B站等平台
设计了可扩展的内容卡片组件，支持新增字段的展示
规划了数据导出功能（Excel、CSV格式）
预留了数据统计和图表展示的位置
开发完成后，我使用 web testing 技能让 SOLO 进行自动化测试，它用自己操控网页的能力在开发和测试过程中大大降低了人的工作量：
图：Agent 正在由操作中 - 自动测试网页功能
- 自动测试任务创建流程
- 自动测试筛选功能
- 自动测试内容查看功能
- 自动测试响应式布局
此外还有一些问题是我自己使用时才发现的。同样是通过网页元素选择器定和截图的方式给SOLO看，用自然语言跟它描述我遇到的问题，并修复：
- 任务数据格式不兼容：我发现旧任务文件没有 id 字段，导致前端无法正确读取。我用截图展示了数据结构和错误提示，让SOLO自己去定位和解决这个问题。SOLO最终在 task-manager.ts 中添加了任务迁移逻辑，自动将旧格式任务转换为新格式。
- API 返回 404：测试API请求时报错，我用浏览器控制台截图展示了错误信息，让SOLO分析。SOLO发现需要同时支持新旧两种格式的文件路径查找方式，通过让API更智能地查找文件，最后成功解决。
- 用户反馈的界面问题：有同事试用后提出了一些问题，包括：网站没有完整的 cookie 功能，使用起来非常不流畅；点击卡片后返回主页面，筛选模式没有保持；顶部有两个重复的导航栏；任务列表和筛选区域缺少视觉重心和分割线。我把这些问题一一用截图展示给SOLO，让它逐个修复。最后SOLO实现了状态持久化（使用 Zustand 的 persist 中间件）、修复了双导航栏问题、重新设计了 Hero 区域、改进了模式标签区域。
通过让SOLO自己操控网页和看截图定位和解决问题，大大提高了效率。
升级到 Agent World 设计规范
一开始，SOLO直接做出来的前端实在是太丑了，完全没法看。我当时就在想，别的大佬是怎么做的呢？可能是用了某些技能，或者是自己接了审美比较哇塞的模型，或者是提前就准备好了一份设计规范文档提前准备好了对应的图片和视频素材？
虽然说这个东西是给自己人用的内部工具，但是我感觉还是要做得稍微顺眼一点，不能太敷衍：
- 准备设计规范文档：在扣子有一个官方给龙虾的交流社区，我想参考它的整体感觉来制作这个界面，所以这次我并没有给 SOLO 使用网上那些比较火的open design 之类的设计技能，而是直接给SOLO 一个参考网页，写了一个设计规范文档（[AGENT_WORLD_DESIGN_GUIDE.md](file:///Users/peiminhuang/vibe_coding/w-hand-4-trae-solo/trae-train/AGENT_WORLD_DESIGN_GUIDE.md)）
- 让 SOLO 基于这个设计规范重新设计前端
- 实现暖色调米色背景、衬线标题、大量留白的设计风格
界面效果对比
旧版本界面（SOLO 直接开干得出的结果）
新版本界面（根据SOLO 自己研究出的Agent World 设计规范重构）
使用技巧：
多个任务并行处理
SOLO是可以同一个项目创建多个任务的！在之前的前端制作完成后还会有一些bug，我在让它修bug的时候，就开了另一个任务，让他来分析网站，写这个设计规范文档。只要是任务涉及的文件内容没有耦合，多个任务都可以让它同时并行地去跑，可以节省你的时间，不必等一个结束，任务结束了，再去安排下一个。
多信息源让 SOLO 更懂你
单纯只是提供一条Agent World 网页链接并不能让 SOLO 获得网页的全部信息，后续我还把网页的全部内容保存到本地给 SOLO 并且让他自己截图进行图片分析（没图片时他把网页的点缀色认成了蓝色），这样他对整个要参考的网站才有了比较好的理解。所以在使用 SOLO 时，完整多源的信息可能是重要的。
阶段3：Agent 集成（5/1-5/2）
原本以为只需要做一个前端界面展示搜索出来的数据文案和视频就好了，但是在实际中发现问题。之前一直用的是 TRAE IDE 本身就是一个 Agent，跟它对话就能使用我设计好的 skill，但制作了前端界面后，想让其他人直接使用，还得再集成一个 Agent。
作为一名自媒体人，拼装是我基因里的技能。作为一名超级拼装师，我将在此时发动我的超级拼装术！
把三样东西拼装在一起：
- 已有的 skill：搜索技能（搜索、深度搜索等）
- 新做的前端：可视化界面
- Claude Agent SDK：AI 能力（使用的模型是 MiniMax 2.7）
拼装结果
在原有展示搜索结果的界面中增加了通过自然语言对话创建任务的能力，而且还能实时看到采集的进度和结果，对已经产出的内容和 ai 一起分析，后续还能整理成知识库
绝大部分项目 github 上完全有更加完善的丰富的开源项目，如果想要更良好的体验，或许完全没有必要从零开始手搓，只要找一个已经有的开源项目，在针对自己的需求进行修改会有更好的体验。甚至可以让 solo 自己打开网页自己找你要的原始项目
完成 Agent 前端集成
我做了什么：
我和SOLO一起，给这个工具添加了一个聊天窗口界面。你可以像跟朋友聊天一样，用自然语言告诉它你想要做什么，比如"帮我搜一下抖音上关于宠物的视频"，它就会自动帮你创建任务并执行。
界面设计得很清晰，左边是聊天窗口，你可以在那里输入指令；右边是展示区域，可以看到任务列表、任务的详细信息，还有搜索到的视频内容。
聊天窗口功能也很完善，你发的消息和Agent回复的消息会用不同的样式区分开。Agent在工作的时候会显示对应的状态，让你知道它在工作。而且，就算你关掉网页再打开，之前的聊天记录还会在，不会丢失。
在做的过程中，也遇到了一些小问题：
一开始，有时候网络连接会中断，这时候Agent就不会正常回复了。我和SOLO一起解决了这个问题，现在如果连接中断了，它会自动尝试重新连接，最多会试5次，每次间隔2秒钟，这样就算偶尔网络不稳定也不用担心了。
还有一次，我说"帮我搜一下桃黑黑"，结果Agent以为我只是在跟它聊天，没有真正去创建搜索任务。后来我们改进了一下，让Agent能更好地理解你说的话，现在不管你说"搜索"、“搜一下"还是"帮我搜”，它都知道你是要创建任务了。
Agent 深度搜索演示
显示采摘结果（单次搜索出的视频默认 100 个）
详情页（采集评论的数量、视频点赞评论收藏转发的数量要求等都可以和 ai 交互来设置）
阶段4：优化迭代（5/3-5/4）
继续优化和改进
我做了什么：
虽然工具已经可以用了，但我还是想让它变得更好用。我和SOLO一起，又做了很多改进：
一开始，右边的展示区域只能看到任务列表，看不到搜索到的具体内容。后来我们改进了一下，现在你可以在任务列表和搜索内容之间切换，想看哪个就看哪个。点击内容卡片，还能看到更详细的信息。
还有一次，任务在后台执行的时候，有时候会出问题，因为之前没有登录过。现在我们也解决了这个问题，如果是第一次使用，会让你先登录一下，登录成功后，下次就可以直接在后台执行任务了。
另外，我还发现有时候点击任务卡片后，搜索到的内容不会立刻显示出来，而且任务的进度也不会实时更新。现在这些问题都解决了，你可以实时看到任务执行的进度，搜索到的内容也会立刻显示出来。
最后，我还考虑到了用手机的同事。之前的界面在手机上看起来不太方便，现在我们做了优化，在手机上也能很好地使用了。聊天窗口在上面，展示区域在下面，还可以切换标签页，用起来很顺手。
遇到的问题和解决：
在优化的过程中，也遇到了不少问题，但都一一解决了：
- 一开始内容展示不太顺畅，现在改进后可以流畅切换查看
- 后台任务执行有时候会失败，现在加入了登录检测，确保任务能正常执行
- 任务进度不会实时更新，现在你可以立刻看到任务的执行情况
- 手机上使用不太方便，现在做了专门的适配
现在这个工具已经非常完善了！不管是在电脑上还是手机上，都能很好地使用。同事们用了之后都觉得很方便，大大提高了工作效率！
更多优化：
在手机上使用的时候，我还想让操作更简单一些。现在你可以用手指滑动来操作了：上下滑动可以切换不同的视频，左右滑动可以切换查看不同的信息（视频、数据、评论）。点击黑色的背景区域，还可以直接退出详情页，很方便。
最后，我还发现视频详情里显示的是视频标题，但我更想看的是视频里的文字内容。现在这个问题也解决了，你可以直接看到视频里的文字内容，不用再自己去看视频听了。
效果与总结
| 指标 | 之前 | 之后 |
|---|---|---|
| 选题准备时间 | 2-3天甚至一周 | 1 小时搞定，同一个工作台内实现搜集和整理。并且可以 24 小时不间断监测和搜集信息 |
| 团队使用 | 只有我自己能用 | 同事打开网页就能用，下班地铁上还可以鞭策他们继续干活 |
想要这个项目的，弹幕扣 666
来，小助理统计一下人数
SOLO 和我在本次工作中总结的适合纯小白的协作技巧
技巧1：巧用 AGENTS.md
规则文档（如 AGENTS.md）告诉 AI 该怎么写代码，适合约束行为。把你想让 AI 永远不忘的事情、永远记得要去做的事情写进去，但是要记得，内容别太多，它会占用你整个 Agent 的上下文。如果你有一个整个工作流要 AI 永远都记得去做，那你应该把你的工作流写在一个文档里，然后只需要在 AGENTS.md 里面写，需要做这件事情的时候再去看这个文档就好了。
技巧2：brainstorming！让 AI 帮你规划
不知道文档该怎么写时，可以给 SOLO 看几个参考案例、网址、文档、图片，甚至用 SOLO 自己的代码能力去找到合适方案，然后使用 brainstorming 技能，跟他一起讨论你的终极目标，调用 brainstorming skill，描述你的初步想法，让 AI 提出多个方案供你选择，最后结合各方案的优点做出最终决定，AI 可以帮你看到你没想到的角度，提出更专业的设计建议。
技巧3：用截图让开发过程更生动
不要只记录文字，适当在关键节点截图界面，比如重要问题总结后、重大决策讨论时、关键功能规划时、问题解决完成后、里程碑达成时，这样不仅记录了"做了什么"，还记录了"怎么做的"，让整个开发过程更真实、更有参考价值。相信这一点随着模型的迭代和 agent 能力的升级，在以后会越来越重要，因为图片往往承载着更多的信息。
技巧3+：善用截图让 AI 识别内容
通过截图的方式让 Agent 来识别你做的内容，是一个很重要的技巧！之前看过一个文章分享，是在给 Agent 提供图片识别能力的前后，一个项目的开发效率从 30% 直接提升到 70%。
具体数字忘了，反正就是提升巨大的意思
你可以让 Agent 自己截图，或者你手动截图后发给它，让它理解界面变化、检查 bug、识别 UI 问题等。
技巧4：善用压缩功能，保证上下文宽裕
SOLO 的压缩功能非常重要，因为 SOLO 的上下文窗口是有限的，随着对话越来越长，上下文会越来越满，上下文太满会影响 AI 的理解和响应质量。你可以在完成一个阶段性任务后（比如设计好文档框架）、添加了重要的规则或规范后（比如更新了 AGENTS.md）、准备开始新的开发任务前进行压缩，这样可以释放上下文空间，AI 会保留关键信息，丢弃冗余内容，为后续开发留出足够的"呼吸空间"，保证上下文宽裕是开发的重中之重！
技巧5：用自动化测试验证功能
完成功能后，用自动化测试验证，编写测试用例覆盖核心流程，使用 Playwright 等工具自动化测试，先让 SOLO 自检把显性的问题先解决。后续还可以设计详细的测试方案，让 SOLO 自己完成更复杂的任务。
技巧6：巧用 /spec 做长难度任务规划
在你要做长难度任务的时候，提前规划好要做的事情，然后用 /spec 功能，它会拆分任务并且生成一个 checklist，只有完成了任务才会 check，保证你的文档里的每样东西都能真正落实，这样可以避免任务太多太杂，最后忘记做某些事情，也能确保每个环节都真正完成。
技巧7：用 /plan 规划中等任务
如果是中等任务可以使用 /plan，也可以很好地避免 AI 在还不完全了解你的情况下一通猛干，最后发现要的东西并不是你想要的，先用 /plan 让 AI 理解你的需求，给出一个计划，你确认没问题后再开始执行，这样可以大大减少返工的概率。
技巧8：并行处理多个任务
SOLO 是可以同一个项目创建多个任务的，对于没有耦合、没有相关性的功能，可以让它们并行地去跑，这样可以大大提高效率，节省时间。比如在之前的前端制作完成后还会有一些 bug，我在让它修 bug 的时候，就开了另一个任务，让他来分析网站，写这个设计规范文档，不必等一个结束，再去安排下一个。
本文档持续更新中…
最后更新：2026-05-05