The 'Designer Flow' for AI: Why I Built a Bridge to Google Stitch
Source: Dev.to
The “Context” Problem
I love Google Stitch. It generates stunning, production‑ready screens, but it lives on an island. If I generate a “Home Screen,” my AI agent doesn’t know about it. When I ask for a “Profile Screen” next, the AI starts from scratch, resulting in different fonts, colors, and vibes. I wanted my AI agent to see what I see.
So, I Built a Bridge
I created stitch‑mcp, an open‑source connector that links Google Stitch directly to your AI workflow. It uses the Model Context Protocol (MCP) to give your agent safe, direct access to your design projects. The bridge does more than just fetch files—it enables the AI to understand the design.
The “Design DNA” Feature
The coolest part is the tool extract_design_context. Instead of dumping thousands of lines of HTML into your chat window, this tool scans your screen and extracts exactly what matters:
- Colors – your exact Tailwind palette.
- Typography – the fonts and weights you’re using.
- Structure – how your headers, navbars, and buttons are built.
It hands this “Design DNA” to your AI agent so that the next screen it generates looks like it belongs in the same app.
How to Try It
The project is completely open‑source and can be set up in about two minutes:
https://github.com/Kargatharaakash/stitch-mcp
If you give it a spin, a star ⭐️ on GitHub would be greatly appreciated—it helps more people find it.
Happy designing. 🚀