layerwright

Turn Claude Design and Claude Code designs into native, editable Figma files (HTML to Figma with Auto Layout and your Design System components), and Figma frames into code that uses your own React components. An MCP server and Figma plugin for Claude Code

Installation

MCP client config (paste into mcp.json)

{
  "mcpServers": {
    "npm-layerwright": {
      "command": "npx",
      "args": [
        "layerwright"
      ]
    }
  }
}

Agent install prompt

Copy and paste into Cursor / Claude / other agents to install this MCP for you

Please read this MCP repository and install it into my current environment:
https://www.npmjs.com/package/layerwright

Known working client config (can write into mcp.json):
{
  "mcpServers": {
    "npm-layerwright": {
      "command": "npx",
      "args": [
        "layerwright"
      ]
    }
  }
}

Please: 1) check README for deps and env vars; 2) write config for my client; 3) if secrets are missing, tell me what to fill — do not invent values.

GitHub

Related servers