UI Design to Code MCP Server: Install & Setup

Install UI Design to Code in Claude Code

Claude Code

claude mcp add ui-design-to-code -- npx -y ui-design-to-code-mcp

mcp.json (Claude Desktop, Cursor, VS Code, Windsurf)

{
  "mcpServers": {
    "ui-design-to-code": {
      "command": "npx",
      "args": [
        "-y",
        "ui-design-to-code-mcp"
      ]
    }
  }
}

Frequently asked questions

What does the UI Design to Code MCP server do?

Design-to-code artifact pipeline for UI screenshots, Figma node data, and visual review.

Is the UI Design to Code MCP server free?

Yes, most likely. Open source and no paid account or API key is mentioned in the listing. Check the provider for current pricing.

Does UI Design to Code run locally or remotely?

Local. Runs on your machine (stdio). You install it with npx, uvx, Docker or from source.

How do I add UI Design to Code to Claude Code?

Run: claude mcp add ui-design-to-code -- npx -y ui-design-to-code-mcp

More browser automation MCP servers

View all

Zeptap

zeptap/mcp

Operate a real iPhone from a Mac: screenshots, OCR, taps, typing, opening apps. Needs Zeptap.

LocalFree

Safari DevTools

2239

HayoDev/safari-devtools-mcp

MCP server for Safari DevTools — browser debugging and automation for AI coding agents

LocalFree

Duplex

Eric-huang799/duplex

A browser shared by a human and an AI — same tabs, same live session; 24 MCP tools (snapshot, click, type, screenshot, tabs, annotations), built-in models or any MCP client, Esc takeover.

LocalFreeTypeScript

Leapfrog

5163

anthonybono21-cloud/leapfrog

Multi-session browser MCP — 15 parallel isolated browsers, 37 tools, stealth, self-improvement.

LocalFree

Lyrenth

1243

lyrenth/lyrenth-mcp

Read any URL as a clean AIDocument (Markdown plus structure) through Lyrenth's cached index.

LocalFreeTypeScript

Expo Agent Bridge

2230

Rudrasamadhiya/expo-mcp-bridge

Let AI agents see, tap, type, scroll, screenshot and debug your Expo app on a real phone.

LocalFree