What is MCP? A designer's guide

Before MCP, every AI product integrated every tool separately, and most tools never made the cut. MCP replaces that with one socket: a client (the app hosting the AI) connects to any number of servers, asks each one what tools it offers, and lets the model call them mid-conversation. The protocol is open, so a server built once works across Claude Code, Cursor, Claude, Windsurf, Codex and whatever ships next.

You never call a tool yourself. You describe an outcome — "design the onboarding for this app and show me the screens" — and the agent decides which tools to call, in what order, reading results and correcting as it goes. The tools define what the agent can do; your words define what it should.

Coding agents write components well and decide what screens should look like badly, because they can't see one. MCP is how that gets fixed: connect a server whose tools generate and render designs, and the same agent that writes your components can produce the screen, look at the actual render, and revise it before any code exists. The design conversation and the implementation stop being separate tools with a handoff between them.

It also changes who gets to start. A product manager in Claude with a design server connected can turn a PRD into real, editable screens without opening an editor or a canvas — and because the output lands somewhere shared, a designer can pick those screens up by hand afterwards. MCP doesn't replace the craft; it moves the blank-canvas problem off everyone's desk.

A concrete loop, using Flowstep's server from any client: ask for a screen; the agent calls ai-generate-screens, then get-screen-image to look at the render; you react in plain language; it calls ai-edit-screens and shows you the update. Every screen stays on a canvas your team can open, edit, export as code, or copy into Figma.