Your agent
Screens as layouts
Each screen is a layout of frames, text, pictures and icons, so a comment can point at one exact element.
Everything in AgentDesign 1.0.
Every feature, grouped by the problem it fixes. A card with Play shows the feature in the stage above it.
There is no designer on my team, so my agent guesses what each screen looks like.
Your agent draws the design first.
Your agent draws screens, components and flows over MCP and gets each picture back with layout warnings. Every change is kept as a revision.
Draw
- You ask your agent for a screen.
- Every time your agent saves a screen, AgentDesign keeps it as a new revision.
- The screen appears in the app as revision 1.
- More screens arrive as the agent works.
- Every change is a new revision. Nothing is overwritten.
- Your agents draw the screens. You see every change.
Agent sees its work
- Each drawing returns to your agent as a picture, with warnings.
- Your agent sees the cut text and sends a fix.
- The warning is gone.
Components and colours
- Colours and components are kept in one place.
- Before a change, your agent sees which screens it reaches.
- One change, and every screen that uses it follows.
- Day and Night, side by side.
- Drawn once, used on every screen.
Starter kit
- Start a project with a starter kit.
- Colours, components and first screens are there from the start.
Any platform
- One project holds your iOS, Android and web screens.
- A web page is a screen like any other.
- Each breakpoint is one click away.
- With the browser frame, or without.
- Phone screens and web pages in the same project.
Screen states
- A screen's states are grouped under it.
Flows
- You ask for a flow.
- The screens are laid out in order.
- Each step is labelled.
- When a screen changes, the board shows the new picture.
- One board for the whole flow.
Options
- You ask for options.
- They arrive side by side under your question.
- You pick one, and the reason is kept.
- The picked option becomes the screen.
- The options you did not pick stay on the board.
Shadows and paths
- Your agent draws shadows, gradients, grids and vector paths.
Your agent
Agent sees its work
Each drawing returns to the agent as a picture, with warnings for cut text or a missing font.
Both
Every change kept
Each change is a new revision with a one-line reason. Nothing is overwritten, and any earlier one can be restored.
Both
Shared components
Buttons, cards and bars are drawn once, with named variants, and used on every screen.
Both
Colours, type and spacing
Colours, type, spacing and radii are kept as named tokens, with Day and Night modes.
Both
Impact before a change
Before a colour or component changes, your agent sees how many screens the change reaches.
Both
Starter kit
Start a project with tokens, components and first screens for iOS, Android, web or desktop, or add them later.
Both
Any platform
One project holds your iOS, Android, web, desktop and watch screens. Tablet is a size.
Both
Web breakpoints
A web page is one screen with breakpoints at 1440, 1024, 768 and 390, inside an optional browser frame.
Both
Screen states
Scrolled, menu open and empty states are grouped under their screen.
Both
Flows on a board
Your agent lays screens out in order and labels each step. Click a step to open its screen.
Both
Options side by side
Your agent puts several options under one question. You pick one with a reason, and it becomes the screen.
Your agent
Shadows, gradients and paths
Your agent can draw shadows, gradients, grid layouts, vector paths and built-in icons, and use your project's fonts.
You
Day and Night
Switch any screen between Day and Night, or see both side by side on one card.
Your agent
Errors that teach
A wrong call is refused with every missing part named and what to pass, so your agent can fix it.
My designs are already in Figma. I do not want to draw them again.
Bring in the designs you have.
Export frames from Figma, Pencil, Sketch, Penpot or any other tool as PNG or SVG. Each becomes a picture screen, exact to the pixel, and your agent can redraw it as a layout.
From a folder
- Export your screens from any tool as PNG or SVG.
- First a check. Nothing is written yet.
- Then import them with one press.
- File names become screens, states and breakpoints.
- Import again later and the same screens update.
From Figma
- Copy the Figma prompt from the Import view.
- Your agent reads names and colours through Figma's own MCP server.
- The plan lists what will not be converted.
- Each frame arrives as a screen, marked Picture.
- Its text can be searched and pointed at.
Import again
- Import the same folder again.
- Only the changed screen updates.
- You do not get a second copy.
Picture to layout
- An imported screen starts as a picture.
- Your agent redraws it as a layout.
- The picture stays beside it as the reference.
Both
A folder of pictures
Home.png becomes the screen Home. Home@scrolled.png becomes a state of it, and Home@768.png a breakpoint.
Both
From Figma or Pencil
Export your frames and paste one prompt. Your agent reads names, text and colours through that tool's own MCP server.
Both
SVG files
An SVG comes in as a picture that stays sharp at any size, with its text and layer boxes.
Both
A plan first
Before anything is written, a check lists each screen as New, Update or No change, and what was not converted.
Both
Import again
Import the same folder later and the same screens update. You do not get a second copy.
Both
Text you can search
Text inside an imported picture can be searched and pinned in a comment, when the export kept the text.
Your agent
Picture to layout
Your agent redraws an imported picture as an editable layout, and the picture stays beside it as the reference.
Both
Past releases
Bring in screenshots of what you already shipped, release by release, and each takes its place in history.
My review notes are in a chat the next session never reads.
Comments stay on the screen.
A comment is pinned to the picture and kept with the screen. Your agent is told about it on its next tool call, and only you resolve it.
Pin a comment
- Open a screen.
- Drag a box around what should change.
- Write the change and send it.
- Your agent reads the comment and changes the design.
- The comment is marked addressed with the new revision.
- You resolve it when it is right.
- One comment, one revision, one record of why.
Review queue
- A release lists what it changes.
- Each change is shown next to what it replaces.
- Press A to approve.
- Press R and say what is wrong.
- Your agent can build only what you approved.
Waiting on whom
- Every open comment, and who has the next move.
- Attach a picture or a link to a comment.
- Your agent is told on its next tool call.
- It changes the screen, and the thread waits for you.
- You see what waits for you and what waits for an agent.
Side by side
- Two revisions of one screen, side by side.
Both
Pin a comment
Click the picture or drag a box. Your agent gets your words and the exact elements under the box.
Both
Threads you close
Your agent replies and marks the comment addressed with its new revision. Only you resolve, and Resolve can be undone.
Both
Comments reach the agent
Your agent is told about new comments on its next tool call. You do not have to remind it.
Both
Pictures and links
Attach a picture or a link to a comment while you write it, so the agent sees what you mean.
You
Waiting on whom
One page lists every open thread in the project and whether it waits for you or for an agent.
Both
Approve or send back
A revision is Needs review, Approved or Changes requested. Only you approve. Your agent can ask for approved designs only.
You
Review queue
Step through a release's changes with the previous picture beside each. Press A to approve, R to ask for changes.
You
Side by side
Put a second picture beside the one you are looking at, or put two revisions of the screen side by side.
Both
Notes beside screens
You and your agent keep notes beside any screen, flow or board, shown with lists and code.
You
Live updates
The app shows each change as your agent makes it. You never press refresh.
You
Agent activity
See which agent connected and what it did. The log is kept for 14 days.
Which build had that screen? I dig through old screenshots to find out.
Every release of your app is kept.
Each release is a version, and shipping freezes it. Compare two versions, or see one screen in every release as a strip of pictures.
What changed
- Each release is a version.
- Pick two versions.
- New, changed and removed screens are listed.
- A changed screen shows both pictures side by side.
- You know what the next release changes before it ships.
Screen timeline
- One screen, in every release.
- Under each shipped release is the screenshot of what shipped.
- Tick two releases to compare them.
- Each state has its own history.
- Past, live and planned releases on one strip.
Ready to ship
- One row per screen shows what is ready.
- Settings has drifted and has one open comment.
- Ship lists what is not ready. You decide.
- Confirm, and iOS 1.5 is live and iOS 1.4 is retired.
- A shipped release never changes.
Plan ahead
- Plan the next four releases ahead.
- A planned version holds only what changes in it.
Scope
- A change with no scope is refused, with the three choices.
- Your agent says where the change applies.
- The screen shows which releases it covers.
Version brief
- One call asks what iOS 1.5 changes.
- The answer lists each change and what is approved.
Backlog ids
- A revision carries its backlog id.
- Open the id to see every picture it changed.
What is live
- The card and the toolbar name the live release.
Both
A version per release
Each release on each platform is planned, in progress, live or retired. Shipping freezes it for good.
Both
Compare two versions
Pick two versions, or the live one and today's work, and see new, changed and removed screens with both pictures.
Both
What is live
Every card and screen names the live release. The app tells you when a release looks shipped but is unmarked.
Both
Plan releases ahead
A planned version holds only what changes in it, so ten planned releases do not mean ten copies.
Your agent
Scope on every change
Each change says where it applies: from this release on, this release only, or every planned release.
You
Screen timeline
See one screen or flow in every release as a strip of pictures, with what shipped under each.
Your agent
Version brief
One call tells your agent what changed since the live release, with pictures, notes, comments and what is approved.
You
Ready to ship
A board shows which screens are designed, approved and captured. Ship lists what is not ready, then freezes the release.
Both
Backlog ids
Tag revisions, releases and captures with a backlog id, then open the id to see every picture it changed.
Both
Changelog in pictures
Export what one release changes as before and after pictures.
The app we shipped does not match the design, and nobody noticed.
Each screen says Matches or Drifted.
Your agent takes screenshots of the running app, and AgentDesign stores each with its build, next to the design. A third picture marks where they differ.
Design and device
- You ask for a capture of the running app.
- The screenshot is stored with its build.
- The design on the left, the real app on the right.
- You see where the build differs from the design.
- Checked against what shipped, for each build.
Drift by release
- Each screen of a release is checked against its build.
- A third picture marks where they differ.
- Have it fixed, or rule the difference acceptable.
- You know which screens match the design.
Capture runner
- A dry run lists the screens and states first.
- The run stores each screenshot with its build.
Web captures
- A web build running on your Mac, captured at each breakpoint.
Both
Captures by build
Screenshots from the iOS simulator and the Android emulator are stored with their build and filed under its release.
Your agent
Capture runner
Your agent captures the screens and states a plan lists, only on devices you allow, after a dry run.
Your agent
Web captures
A web build running on your Mac is photographed at each breakpoint's width and stored next to the page's design.
Both
Design next to device
The design and the screenshot of the running app are shown side by side for each build.
Both
Difference picture
A third picture marks where the design and the screenshot differ. You can also compare one element alone.
Both
Drift per screen
Each screen of a release reads Matches, Drifted or Not captured. You can rule a difference Acceptable.
I know we drew that screen somewhere, and I cannot find it.
Search the project and share it.
Search covers screens, flows, components, notes and releases. Export a project or one release as Markdown, one HTML file or PDF, or mirror it into Obsidian.
Search
- Results appear as you type.
- A typing mistake still finds Settings.
- Filter the results to screens.
Docs
- Your agent writes a page about the project.
- The Sign in screen is shown inside the page.
Export
- Export a project or one release.
- One HTML file, for people who do not have the app.
Obsidian
- Each screen has a note in your Obsidian vault.
- Write under Annotations in the note.
- AgentDesign reads it back as a note.
Save a picture
- Right-click a picture to copy or save it.
Both
Search everything
Search screens, flows, components, notes and releases as you type. A typing mistake still finds it.
You
Similar results
Search also lists results that are similar in meaning, worked out on your Mac.
Both
Project docs
Your agent writes pages about the project and puts screens inside them.
Both
Export to share
Export a project or one release as Markdown with pictures, as one HTML file or as PDF.
You
Links into the app
Copy a link to any screen. Opening it takes you to that screen in AgentDesign.
Both
Obsidian mirror
Each screen, flow and board becomes an Obsidian note with pictures. What you write under Annotations is read back.
Your agent
Your other tools
Tested prompts connect designs to your issue tracker and code host through their own MCP servers.
You
Copy or save pictures
Right-click any picture to copy it, save it as PNG or show it in Finder.
Your agent
Command line
A command line tool works on the same files: init, render, check, version and capture.
agentdesign init --example
Your agent
Any MCP client
Works with Claude Code, Claude Desktop, Codex, Cursor and any other client that speaks MCP.
My design tool wants a seat, caps my agent's calls and keeps my files.
Plain files on your Mac.
Every screen, revision and comment is a file in a folder you choose. There is no account, no seat and no cap on what your agent reads or draws.
Files
- A project is a folder.
- Each revision is one file, numbered in order. Earlier ones never change.
- The files are readable JSON and Markdown.
- Put the folder in git, or back it up like any other.
- No account. Nothing is uploaded.
Both
Plain files
Every screen, revision, comment and note is a JSON, Markdown or PNG file in a folder you choose.
You
No account, no cloud
There is no sign-up, and your designs are never uploaded.
Your agent
No seats, no quotas
There are no seats and no cap on what your agent reads or draws.
Your agent
Local MCP server
The MCP server is a local program your agent starts. Its HTTP form needs a token kept on your Mac.
How it worksBoth
Delete can be undone
A deleted screen, component or flow can be brought back. Only you can remove it for good.
You
$49 once
One licence for one Mac, with one year of updates and no subscription. The demo is free.
I do not want one more slow tool that loses what I typed.
A native Mac app that stays quick.
Each page shows its shape while it loads, then fills in without a jump. A comment draft survives a restart, and Undo brings back one you discarded.
Setup
- Copy one line into your agent.
- The app shows when your agent has connected.
- Ask for a screen, and it arrives.
Loading
- Each page shows its shape at once.
- Then the pictures fill in, with no jump.
Undo
- A draft is discarded by mistake.
- Undo brings it back.
Shortcuts
- One sheet lists the shortcuts.
You
Guided setup
Five steps, a line that shows when your agent has connected, and a Test connection button.
You
Quick with big projects
Each page shows its shape at once and fills in without a jump, in a project of 200 screens.
You
Quiet when idle
The app does no work while nothing changes, and none while its window is hidden.
You
Keyboard for everything
Every action has a key or a menu item, and one sheet lists the shortcuts.
Both
Hard to lose work
Drafts survive a restart, a double click does not send twice, and Undo replaces "are you sure" prompts.
You
Native look
Light and dark, a Settings window, the Mac's own folder panel, and your last project reopened where you left it.
What 1.0 does not do.
- Nobody draws by hand in AgentDesign 1.0. Your agent draws and you review.
- Screens are drawn in AgentDesign's own format, not as HTML and CSS.
- It reads no .fig file and never signs in to Figma or Pencil. Import works from exported pictures, SVG and your agent.
- An imported picture is not an editable layout until your agent redraws it.
- Captures come from the iOS simulator, the Android emulator or a web build running on your Mac. Not from a physical device or a live site.
- There is no cloud sync. To share a project, put its folder in git.
- The first build runs on macOS. Windows and Linux versions are on the way.