The Four Phases

Visual exploration — getting from "I have an idea" to "here are five directions worth looking at." This is where AI generation shines hardest because the cost of generating bad options is low and the value of seeing unexpected ones is high.

Design refinement — taking a direction and making it coherent, considered, and ready for real work. This is where human judgment matters most and where AI tools add the least direct value but the most indirect value through better systems and context.

Implementation bridging — turning design into something a codebase can actually use. This is where the tooling has shifted most in the past twelve months, and where designers with implementation fluency gain the most ground.

Production work — day-to-day coding, refactoring, feature development inside an existing product. This is where tool choice stops being a design decision and starts being an engineering one.

Here's how the tools map.

Phase 1: Visual Exploration — Stitch wins

Google Stitch is genuinely different from what came before it. The March 18, 2026 update rebuilt the tool around an AI-native infinite canvas, and the features that matter aren't the ones that topped Product Hunt — they're the ones that quietly changed how exploration works.

"Vibe design" lets you describe intent rather than specifications — a business objective, a feeling, a reference — and Stitch generates multiple distinct directions. Voice Canvas means you can talk to the canvas and the agent responds with real-time critique, variations, and live updates. The design agent reasons across your full canvas context, not just your last prompt. Five connected screens from a single description, with consistent typography and components across them. 350 free generations per month. All you need is a Google account.

The shift worth noticing isn't the quality of any single output. It's the economics of exploration. Generating ten directions used to take a designer an afternoon of frame duplication in Figma. It now takes ten minutes in Stitch. When the cost of exploring drops that far, the value of exploring widely goes up. The best ideas often show up in the variations you wouldn't have had time to try before.

The output is unmistakably AI-generated if you know what to look for — generic shadcn-ish patterns, a bias toward dark mode SaaS aesthetics, layouts that feel like they've seen too many Dribbble screenshots. That's fine. This is exploration, not production. Bring the direction somewhere else to finish the work.

Phase 2: Design Refinement — Figma's role is changing, not shrinking

Here's the tension worth naming directly:

The center-of-gravity role is getting eaten from both sides. Stitch takes the front of the process — the "start from a blank canvas" moment that used to be Figma's opening move. v0 and Cursor take the back of the process — the "make this real" moment that used to require a handoff out of Figma. What's left in the middle is the refinement layer, and that's where Figma still wins decisively for teams doing serious product work.

But Figma's more interesting 2026 role isn't the canvas anymore. It's the infrastructure underneath. The Figma MCP server — which went two-way in early 2026 with the write-to-canvas capability — means AI agents in Cursor, Claude Code, and other tools can read your design system directly. Components, variables, tokens, layout data, all structured and queryable. Agents can also now create and modify design assets using your existing system, guided by "skills" (markdown files that encode how agents should behave in your files).

That turns Figma into something more like a database than a canvas. Your design system becomes an input to code generation, not a reference document developers squint at. The quality of what AI agents produce is now directly tied to the quality of the system they're reading. A messy Figma file produces messy AI output at scale.

What to actually do in this phase: Use Figma for the refinement work AI tools are bad at — system design, component definition, token hygiene, responsive logic, interaction states, accessibility. Then invest in making your Figma file machine-readable. Clean tokens. Semantic naming. Explicit component states. Skills files that guide how agents consume your system. The refinement work still belongs in Figma for most teams. It just needs to be maintained as infrastructure, not as documentation.

Phase 3: Implementation Bridging — the most consequential phase

This is where 2026's tool landscape shifted most, and where the honest ranking matters.

v0 wins for designers shipping real code

Vercel rebuilt v0 from the ground up in February 2026. The change wasn't cosmetic. v0 now imports existing GitHub repositories directly, runs in a sandbox that pulls environment variables and configuration from Vercel, and produces production-ready Next.js code using Tailwind and shadcn/ui that professional developers actually integrate into shipping codebases. A built-in Git panel lets designers create branches, open pull requests, and deploy on merge — without a local development environment.

