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

What your agent can do

Screens
Draw a screen and change it. Every change is a new revision, and the earlier ones stay.
Components, colours and type
Keep shared components, colours and text styles in one place, so every screen uses the same ones.
Flows
Lay screens out in order on one board and label each step.
Versions
Group the screens of a release as a version: live, in progress or planned.
Options
Show several options side by side under one question, and record which one is picked and why.
Captures
Take a screenshot from the iOS simulator or the Android emulator and store it with its build, next to the design.
Comments
Read your comments, change the design and mark each comment addressed with the new revision.
Notes and search
Keep notes beside any screen, flow or option, and search across a whole project.

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.
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.
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