HTML to Figma — Design System

Name: HTML to Figma — Design System
Author: miapre

miapre

The design system copilot that builds Figma from HTML using your real components and tokens. Learns your system, surfaces your gaps.

Setup

Choose your client, copy the config, then fill in any required environment variables.

Add to Cursor Add to VS Code

claude mcp add html-to-figma-design-system -- npx -y html-to-figma-design-system

~/.codex/config.toml

[mcp_servers.html-to-figma-design-system]
command = "npx"
args = ["-y", "html-to-figma-design-system"]

# codex mcp add html-to-figma-design-system -- npx -y html-to-figma-design-system

~/.cursor/mcp.json

{
  "mcpServers": {
    "html-to-figma-design-system": {
      "command": "npx",
      "args": [
        "-y",
        "html-to-figma-design-system"
      ]
    }
  }
}

.vscode/mcp.json

{
  "servers": {
    "html-to-figma-design-system": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "html-to-figma-design-system"
      ]
    }
  }
}

~/.gemini/settings.json

{
  "mcpServers": {
    "html-to-figma-design-system": {
      "command": "npx",
      "args": [
        "-y",
        "html-to-figma-design-system"
      ]
    }
  }
}

claude_desktop_config.json

{
  "mcpServers": {
    "html-to-figma-design-system": {
      "command": "npx",
      "args": [
        "-y",
        "html-to-figma-design-system"
      ]
    }
  }
}

.trae/mcp.json

{
  "mcpServers": {
    "html-to-figma-design-system": {
      "command": "npx",
      "args": [
        "-y",
        "html-to-figma-design-system"
      ]
    }
  }
}

Setup

Related