【Code With SOLO】用 SOLO 搭建一个 AI 驱动的本地知识剪藏与智能整理系统

1.摘要:

用 TRAE SOLO 从零搭建了一套本地知识剪藏与智能整理系统:通过浏览器 Web Clipper 一键剪藏网页,后端自动调用大模型对文章进行分类和摘要,前端以思源笔记风格的桌面应用呈现笔记树、文章卡片和 Markdown 原文阅读。实现了"剪藏 → AI 分类摘要 → 本地归档管理"的完整闭环,让碎片化信息收集变成结构化知识沉淀。

2. 背景

我是一名程序员,日常需要大量阅读技术文章、行业资讯和学术论文。过去的工作流是:看到好文章 → 手动复制到笔记软件 → 自己打标签 → 事后写摘要,整个过程耗时且容易拖延,导致收藏夹越积越厚却几乎不会回顾。我希望有一个工具能让我一键剪藏,自动完成分类和摘要,所有数据保存在本地,不依赖任何云服务。

过程实践

任务拆解

整个系统拆分为三个核心模块:

1. 后端服务:FastAPI 实现,为了对接 web-clipper , 这个项目兼容思源笔记 API,可以使用网页插件 web-cliiper 一键剪藏到本地

2. 前端桌面应用:Electron + React + Tailwind CSS,笔记本侧边栏 + 文章卡片列表 + Markdown 原文阅读

3. 浏览器剪藏插件:基于开源 Web Clipper 定制 SiYuan Client,一键剪藏网页为 Markdown 并上传图片

用了SOLO哪些能力

  1. 网页阅读: 我先给出 web-clipper 的 gihub 地址给 solo, 让solo 阅读代码, 帮我适配了 web-clipper 剪藏的接口,
  2. 自动的架构规划: 在使用 solo 的过程中我没有告诉 solo 哪个地方需要存放什么类型的代码, 我只是告诉他后端使用 uv, 给了一个 src 文件夹, 和 front 文件夹, 他就会自己在里面创建项目级别的架构, solo 默认使用了比较好的技术栈 fastapi 很让我惊喜
  3. 前端开发: 我告诉 trae 使用 react+election, trae 通过理解它自己生成的后端接口自动的完成了对于功能的适配(笔记本侧边栏、文章列表、文章详情、Markdown 渲染器、队列状态面板),Tailwind CSS 样式一气呵成
  4. 集成调试: 最终生成完之后,运行还是会有一些报错, 我直接告诉 trae报错日志, 它自动修改好了

关键Prompt/操作过程

  1. 首先我得先规划好项目结构, 比如 src, front 告诉 solo 哪个地方的代码是存在哪里
  2. 在 src 的路径下我又建立了一个 feature 模板, 每个文件夹下有 service, router,schema, 如果让 trae 按照这个模板开发,代码是不会不可控的, 把每个功能点都拆分出来
  3. 对于每一步操作我都会告诉他在哪个路径实现, 详细的需求是什么,需要使用哪些技术栈
  4. 对于前端我 clone 了一个 github 的类似的项目的 web 代码, 让他参考实现, (但是效果不太好…

中间踩到的坑

我发现首先就得告诉 solo 使用什么 python, 比如我是用的 uv, 他总是调用我系统默认的 python

成果展示

仓库地址

https://gitee.com/goo-goo-gooQWQ/traechallenge.git

图片展示

效果与总结

提效效果

剪藏效率:从手动复制粘贴 3-5 分钟/篇 → 一键剪藏 5 秒/篇

分类摘要:从手动打标签写摘要 5-10 分钟/篇 → AI 自动完成 10-20 秒/篇

整体效率提升约 20-30 倍,且分类一致性和摘要质量更稳定

SOLO 在流程中的作用

SOLO 帮我完成了 80% 以上的代码编写,从 API 设计到前端组件到集成调试

最有价值的是让 SOLO 理解"兼容思源笔记 API"这个需求后,自动生成了完整的接口规范和实现,省去了查阅思源 API 文档的时间 前端 UI 组件(侧边栏、卡片列表、详情页、Markdown 渲染器)全部由 SOLO 一次性生成,样式和交互逻辑都很完善

1 个赞

思源笔记那个 Web Clipper 的接口你是怎么对接的,我最近搞插件也卡在这个点上了。

我开源了, 你直接看代码就行, 都是 ai 做的