第5篇：多工具协同 — Claude Code + OpenCode + Figma + Cursor

前置知识：阅读第1-4篇后食用效果更佳
学习时长：约 15 分钟

你将学到什么

• 理解 Claude Code 的定位：专注编码上下文
• 掌握 OpenCode 的定位：专注知识库管理
• 学会用 Figma + Claude Code 搭建设计到代码的流水线
• 了解 Cursor 与 Claude Code 的差异和适用场景
• 搭建完整的 AI 辅助开发流水线

---

1. AI 编程工具生态

工具地图

当前主流的 AI 编程工具可以分为三类：

类型	代表工具	核心定位
CLI 编码助手	Claude Code, OpenCode	代码生成、重构、调试
IDE 集成助手	Cursor, Copilot, Continue	IDE 内实时补全
设计到代码	Figma + AI	设计稿转代码
知识库管理	Obsidian, Notion + AI	知识沉淀与检索

各工具的优势

工具	最擅长	局限
Claude Code	深度代码理解、多工具编排	需要上下文上下文
OpenCode	终端原生、多模型、知识库	代码编辑能力弱
Cursor	IDE 实时补全、小改动	上下文有限
Figma	UI 设计、团队协作	不懂代码

分工原则

不要用一把刀做所有事。 让每个工具做它最擅长的事：

Figma (设计) → Claude Code (代码) → OpenCode (知识库) → Claude Code (提交)

---

2. Claude Code + OpenCode：编码与知识库的分工

各自定位

维度	Claude Code	OpenCode
启动方式	claude 在项目目录	opencode 在项目目录
上下文	强（完整项目）	中等
知识库	通过 KB_WORKFLOW	AGENTS.md
代码编辑	强（Edit 工具）	弱
多模型	Anthropic Only	75+ 提供商
成本	按 API 付费	开源免费

实际分工

Claude Code 负责：
- 代码生成、重构、调试
- 复杂的多文件修改
- Skill 和工作流编排
- Git 操作和提交

OpenCode 负责：
- 快速查询知识库
- 跨项目的代码片段收集
- 多 LLM 模型对比测试
- 轻量级终端操作

协作示例

场景：实现一个新功能

1. 在 OpenCode 中查询参考

   opencode
   > 搜索：协程 Flow 处理网络请求的示例
   

   找到之前的笔记，找到可用代码片段

2. 切换到 Claude Code 实现

   claude
   > 帮我实现这个功能，基于以下参考代码...
   

   Claude Code 读取参考，理解上下文，写出完整代码

3. 回到 OpenCode 保存新知识

   opencode
   > 保存到知识库：kotlin/050-new-feature-flow.md
   

---

3. Figma + Claude Code：设计到代码的流水线

工作流

Figma 设计稿
    ↓
导出设计标注 / 截图
    ↓
Claude Code 生成代码
    ↓
验证 + 提交

步骤详解

Step 1：在 Figma 中完成设计

• 导出关键页面为 PNG
• 标注尺寸、颜色、间距
• 或直接导出 Figma 的开发者模式标注

Step 2：把设计稿发给 Claude Code

帮我基于这个设计生成 Android 布局代码：

设计要求：
- 主色调：#1976D2
- 卡片圆角：12dp
- 间距：16dp
- 标题字号：18sp，正文：14sp

[附上设计截图]

Step 3：Claude Code 生成代码

Claude Code 会：
1. 分析截图中的布局结构
2. 生成对应的 XML 布局
3. 生成对应的 Kotlin 代码（如有交互）

Step 4：验证和调整

帮我检查生成的代码是否符合 Material Design 规范

---

4. Cursor 与 Claude Code：何时用哪个

对比

维度	Cursor	Claude Code
交互方式	IDE 内聊天面板	独立终端
上下文感知	当前文件/项目	全项目
多工具编排	弱	强（Glob/Grep/Bash）
Skill 系统	无	有
适合任务	小改动、实时补全	大重构、多文件修改
代码审查	基础	/review-pr

选择建议

场景	推荐工具
实时编写代码，边写边看效果	Cursor
理解整个项目结构，做大改动	Claude Code
需要多工具组合（搜索+编辑+执行）	Claude Code
单文件小修改	Cursor
需要 AI 辅助但不想切换窗口	Cursor

组合使用

最佳实践是组合使用：

日常小改动 → Cursor（快）
需要深入理解 → Claude Code（强）
跨文件重构 → Claude Code（全局视角）

---

5. 完整流水线示例

场景：开发一个新的设置页面

Step 1：设计阶段（Figma）

在 Figma 中设计设置页面，标注：
- 布局结构（列表式设置项）
- 每个 Item 的样式（图标 + 标题 + 开关/箭头）
- 主题色和间距

Step 2：代码生成（Claude Code）

基于以下设计，帮我生成设置页面的布局代码和适配器代码：

- RecyclerView + SettingItemAdapter
- 每个 Item：图标（左）+ 标题 + Switch/箭头（右）
- 分组：基础设置 / 高级设置
- 点击 Switch 触发 SharedPreferences 保存

Claude Code 会生成完整的布局文件和 Kotlin 代码。

Step 3：验证和调试（Claude Code）

帮我运行 assembleDebug 构建，确认编译通过
然后帮我检查代码有没有潜在的内存泄漏问题

Step 4：提交代码（Claude Code）

/commit

Step 5：更新知识库（OpenCode）

opencode
> 保存到 Android/设置页面开发记录.md

---

6. 工具组合一览

分工矩阵

任务	工具	原因
理解项目结构	Claude Code	全局上下文
单文件编辑	Cursor	实时预览
设计稿转代码	Figma + Claude Code	设计+理解
知识库管理	OpenCode	终端原生
Git 操作	Claude Code	/commit 智能提交
代码审查	Claude Code	/review-pr
多模型测试	OpenCode	75+ 模型
批量文件修改	Claude Code	Glob/Grep/Edit

工具切换习惯

建议在日常工作中培养工具切换习惯：

1. 打开项目 → Claude Code（理解上下文）
2. 小改动 → Cursor（快速编辑）
3. 新功能 → Claude Code（完整实现）
4. 知识积累 → OpenCode（保存笔记）
5. 设计交付 → Figma（导出给 Claude）

---

快速回顾

工具	最擅长	与 Claude Code 的关系
OpenCode	知识库、多模型	互补：知识管理 vs 代码实现
Figma	UI 设计	前置：设计稿 → Claude Code
Cursor	实时补全	互补：小改动 vs 大重构

核心理念：每个工具做它最擅长的事，通过流水线串联起来。

---

延伸阅读

• 上一篇：第4篇-知识库与记忆系统
• 系列总结：00-系列导读

---

系列完结：通过这 5 篇文章，你已经掌握了 Claude Code 的完整使用技能——从日常开发流、核心工具、Skill 系统、知识库管理，到多工具协同。勤加练习，显著提升开发效率。