惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

雷峰网
雷峰网
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
大猫的无限游戏
大猫的无限游戏
Google DeepMind News
Google DeepMind News
V
V2EX
T
The Blog of Author Tim Ferriss
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Hugging Face - Blog
Hugging Face - Blog
Stack Overflow Blog
Stack Overflow Blog
I
InfoQ
博客园_首页
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Last Week in AI
Last Week in AI
Recent Announcements
Recent Announcements
Vercel News
Vercel News
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Tailwind CSS Blog
美团技术团队
Martin Fowler
Martin Fowler
宝玉的分享
宝玉的分享
Blog — PlanetScale
Blog — PlanetScale
GbyAI
GbyAI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
J
Java Code Geeks

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Bridge the gap: Connecting design, PM and code with MCPs
Christian As · 2026-05-09 · via DEV Community

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

  • A design tool

All of them orchestrated via terminal.

Design with Stitch

Many probably already know it, but in case you're not among them: Stitch is a new AI tools 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.

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.

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.

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.

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

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.

Trello and Stitch keys

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.

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:

{
  "$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}"
      }
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

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".

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:

Using Stitch mcp read the "Daily Habit Tracker" project and create a new board and relative tasks in Trello (use its mcp).

Enter fullscreen mode Exit fullscreen mode

What’s Happening Under the Hood?

  1. The agent reads Stitch screens via the MCP.

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

  3. It builds your Trello board and populates it with those tasks. Zero manual entry required.

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!