上周二，我需要构建一个实时的协作文档编辑器——类似于轻量版 Google Docs——包含操作转换、撤销/重做和实时光标功能。我需要在 v0（来自 Vercel）和 Cline（开源 VS Code 扩展）之间做出选择。我花了 6 个小时分别使用这两个工具，构建了相同的功能集。以下是我在痛苦细节中学到的东西。
概述：它们是什么？
v0 是 Vercel 的生成式 UI 工具。你给它一个提示，它会生成一个包含 Tailwind CSS、shadcn/ui 的 React 组件，通常还包括完整的页面布局。它是云托管的，无需本地设置。可以把它看作前端的“设计到代码”。
Cline 是一个开源 VS Code 扩展，它与 LLM（Claude、GPT-4 等）集成，直接编辑你的代码库。它读取你的项目上下文，创建/修改文件，运行终端命令，甚至可以调试。它就像一个住在你编辑器里的 AI 结对程序员。
| 功能 | v0 | Cline |
|---|---|---|
| 定价 | 免费层：200 积分/月（1 积分 = 1 次生成）。专业版：20 美元/月 1000 积分。企业版：自定义。 | 免费且开源。你需要支付自己的 LLM API 密钥费用（Claude Sonnet 约 3 美元/百万 token，GPT-4o 约 5 美元/百万 token）。自托管。 |
| 主要用途 | 前端 UI 生成（React、Next.js、Tailwind） | 全栈代码编辑、调试、终端命令、文件操作 |
| 输出风格 | 单文件组件或页面（一次性生成） | 多文件修改、基于差异的更改、迭代编辑 |
| 上下文感知 | 仅基于提示（无法访问你的代码库） | 完整的项目上下文（读取你的文件，了解你的导入、类型等） |
| 支持的框架 | React、Next.js、Tailwind、shadcn/ui | 任何框架（Python、Rust、Go、JS/TS 等） |
| 实时协作 | 否 | 否（但可以运行 git 的终端命令） |
| 错误处理 | 显示预览，你可以复制/粘贴代码 | 可以通过重新运行测试或读取错误日志自动修复错误 |
| 延迟 | 每次生成约 5-15 秒（服务器端） | 取决于 LLM 提供商：Claude 约 3-8 秒，GPT-4o 约 5-12 秒 |
| 本地文件访问 | 否（在浏览器中运行） | 完整的本地文件系统访问（读/写/执行） |
| 版本控制 | 手动复制粘贴 | 自动 git 提交（可选） |
| 最适合 | 快速原型设计、落地页、设计探索 | 复杂重构、调试、多步骤工作流 |
场景：构建协作编辑器
使用 v0
我这样开始：“构建一个用于协作文档编辑器的 React 组件，包含操作转换、撤销/重做和实时光标。使用 Tailwind、shadcn/ui 和 Next.js App Router。”
v0 返回了一个单一的 CollaborativeEditor.tsx 文件（约 400 行）。它使用 useState 处理本地状态，使用 useEffect 处理模拟 WebSocket，以及一个包含 applyOperation 和 transform 函数的基本 OT 实现。UI 看起来简洁——shadcn 的 Textarea 带有光标覆盖层。
有效的地方：
- 初始 UI 很精致。光标位置在 textarea 上渲染为彩色 div。撤销/重做堆栈实现为简单的快照数组。
- Tailwind 类结构良好。它使用
@apply处理重复模式。 - 模拟 WebSocket 代码是实际集成的一个良好起点。
失败的地方：
- OT 实现很天真。它只处理单个位置的插入/删除，而不是范围。当我用并发编辑测试时，丢失了字符。
- 没有 WebSocket 重连的错误处理。模拟在 5 秒后关闭。
- 组件是自包含的——没有关注点分离。OT 逻辑与 UI 状态混合在一起。
- 我无法迭代。v0 没有“编辑此文件”模式。每个新提示都会生成一个新组件。我必须手动合并更改。
- 代码无法直接编译。它导入了
crypto.randomUUID()，这在 Next.js 服务器组件中不存在。我必须修复 3 个导入错误。 - 没有测试。v0 从不生成测试文件。
真正的缺陷： v0 是一个一次性工具。对于像 OT 这样的复杂功能，你需要迭代优化。v0 迫使你复制粘贴并手动集成。生成的代码看起来不错，但逻辑浅薄。
使用 Cline
我给了 Cline 同样的任务，但我已经设置好了一个 Next.js 项目。我打开 VS Code，按下 Cmd+Shift+P，选择“Cline: Start New Task”，然后说：“我需要一个协作文档编辑器。创建一个新文件夹 lib/editor/，包含 OT、撤销/重做和光标跟踪的文件。然后创建一个使用它们的 React 组件。使用 TypeScript，严格类型。用 Vitest 添加单元测试。”
Cline 读取了我的 package.json，看到我安装了 vitest，然后开始工作。
Cline 逐步完成的工作：
- 创建了
lib/editor/types.ts，包含Op、Cursor、Document接口。 - 创建了
lib/editor/ot.ts，包含transform、compose、apply函数。它使用了标准的 OT 算法（PJ97 风格）。 - 创建了
lib/editor/undo.ts，包含一个逆操作堆栈。 - 创建了
lib/editor/cu...
