MCP - Connect your AI tool to Figma

MCP (Model Control Protocol) is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications.

With html.to.design, send AI-generated designs to Figma via MCP.

Illustration of Claude Desktop and Cursor connected to Figma via html.to.design

Demo

How to setup for Claude Desktop

1. Download and install the Claude Desktop app.

2. Install uv

On MacOS: brew install uv
On Windows: powershell -c "irm https://astral.sh/uv/install.ps1 | more"

For more alternatives to install uv, check out the uv installation page.

3. Add the MCP server to Claude Desktop

Claude menu on your computer and select “Settings…” Please note that these are not the Claude Account Settings found in the app window itself.

This is what it should look like on a Mac:

Click on “Developer” in the left-hand bar of the Settings pane, and then click on “Edit Config”:

This will create a configuration file at:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

if you don’t already have one, and will display the file in your file system.

4. Edit the `claude_desktop_config.json` file

Use you favorite text editor to open the claude_desktop_config.json file and add the configuration provided by plugin in the [Configure MCP] button.