谷歌新工具+开源代理：我如何用MCP打通设计、产品与代码

每个月都有数不清的AI工具发布，想搭建一个稳定、可维护的工作流几乎不可能——今天用的工具明天可能就过时了。我试过很多方案，现在终于为新的MVP项目确定了一套工具组合：代码编辑器和编码代理、带看板的项目管理工具，全部通过终端统一调度。

很多人可能已经知道了，但以防万一：Stitch是谷歌推出的新AI工具，通过对话就能生成完整的UI界面。项目完成后，你可以要求调整细节或直接编辑生成的页面。Stitch目前还在测试阶段，但产出的素材已经可以直接用在项目里了，至少在初期开发阶段不需要手动创建设计稿。

对我们这套工作流来说，Stitch最突出的特性是它提供了MCP（模型上下文协议），能把代码库和设计系统连接起来，让编码代理直接与设计系统交互。

市面上的待办清单工具多如牛毛，但我做任务追踪时首选仍是Trello。它简单易用、色彩丰富、界面友好又不臃肿。和Stitch一样，Trello也有自己的MCP，可以直接连接到代码编辑器。下面我会展示如何发挥它的潜力。

接下来是写代码的环节，这里有个有趣的点。我的工具箱包括Neovim、Sidekick和Opencode。前两个不是本文重点，但Opencode才是真正的游戏规则改变者。

Opencode是一款开源编码代理，能连接市面上最主流的服务：Claude Code、GitHub Copilot、Cursor等等。这让你无论用哪家服务，都能保持标准化的工作流。这让我可以专注于单一工具，不用在五花八门的IDE或CLI之间来回切换。Opencode精致、易用、可扩展、功能强大，完美契合我对命令行工具的偏好。

简单介绍完每个工具后，是时候把它们组合起来，看看从零开始搭建项目时能产生什么价值了。

先声明：我不是"vibecoding"的拥趸，也不认为这类工具能取代资深设计师或经验丰富的产品经理。这点我立场坚定。但我想展示的是，如何用不同的代理来启动项目，做POC或MVP。这能在项目早期阶段给你实质性的提速，不用在不熟悉的工具上浪费时间。

你需要准备：谷歌账号（用于Stitch）、已安装Opencode CLI的电脑、（可选）任意AI服务商的订阅计划。本教程我会用GitHub Copilot。

首先，把Opencode连接到首选的AI服务（或者保持默认的Opencode Zen）。运行opencode，打开后输入/connect，按提示完成对应服务商的配置。

现在我们可以通过专用MCP连接所有工具了。你的唯一入口是opencode聊天界面，但它会统筹一切——从设计到代码。要连接MCP，需要从Trello和Stitch获取API密钥。