Log inSubmit server
Mimic AI logo

Mimic AI

Converts HTML or prompts into structured, design-system-compliant Figma files with real components, tokens, and audit reports.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Mimic AI

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": {
    "mimic-ai": {
      "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 (6d ago).

Overview

Mimic AI MCP server turns HTML, design prompts, or existing prototypes into structured Figma screens using the components, variables, and styles available in a Figma library. It runs locally through MCP and applies design-system rules inside the Figma plugin, including safe fallbacks when no matching component exists. Each build produces a compliance report and can retain confirmed component mappings and design rules for later builds. Reach for it when the deliverable must be an editable Figma file rather than an HTML prototype or read-only design context.

Use cases

  • Convert HTML screens into editable Figma designs
  • Rebuild prototypes with real design-system components
  • Audit library coverage while creating product screens
  • Create Figma references that match frontend components

Key features

  • HTML and prompt-to-Figma generation
  • Design-system component and token matching
  • Write-time compliance enforcement
  • Learned component recipes and design rules
  • Auto-layout and variable bindings
  • Per-build compliance and gap reports

Tools60

What Mimic AI 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 3d ago

Recent health check succeeded.

6/6 checks healthy over the last 40d

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 7d ago via OSV.dev · @miapre/mimic-ai (npm)

Adoption & maintenance

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

GitHub stars14Stargazers on the source repository.
npm downloads236Package downloads in the last 30 days.
Last commit14d 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 activity4 viewsConfig copies, upvotes, and views on AllMCPs.

How Mimic AI works

What Mimic AI MCP server does

The Mimic AI MCP server converts HTML, natural-language screen requests, or existing design prototypes into editable Figma layers. It scans the design system available in the Figma file, then maps the requested interface to real component instances, variables, text styles, and auto-layout structures where those resources exist.

Mimic is intended for work where the Figma file itself is the output. It can create screens such as dashboards, use an HTML page as the starting point, or rebuild a prototype with the team’s components. It works with team libraries, community kits, and client-published systems rather than requiring one particular library.

How it works

The first build starts with a scan of the design system. During generation, the system checks whether a component, token, or style is available before writing the corresponding Figma layer. When the design system has no suitable match, Mimic can construct a primitive and records that coverage gap in the build report instead of silently retaining an unsupported raw value.

The Mimic AI MCP server enforces several rules at write time. It blocks raw color values when a matching color variable exists, rejects unsupported fonts and raw font sizes when a text style is available, checks variable categories, and prefers library components over primitive frames for elements such as buttons, badges, inputs, and table cells.

Confirmed corrections can become reusable component recipes, variant defaults, or design rules. Stored mappings are scoped to the relevant design-system library. The system also records patterns that did not work, detects component additions and removals between builds, and marks cached recipes as stale when they no longer match the library. Deeper variable-level change detection is planned for a future release.

Setup and configuration

The Mimic AI MCP server requires Node.js 20.6 or later, the Figma desktop application, and a Figma Professional plan or higher for publishing and using team libraries. Browser-based Figma is not supported. The documented installation path uses the project installer, which clones the repository into ~/mimic-ai, installs npm dependencies, prompts for a Figma personal access token, and can register the server in Claude Code’s settings.

The repository also provides a VS Code MCP install link. The published package can be launched with npx -y @miapre/mimic-ai.

Tools and capabilities

The Mimic AI MCP server supports:

  • Building Figma screens from HTML.
  • Generating screens from natural-language requests.
  • Recreating prototypes with library components.
  • Discovering components, variables, and styles in a Figma design system.
  • Creating real component instances, variable bindings, and auto-layout frames.
  • Producing build reports that list component usage, primitives, checked rules, learned patterns, and design-system gaps.
  • Retaining confirmed mappings and usage patterns across builds.

Limitations and notes

A Figma desktop installation is required; the browser application is not supported. Use of team libraries requires a Figma Professional plan or above. The first build begins without stored knowledge and may use primitives where the design system lacks an equivalent. Reports identify those gaps, but they do not create missing components automatically.

Mimic AI is scoped by design-system library, so learned rules do not carry across unrelated files. The project targets macOS and Windows and requires Node.js 20.6 or newer.

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 Mimic AI

Mimic AI is an MCP server that connects AI agents to the Figma desktop app and the design system in a Figma file. Its main tools build structured Figma screens from HTML, prompts, or prototypes, match components and tokens, enforce usage rules, and generate reports covering compliance and design-system gaps.

Install it with the project’s one-line installer or run the published package with `npx -y @miapre/mimic-ai`. The installer clones the repository, installs dependencies, prompts for a Figma personal access token, and can register the server in Claude Code.

No, Mimic AI requires the Figma desktop application.

Mimic AI requires a Figma Professional plan or above when publishing and using team libraries.

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 PreviewMimic AI AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/mimic-ai?style=directory)](https://allmcps.com/mcp/mimic-ai)
HTML Embed
<a href="https://allmcps.com/mcp/mimic-ai"><img src="https://allmcps.com/api/badge/mimic-ai?style=directory" alt="Mimic AI on AllMCPs" /></a>