Skip to content
Sign in

BlogAI & Design

AI tools for product designers in 2026: a map by workflow stage

By Attuna · · 4 min read

The useful way to choose AI tools as a product designer in 2026 is by the job you need done, not by a ranking. Most workflows now combine a design tool with AI built in (such as Figma Make), a coding agent working in the real codebase (Claude Code, Codex or Cursor), a browser the agent can check its work in, and something that carries your design context between them. This guide maps the main tools to those jobs, describes what each does from its own documentation, and is honest about the gaps.

We haven’t benchmarked these tools against each other, and we don’t rank them. Where we describe capabilities, they come from each vendor’s documentation as of October 2026.

The five jobs

  1. Explore: generate options quickly to find a direction.
  2. Design: shape screens precisely, with components and variables.
  3. Build: turn the design into working code in the real product.
  4. Check: look at the result in a browser, at real sizes, with real content.
  5. Carry context: keep references, rules and preferences available to every tool, every session.

Most tools are strong at one or two of these. Problems start when one tool is asked to do all five.

Explore: prompt-to-UI tools

These turn a description into a working interface quickly. They’re best for early exploration and prototypes, and weakest at fitting an existing product.

  • Figma Make. Figma describes it as “prompt to code anything you can imagine”. It works inside Figma, and the Help Center says it’s available for Full seats on paid plans. Its advantage is proximity to the rest of your Figma work.
  • v0. Vercel’s v0 describes itself as “an AI agent that helps anyone create real code and full-stack apps and agents”. It’s oriented towards React and deployment on Vercel.
  • Google Stitch. Stitch is Google’s tool for designing interfaces with AI.

The shared limitation: without your references and constraints, these tools produce the most likely interface for a prompt. That’s fine for exploring, and a problem for shipping. We explain why in why AI-generated interfaces look generic.

Design: Figma, with AI around it

For precise work with components, variables and auto layout, Figma remains the reference point. The bigger change is how it connects to agents. Figma’s MCP server gives coding agents “the design context they need to generate code from your Figma files”, and its Code to canvas feature captures a running UI back into Figma as layers. That makes Figma part of a loop with coding agents rather than a separate stage. See the Figma and Claude Code round trip.

Build: coding agents

Coding agents work in your real repository: they read the code, edit files, run commands and check results. For designers who can read code and judge output, this is where the biggest shift has happened.

  • Claude Code. Anthropic’s agentic coding tool, available in the terminal, IDEs, a desktop app and the web, per its overview. Project instructions live in CLAUDE.md, and it connects to tools over MCP.
  • Codex. OpenAI’s coding agent. The Codex CLI docs describe passing a design reference with codex --image, and an AGENTS.md file for project instructions.
  • Cursor. An AI code editor. Project rules live in .cursor/rules, and the docs also support AGENTS.md as a simpler alternative.

If you’re new to this, start with Claude Code for designers, then a Claude Code workflow for designers for the branch and preview habits that make it safe.

Check: browsers agents can drive

An agent that can’t see its output can’t judge it. Claude Code can drive Chrome through the Claude in Chrome extension, and Microsoft’s Playwright MCP server gives any MCP client a browser to control. Pair either with a repeatable Playwright visual test for checks that shouldn’t depend on memory.

Carry context: the missing layer

Every tool above starts each session knowing nothing about your taste. Context is what makes the output yours, and it currently lives in scattered places:

  • Instruction files: CLAUDE.md, AGENTS.md, Cursor rules. Good for rules about one codebase.
  • DESIGN.md: Google Labs’ DESIGN.md is an alpha format “for describing a visual identity to coding agents”, with YAML tokens plus written rationale and a linting CLI.
  • Design files: variables and components in Figma, reachable over MCP.
  • References: the screenshots and examples that show what you mean, usually in a folder nobody else can reach.

Pulling these together is covered in how to build reusable design context for AI agents.

This is the layer Attuna is built for. In Attuna, in private beta, you save references, tag what each one is about (typography, layout, spacing, colour and more), and collect them into projects with rules and preferences. Agents that support MCP over HTTP, including Claude Code, Codex and Cursor, can read a project while they work.

How to choose

  • Exploring a new idea: a prompt-to-UI tool, then take the best direction into your real stack.
  • Working in an existing product: a coding agent in the repository, plus Figma MCP if designs live in Figma.
  • Leading a team: invest in the context layer first. It’s the part that compounds.
  • Everyone: give the agent a browser. Most quality problems are visible, and invisible to an agent that can’t look.

For how these new tools change the role of traditional design tools, see AI design agents vs traditional design tools.

Sources