See it work

How it works

AgentDesign has three parts: the app you look at, a local MCP server your agent talks to, and a folder of plain files on your Mac.

Three parts

  1. Your agentClaude Code, Codex, Cursor or any MCP client
  2. MCP serverA local program on your Mac, started by your agent
  3. Folder on your MacPlain files, in a place you choose
  4. AgentDesign appWhere you look, comment and compare

The three parts are the app, the local MCP server and the folder.

Connect your agent

Pick your agent and copy the text. The app shows the exact text for your Mac, with your folder in it.

Claude Code

Run this line in a terminal. Then restart Claude Code and ask it to call project_list.

Terminal
claude mcp add --scope user agentdesign -- "/Applications/AgentDesign.app/Contents/MacOS/agentdesign" mcp

Claude Desktop

Add this to the mcpServers section of Claude Desktop's configuration file, then quit and reopen Claude Desktop. The app shows the exact text for Claude Desktop in Settings.

JSON
{"mcpServers": {"agentdesign": {"command": "/Applications/AgentDesign.app/Contents/MacOS/agentdesign", "args": ["mcp"]}}}

Codex

Add this to ~/.codex/config.toml, then restart Codex.

TOML
[mcp_servers.agentdesign]
command = "/Applications/AgentDesign.app/Contents/MacOS/agentdesign"
args = ["mcp"]

Cursor

Add this to the mcpServers section of Cursor's MCP configuration file, then restart Cursor. The app shows the exact text for Cursor in Settings.

JSON
{"mcpServers": {"agentdesign": {"command": "/Applications/AgentDesign.app/Contents/MacOS/agentdesign", "args": ["mcp"]}}}

Other MCP client

Any client that starts a local server over stdio can use this command.

Command
"/Applications/AgentDesign.app/Contents/MacOS/agentdesign" mcp

Bring in what you have

There are three ways in. Each one shows a plan first, with every screen listed as New, Update or No change before anything is written.

A folder of pictures
Export PNG or JPEG from any tool, one file per screen. Home.png becomes the screen Home, Home@scrolled.png a state of it, and Home@768.png a breakpoint.
SVG files
An SVG comes in as a picture that stays sharp at any size, with its text and layer boxes.
Figma or Pencil, through your agent
Export the frames, then paste the prompt from the Import view into your agent. It reads the names, text and colours through that tool's own MCP server.

An imported screen is a picture, exact to the pixel. It becomes an editable layout when your agent redraws it, and the picture stays beside it as the reference.

  1. Select your frames in Figma and export them as PNG or SVG to a folder.
  2. Paste the Figma prompt from AgentDesign's Import view into your agent. Run it again later and the same screens update.

What your agent can do

Draw
Draw screens, components and flows for iOS, Android and web, and get each one back as a picture with layout warnings.
Import
Bring in exported pictures and SVG, or read Figma and Pencil through their own MCP servers, with a plan first.
Review
Read your comments, change the design, reply, and mark each comment addressed with the new revision.
Releases
Group screens into versions, say which release a change applies to, and read one brief of what changed since the live release.
Reality
Take screenshots from the iOS simulator, the Android emulator or a web build running on your Mac, and store each with its build.
Find and share
Search the whole project, write docs pages, and export a project or one release.
Yours
Read and write plain files in the folder you chose, through a local server, with no cap on calls.
Mac app
Get a refusal that names what is missing when a call is wrong, and run history changes as a dry run first.

What you do

Review
Look at the screens your agent draws, in the app.
Comment
Write what is wrong on a screen. Your agent reads it.
Approve
Approve a revision or ask for changes. Only you can approve.
Pick an option
Pick one option and give the reason. It becomes the screen.
Pick a version
Choose which release you are looking at: live, in progress or planned.
Compare
Put two versions side by side and see which screens are new, changed or removed.
Ship
Mark a release as shipped. The app lists what is not ready first, then freezes the release.
Resolve
Close a comment when the change is right.

Where your files are

A project is a folder inside the folder you choose. This is the shape of one, with the Reader sample project.

~/Designs/reader/
  project.json
  items/
    screens/
      home/
        item.json
        comments.json
        notes.md
        revisions/
          r0001.json
          r0002.json
  versions/
    ios-1.4.json
    ios-1.5.json

Every revision is one file, numbered in order: r0001.json is revision 1. Earlier revisions never change. Put the folder in git, or back it up like any other folder.

What 1.0 does not do