# UI Design to Code

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

Canonical: https://claudelist.com/listings/mcp-reg-io-github-kinglions-ui-design-to-code-mcp-ebfa26de18

Category: MCP Servers

Source: community · Kinglions

Source checked: 2026-10-14

Website: https://www.claudemcp.org/mcp/registry/io-github-kinglions-ui-design-to-code-mcp-ebfa26de1844.html

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

## Install or set up

1. Review the publisher repository and npm package `ui-design-to-code-mcp@0.1.12` before running it. The MCP Registry declares this package as a stdio server.
2. Install Node.js, then run the command below in your Claude Code project. Check the publisher README for any account or configuration requirements.
3. Restart Claude Code and use `/mcp` to confirm the connection and review its tools and permissions.

```sh
claude mcp add mcp-io-github-kinglions-ui-design-to-code-mcp-ebfa26 -- npx -y ui-design-to-code-mcp@0.1.12
```

Installation guide: https://github.com/Kinglions/ui-design-to-code-mcp