TRAE SOLO实战：一个所见即所得的笔记软体

1.先来唠唠

前段时间TRAE SOLO发布了正式版本，刚好有个几年前自己开发的笔记软体github.com/coolerwu/Fi... ，作为后端程序猿，前端一窍不通，界面属实有点丑，用solo来优化完善一下；

2.实施流程

列出自己需要实现的目标或者功能点；
打开SOLO Coder的Plan模式，这样Trae就能与你进行对齐想法，这一步至关重要；
- 如果你只是给AI一句话，例如"给我实现一个编辑器"，那么AI是无法理解你的期望意图，可能会添加很多你不需要的功能；
- 如何用好AI，就需要参考常用的AI编程sop规范，例如openspec、spec-kit等规范，总结下来就是Plan、Review、Action，在这就不过多赘述了；
- 新入坑的小白要了解AI编程sop规范的难度系数，如手撕红黑树一样的难，而Trae SOLO的Plan，实现了类似"AI编程sop规范"的流程，算是解决第一步老大难；
开始实操，与Trae SOLO的Plan，我给到的提示词是：目前所见即所得的编辑，样式比较丑，参考typroa；需要你给出plan、review、action；
- 确认计划方案没问题，就可以点执行，如果有疑问或者不对的地方可以再次与AI沟通或者直接编辑Plan.md；
- 如果想让AI自己干活几十分钟，可以加一点特殊的提示词："持续推进10次，直到所有问题解决"，PS：你的TOKEN数量要足够；
运行过程中，还是免不了出点小问题

随便贴了一个我在启动时的问题，右键给到Trae SOLO；
给出了操作建议，根据提示操作就能解决了，是一个非常靠谱的铁铁，基本解放大脑了；

shell 复制代码

$ npm install                    
npm warn deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm warn deprecated electron-osx-sign@0.6.0: Please use @electron/osx-sign moving forward. Be aware the API is slightly different
npm error code 1
npm error path /Users/xxxxx/NodeProjects/FireFire/node_modules/electron
npm error command failed
npm error command sh -c node install.js
npm error RequestError: Hostname/IP does not match certificate's altnames: Host: npm.taobao.org. is not in the cert's altnames: DNS:*.tbcdn.cn, DNS:*.1688.com, DNS:*.3c.tmall.com, DNS:*.alibaba.com, DNS:*.alicdn.com, DNS:*.aliexpress.com, DNS:*.alikunlun.com, DNS:*.aliqin.tmall.com, DNS:*.alitrip.com, DNS:*.aliyun.com, DNS:*.cainiao.com, DNS:*.cainiao.com.cn, DNS:*.chi.taobao.com, DNS:*.chi.tmall.com, DNS:*.china.taobao.com, DNS:*.cloudvideocdn.taobao.com, DNS:*.cmos.greencompute.org, DNS:*.dingtalk.com, DNS:*.django.t.taobao.com, DNS:*.etao.com, DNS:*.feizhu.cn, DNS:*.feizhu.com, DNS:*.fliggy.com, DNS:*.fliggy.hk, DNS:*.food.tmall.com, DNS:*.jia.taobao.com, DNS:*.jia.tmall.com, DNS:*.ju.taobao.com, DNS:*.juhuasuan.com, DNS:*.lw.aliimg.com, DNS:*.m.1688.com, DNS:*.m.alibaba.com, DNS:*.m.alitrip.com, DNS:*.m.cainiao.com, DNS:*.m.etao.com, DNS:*.m.taobao.com, DNS:*.m.taopiaopiao.com, DNS:*.m.tmall.com, DNS:*.m.tmall.hk, DNS:*.mei.com, DNS:*.mobgslb.tbcache.com, DNS:*.taobao.com, DNS:*.taopiaopiao.com, DNS:*.tbcache.com, DNS:*.tmall.com, DNS:*.tmall.hk, DNS:*.trip.taobao.com, DNS:*.xiami.com, DNS:1688.com, DNS:alibaba.com, DNS:alicdn.com, DNS:aliexpress.com, DNS:alikunlun.com, DNS:alitrip.com, DNS:aliyun.com, DNS:cainiao.com, DNS:cainiao.com.cn, DNS:cloudvideocdn.taobao.com, DNS:cmos.greencompute.org, DNS:dingtalk.com, DNS:etao.com, DNS:feizhu.cn, DNS:feizhu.com, DNS:fliggy.com, DNS:fliggy.hk, DNS:juhuasuan.com, DNS:m.intl.taobao.com, DNS:mei.com, DNS:taobao.com, DNS:taopiaopiao.com, DNS:tmall.com, DNS:tmall.hk, DNS:xiami.com, DNS:tbcdn.cn
npm error     at ClientRequest.<anonymous> (/Users/xxxxx/NodeProjects/FireFire/node_modules/got/source/request-as-event-emitter.js:178:14)
npm error     at Object.onceWrapper (node:events:632:26)
npm error     at ClientRequest.emit (node:events:529:35)
npm error     at origin.emit (/Users/xxxxx/NodeProjects/FireFire/node_modules/@szmarczak/http-timer/source/index.js:37:11)
npm error     at TLSSocket.socketErrorListener (node:_http_client:501:9)
npm error     at TLSSocket.emit (node:events:517:28)
npm error     at emitErrorNT (node:internal/streams/destroy:151:8)
npm error     at emitErrorCloseNT (node:internal/streams/destroy:116:3)
npm error     at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
npm error A complete log of this run can be found in: /Users/xxxxx/.npm/_logs/2025-11-20T16_07_26_954Z-debug-0.log

