Stitch + MCP + Code Editor
This advanced tutorial connects Google Stitch to your code editor via the MCP server, enabling a seamless design-to-code pipeline. You will design a UI in Stitch and generate production React code without leaving your editor.
Step 1: Install the MCP Server
Install the Stitch MCP CLI: npm install -g @_davideast/stitch-mcp. Verify the installation with stitch-mcp --version. This CLI provides the bridge between Stitch and your coding environment.
Step 2: Configure Your Editor
For Claude Code, add the Stitch MCP server to your configuration. For Cursor, open Settings > MCP and add the Stitch server. The exact configuration varies by editor — check the Stitch MCP documentation for your specific setup.
Step 3: Create a Design in Stitch
In Stitch, design a contact form page: "A web contact form with name, email, subject, and message fields, a submit button, and a sidebar with company contact information. Clean, professional style with blue accents." Note your Stitch project ID from the URL.
Step 4: Export DESIGN.md
Export DESIGN.md from your Stitch project and place it in your project root. This gives your AI coding assistant the exact design tokens — colors, typography, spacing — to match the Stitch design.
Step 5: Generate Code via MCP
In your editor, ask the AI assistant: "Use the Stitch MCP server to fetch the contact form design and implement it as a React component with Tailwind CSS. Follow the DESIGN.md specifications." The assistant will call the MCP server, retrieve the design, and generate matching React code.
Step 6: Review and Iterate
Review the generated code. If adjustments are needed, update the design in Stitch, then ask your assistant to re-fetch and update the implementation. This creates a live design-to-code feedback loop.
What You Built
You have established a complete MCP-powered pipeline where designs in Stitch automatically translate to production React components in your code editor, with DESIGN.md ensuring visual consistency.