Bridge the gap: Connecting design, PM and code with MCPs

查看原文 / View Original

Bridge the gap: Connecting design, PM and code with MCPs

弥合鸿沟：利用 MCP 连接设计、项目管理与代码

Countless AI tools are released every month and it’s really hard to create a stable and maintainable workflow which does not change everyday. I tried many options, but for new MVP projects now I finally stick with a toolset which includes: Code editor and coding agent, a project management tool with kanban board, and a design tool. All of them orchestrated via terminal. 每个月都有无数的 AI 工具发布，想要建立一个稳定且可维护、且不会每天变动的工作流实在太难了。我尝试过许多方案，但对于新的 MVP（最小可行性产品）项目，我最终确定了一套工具集，包括：代码编辑器与编码代理、带有看板的项目管理工具，以及设计工具。所有这些都通过终端进行编排。

Design with Stitch

使用 Stitch 进行设计

Many probably already know it, but in case you’re not among them: Stitch is a new AI tool from Google which draws complete UI chatting with you. When the project is done you can ask for refinements or edit the generated screens. Stitch is still in beta, but it already produces valuable assets that are ready to be used in your projects, at least during initial development, without the need to manually create them. What’s the outstanding feature for our setup? It provides a MCP which connects codebase with that, allowing your coding agent to interact with design system. 很多人可能已经知道了，但如果你还不了解：Stitch 是谷歌推出的一款全新 AI 工具，它可以通过与你对话来绘制完整的 UI。项目完成后，你可以要求进行优化或编辑生成的界面。Stitch 目前仍处于测试阶段，但它已经能产出可直接用于项目的宝贵资产（至少在初期开发阶段），无需手动创建。对于我们的配置来说，它最出色的功能是什么？它提供了一个 MCP（模型上下文协议），将代码库与设计连接起来，允许你的编码代理与设计系统进行交互。

Project management made easy

轻松搞定项目管理

Our world has more Todo lists than anyone could count, however, my ready-to-go solution is still Trello when it’s time to track my tasks. It’s easy to use, colorful, simple and user-friendly without being bloated. Like Stitch, even Trello has its MCP which can be directly connected with your code editor. We will see how to leverage its potential. 这个世界上待办事项列表的数量多到数不清，但当需要跟踪任务时，我首选的方案依然是 Trello。它易于使用、色彩丰富、简洁且用户友好，不会显得臃肿。和 Stitch 一样，Trello 也有自己的 MCP，可以直接连接到你的代码编辑器。我们将看看如何发挥它的潜力。

The “hammer”

“重锤”工具

Time to write some code. Here is the funny part! My toolkit involves Neovim, Sidekick and Opencode. Former two are not important for this article, but the latter is the real game changer. Opencode is an open source coding agent which is capable of connecting with the most known providers: Claude Code, Github Copilot, Cursor and more. This gives you a standardized workflow regardless of service. This helped me focus on a single tool, without trying many different IDEs or CLIs. Opencode is fancy, easy to use, extensible, powerful and it perfectly fits with my preference for command line tools. 是时候写点代码了。有趣的部分来了！我的工具包包括 Neovim、Sidekick 和 Opencode。前两者对本文不重要，但后者才是真正的游戏规则改变者。Opencode 是一个开源的编码代理，能够连接到最知名的服务提供商：Claude Code、Github Copilot、Cursor 等。这为你提供了一个标准化的工作流，无论使用哪种服务。这帮助我专注于单一工具，而无需尝试各种不同的 IDE 或 CLI。Opencode 时髦、易用、可扩展且功能强大，非常符合我对命令行工具的偏好。

Let’s assemble them

让我们组装起来

After this brief introduction of every tool it’s time to use them together to see the value they provide when used to build a project from scratch. Hear me out: I’m not a vibecoding fan and I also don’t think tools like these can replace a skilled designer or an experienced project manager. I’ll die on this hill. However I want to show you how you can bootstrap a project using different agents for POC or MVPs. This gives you a substantial boost in early project phases without wasting time on unfamiliar tools. 在简要介绍了每个工具之后，是时候将它们组合起来，看看它们在从零构建项目时所提供的价值了。听我说：我不是“氛围编程”（vibecoding）的粉丝，也不认为这些工具可以取代熟练的设计师或经验丰富的项目经理。这一点我坚持己见。但我希望向你展示如何利用不同的代理来启动 POC（概念验证）或 MVP 项目。这能在项目早期阶段为你提供巨大的助力，而无需在不熟悉的工具上浪费时间。

Requirements:

  • Google account for Stitch
  • Trello account
  • Opencode CLI installed on your pc
  • (Optional) A subscription plan to any AI provider. I’m going to use github copilot in this tutorial

要求：

  • 用于 Stitch 的谷歌账号
  • Trello 账号
  • 在电脑上安装 Opencode CLI
  • （可选）任何 AI 服务提供商的订阅计划。在本教程中，我将使用 Github Copilot。

