HTML to Figma — Design System

Name: HTML to Figma — Design System
Author: miapre

Community

MCP server by miapre · updated 11 days ago · ★ 14

Score 64

Translate HTML prototypes into Figma using your design system's real components and tokens. HTML to Figma — Design System is a community project by miapre, not verified by a company domain.

Install Add to Cursor Add to VS Code GitHub

Works withClaude Code Claude Desktop Cursor Codex Gemini CLI VS Code Windsurf Antigravity CLI

Maintenance

Last commit 11 days ago

Licence

MIT: permissive, fine for commercial use

Quality

Clear description, published package or server URL, original repository

Security

Not checked yet. What we check

Install HTML to Figma — Design System

Built from the published package, never by AI

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

Run in your terminal. Add --scope user to use it in every project.

Step-by-step: install HTML to Figma — Design System in Claude Code

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

Settings, Developer, Edit config. Paste into claude_desktop_config.json and restart.

Step-by-step: install HTML to Figma — Design System in Claude Desktop

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

Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project).

Step-by-step: install HTML to Figma — Design System in Cursor

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

Add to .vscode/mcp.json. VS Code uses "servers", not "mcpServers".

Step-by-step: install HTML to Figma — Design System in VS Code

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

Step-by-step: install HTML to Figma — Design System in Codex

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

Add to ~/.gemini/config/mcp_config.json (all projects) or .agents/mcp_config.json (this project).

Step-by-step: install HTML to Figma — Design System in Antigravity CLI

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

Gemini CLI was replaced by Antigravity CLI in June 2026 and remains only for enterprise licences and paid API keys.

Step-by-step: install HTML to Figma — Design System in Gemini CLI

MCP servers run with your permissions and can read what you give them access to. Some need an API key: check the README and add it under env in the html-to-figma-design-system block.

Alternatives to HTML to Figma — Design System

All alternatives →

GitDiagram ahmedkhaleel2004

100

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

AAA Remote 18k

draw.io jgraph

100

Create draw.io diagrams in chat from Mermaid or XML, shown live and interactive. 10,000+ shapes.

AAA Remote 5.7k

Agent-Native PlanBuilderIO

Structured visual plans and PR recaps with diagrams, prototypes, annotations, and sharing

AAA Remote 7.4k

Figma-Context-MCPGLips

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

AAA Local 56k/wk

Unity-MCPIvanMurzak

Make 3D games in Unity Engine with AI. MCP Server + Plugin for Unity Editor and Unity games.

AAA Local 4.5k

Visual Explainer nicobailon

Agent skill that generates beautiful HTML pages for diagrams, diff reviews, plan reviews, slide decks, and data tables

AAA Local 11k

HTML to Figma — Design System vs GitDiagram HTML to Figma — Design System vs draw.io HTML to Figma — Design System vs Agent-Native Plan

HTML to Figma — Design System: common questions

How do I install HTML to Figma — Design System?

In Claude Code run claude mcp add html-to-figma-design-system -- npx -y html-to-figma-design-system. For Claude Desktop, Cursor and VS Code, paste the config shown above and restart. See the install guides.

Is HTML to Figma — Design System the official server?

HTML to Figma — Design System is a community project by miapre, not verified by a company domain.

Is HTML to Figma — Design System free?

The code is published under the MIT licence. The service it connects to may have its own pricing.

Is HTML to Figma — Design System safe to use?

It scores 64 of 100. Grades: maintenance A, licence A, quality C. The security check has not run for it yet. Review the code before you install. How grades work.

What are alternatives to HTML to Figma — Design System?

Similar MCP servers: GitDiagram, draw.io, Agent-Native Plan, Figma-Context-MCP.

Does HTML to Figma — Design System work with ChatGPT?

Not directly. It runs locally, and ChatGPT only connects to remote servers with a URL. Use it in Claude Code, Claude Desktop, Cursor, VS Code or Codex.