# layerwright MCP server

> Converts HTML and Claude designs into editable Figma layers and transforms Figma frames into code using your existing React components.

- Repository: https://github.com/shayan-m81/layerwright
- Page: https://hostedmcp.org/servers/shayan-m81/layerwright
- Transport: stdio
- Stars: 10
- License: MIT

## Install

### Claude Code

```sh
claude mcp add layerwright -- npx -y layerwright
```

### Cursor (`~/.cursor/mcp.json`)

```json
{
  "mcpServers": {
    "layerwright": {
      "command": "npx",
      "args": [
        "-y",
        "layerwright"
      ]
    }
  }
}
```

### VS Code (`.vscode/mcp.json`)

```json
{
  "servers": {
    "layerwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "layerwright"
      ]
    }
  }
}
```

### VS Code CLI

```sh
code --add-mcp '{"name":"layerwright","type":"stdio","command":"npx","args":["-y","layerwright"]}'
```

### Claude Desktop (`claude_desktop_config.json`)

```json
{
  "mcpServers": {
    "layerwright": {
      "command": "npx",
      "args": [
        "-y",
        "layerwright"
      ]
    }
  }
}
```

### Codex

```sh
codex mcp add layerwright -- npx -y layerwright
```

### Codex config.toml (`~/.codex/config.toml`)

```toml
[mcp_servers.layerwright]
command = "npx"
args = ["-y", "layerwright"]
```

### Gemini CLI

```sh
gemini mcp add -s user layerwright npx -- -y layerwright
```

### Gemini settings.json (`~/.gemini/settings.json`)

```json
{
  "mcpServers": {
    "layerwright": {
      "command": "npx",
      "args": [
        "-y",
        "layerwright"
      ]
    }
  }
}
```

## Tools (10)

- `import_html_to_plan`
- `figma_execute_plan`
- `figma_preview_plan`
- `figma_edit`
- `figma_export_image`
- `figma_link`
- `figma_import_assets`
- `figma_migrate`
- `figma_cleanup`
- `layerwright_memory`

## FAQ

### Does Layerwright require an API key or cloud account?

No, everything runs locally on your machine and the plugin only communicates with localhost.

### Can it convert HTML to Figma with Auto Layout?

Yes, it imports HTML into Figma as real frames with Auto Layout, including direction, gap, padding, alignment, and wrap.

### How does it handle existing React components?

It scans your codebase for existing components and suggests mappings so Claude can implement Figma frames using your actual components and tokens.