Google Stitch
intermediateDefinition
A free, AI-native design tool from Google Labs that generates high-fidelity UI — up to several connected screens — from a natural-language description. It ships an MCP server, so coding agents can pull its generated screens straight into a project without switching to a separate app.
In the wild
You describe a three-screen onboarding flow to Stitch, it generates the screens, and Claude Code calls the Stitch MCP's get_screen_code to bring them into your repo.
More from Design with MCP
Code Connect
A Figma feature that maps design components to their real implementations in your codebase. When an agent generates code from a frame, Code Connect tells it to reuse your actual components and props instead of writing fresh markup, so the output matches what you already ship.
Design Token
A named value for a design decision — a color, a spacing step, a font size — stored once and referenced everywhere. Tokens keep design and code in sync: change the token and every place that uses it updates. Pulling tokens rather than hardcoding hex and pixels is what keeps generated code on-system.
Design-to-Code
The workflow of turning a visual design — a Figma frame, a Stitch screen — directly into working front-end code, usually by giving an AI agent structured access to the design through an MCP server. The agent reads the design's layout, tokens, and components instead of you re-typing them by hand.
DESIGN.md
A natural-language file format from Stitch that captures a design's intent — layout, components, styling notes — as portable text. Because it's plain language, it can be extracted from an existing URL and carried across projects or tools, giving an agent a readable brief instead of an opaque design file.
Figma Dev Mode
A mode in Figma built for handing design off to code. It surfaces measurements, tokens, and the structure of a selection, and it hosts the Figma MCP server so an AI assistant can read the frame you've selected and generate matching code.
Frame & Node
The basic units of a design file. A node is any element — a rectangle, text, a group; a frame is a container node that holds a layout, often a whole screen or component. When you scope an AI request, you're pointing it at a specific node (usually a frame) by selecting it or pasting a link to it.