The meaningful shift is that v0 output lives in a real repository, not in a separate prototyping tool. When a designer refines a layout in v0, that refinement is code, not a mockup. The translation step disappears. Vercel's own positioning — "teams end up collaborating on the product, not on PRDs" — is actually accurate.

v0 wins this phase for designers who want to work close to implementation. It's the tool that most reduces the distance between "I designed it" and "it's in the product."

Figma MCP is the most consequential bridge layer

The Figma MCP server is the bigger structural change, even if it's less visible than v0. It's what makes "designs as machine-readable context" a real thing rather than a marketing claim. When a designer builds a component in Figma and a developer using Cursor can query it directly — getting spacing values, variant configurations, and token references as structured data rather than eyeballed measurements — the handoff problem transforms.

Two-way MCP (agents can now write to the canvas, not just read from it) means the loop closes: code changes can flow back into the design file. Figma published this capability publicly in early 2026, and it's supported across Cursor, Claude Code, Codex, GitHub Copilot, Warp, and other MCP-compatible clients.

MCP isn't a tool you choose. It's an infrastructure layer that sits under whatever tools you're already using. But for teams serious about design-to-code workflows, the MCP server is the piece that changes the ceiling of what's possible.

Lovable is an on-ramp, not a destination

Lovable builds working full-stack apps from natural language descriptions. It's impressive — $400M ARR, eight million users, enterprise customers — but it's not a tool for designers. Lovable is built for non-technical founders who need to ship an MVP without hiring a developer or a designer. The output is competent, generic, and explicitly optimized for speed over craft. Lovable's own CEO has confirmed most users treat it as a prototyping tool rather than a production platform.

For designers evaluating AI tools, Lovable isn't in your stack. It's the category of tool your non-technical founder friend is using to build the MVP that will eventually need a designer to make it not look generic. That's where The Crit's product critique work starts.

Phase 4: Production Work — Cursor vs Claude Code

The old framing of "Cursor is the IDE, Claude Code is the terminal" is dead. Both tools crossed the line in 2026. Cursor shipped a CLI with agent modes in January. Claude Code runs in VS Code, JetBrains, a desktop app, and a web-based IDE at claude.ai/code. The terminal-vs-IDE binary no longer explains which tool to pick.

The real split is philosophical. Cursor is IDE-first: you're driving, the AI assists. Inline tab completions, multi-file chat, a cursor agent that edits files with your approval. Cursor reached over a million daily active users and $2B+ ARR in early 2026, largely because its tab autocomplete is the best inline completion in the category and because most developers still spend their day in an editor.

Claude Code is agent-first: you describe the task, the agent drives. Deep codebase understanding, autonomous multi-step execution, end-to-end workflows that include reading issues, writing code, running tests, and creating pull requests. Claude Code's SWE-bench Verified score on Opus 4.6 — around 80% — is the highest publicly verified score for any coding tool. The tradeoff is learning to trust an agent to operate across your files without watching every step.

For designers working close to code, the distinction is about workflow style:

Many working developers now use both — Cursor for day-to-day editing, Claude Code for larger autonomous tasks. That's the honest answer if you want one. Start with Cursor if you're new to AI-assisted coding. Add Claude Code when you find yourself wishing the agent would just handle the whole task instead of asking you to approve each step.

The Taste Argument

There's a common read of the AI tool landscape that says AI is making design easier, faster, and therefore the bar is lowering. That's backward.

Taste — the judgment about what's worth making, what the specific product needs, what makes this interface different from every other AI-generated interface — becomes more valuable, not less.

The tools are converging on the same patterns because they're trained on overlapping data. Shadcn-styled components everywhere. The same card grids, the same dashboard layouts, the same hero sections. If your work looks like it could have come out of any of these tools, it probably did — or it reads that way to anyone paying attention.

The designers who win in this landscape are the ones who use AI tools to get to a competent baseline fast and then apply taste, intent, and product judgment to everything after that. The tools produce the first 70%. The last 30% is still a human job, and it's the part that actually differentiates your work.

Where to Start

Specific prescriptions by designer type: