# 安装 UI Design to Code

- 类型: MCP 工具
- 说明: 将界面截图与 Figma 节点数据转成代码，并支持可视化审查流程。
- 仓库: https://github.com/Kinglions/ui-design-to-code-mcp
- ⚠ 安全: 该 MCP 工具材料较少，但从描述看其主要处理 UI 截图、Figma 节点数据与视觉评审工件；未声明密钥和远程端点，且为官方 Registry 收录的开源项目，整体偏低风险。需留意其具备本机执行能力，且可能接触设计素材与生成代码相关文件，因此更适合在受控目录中使用。

## 方式一 · 一键代装（复制提示词让 AI 代劳）

### Claude Code
```
请帮我安装 askskill 上的 "UI Design to Code" MCP 服务：
执行：claude mcp add 'io-github-kinglions-ui-design-to-code-mcp' -- npx -y ui-design-to-code-mcp
```

### Codex
```
请帮我安装 askskill 上的 "UI Design to Code" MCP 服务：
在 ~/.codex/config.toml 中添加：
[mcp_servers.io-github-kinglions-ui-design-to-code-mcp]
command = "npx"
args = ["-y","ui-design-to-code-mcp"]
然后重启 Codex 生效
```

### Cursor
```
请帮我安装 askskill 上的 "UI Design to Code" MCP 服务：
在 .cursor/mcp.json 的 "mcpServers" 中添加：
"io-github-kinglions-ui-design-to-code-mcp": { "command": "npx", "args": ["-y","ui-design-to-code-mcp"] }
然后在 Cursor 设置 > MCP 中启用
```

## 方式二 · 命令行安装（原生命令与配置）

### Claude Code
```bash
claude mcp add io-github-kinglions-ui-design-to-code-mcp -- npx -y ui-design-to-code-mcp
```

### Codex
```bash
codex mcp add io-github-kinglions-ui-design-to-code-mcp -- npx -y ui-design-to-code-mcp
```
配置文件 ~/.codex/config.toml：
```toml
[mcp_servers.io-github-kinglions-ui-design-to-code-mcp]
command = "npx"
args = ["-y","ui-design-to-code-mcp"]
```

### Cursor
配置文件 .cursor/mcp.json：
```json
{
  "mcpServers": {
    "io-github-kinglions-ui-design-to-code-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "ui-design-to-code-mcp"
      ]
    }
  }
}
```
一键安装：cursor://anysphere.cursor-deeplink/mcp/install?name=io-github-kinglions-ui-design-to-code-mcp&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsInVpLWRlc2lnbi10by1jb2RlLW1jcCJdfQ