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}"
}
}
}
}
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).
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.
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!
Top comments (0)