Layerwright

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:

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.