Log inSubmit server
HTML to Figma — Design System logo

HTML to Figma — Design System

Converts HTML prototypes into structured Figma files using published design-system components, variables, styles, and auto-layout.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install HTML to Figma — Design System

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "html-to-figma-design-system": {
      "command": "npx",
      "args": [
        "-y",
        "@miapre/mimic-ai"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 60 tools correctly (11d ago).

Overview

HTML to Figma — Design System MCP server converts HTML prototypes and design requests into structured Figma files that use components and tokens from a selected design system. It runs locally through MCP, discovers the design system in the Figma file, and creates component instances, variable bindings, and auto-layout frames. The Figma plugin checks writes for invalid raw values and unsuitable primitives, then reports compliance and coverage gaps. Reach for it when the output must be an editable, design-system-compliant Figma file rather than an HTML prototype.

Use cases

  • Convert staging HTML into a Figma screen using the team library
  • Rebuild prototypes with real design-system components
  • Audit design-system coverage through generated screens
  • Create Figma references aligned with frontend components

Key features

  • HTML and prompt-based screen conversion
  • Figma component and token matching
  • Variable bindings and auto-layout
  • Write-time design-system enforcement
  • Cross-build recipe learning
  • Compliance and coverage reports

Tools60

What HTML to Figma — Design System lets your agent do. Expand a tool for its parameters.

Verified live~10.1k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

8/8 checks healthy over the last 45d

What it can do

From the 60 tools this server returned when we ran it.

Can delete or modify data · 1Handles credentials · 1Makes network requests · 3Read-only tools · 59
Network at startup3 connections
Files written at startupNone
Install scriptsNone
npm provenanceNot published
Package age186 days
Maintainers1

Observed 2026-10-17 in an isolated sandbox. A description of reach, not a security audit.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 12d ago via OSV.dev · @miapre/mimic-ai (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars15Stargazers on the source repository.
npm downloads202Package downloads in the last 30 days.
Last commit19d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed60Callable tools this server registers over MCP.
Directory activity7 viewsConfig copies, upvotes, and views on AllMCPs.

How HTML to Figma — Design System works

What HTML to Figma — Design System does

HTML to Figma — Design System MCP server turns HTML prototypes, written screen descriptions, and existing prototype concepts into editable Figma layers. It is designed for teams that need the resulting file to use their actual design-system assets rather than approximate colors, typography, or manually recreated controls.

The server discovers the design system available in the Figma file and maps incoming interface elements to published components, variables, and text styles. Generated frames use auto-layout, and matching elements become component instances where the library provides a suitable component. When no equivalent exists, the build report identifies the resulting primitive and the design-system coverage gap.

How it works

A build can start from an HTML document, a description such as a dashboard with cards and a table, or another prototype that needs to be rebuilt with library components. The system scans the file’s design system, matches available components and tokens, and writes the result into Figma through the local plugin workflow.

The plugin applies checks while writing. It can block raw color values when a matching color variable exists, reject raw font sizes when a text style is available, prevent unsupported fonts, detect variable-category errors, and discourage primitive frames where the library already contains a matching control. The result includes a compliance report covering used components, component keys, primitives, stored rules, and remaining gaps.

Confirmed corrections can become reusable component recipes, variant defaults, and design rules. Stored knowledge is scoped to the design-system library. The system also detects component additions, removals, and variant changes at the beginning of later builds; deeper variable-level change detection is not yet available.

Setup and configuration

Run the server locally with Node.js 20.6 or later. The repository provides an installer that clones the project into ~/mimic-ai, installs dependencies, asks for a Figma personal access token, and can register the server in Claude Code’s settings.

Use the Figma desktop application; browser-based Figma is not supported. Publishing and using team libraries requires a Figma Professional plan or higher. The project is open source under the MIT license, and its documentation states that design data remains on the local machine.

Tools and capabilities

The HTML to Figma — Design System MCP server supports these documented capabilities:

  • Translate HTML and textual screen descriptions into Figma designs.
  • Discover and use components from a Figma design-system library.
  • Bind generated nodes to design-system variables and text styles.
  • Create structured frames with auto-layout.
  • Enforce component, token, font, and variable-category rules at write time.
  • Learn confirmed mappings and defaults across builds.
  • Produce compliance reports and identify missing design-system coverage.

Limitations and notes

The workflow depends on the Figma desktop app and a compatible published library. It does not support browser Figma. A first build starts without learned recipes and may use primitives where the design system has no matching component. Later builds can reuse confirmed decisions, but stored recipes can become stale when the library changes.

The system reports gaps rather than silently inventing a component. Deeper detection of renamed or otherwise changed variables is described as a future feature, so variable-level library changes may require attention. The documented platform badges cover macOS and Windows.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about HTML to Figma — Design System

HTML to Figma — Design System is an MCP server that connects local AI workflows to the Figma desktop app and your published design-system libraries. Its main tools convert HTML or screen descriptions into Figma layers, match components and tokens, enforce design rules, and report primitives, compliance checks, and coverage gaps.

Install it with the repository’s shell installer, which clones the project, runs npm install, requests a Figma personal access token, and can register the server with Claude Code. Node.js 20.6 or newer and the Figma desktop app are required.

No, browser-based Figma is not supported. Use the Figma desktop application, along with Node.js 20.6 or later. Publishing and using team libraries also requires a Figma Professional plan or above.

Yes, it discovers the design system in the Figma file and uses available library components, variables, and text styles. It can learn confirmed mappings across builds, while elements without a suitable library equivalent are reported as primitives and coverage gaps.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewHTML to Figma — Design System AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/html-to-figma-design-system?style=directory)](https://allmcps.com/mcp/html-to-figma-design-system)
HTML Embed
<a href="https://allmcps.com/mcp/html-to-figma-design-system"><img src="https://allmcps.com/api/badge/html-to-figma-design-system?style=directory" alt="HTML to Figma — Design System on AllMCPs" /></a>