First, we connect the opencode to preferred AI service (or keep it tied to Opencode Zen). Run opencode, when it opens up type /connect and follow instructions for your chosen provider. Now we are able to connect all our tools through dedicated MCPs. Your sole entrypoint will be the opencode chat, but it will orchestrate everything, from design to code. 首先，我们将 Opencode 连接到首选的 AI 服务（或者保持与 Opencode Zen 的绑定）。运行 Opencode，打开后输入 /connect 并按照所选提供商的说明进行操作。现在，我们可以通过专用的 MCP 连接所有工具。你的唯一入口将是 Opencode 聊天窗口，但它会编排一切，从设计到代码。

Trello and Stitch keys

Trello 和 Stitch 密钥

In order to connect the MCPs we need to get API keys from Trello and Stitch, directly provided in your control panel. Open https://trello.com/power-ups/admin to create a new Trello application. Fill in data as you wish and in the end get API key and secret: you will need them shortly. Now for stitch, just open https://stitch.withgoogle.com/settings and create a new API key and copy this too. 为了连接 MCP，我们需要从 Trello 和 Stitch 获取 API 密钥，这些密钥直接在你的控制面板中提供。打开 https://trello.com/power-ups/admin 创建一个新的 Trello 应用。按需填写数据，最后获取 API 密钥和密钥（secret）：你很快就会用到它们。至于 Stitch，只需打开 https://stitch.withgoogle.com/settings，创建一个新的 API 密钥并复制它。

With all set, we can configure opencode with MCP settings. Open your configuration file (usually placed in ~/.config/opencode/opencode.json) and update it as follows: 一切准备就绪后，我们可以配置 Opencode 的 MCP 设置。打开你的配置文件（通常位于 ~/.config/opencode/opencode.json）并按如下方式更新：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "trello": {
      "type": "local",
      "enabled": true,
      "command": ["npx", "-y", "@delorenj/mcp-server-trello"],
      "environment": {
        "TRELLO_API_KEY": "{file:~/.secrets/trello-api-key}",
        "TRELLO_TOKEN": "{file:~/.secrets/trello-token}"
      }
    },
    "stitch_http": {
      "type": "remote",
      "url": "https://stitch.googleapis.com/mcp",
      "enabled": true,
      "headers": {
        "Accept": "application/json",
        "X-Goog-Api-Key": "{file:~/.secrets/stitch-api-key}"
      }
    }
  }
}

As you could have noticed there are three references to secret keys, which must be placed in ~/.secrets directory. Create those files (trello-api-key, trello-token and stitch-api-key) and fill them with the keys generated in the previous step. Just the key itself, nothing more. To be sure that the configuration is fine, run opencode, type /mcp and you should see Stitch and Trello as “Enabled”. 正如你所注意到的，这里有三个对密钥的引用，它们必须放置在 ~/.secrets 目录中。创建这些文件（trello-api-key、trello-token 和 stitch-api-key），并将上一步生成的密钥填入其中。只需填入密钥本身，不要包含其他内容。为了确保配置正确，运行 Opencode，输入 /mcp，你应该能看到 Stitch 和 Trello 显示为“Enabled”（已启用）。

Ready, steady, go!

准备，开始！

Go to https://stitch.withgoogle.com and start describing your project: Stitch will create a new project designing the screens for you starting from the given description, generating a design system as well. You’re now ready to open your CLI to see the magic in action. Start a new opencode session and, to see how these tools talk to each other, try a prompt like this: 前往 https://stitch.withgoogle.com 并开始描述你的项目：Stitch 将根据给定的描述为你创建一个新项目并设计界面，同时生成一套设计系统。现在你可以打开 CLI 来见证奇迹了。启动一个新的 Opencode 会话，为了看看这些工具是如何相互协作的，尝试输入这样的提示词：

“Using Stitch mcp read the ‘Daily Habit Tracker’ project and create a new board and relative tasks in Trello (use its mcp).” “使用 Stitch MCP 读取‘每日习惯追踪器’项目，并在 Trello 中创建一个新看板及相关任务（使用其 MCP）。”

What’s Happening Under the Hood?

底层发生了什么？

  • The agent reads Stitch screens via the MCP.

  • It breaks down the UI components into actionable development tasks.

  • It builds your Trello board and populates it with those tasks.

  • Zero manual entry required.

  • 代理通过 MCP 读取 Stitch 界面。

  • 它将 UI 组件拆解为可执行的开发任务。

  • 它构建你的 Trello 看板并填充这些任务。

  • 无需任何手动输入。

Once the board is live, you can stay in your flow. You’re now coding, reading, and updating tasks directly from the CLI as the project evolves. By bridging the code editor, design tool, and PM board, you’ve created the “Holy Trinity” of rapid prototyping. This isn’t about replacing designers or managers (or developers); it’s about eliminating context-switching so you can get a working POC in front of stakeholders in record time. Try the steps above on a small project and see how fast you can build! 一旦看板上线，你就可以保持工作流。随着项目的进展，你现在可以直接从 CLI 进行编码、阅读和更新任务。通过连接代码编辑器、设计工具和项目管理看板，你已经创造了快速原型的“三位一体”。这并不是要取代设计师或经理（或开发人员）；而是为了消除上下文切换，让你能在创纪录的时间内将可运行的 POC 展示给利益相关者。在一个小项目上尝试上述步骤，看看你能构建得有多快！

← 返回新闻列表 / Back to news list