layerwright

by shayan-m81 · Media & Design · ★ 9

layerwright is an MCP server by shayan-m81. Turn Claude Design and HTML into editable Figma layers (Auto Layout, your Design System components), and Figma frames into code with your own React components. MCP server + Figma plugin for Claude Code and Cursor. It has 9 GitHub stars and ranks #845 of 2017 in Media & Design by stars.

Category: Media & Design
Author: shayan-m81
GitHub stars: 9
This week: Tracking since 18 Oct 2026
Weekly downloads: 193
Language: TypeScript
License: MIT (open source)
Last update: 2026-10-12 (12 days ago)
Links: Source Website npm

ai-design
claude
claude-code
design-system
design-to-code
figma
figma-plugin
html-to-figma
mcp
model-context-protocol
cursor
mcp-server

How to install layerwright

layerwright is published on npm as layerwright, and it depends on @modelcontextprotocol/sdk. These steps assume it runs as a local stdio server, which is the usual setup.

Check the README. Confirm the start command and note any API keys or environment variables it needs (pass them with -e KEY=value or an env block). You need Node.js for npx.

Add it to Claude Code from a terminal:

claude mcp add layerwright -- npx -y layerwright

Or add it to Cursor or Claude Desktop in .cursor/mcp.json or claude_desktop_config.json:

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

Restart the client and check it. Run claude mcp list, or open the client's MCP settings, and confirm layerwright and its tools are listed. The install guide covers VS Code and Codex.

Also listed in

Maintain this project? Get it featured ($99/mo, pinned at the top of Media & Design) or see what featuring includes.

Report a problem with this listing

Frequently asked questions

What is layerwright?

layerwright is an MCP server by shayan-m81 in the Media & Design category. Turn Claude Design and HTML into editable Figma layers (Auto Layout, your Design System components), and Figma frames into code with your own React components. MCP server + Figma plugin for Claude Code and Cursor. It has 9 GitHub stars and ranks #845 of 2017 in Media & Design by stars.

Is layerwright free and open source?

Yes. layerwright is published under the MIT license, so you can run, modify and self-host it at no cost. If it connects to a paid service, that service's own pricing and API terms still apply. Check the repository for the exact license text before using it commercially.

What are the alternatives to layerwright?

Other Media & Design projects on MCP Harbor include Shotkiln, remotion, LocalAI. Each alternative links to its own page with stars, license and recent activity. The Media & Design category ranks all 2017 by stars, and you can re-sort it by growth this week.

Alternatives to layerwright

Shotkiln★ FeaturedMCP Registry

shotkiln.com

Screenshot, PDF and Open Graph image API for AI agents: capture pages, render PDFs, make OG images.

remotion★ 66,837

remotion-dev · TypeScript

🎥 Make videos programmatically with React

LocalAI★ 49,903

mudler · Go+305 stars this week (+0.6%)

LocalAI is the open-source AI engine. Run any model - LLMs, vision, voice, image, video - on any hardware. No GPU required.

chakra-ui★ 40,702

chakra-ui · TypeScript

Chakra UI is a component system for building SaaS products with speed ⚡️

next-ai-draw-io★ 36,394

DayuanJiang · TypeScript+92 stars this week (+0.3%)

Draw and edit draw.io diagrams by chatting with an AI. Web app, desktop app, and an MCP server for Claude Code, Cursor, Codex and VS Code.

agentscopeTrending★ 33,797

agentscope-ai · Python+378 stars this week (+1.1%)

Build and run agents you can see, understand and trust.

All 2017 Media & Design MCP servers →

Data last updated 25 October 2026. Stars and downloads are refreshed every day from GitHub and npm.