Designing screens with Claude over MCP
A Markdown spec file is great for a one-time handoff. But once you are changing the design, exporting, and handing it over again and again, it is faster to let Claude see the project directly. ScreenPath runs an MCP (Model Context Protocol) server so Claude can read and edit your projects.
Connecting
The ScreenPath MCP server address is https://screenpath.dev/mcp. You connect with OAuth, and on the consent screen you choose which projects Claude can see and with what access (read-only or write). MCP connections are a Pro plan feature.
Claude desktop and claude.ai
- Open Customize › Connectors.
- Click + and choose Add custom connector.
- Enter ScreenPath as the name and the address above as the remote MCP server URL.
- In the window that opens, sign in with Google, choose the projects to connect, and allow.
Claude Code — run this in your terminal:
claude mcp add --transport http --scope user screenpath https://screenpath.dev/mcp
Then open /mcp in Claude Code and authenticate screenpath. Full instructions and troubleshooting are in the MCP connection guide.
What Claude can do
- Read — the project overview, screens, design rules, flow, computed layout, the part you have selected right now, recent changes, comments, and versions. It can also produce the Markdown spec on the spot.
- Write — create and edit screens, parts, groups, actions (paths), variables, motion presets, design tokens, and components. Several edits can run as one batch.
- See while editing — render a screen as an image (
render_screen) and walk a flow by pressing through it to find broken paths or loops (simulate_flow). - Import — there are also tools that read existing app code and bring it into a ScreenPath project.
On a read-only connection, Claude does not see the write tools at all.
It shows up live
Claude's changes arrive the same way a teammate's edits do. With ScreenPath open, the screens and parts Claude touched appear right away, highlighted in purple. Each Claude edit is a single undo step, so you can roll back anything you don't like. In the other direction, Claude can read the part you selected on the map or in the editor as the "current selection", so a short request like "split this into two buttons" just works.
Requests worth trying
Look at this project's flow. If there is no screen for a failed sign-in, create one and connect it.
Add an empty state to the cart screen and connect a "Keep shopping" button to the product list.
Implement this project in Next.js. Keep the screen names and paths exactly as they are in ScreenPath, and link the files you create to the screens.
When code and screens are linked like in the last request (source link keys), Claude knows which file to change the next time the design changes.
About your data
ScreenPath does not send your project data to AI providers to run the service. Claude reads only the projects you connect and allow yourself, and that processing follows the policy of the Claude product you use. You can disconnect at any time from settings.