AdYour product here, seen by people installing AI tools every day Sponsor slots open: 12 of 12, from $249 a month

How to install HTML to Figma — Design System in Windsurf

To install HTML to Figma — Design System in Windsurf, paste the "html-to-figma-design-system" block into ~/.codeium/windsurf/mcp_config.json and refresh the MCP panel in Cascade.

Built from the published package · server updated 13 days ago

  1. 1

    Open the MCP config

    In Windsurf, open Settings, then Cascade, then MCP servers, and choose to view the raw config.

  2. 2

    Add the server

    Paste this into mcp_config.json:

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

    Refresh

    Click refresh in the MCP panel. The server and its tools appear in Cascade.

Config file: ~/.codeium/windsurf/mcp_config.json

MCP servers run with your permissions. If HTML to Figma — Design System needs an API key, add it under env in the config. Check its README.

Install HTML to Figma — Design System in another app

Similar servers

Questions

Does HTML to Figma — Design System work in Windsurf?

Yes. Windsurf supports local and remote mcp servers, and HTML to Figma — Design System installs with the steps above.

HTML to Figma — Design System does not show up in Windsurf. What now?

Restart Windsurf fully, check the JSON is valid, and make sure Node.js (for npx) is installed. See common MCP errors and fixes.

Is HTML to Figma — Design System safe?

It scores 64 of 100. Review the code before you install it, and only give it the access it needs. Grades and details.