UI Design to Code

About UI Design to Code

Use UI Design to Code with your agent

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

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

Frequently asked questions

What is UI Design to Code?

UI Design to Code is an MCP (Model Context Protocol) server by kinglions in the Design Tools category. Design-to-code artifact pipeline for UI screenshots, Figma node data, and visual review.

How do I connect UI Design to Code to Claude, Cursor, or another MCP client?

Install UI Design to Code from its npm package (ui-design-to-code-mcp) and register it under "mcpServers" in your client's MCP configuration — for example claude_desktop_config.json or Cursor's mcp.json — then restart the client.

Is UI Design to Code open source?

Yes — the source code is public at github.com/kinglions/ui-design-to-code-mcp.

Can AI agents pay to use UI Design to Code?

Not yet through Loomal — UI Design to Code is listed as a free directory entry. If its maintainer verifies ownership, they can set per-call USDC pricing that agents pay over x402, with settlement on Base.