@refore-ai/html-to-figma-mcp

Your agent opens page after page — browsing through whatever you asked for, say a whole user flow or every sub-module — and imports each one onto your Figma design file through this MCP.

MCP (Model Context Protocol) that lets AI agents — Claude Code, Claude Desktop, Codex, Cursor, Windsurf and any other MCP client — import HTML files and web pages onto your Figma canvas, through the Refore HTML to Figma plugin.

Requirements

• Node.js 18+
• Figma, with the Refore HTML to Figma plugin installed

Setup

Claude Code

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

Claude Desktop — add to claude_desktop_config.json, then restart the app:

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

Codex — add to ~/.codex/config.toml:

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

Cursor / Windsurf / others — use the same command / args as the Claude Desktop JSON above.

Then open the Refore HTML to Figma plugin in Figma, go to the MCP tab and connect. Now ask your agent to import a page.

Tools

| Tool | Purpose | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | import_html | Preferred import path: import inline HTML or a local .html file path. Optional assets (local files the HTML references), viewport, target (insert under / replace an existing node — replace accepts a nodeId or a previous import's taskId), wait | | no_browser_fallback | Fallback for when the agent cannot get the page DOM for any reason: the agent first asks the user to choose between plugin-side URL fetching (public pages, no login state, fetched from the plugin edition's service region) and recording with the Refore browser extension; only calls this tool if the user picks the former | | get_capture_guide | Returns the standard DOM-capture playbook: capture script (strip scripts / canvas to img / base injection), strategies for getting a large dump out of browser tooling, and the import-verify-redo loop | | get_node_info | Inspect a node's bounds / visibility / direct children to verify an import | | export_node_screenshot | Export a PNG screenshot of a node (longest edge defaults to 1024px) | | remove_import | Remove the artifact of a previous import task (idempotent; only tasks of this connection) | | get_status | Returns ws_port / connected / queue { mine, total, running } | | wait_task | Block until a task settles, then return its final result | | get_task_status | Non-blocking check of a task's current phase / result |