3.此次优化过程中， TRAE SOLO 在架构中的具体角色定位

4.优化过程中，与TRAE SOLO探讨的功能

graph TB subgraph "用户界面层 (UI Layer)" UI[用户界面] UI --> Toolbar[工具栏] UI --> EditorView[编辑器视图] UI --> PreviewPane[预览面板] UI --> FileTree[文件树] EditorView --> Monaco[Monaco Editor] PreviewPane --> VirtualDOM[Virtual DOM] end subgraph "前端渲染引擎 (Rendering Engine)" RenderPipeline[渲染管道] RenderPipeline --> MDParser[Markdown Parser
markdown-it/remark] RenderPipeline --> HTMLGen[HTML Generator] RenderPipeline --> StyleEngine[样式引擎
主题/高亮] RenderPipeline --> MathRenderer[数学公式
KaTeX/MathJax] RenderPipeline --> DiagramRenderer[图表渲染
Mermaid/PlantUML] HTMLGen --> SyncScroll[同步滚动控制器] SyncScroll --> PreviewPane end subgraph "编辑器核心 (Editor Core)" EditorCore[编辑器内核] EditorCore --> DocModel[文档模型
AST/Token Tree] EditorCore --> CursorMgr[光标管理器] EditorCore --> SelectionMgr[选择管理器] EditorCore --> CommandMgr[命令管理器] EditorCore --> UndoRedo[撤销/重做栈] DocModel --> CRDT[CRDT
协同编辑] CommandMgr --> Shortcuts[快捷键系统] EditorCore --> EventBus[事件总线] EventBus --> ChangeDetector[变更检测器] ChangeDetector --> Debounce[防抖处理] Debounce --> RenderPipeline end subgraph "插件系统 (Plugin System)" PluginAPI[插件 API] PluginAPI --> PluginLoader[插件加载器] PluginAPI --> PluginRegistry[插件注册表] PluginAPI --> Hooks[生命周期钩子] Plugins[插件集合] Plugins --> AutoComplete[自动补全] Plugins --> Snippets[代码片段] Plugins --> Linter[语法检查] Plugins --> ImageUpload[图片上传] PluginRegistry --> EditorCore Hooks --> EventBus end subgraph "存储层 (Storage Layer)" StorageAdapter[存储适配器] StorageAdapter --> LocalStorage[本地存储] StorageAdapter --> CloudSync[云同步] LocalStorage --> IndexedDB[IndexedDB
文档数据] LocalStorage --> FileSystem[File System API
附件/图片] LocalStorage --> LocalCache[缓存层
LRU Cache] CloudSync --> WebDAV[WebDAV] CloudSync --> GitBackend[Git 后端] CloudSync --> S3[S3 兼容存储] StorageAdapter --> Encryption[加密模块
AES-256] StorageAdapter --> Compression[压缩模块
LZ4/Gzip] end subgraph "服务层 (Service Layer)" Services[核心服务] Services --> SearchIndex[搜索索引
FlexSearch] Services --> ExportService[导出服务
PDF/Word/HTML] Services --> VersionControl[版本控制] Services --> ConflictResolver[冲突解决器] SearchIndex --> DocModel VersionControl --> StorageAdapter end subgraph "TRAE Solo 集成层" TRAE[TRAE Solo] TRAE -.->|代码生成| PluginAPI TRAE -.->|性能监控| RenderPipeline TRAE -.->|测试自动化| EditorCore TRAE -.->|构建优化| Build[构建系统] Build --> Webpack[Webpack/Vite] Build --> CodeSplit[代码分割] Build --> TreeShaking[Tree Shaking] end %% 主要数据流 Monaco ==>|输入文本| EditorCore EditorCore ==>|文档变更| EventBus EventBus ==>|触发渲染| RenderPipeline RenderPipeline ==>|生成HTML| PreviewPane EditorCore ==>|保存| StorageAdapter StorageAdapter ==>|读取| EditorCore %% 样式定义 classDef uiClass fill:#e3f2fd,stroke:#1976d2,stroke-width:2px classDef coreClass fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px classDef storageClass fill:#e8f5e9,stroke:#388e3c,stroke-width:2px classDef renderClass fill:#fff3e0,stroke:#f57c00,stroke-width:2px classDef traeClass fill:#ffebee,stroke:#c62828,stroke-width:2px,stroke-dasharray: 5 5 class UI,Toolbar,EditorView,PreviewPane,FileTree,Monaco,VirtualDOM uiClass class EditorCore,DocModel,CursorMgr,SelectionMgr,CommandMgr,UndoRedo,CRDT,EventBus,ChangeDetector coreClass class StorageAdapter,LocalStorage,CloudSync,IndexedDB,FileSystem,LocalCache,WebDAV,GitBackend,S3 storageClass class RenderPipeline,MDParser,HTMLGen,StyleEngine,MathRenderer,DiagramRenderer renderClass class TRAE,Build,Webpack traeClass

