MCP Import: Import Exactly What You Need

Refore HTML to Figma provides a Model Context Protocol (MCP) server. Connect it to Claude Code, Claude Desktop, Codex, Cursor, WorkBuddy, Kimi Code, or another MCP-capable AI agent, and you can ask the agent to open a page, interact with it, complete a flow, and import every state it sees into your Figma file.

What the MCP can do

• Import a page your agent just generated: after the agent creates a page, say “import it into Figma.” The agent sends the page directly to your Figma file—no saving files, opening the plugin, or selecting a file manually.
• Import an entire interaction flow: for example, ask the agent to open a site and import the whole add-user flow. It can open the page, click buttons, fill in forms, and import the list, dialog, and completed form as separate frames.
• Import every state on a page: ask the agent to open each tab, dialog, or dropdown on a page and import them one by one.

When not to use the MCP

Having an agent work through a page step by step is convenient, but it has two tradeoffs:

• It is slower: the total time is much longer than capturing and importing with the browser extension.
• Results are less predictable: the model decides what to import and when each state is ready. The same prompt may produce different results on separate runs. For consistent, high-fidelity results, capture a product tour or import the HTML files directly.

The MCP is most useful when you want the agent to do the interaction work for you or when it has just generated the page. If fidelity is the priority and you can capture the states yourself, use the browser extension instead.

Install the MCP

Video placeholder Install the MCP and import the first page

Works with every supported MCP client

The setup is the same in Claude Code, Claude Desktop, Codex, Cursor, WorkBuddy, Kimi Code, and other MCP-capable clients. The examples below use Figma throughout.

1. Open the Refore HTML to Figma plugin in Figma and switch to the MCP tab. If no agent is connected, the plugin displays the MCP setup guide.

2. Choose your agent in the guide and use any of the following setup methods:

   One-line prompt

   Copy the setup prompt from the plugin and send it to your agent. You can also use this prompt directly:

   Add https://www.npmjs.com/package/@refore-ai/html-to-figma-mcp as an MCP server.

   Claude Code, Claude Desktop, Codex, Cursor, and other MCP-capable agents can install the server this way.

   After installation, ask the agent to check whether the MCP is available and whether it needs a restart or any additional approval:

   Check whether the refore-html-to-figma MCP server is installed and working. Tell me if I need to restart or approve anything else.

   Command line

   Claude Code:

   claude mcp add refore-html-to-figma -- npx -y @refore-ai/html-to-figma-mcp

   Codex:

   codex mcp add refore-html-to-figma -- npx -y @refore-ai/html-to-figma-mcp

   Configuration file

   Add the following server to your agent’s MCP configuration. Claude Desktop uses claude_desktop_config.json; Cursor commonly uses ~/.cursor/mcp.json; WorkBuddy provides this under Connectors → Custom Connectors → Configure MCP. For other agents, find their mcpServers configuration:

   {
     "mcpServers": {
       "refore-html-to-figma": {
         "command": "npx",
         "args": ["-y", "@refore-ai/html-to-figma-mcp"]
       }
     }
   }

   Codex uses TOML. Add this to ~/.codex/config.toml:

   [mcp_servers.refore-html-to-figma]
   command = "npx"
   args = ["-y", "@refore-ai/html-to-figma-mcp"]

MCP package

The Figma plugin uses the following MCP package. You can copy its setup command directly from the plugin’s MCP tab.

Design tool	npm package
Figma	@refore-ai/html-to-figma-mcp

Codex desktop: Restart Codex after installing the MCP

If you install the MCP while the Codex desktop client is open, fully quit the desktop client and open it again so the new server can be loaded.

New MCP servers are not enabled automatically in WorkBuddy

After installing the MCP in WorkBuddy, manually trust and enable the new server:

1. In the left sidebar, select Experts, Skills & Connectors, then choose Connectors from the menu.

   Image placeholder Open Connectors in WorkBuddy

2. On the Connectors page, select Custom Connectors in the upper-right corner.

3. In MCP Service Management, find refore-html-to-figma, select Trust, and confirm that it is enabled. The switch should be on and a green status dot should appear beside the server name.

   Image placeholder Trust and enable refore-html-to-figma in WorkBuddy

Verify that the agent is connected

The quickest check is to ask the agent to use the MCP. If it can read the Figma file you are editing, the connection is working:

Use the refore-html-to-figma MCP server to read the Figma file I am editing. Tell me the file name, which pages it contains, and which page is currently selected.

You can also check the plugin’s MCP tab. Select N Agents Connected at the top to expand the MCP connection list. Each entry identifies the connected agent.

Codex

A connected Codex client appears as codex-mcp-client:

Image placeholder Codex connected in the plugin's MCP tab

Claude Code

A connected Claude Code client appears as claude-code, preceded by the directory where the session started. Each open Claude Code session has its own entry.

WorkBuddy

A connected WorkBuddy client appears as refore-html-to-figma:

Image placeholder WorkBuddy connected in the plugin's MCP tab

Import one page

After installation, give the agent a direct instruction. For example, ask it to generate a sign-in page and then say:

Import it into Figma.

The agent calls the Refore HTML to Figma MCP server and sends the page to your Figma file. You can follow the task progress in the plugin’s MCP tab. When the import finishes, the new frame appears on the current canvas.

You can also provide a URL directly:

Import https://example.com into Figma.
Import https://refore.ai into Figma. This page contains many images, so it will take longer.

Let the agent import an entire flow

This is where the MCP is most useful: give the agent a multi-step interaction flow, and it imports each state while working through it.

Video placeholder Import every state in an add-user flow

For example, give Claude Code the following instruction after installing the MCP:

Open https://refore.ai/dash/team and import every page in the complete add-user flow into Figma.

The agent can then:

1. Open the target page and import the member list.

2. Click the add button and import the add-user dialog.

3. Fill in and select the required form fields, then import the completed form state.

4. Stop when the flow is complete. Your Figma file now contains separate frames for the list, the empty dialog, and the completed form.

For a long flow, letting the agent work through and import every state saves manual effort. The total time will still be longer than capturing multiple states with the browser extension and importing them together.

Troubleshooting

The plugin always shows “0 connected”

• Confirm that the MCP server is installed. For example, run claude mcp list in Claude Code.
• In WorkBuddy, manually trust the server under Custom Connectors. See New MCP servers are not enabled automatically in WorkBuddy.
• Restart the Codex desktop client after installation. See Restart Codex after installing the MCP.
• Confirm that you installed @refore-ai/html-to-figma-mcp and that the Refore HTML to Figma plugin is open in Figma.

The imported page is incomplete

The agent can import only the DOM state it sees. If content appears after scrolling or hovering, make that behavior explicit in your prompt—for example, “scroll to the bottom before importing” or “open the navigation menu before importing.”

Requirements

Install Node.js 18 or later on the machine where your agent runs. The agent starts the MCP server through npx.

Learn about Refore HTML to Figma