mcpbeat Sign in

HTML to Figma — Design System MCP Server

local only

HTML to Figma — Design System runs on your own machine — the client starts it, so there is no endpoint to ping. 33 installs a week from npm. Last commit 9 Oct 2026.

Translate HTML prototypes into Figma using your design system's real components and tokens.

Installs per day peak 6 · avg 3 · +21% w/w
a month agotoday
33
Installs / week
npm · html-to-figma-design-system
15
Stars
1 open issue
9 Oct 2026
Last commit
no releases in 90 days
MIT
License
JavaScript

What the code does

We read the source, 1 d ago · rules 995398eba69f

Capabilities

What this server is able to do. For an MCP server this is often the job itself — a terminal server runs commands because that is what it is for. Listed so you know what you are plugging in, not as an accusation.

File ships in the package but is absent from the source [пакет] bridge.js:1
этот файл ставится пользователю, но в репозитории его нет

Is this your server and something here is wrong? Tell us — corrections are free and do not require a plan.

This code can reach further than it looks

We found places where it runs commands, builds paths or queries from values it is given. None of that is a flaw by itself — it becomes one when the code changes, and code changes quietly between releases. We re-read it on every one.

Three servers free · no card

Connect this server

This server runs on your own machine — install it with the package manager and the client starts it for you. Package name taken from the official registry entry.

run in your terminal
claude mcp add html-to-figma-design-system -- npx -y html-to-figma-design-system
~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "html-to-figma-design-system": {
      "command": "npx",
      "args": [
        "-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"]
.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"
      ]
    }
  }
}

Alternatives to HTML to Figma — Design System

same job, measured the same way
Mimic AI
by miapre

Builds Figma from your design system: real components and tokens, enforced, learning every build.

89 installs/wk local only
Design System
by zaklad

Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.

answering
Orvain UI
by orvain

Orvain UI design system for React and Vue: real component props, variants and tokens for AI tools

answering
WunderUI
by kl-webmedia

The WunderUI design system for coding agents: components, props, tokens, rules and skills.

309 installs/wk local only
tesserai
by tesserai

Your project's design system for coding agents: tokens, components, contrast checks, guidelines.

2 311 installs/wk local only
UX Pilot
by uxpilot

UX Pilot's design agent for your AI tools: on-brand UI, design systems and React prototypes

answering
B
Basiiik
by shubhankarsd

Design system for coding agents: component specs, rules, tokens, icons and checked React snippets.

1 109 installs/wk local only
Anima MCP Server
by animaapp

Connect AI coding agents to Anima Playground, Figma, and your design system.

answering

HTML to Figma — Design System — questions

Answers built from our own checks of this server.

Why is there no uptime for HTML to Figma — Design System?
HTML to Figma — Design System runs on your own machine over stdio — there is no network address to reach, so uptime cannot be measured for it by anyone. What can be measured is adoption: the npm package html-to-figma-design-system was installed 33 times last week.
How do I connect HTML to Figma — Design System?
Copy the ready config from this page. We generate it for Claude Code, Claude Desktop, Codex, Cursor and VS Code, each in the form that client actually reads. It runs locally, so the command pulls html-to-figma-design-system straight from npm; nothing to host, nothing to sign up for.
How many people use HTML to Figma — Design System?
The npm package html-to-figma-design-system was installed 33 times in the last week. Week over week that is +21%. We show installs rather than GitHub stars on purpose: a star is a bookmark, an install is someone actually running it.
Is HTML to Figma — Design System open source?
Yes — it is published under the MIT licence, written in JavaScript, 15 stars on GitHub and 1 open issue. The source link is on this page, so you can read exactly what it does with your data before you connect it.