# ui-design-to-code-mcp

> Use this tool when you need to automate the conversion of UI designs into functional code, solving problems such as manual coding errors and design inconsistencies. It ingests UI screenshots, Figma JSON, or hybrid sources and outputs cross-platform design-to-code artifacts. Ideal for streamlining design-to-development workflows, this tool simplifies the handoff between designers and developers.

Canonical page: https://skillsregistry.net/skills/kinglions-ui-design-to-code-mcp  
JSON: https://api.skillsregistry.net/v1/skills/kinglions-ui-design-to-code-mcp

## Description

MCP server for ingesting UI screenshots, Figma MCP node JSON, or hybrid Figma-plus-screenshot sources into a cross-platform design-to-code artifact pipeline.

## Trust

- **Trust score (0–1):** 0.69
- **Verification tier:** scanned
- **Last scanned:** 2026-09-01

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** mcp-remote
- **Runtime environment:** api
- **Category:** devops-ci
- **Updated:** 2026-09-01

## Source

- **Source listing:** [Glama](https://glama.ai/mcp/servers/vk5w56dbih)
- **Repository:** <https://github.com/Kinglions/ui-design-to-code-mcp>

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "kinglions-ui-design-to-code-mcp"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/kinglions-ui-design-to-code-mcp` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/kinglions-ui-design-to-code-mcp/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt