UI Design to Code

Overview

UI Design to Code is a Model Context Protocol (MCP) server: Design-to-code artifact pipeline for UI screenshots, Figma node data, and visual review. Because it speaks the Model Context Protocol, AI assistants can use UI Design to Code as a set of callable tools instead of you copy-pasting between apps.

It runs locally: the npm package ui-design-to-code-mcp speaks MCP over stdio on your machine. No credentials are required — it works out of the box. The current release is v0.1.12, published under the MIT license, with source at Kinglions/ui-design-to-code-mcp on GitHub.

On mcp.site, UI Design to Code sits in the Design category. Any MCP client can use it — Claude Desktop, Claude Code, Cursor, VS Code, Windsurf, Zed among them — via the install snippets below. If you maintain UI Design to Code for Kinglions, claim this listing to verify ownership, earn the Verified badge, and keep the details current.

Installation

// claude_desktop_config.json
{
  "mcpServers": {
    "ui_design_to_code": {
      "command": "npx",
      "args": [
        "-y",
        "ui-design-to-code-mcp"
      ]
    }
  }
}