@ai.to.design/figma-connector

Local MCP server for ai.to.design — render AI-generated HTML/CSS as native, editable Figma designs. Bridges your agent (Claude, Cursor, Codex, opencode, …) to the ai.to.design Figma plugin — no cloud, no auth, no account.

Docs: ai-to-design.com/docs

Install

Runs via npx — no global install needed. Requires Node.js 18+.

npx -y @ai.to.design/figma-connector@latest

Agent setup

Pick your agent. After configuring, open the ai.to.design plugin in Figma, toggle the connection on, and the MCP tools become available.

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "ai-to-design": {
      "command": "npx",
      "args": ["-y", "@ai.to.design/figma-connector@latest"]
    }
  }
}

Restart Claude Desktop.

Claude Code CLI

claude mcp add ai-to-design -- npx -y @ai.to.design/figma-connector@latest

Or edit ~/.claude.json manually using the same mcpServers shape as Claude Desktop.

Codex CLI

Add to ~/.codex/config.toml:

[mcp_servers.ai-to-design]
command = "npx"
args = ["-y", "@ai.to.design/figma-connector@latest"]

opencode

Add to opencode.json (project) or ~/.config/opencode/opencode.json (global):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "ai-to-design": {
      "type": "local",
      "command": ["npx", "-y", "@ai.to.design/figma-connector@latest"],
      "enabled": true
    }
  }
}

Other MCP clients

Any MCP-compatible client works. Use npx -y @ai.to.design/figma-connector@latest as the stdio command — no arguments required.

Tools

The connector exposes MCP tools for rendering HTML to the Figma canvas, editing nodes, managing components and variants, and proposing design systems. Your agent will list them once connected; every tool is documented at ai-to-design.com/docs.

Figma Motion (beta). Five tools animate layers with Figma's timeline and keyframes: set_keyframes (opacity, move, scale, rotation, size, corner radius and fill colour, with easing or springs), list_animation_styles and apply_animation_style (Figma's presets), get_motion to read a layer's animation back, and remove_motion. CSS @keyframes animations in render_html become Motion keyframes automatically. Motion needs a Figma account with the beta enabled; without it the static design still renders.

Privacy and anonymous usage metrics

Your design content never leaves your machine. The connector talks to the Figma plugin over localhost, and no HTML, prompt, file path, node ID or API key is sent anywhere.

The connector does send anonymous usage counters so we can see which tools are actually used and when an old version can be retired. Each batch contains only the event name, the tool name, whether the call succeeded, the connector version, and a count. It carries no identifier of any kind — no account, installation, device or session ID, not even a rotating one — and no timestamp. The receiving server neither stores your IP address nor your user agent, so the daily totals cannot be traced back to you.

To turn it off, any one of these is enough:

npx @ai.to.design/figma-connector --no-telemetry
AI_TO_DESIGN_TELEMETRY=0 npx @ai.to.design/figma-connector
DO_NOT_TRACK=1 npx @ai.to.design/figma-connector      # honoured automatically

Full detail is in the privacy policy.

License

MIT — see LICENSE.