solo也给到了我功能建设的优化方案，简单展示下

1. 用户界面层

Monaco Editor：微软开源的代码编辑器，提供语法高亮、智能提示

Virtual DOM：优化预览渲染性能，减少重绘

2. 前端渲染引擎

渲染管道：将 Markdown 转换为富文本的核心流程

同步滚动：确保编辑区和预览区位置对应

扩展渲染器：支持数学公式、流程图等特殊内容

3. 编辑器核心

文档模型：维护文档的结构化表示（AST）

CRDT：支持多人实时协作编辑

事件总线：解耦各模块，统一事件处理

4. 插件系统

生命周期钩子：允许插件介入编辑流程

插件隔离：沙箱机制保证安全性

5. 存储层

多端存储：本地为主，云端同步

增量同步：只传输变更部分，节省带宽

端到端加密：保护用户隐私

6. TRAE Solo 集成

虚线表示开发时依赖，不影响运行时

负责代码质量、性能优化、自动化测试

这个架构设计确保了：

高性能：通过虚拟DOM和防抖优化渲染

可扩展：插件系统支持功能扩展

数据安全：本地优先，加密存储

开发效率：TRAE Solo 自动化开发流程

5.最终运行

6.总结一下小心得

最近国内外LLM频繁更新，虽说被替代的危机感增加，但AI用好就是把利刃，我们可以把这类AI当资深结对程序员：给方向、给上下文、让它端到端执行并自证；
另外与Trae SOLO交互时，应该给出一个更完整的prompt，而不是几句话，让AI揣度意思，容易造成我们与AI的battle，以下是我自己使用Claude、Codex、Trae时总结的一点小依据，供大家参考参考：

给上下文而非指令碎片：目录结构、关键文件、依赖版本、环境限制

明确输出格式与维度：是否需要 plan/review/action、是否要代码引用、是否需要可运行验证

约束与边界先行：禁止写入、仅做只读调研、或允许修改；是否需要遵循现有风格与库

提前给验收标准：比如"对齐 Typora 视觉"、"安装无证书错误"、"所有任务以 todo 跟踪并完成"

输出要结构化：计划、评审、行动、验证分层清晰

输出要可执行：具体文件路径与行号、改动粒度、命令行指令、验证方法

输出要可回滚：只改必要处，避免大范围重构；优先样式与配置微调

输出要自检：完成后用测试或可视预览验证，不留"未验证"工作

上线生产环境之前，一定要进行代码CR，因为AI容易修改其他文件导致整个项目崩溃，这一定要仔细仔细再仔细，不要产生生产事故，而溜溜球了；