文档实战案例多AI工具协作优化Chrome扩展

多AI工具协作优化Chrome扩展

案例概况
通过ChatGPT前期分析、Claude Code详细实施、Codex审查评估的多AI协作模式，成功将Chrome扩展包大小从3.9M优化至393KB，压缩率达90%，为实际项目问题提供了高效的AI工具链解决方案。

整体工作流思路

整个协作思路是：ChatGPT 负责前期调研和分析工作，给出可选概要方案 → Claude Code 根据实际项目代码制定可落地的详细计划 → Codex 进行方案评估和查漏补缺 → Claude Code 执行最终实施。

这种分工明确的多AI协作模式，让每个AI工具都发挥其最大优势。

问题背景

在一个Chrome浏览器扩展插件项目中，引入了 streamdown 库处理Markdown渲染。然而在构建打包阶段发现，产物体积达到了 3.9M，这已经接近Google扩展包的大小限制，急需进行体积优化。

第一阶段：ChatGPT 负责前期分析

问题调研和方案分析

向ChatGPT说明了问题背景，提供了上下文和关键代码后：

ChatGPT分析streamdown库

ChatGPT经过分析streamdown这个仓库后，得出了该库不支持零代码的拆分，也没法通过vite在构建过程中解决配置。这和我们的调研结论一致。

ChatGPT提供的解决方案

ChatGPT的详细分析

ChatGPT的核心价值体现：

  • 作为”分析者”角色，具有理科生性格
  • 专注前期信息和资料收集
  • 聚焦具体表象问题分析
  • 不关心具体项目细节，作用范围广

第二阶段：Claude Code 和 Codex 合作

重点：让两个AI达成一致

Claude Code分析后，认为目前选择方案A最好：

Claude Code的详细分析

Claude Code给出的核心策略是：通过在vite配置中编写hack代码，让streamdown构建时拿到的是空文件，这样最后构建的产物体积自然就小很多。

原理分析： streamdown会静态引入大量数学公式相关的库，这是导致体积膨胀的最主要原因。

Codex的评估和确认

把Claude Code的结论给Codex，它看了也同意是方案A。并且非常贴心地给出了短、中、长三种方案，并分析了这些方案的优缺点：

Codex的方案评估

Codex的价值体现：

  • 作为”Reviewer”角色，是Coder的编程搭档
  • 负责把关计划，查漏补缺
  • 不进行任何编码活动
  • 基于GPT-5的能力提升，适合review性质的工作

第三阶段：Claude Code 执行实施

两个AI对齐后，Claude Code按照详细计划执行。大概5分钟后，工作完成：

Claude Code执行完成

Claude Code的核心优势：

  • 作为”Coder”角色，具有工科生性格
  • 最了解项目代码的实际情况
  • 具备制定详细计划和实际编码的能力
  • 基于强大的工程能力和工具调用能力

结果验收

优化效果非常明显：

优化效果对比

最终效果：

  • 优化前： 3.9M
  • 优化后： 393KB
  • 压缩比： 约90%

在Chrome中对扩展进行回归测试，功能也都正常运行。

为什么这样协作？

角色定位分析

这套工作流需要三个不同特质的角色：

1. 分析者（ChatGPT）

  • 性格特质： 理科生思维
  • 工作重点： 前期信息和资料收集
  • 作用范围： 聚焦具体表象问题，不关心实际项目
  • 优势： 即便不是Deep Research模式，GPT-5 thinking的收集和分析能力非常适合日常使用
  • 替代方案： Gemini Pro 2.5等其他顶级模型

2. Coder（Claude Code）

  • 性格特质： 工科生思维
  • 工作重点： 最了解项目代码，掌握前线实际情况
  • 核心能力： 制定执行详细计划以及实际编码、QA等
  • 地位： 工作流的核心角色
  • 技术基础： 基于Claude模型强大的工程能力和工具调用能力

3. Reviewer（Codex）

  • 工作性质： Coder的编程搭档
  • 职责范围： 把关Coder的计划，查漏补缺
  • 工作边界： 不进行任何编码活动
  • 选择理由： GPT-5之后能力提升明显，Plus用户可使用，适合review性质工作
  • 替代方案： Gemini-CLI、Qwen-Coder等其他AI终端

核心价值总结

工作模式的相似性

整个过程发现这些顶级AI给到具体问题和上下文后，从分析过程到最后结果验证（Claude Code会自己运行构建命令，查验结果），和我们在日常研发活动的思路十分相似：

  • ChatGPT thinking 在回复中提供近、中、远多个可落地方案，并推荐演进路线
  • Codex 在review过程中，提到方案优缺点和潜在坑点
  • Claude Code 具备完整的执行和验证能力

人的角色定位

在这个过程中，人更像一个观察者的角色：

  • 把前期分析工作交给AI
  • 把后期大部分执行工作交给AI
  • 最后验收结果即可

但人才是最后的核心，需要对问题解决的范围和方向做到心里有数，才不至于产生”AI改动了上万行代码，但没有人敢审批”的窘境。

适用场景

这套多AI协作模式特别适合：

  1. 复杂技术问题 - 需要深度分析和精确实施
  2. 陌生技术栈 - 利用AI的知识广度快速上手
  3. 风险控制 - 通过多重审查降低实施风险
  4. 学习提升 - 观察不同AI的思维过程和解决路径

本案例展示了ChatGPT、Claude Code、Codex三种AI工具的协作潜力。通过合理的分工和流程设计，可以显著提升复杂问题的解决效率。

概述主线程思维
关于我