Agent-Native Design MCP Server: Setup for Claude, Cursor and Other Apps

• Lists your design projects

  Shows the design projects you can open.

  Try: “List my design projects.”

  Network · list-designs

• Reads a design project and its files

  Opens a design and returns its data and files, or just a file list if you prefer.

  Try: “Open the Landing page design and describe its layout.”

  Network · get-design

• Lists reusable design templates

  Shows templates you can start from.

  Try: “What design templates are there for pitch decks?”

  Network · list-design-templates

• Creates an empty design project

  Makes a blank project. The assistant then fills it in with the design tools.

  Try: “Create a design called Pricing page.”

  Write · create-design

• Creates a design from a template

  Copies a template into a new design you can edit and refine.

  Try: “Create a design from the onboarding template.”

  Write · create-design-from-template

• Saves generated HTML and CSS into a design

  Writes the assistant's generated screens into your design. It can overwrite existing files in that design.

  Try: “Design a pricing page with three plans and save it.”

  Write · generate-design

• Edits one file in a design

  Makes a targeted change to a single file in a design.

  Try: “Make the hero button larger and blue.”

  Write · edit-design

• Updates a design project's settings and data

  Changes project details such as frames and dimensions. Fields you leave out stay as they were.

  Try: “Resize the mobile frame to 390 by 844.”

  Write · update-design

• Adds your local app pages to the canvas

  Creates or refreshes screens backed by your local app's URLs, shown as iframe frames on the overview canvas.

  Try: “Add my local /checkout page to the canvas.”

  Write · add-localhost-screens

• Reads the current state of a design

  Returns the live file contents, tweak settings and resolved CSS values of a design, so the assistant continues from what you see.

  Try: “Read the current state of the pricing page design.”

  Network · get-design-snapshot

• Reads the original template a design came from

  Returns the unmodified template a design was copied from, including its canvas size, type and markup.

  Try: “What did the original template for this design look like?”

  Network · get-design-template

• Lists design systems you can use

  Lists the design systems available to your account. It reads only.

  Try: “Which design systems do I have?”

  Network · list-design-systems

• Reads one design system in full

  Returns the tokens, assets and notes of a design system before screens are authored.

  Try: “Read the Acme design system.”

  Network · get-design-system

• Lists a design's color, type and spacing tokens

  Collects CSS custom properties from a design and its linked design system into a name, variable and value list.

  Try: “List the color tokens used in this design.”

  Read · index-design-tokens

• Lists the files in a design project

  Lists every file in a design project. It reads only.

  Try: “List the files in the landing page design.”

  Network · list-files

• Adds a file to a design project

  Adds a new file to a design project and returns its ID and path.

  Try: “Add a mobile variant file to this design.”

  Write · create-file

• Changes one file in a design project

  Updates the fields you give on an existing design file and leaves the others alone.

  Try: “Rename the file to checkout.html.”

  Write · update-file

• Deletes files from a design project

  Removes one or more files from a design project. If a file is already gone it reports deleted=false instead of failing. Treat it as permanent.

  Try: “Delete the unused hero-old.html file.”

  Delete · delete-file

• Renames a screen and fixes its links

  Renames one screen and rewrites the exact screen links in every HTML screen so nothing breaks.

  Try: “Rename the Home screen to Landing.”

  Write · rename-screen

• Starts a multi-screen generation on the canvas

  Starts a generation session that creates several distinct screens such as Home, Dashboard and Checkout, each saved as its own file.

  Try: “Generate Home, Dashboard and Checkout screens.”

  Write · generate-screens

• Shows 2-5 design directions and asks you to pick

  Puts several generated directions on the board and asks you to choose one in chat. After you choose, the other generated variants are deleted.

  Try: “Show me three directions for the pricing page.”

  Delete · present-design-variants

• Saves your tweak settings for a design

  Saves tuned values such as accent color, density and radius so they survive a reload and flow into exports.

  Try: “Keep these tweak settings for this design.”

  Write · apply-tweaks

• Adds a device-width frame to a design

  Adds a breakpoint frame, for example phone, tablet or desktop width, to the design's side-by-side view.

  Try: “Add a tablet breakpoint.”

  Write · add-breakpoint

• Removes a device-width frame from a design

  Removes one breakpoint frame by its ID from the design's breakpoint set.

  Try: “Remove the phone breakpoint.”

  Delete · remove-breakpoint

• Puts a chosen Assets image or video into a design

  Inserts an image or video URL picked in Agent-Native Assets into a design file.

  Try: “Insert the picked hero image into the landing page.”

  Write · insert-asset

• Exports a screen as a PNG

  Exports one screen as a PNG and returns a durable image URL. Screens with WebGPU effects need an open editor tab.

  Try: “Export the Home screen as a PNG.”

  Network · export-png

• Packages a design for a coding agent

  Creates a handoff with tokenized file and ZIP URLs plus a ready prompt, reflecting the design as it stands now. Asks approval for outside agents.

  Try: “Hand off this design to my coding agent.”

  Network · export-coding-handoff

• Registers a local dev server as a design source

  Stores a localhost dev server URL, bridge URL and route list made by agent-native design connect.

  Try: “Connect my localhost:3000 app.”

  Write · connect-localhost

• Lists your connected local apps

  Lists localhost design source connections for your account. It reads only.

  Try: “Which local apps are connected to Design?”

  Network · list-localhost-connections

• Opens a running local app in the Design canvas

  Opens or refreshes a running localhost app in overview mode without a Design login and places its screens.

  Try: “Open my local app in Design.”

  Write · open-visual-edit

• Switches a screen between static HTML and a live URL

  Changes one screen between stored static HTML and a live localhost URL, keeping route details.

  Try: “Make the Home screen a live localhost view.”

  Write · update-screen-source

• Hands a request to the app's own AI agent and returns its answer

  Sends your request to the app's built-in assistant, which does the work inside the app. Use it for anything the direct tools below do not cover. Long jobs come back as a task you check on later.

  Try: “Ask the app to turn this wireframe into a polished mobile screen using our design system.”

  Write · ask_app

• Checks on a long ask_app task until it finishes

  Checks whether a long request you handed to the app has finished and returns the result. It only reads status.

  Try: “Check whether that task has finished.”

  Network · ask_app_status

• Lists the Agent-Native apps you can reach and their URLs

  Shows which Agent-Native apps your account can reach and where they live. It changes nothing.

  Try: “Which Agent-Native apps do I have access to?”

  Read · list_apps

• Builds a link that opens the app at a specific view or record

  Gives you a link that opens the app on the right screen or record. It does not change anything.

  Try: “Give me a link that opens the app on my designs.”

  Read · open_app

Watch out for

• It can delete design files and variants

  delete-file removes files from a design project, remove-breakpoint drops a device frame, and present-design-variants deletes the variants you did not pick. The source describes no trash or undo for them, so duplicate a design you care about first. github.com

• Generating can overwrite design files

  generate-design and edit-design create or change files in a design. Duplicate important designs first. github.com

• Localhost screens reach your local app

  add-localhost-screens adds URLs from your local app to the canvas. Only add pages you are happy to show in the design. github.com

• No read-only switch is documented

  The project documents no setting that removes the write tools. github.com