# layerwright

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/shayan-m81/layerwright  
**GitHub Stars:** 8  
**npm Downloads (last month):** 2049  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/layerwright

## Description
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

## Claude Desktop Quick Installation
No confirmed install details yet, so no config is published. Follow the setup steps in the repository above.

## Documentation

## What layerwright does

The layerwright MCP server provides a local bridge between AI coding sessions and Figma. Its paired Figma plugin can import standalone HTML as editable frames, including Auto Layout derived from Flexbox, text styling, images, SVG icons, CSS backgrounds, canvas content, gradients, borders, shadows, and responsive desktop and mobile layouts. Right-to-left text and visual order are supported for languages such as Persian, Arabic, and Hebrew.

The layerwright MCP server also supports prompt-driven design plans. Claude can produce a typed JSON design plan that is validated against the available Figma components, variables, and text styles before the plugin builds it. Plans can include prototypes, interactions, scrolling frames, flow starting points, and transitions. Existing designs can be edited, converted into components or variant sets, synchronized with a Design System, or exported back into an editable plan.

For the reverse workflow, Figma frames are inspected as structured plans. React or Next.js codebases can be scanned for exported components, including Tailwind and shadcn/ui usage. Confirmed mappings are stored in `.layerwright/mapping.json`, allowing generated implementations to reuse existing components and theme tokens rather than creating duplicate controls.

## How it works

Run the MCP server from a project and open the Layerwright plugin in Figma desktop. Coding sessions join the local connection, and the plugin sends requests to the selected session. Multiple sessions and Figma files can be connected; each request is associated with the selected session and working file.

The plugin can send selected layers or custom requests such as building a mobile version, polishing a design, making a component, or implementing a frame in code. Text layers beginning with `@<session>` can also act as requests. Claude Code can be woken by the plugin monitor, while Codex receives requests on its next Figma step or through `/layer:inbox`.

## Setup and configuration

Initialize Layerwright in the project with:

```bash
npx layerwright init
```

Then open the plugin in Figma desktop. Plain HTML imports do not require an AI session and can be run with `npx layerwright import ./design.html --to-figma`. To install fonts shipped with an export, use `npx layerwright fonts ./export --install`.

The layerwright MCP server uses the local machine and the plugin communicates only with `localhost`. The documented workflow requires no API key, cloud account, or manually configured port. A Design System scan and component mappings are needed when imports or generated code should use an existing component library.

## Tools and capabilities

Named MCP operations include:

- `import_html_to_plan` for converting HTML into a structured design plan.
- `figma_import_html` for pixel-faithful imports and review boards.
- `figma_import_assets` for placing SVGs and images into a Figma page.
- `figma_analyze_design` for Design System synchronization and audits.
- `figma_edit` for modifying existing Figma frames in one undo step.
- `figma_inspect` for reading a frame as a design plan.
- `code_scan_components` for finding components in a codebase.
- `code_mapping` for saving confirmed Figma-to-code mappings.
- `code_verify_usage` for checking component reuse and flagging raw or arbitrary implementations.

The layerwright MCP server also supports prototypes, asset conversion, Figma-to-plan export, component instances, variables, text styles, and AI cursor feedback in the plugin window and canvas.

_Full upstream README: https://allmcps.com/mcp/layerwright/readme_