What an agent needs from your design system in Markdown

A structured text version of the portfolio to read, share or use as context in an AI assistant.

_AI AND DESIGN_

# Designing with AI: the process has changed, the canvas hasn’t (yet)

Two years ago AI helped draft some text. Today it takes part in every step of design, from research to handover. What hasn’t gone away is the canvas: Figma is losing weight, but it is still where teams try things, discuss and decide.

Javier González · 11 Nov 2026 · 6 min read

## It isn’t a new tool: it’s a companion at every step

When people talk about AI and design, they think of generating screens from a prompt. It is the most visible part and the least important. What has really changed the work is that AI has entered every step of the process, including the unglamorous ones: transcribing, grouping, comparing, checking, turning a design into code.

This is what I see in my own work and in the teams I collaborate with, step by step.

### 1. Research
- **Before:** Interviews, surveys and handwritten notes.
- **Now:** Transcripts and a first grouping of themes in minutes.
- **Stays human:** Deciding whom to ask and what; reading between the lines.

### 2. Synthesis
- **Before:** Sticky notes and weeks of affinity work.
- **Now:** Clusters and summaries, checked against the source.
- **Stays human:** Making sense of it and setting priorities.

### 3. Ideation
- **Before:** Sketches and a handful of options.
- **Now:** Dozens of variants and references in an afternoon.
- **Stays human:** Choosing with judgement, discarding.

### 4. Design and prototype
- **Before:** Static screens in Figma.
- **Now:** Working prototypes generated and refined with agents.
- **Stays human:** Coherence, hierarchy and detail.

### 5. Validation
- **Before:** Tests after weeks of set-up.
- **Now:** Testable earlier, with automatic accessibility and consistency checks.
- **Stays human:** Talking to real users and deciding.

### 6. Handover
- **Before:** Specs and handover meetings.
- **Now:** Components and structure that code already understands.
- **Stays human:** Agreeing the rules and reviewing the result.

Three shifts repeat across all the steps.

- **The cost of a first version has fallen to almost zero.** Exploring ten options costs what drawing one used to cost.
- **The bottleneck is no longer producing, it is evaluating.** With more options and more material, the hard part is knowing which one is good, and why.
- **Handover stops being a handover.** When a prototype is real code and the rules live in the repository, design and front-end stop passing files to each other and start working on the same thing.

None of this removes judgement. It concentrates it: less of the mechanical work, more of what needs criteria.

## Why Figma is still at the centre, for now

Figma is losing weight. Prototypes are born more and more in code, the system’s rules live more and more in a repository, and agents read structure, not layers. But it is still the reference tool, and I think for a reason that is not technical: a team needs a common place to see, discuss and decide.

There are four things a canvas does very well that no alternative has solved yet:

- **Try.** Move something and see what happens at once, without compiling or deploying.
- **Discuss.** Point, comment and compare together with people who don’t code: product, business, leadership.
- **See.** See several options and flows at the same time, not one screen at a time.
- **Iterate.** Undo, duplicate and redo at no cost, in front of everyone.

A stakeholder doesn’t review a pull request. They want somewhere to see the idea, touch it and say “not this”. Today that place is still a canvas. Until code prototypes offer the same speed of conversation, Figma will remain useful.

What is changing is its role. From source of truth it becomes one more view: a place to explore and agree, connected through tokens and variables to a system that lives elsewhere. I wrote about that in [the article on headless design systems](https://baguelus.com/en/articulos/sistema-diseno-headless/).

## The tool stack, yesterday and today

The change is not only in the tools. Before, each step had its own and the handover from one to the next was manual. Today there is a chain, with an agent in the middle, that reads and writes in almost all of them.

| | Yesterday | Today |
|---|---|---|
| **Research and synthesis** | UserZoom, spreadsheets, Miro and sticky notes | Transcription and grouping with ChatGPT or Claude, automated with n8n |
| **Ideas and flows** | Paper, whiteboards, Miro | Variants with an LLM; a shared whiteboard only to decide together |
| **UI and prototypes** | Sketch, then Figma; linked prototypes | Figma as the canvas; working prototypes with Lovable or Claude Code |
| **Handover** | Spec documents, Zeplin, handover meetings | Figma MCP, tokens and contracts in the repository, Storybook |
| **Build** | Front-end built from scratch | Cursor, Claude Code or Codex with the design system as context |

What stays is striking: Figma, Git and Storybook are still there. What has lost almost all its meaning is the tool dedicated to “handing over”: the specification as a document has become structure that code reads.

## What I expect for 2027 and 2028

All of this changes every few months, so what follows are bets, not predictions. I am writing them down so I can review them in a year.

**Today · Late 2026**
- Figma is still the reference canvas.
- Agents write interface code from designs and from the repository.
- Code prototypes are used to validate.
- The design system starts to live outside Figma.

**2027 · Bet**
- Canvases move closer to code: what we discuss is the real component.
- Designing and building stop being two separate files.
- Reviewing AI output becomes a daily design task.
- Figma goes from source to view.

**2028 · Riskier bet**
- A new kind of tool: a visual canvas connected to real code and to the system’s rules.
- Stakeholders comment on live versions, not on frames.
- The design role leans toward curating constraints, evaluating and deciding.
- Designers who also build become common.

What I would not bet on: designers disappearing, or a prompt replacing the canvas. Teams will still need someone who understands people, defines the rules and answers for what ships.

> The tool that replaces Figma won’t be a screen generator. It will be a canvas connected to the real code and to the rules of the system.

## What worries me

- **Sameness.** If we all start from the same suggestions, everything looks alike.
- **Overconfidence.** A plausible result is not a correct one; it has to be reviewed with the team.
- **Accessibility and rules.** What is not written down as a rule, agents ignore.

## What I would do this week

1. **Pick one step** where you lose the most time on mechanical tasks and try AI only there.
2. **Write the rules before the prompts:** tokens, components and acceptance criteria.
3. **Keep a canvas for deciding.** Use code to validate and the canvas to talk.
4. **Measure what changes:** time to a first version, review rounds, errors at handover.