MateUI
v0.1.2Public beta · Free while in beta

Designwithagents,onthesamecanvas.

Claude Code, Codex CLI, Gemini CLI or any MCP agent draws real, editable layers beside yours. You watch, steer and take over.

Download for MacSee it work

macOS 15+ · Apple silicon · Free in beta

checkout-flow.mat
Payment — Mobile✦ Generating
‹ Payment
Pay

or pay with card

Card number

4242 4242 4242 4242

Expiry

12 / 28
Claude Codebuilding Payment
3 agents working· 120 layers
Agents on this fileMCP

Claude Code

Payment — Mobile

generating

Codex

Confirmed — Mobile

drawing

Gemini CLI

Cart — Mobile

reviewing
Works with any MCP agent

Plug in the agent you already use.

MateUI speaks MCP. No API keys, no second subscription: it runs on the plan you already pay for.

Claude Code

CLI

Codex CLI

CLI

Gemini CLI

CLI

OpenCode

CLI

Kiro

IDE

Claude Desktop

APP

How it connects

Connected in one click.

MateUI runs a local MCP server and writes the config for each agent, so you never edit JSON by hand.

  1. 01Open Settings › Agents.
  2. 02Click Connect next to your agent.
  3. 03Ask it to design. It works on your open file.
Settings

General

Agents

Sync

Shortcuts

AgentsMCP server
Claude Code✓ Connected
Codex CLI✓ Connected
Gemini CLIConnect
OpenCodeConnect
KiroConnect

Every agent edit is a layer you own.

No screenshots, no generated images. Agents create frames, text and components you can select, tweak or undo.

✦Make 3 variants of the pricing card

Claude Code

Pro

€12/mo

Codex

Pro

€12/mo

Gemini CLI

Pro

€12/mo

Three agents, three pricing cards.

Ask once. Claude Code, Codex and Gemini CLI each build a variant side by side.

01

Ask for variants

02

Agents split the work

03

Keep the best one

InvoicesOct 2026
Northwind€4,200
Lumen Labs€1,850
Acme Studio€960

Edit any selection with ⌘K.

Select layers, describe the change, and only those layers move.

01

Select layers

02

Press ⌘K, describe it

03

Edit lands in place

Design checkscanning…

Design check, then Fix all.

Contrast, off-scale spacing and hard-coded colours, fixed in one pass.

01

Run Design check

02

Review on canvas

03

Fix all

NorthwindProduct · Pricing · Login

Invoices that chase themselves.

Start freeBook a demo

Maya 2m

Make the CTA full width and brand blue.

@mention an agent in a comment.

Teammates and agents share one file. The agent replies with the fix, already applied.

01

Comment on a layer

02

Mention an agent

03

It replies with the fix

Native Swift + Metal

120 fps on a 221k-layer file.

Swift and Metal, not a browser tab. Open, pan and zoom a production-size file without a spinner.

0s

to open a file with 221,539 layers

0ms

per frame while panning that file

0

Chromium processes. Swift + Metal only

Frame time · panning 221,539 layersMateUI · 8 ms avg — 60 fps budget · 16.7 ms
16.7 ms

What your agent leaves behind.

Not a picture of a UI. A real design file: components with variants, themed tokens, history and code you can ship.

◆ Button · 6 variants

Start ProStart ProStart Pro
Start ProStart ProStart Pro

State=Pressed · adding 3 variants

Codexadding Pressed

Components with real variants.

Variant × State props, slot swaps and overrides. Fix the component once and every screen follows.

VariableLightDark
primary1F80FF4C9BFF
surfaceFFFFFF0E1016
text0B0C10F3F4F7
muted5F66738B919E
accent6A5AF97B6CFF

Tokens with light and dark.

One variable, one value per mode. Agents reach for tokens, never a stray hex.

export function Button({ variant = "primary", label }) {
  return (
    <button className={variants[variant]}>
      {label}
    </button>
  )
}

React and SwiftUI out.

Components become components, tokens become tokens.css and Tokens.swift.

## Rules

- Violet means the AI is working.

- Headlines: 7 words or fewer.

- Tokens only, never a hard-coded hex.

● Claude Code read DESIGN.md first

A DESIGN.md every agent reads.

Brand, tokens and rules live in the file. New agents follow them on the first prompt.

Before checkout redesign

● Claude Code · 14:02

Pricing variants A–C

● Codex · 13:40

Restore

CTA switched to brand blue

● Maya · 11:15

Checkpoints before big edits.

Agents save a version before restructuring. One click restores it.

Also in 0.1

Auto layout

Rows, columns, wrap, min and max sizes

Figma import

Frames, components and styles

Export

SVG, PNG, JPEG, PDF, HTML + Tailwind

Prototype

Link screens and click through them

Sync

R2, S3, Dropbox or Google Drive

File format

.mat and .pen, open JSON agents can read

Recent releases.

Full changelog
0.1.2Oct 1, 2026

Codex in the chat

Pick a GPT model next to Claude and set how hard it thinks. Codex draws on the live canvas like any other agent.

0.1.1Oct 1, 2026

Agents on the live canvas

External agents now draw straight into the file you have open, and you can follow them while they work.

0.1.0Oct 1, 2026

First public build

Free beta for macOS 15+. MCP server, multi-agent cursors, Figma import, React and SwiftUI export.

Give your agents a canvas.

Free while in beta. Works with Claude Code, Codex CLI, Gemini CLI, OpenCode, Kiro and Claude Desktop.

Download for MacWhat's new

macOS 15+ · Apple silicon · Free in beta