See every screen before your agent builds it.
AgentDesign is a desktop app where your AI coding agent designs each screen of your app, and you review it before any code is written.
Fix a screen while it is still a design. Click on what is wrong, write what you want, and your agent changes the design. Every change is kept, so you can see how each screen changed over time and compare one release with the last.
AgentDesign runs on macOS 13 or later today, and Windows and Linux versions are on the way. You do not need an account.
- You ask your agent for a screen.
- Each time your agent saves a screen, AgentDesign keeps that design and numbers it as a 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 agent designs the screens, and you see every change.
- It works with any AI coding agent that supports MCP, the standard way for an agent to connect to a tool.
- You can design iOS, Android and web apps.
- A licence costs $49 once for each computer, and you do not need an account.
What you can do in AgentDesign.
- History
Every change to a screen is kept.
Each time your agent changes a screen, AgentDesign keeps the design it replaced. You can look back at how the screen changed, and your agent can go back to any earlier design.
- Releases
Compare one release with another.
Pick two releases of your app and see which screens are new, changed or removed. Each changed screen shows the old design and the new design side by side.
- Review
Pin a comment where the problem is.
Click on the design where something is wrong and write what you want. Your agent gets your comment with the exact spot and changes the design.
- Real app
Put the design next to the real app.
Your agent takes a screenshot of your app running in the iOS simulator or the Android emulator. AgentDesign shows it beside the design, so you see where the build differs.
- Your files
Keep your designs as files in git.
Every screen, every change and every comment is a readable file in a folder you choose. You can put that folder in git, and nothing is uploaded.
- Releases
A shipped release never changes.
When you mark a release as shipped, its designs are locked. You can open that release later and see exactly what it looked like.
- Review
Only you can close a comment.
Your agent marks a comment Addressed when it has changed the design. The comment stays open until you look and resolve it.
- Live
Watch the design change as your agent works.
The app shows each change as your agent makes it. You never press refresh.
What goes wrong when agents build your app.
Until now, your agent showed you a screen as a sketch in chat, a throwaway HTML file or the finished build.
- You first see a screen after your agent has built it.
- Feedback you type in chat is forgotten when the next session starts.
- Nobody can say which screens changed since the last release.
- The app you ship no longer looks like its design.
- Existing designs sit in Figma and would have to be drawn again.
- Design tools charge for each person every month and limit how much your agent can use them.
My agent builds screens nobody designed. I see them only after they are code.
Your agent designs each screen first.
Your agent designs each screen in AgentDesign and gets back an image of it, with a warning if any text is cut off, so it can fix that before you look. Buttons, cards and colours are defined once and used on every screen.
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.
Design options
- You ask your agent for options for one part of a screen.
- They arrive side by side under your question.
- You pick one and say why, and AgentDesign keeps your reason.
- The option you picked becomes the screen's new design.
- The options you did not pick are kept, so you can look at them again.
User flows
- You ask your agent for a flow: the screens in the order a person uses them.
- The screens are laid out in order.
- Each step from one screen to the next is labelled.
- When a screen changes, the flow shows its new design.
- You see the whole flow in one place.
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.
- More on the Features page:
- Your agent sees its work
- Starter kit
- Screen states
- Shadows, gradients and paths
- Every change is kept
I tell the agent the button is wrong in chat, and the next session has forgotten.
Pin the comment on the screen.
Click on the design or drag a box around the part that is wrong, and your agent gets your comment and the exact elements you marked. When your agent has changed the design, it marks the comment Addressed, and only you can resolve it.
Pin a comment
- Open a screen.
- Drag a box around what should change.
- Write what you want changed and send the comment.
- Your agent reads the comment and changes the design.
- Your agent marks the comment Addressed and links it to the new revision.
- You resolve the comment when the design is right.
- Each comment is kept with the revision that answered it, as a record of why the design changed.
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 an image 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.
Try it
- Try it here.
- Your comment is pinned on the design.
- The agent changes the design and marks the comment Addressed.
- You resolve the comment when the design is right.
- More on the Features page:
- Images and links in comments
- Comments reach your agent
- Two designs side by side
- Notes beside screens
- Live updates
I cannot tell what the next release changes, or what the live one looks like.
Know what changed since the live release.
AgentDesign keeps every change to every screen and every release of your app. Compare any two releases to see which screens are new, changed or removed, with both designs side by side.
What changed
- AgentDesign keeps each release of your app and calls it a version.
- Pick two versions to compare.
- New, changed and removed screens are listed.
- A changed screen shows both designs side by side.
- You know what the next release changes before it ships.
One screen in every release
- 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.
The app we shipped does not match the design, and nobody noticed.
Check the design against the real app.
Your agent takes screenshots from the iOS simulator or the Android emulator, or of a web app running on your computer. AgentDesign puts each screenshot next to its design and marks the screen Matches or Drifted. Drifted means the app no longer looks like its design.
Design next to the real app
- You ask your agent for a screenshot of the running app.
- The screenshot is saved with its build number.
- The design is on the left, and the real app is on the right.
- You see where the build differs from the design.
- Each build of your app is checked against its design.
Drift by release
- Each screen of a release is checked against its build.
- A third image marks where the two differ.
- Have it fixed, or rule the difference acceptable.
- You know which screens match the design.
- More on the Features page:
- Automatic screenshots
- Screenshots of web pages
- Differences marked
My designs are already in Figma. I do not want to design them again.
Bring in the designs you have.
Export your frames from Figma, Pencil, Sketch or any other tool as PNG or SVG. Each one comes in as a screen that is an exact image of your frame, after AgentDesign shows you a plan of what it will create.
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, which means it is an image and not yet an editable layout.
- Its text can be searched and pointed at.
An imported image is not an editable layout until your agent rebuilds it as one. AgentDesign reads exported PNG and SVG files, and your agent reads Figma or Pencil through that tool's own MCP server. AgentDesign never signs in to them and reads no .fig file.
My design tool charges for each person, limits my agent and keeps my files on its servers.
Plain files on your computer.
Every screen, every saved change, every comment and every note is a JSON, Markdown or PNG file in a folder you choose. There is no account, no fee for each person and no limit on how much your agent reads or designs.
- 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.
- You need no account, and nothing is uploaded.
- Put the folder in git, or back it up like any other.
- Your designs are never uploaded.
- Your agent connects through a small program on your computer, called an MCP server, which the agent starts itself.
Everything in AgentDesign.
Every feature is on one page, in these eight groups.
- Design
Your agent designs each screen first
Your agent designs screens, reusable components and user flows, and every change is kept.
It covers shared components, web breakpoints and a starter kit.
- Import
Bring in the designs you have
Exported images and SVG files from any design tool become screens, after a preview of what will be created.
It covers import from a folder, import from Figma or Pencil, and a preview first.
- Review
Comments stay on the screen
Pin a comment on the design, and your agent is told the next time it uses AgentDesign.
It covers pinned comments, a review queue and a list of who has the next move.
- Releases
Every release of your app is kept
Compare any two releases, and see what is not ready before you ship.
It covers comparing two releases, one screen in every release, and a ready-to-ship check.
- Real app
See which screens match the real app
Screenshots of the running app are saved with their build number, next to the design.
It covers screenshots by build, marked differences and a Matches or Drifted label for each screen.
- Find and share
Search the project and share it
Search the whole project, and export it for people who do not have the app.
It covers search, export and a copy of the project in Obsidian.
- Your files
Plain files on your computer
Every screen and comment is a file in a folder you choose, with no account.
It covers plain files, no account, no cloud and no usage limit.
- Desktop app
A native desktop app that stays quick
Pages show their outline while they load, and a comment you are writing survives a restart.
It covers guided setup, a key for every action and protection against lost work.
Set up in three steps.
Install AgentDesign.
Download the app and move it to Applications.
Connect your agent.
Copy one line of text into your agent. The app shows when your agent has connected.
Ask for a screen.
Paste the first prompt. A new project can start with ready-made colours, components and first screens.
claude mcp add --scope user agentdesign -- "/Applications/AgentDesign.app/Contents/MacOS/agentdesign" mcp
The app shows the exact line for your agent and your computer, with your folder in it.
AgentDesign costs $49 once for each computer.
One year of updates is included. After that the app keeps working, and new versions are $19 a year if you want them.
- A licence for two computers used by the same person costs $79.
- A team pack for 5 computers costs $199.
- The demo is free, and there is no subscription and no account.
Questions
Why not have my agent write HTML mockups?
It can. Then the mockups sit in a folder with no history, no releases and no way to comment on one exact element. AgentDesign keeps every change to every screen, records which release each screen belongs to, and gives you a place to comment that your agent reads.
Why not the Figma or Pencil MCP server?
They connect an agent to a design tool, with that tool's account, plans and limits. Figma's MCP server limits how many calls your agent can make, and it works only on files kept in Figma. Pencil limits agent use on its free plan and charges for each person on its paid plans. AgentDesign has no account, no fee for each person and no limit on how often your agent uses it. It also keeps what an app team needs beside the design: every change, every release, screenshots of the real app and comments your agent reads.
Does my agent see what it designed?
Yes. After every change the agent gets an image of the screen, with a warning if text is cut off or a font is missing, so you and the agent look at the same thing.
Does it replace Figma?
No. In AgentDesign nobody designs by hand: your agent designs and you review. If your team designs by hand, keep the tool you have. You can import those designs as exported PNG or SVG files.
Can I bring my Figma designs?
Yes, as exported files. Export the frames from Figma as PNG or SVG and paste one prompt into your agent. Your agent reads the names, text and colours through Figma's own MCP server, and each frame is imported as an image of the screen. It becomes an editable design when your agent rebuilds it. AgentDesign cannot open a .fig file and never signs in to Figma. Import from Pencil works the same way.
Does it work for web apps?
Yes. You can design web pages in the same project as iOS and Android screens. A web page is designed at several widths and can be shown in a browser frame, and your agent can take a screenshot of a web app running on your computer at each width. Designs are saved in AgentDesign's own format, not as HTML.
Where are my designs stored?
In a folder on your computer that you choose. AgentDesign has no server and no account, and it does not upload your designs.
Which AI coding agents does it work with?
AgentDesign works with Claude Code, Codex, Cursor and other AI coding agents that support MCP (Model Context Protocol). The app gives you the setup text to copy into your agent.
Can I use it without an agent?
Partly. You can look at a project, comment on it and import a folder of image files. Designing or changing a screen needs an agent.
What does it cost?
$49 once for one computer, with one year of updates. After the year the app keeps working, and new versions are $19 a year if you want them. Two computers for the same person are $79, and a pack for 5 computers is $199. The demo is free. If it is not right for you, email within 14 days for a full refund.
What is in the free demo?
The free demo holds one project of up to 10 screens, with design, import, comments, search and project docs. A licence removes that limit and adds release tracking and comparison, screenshots of the running app, design options, export and the Obsidian mirror.
Does the app go online?
Once. When you enter a licence key, the app checks it online one time. After that it works offline. Your designs are never sent anywhere.
Is there a Windows or Linux version?
They are on the way. AgentDesign runs on macOS 13 or later today.
See the design before your agent writes the code.
AgentDesign runs on macOS 13 or later today, and Windows and Linux versions are on the way. You do not need an account.