MCP.so
Sign In

Mimic Ai

@miapre

About Mimic Ai

The design system copilot that builds Figma from HTML using your real components and tokens. Learns your system, surfaces your gaps.

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": [
        "-y",
        "@miapre/mimic-ai"
      ]
    }
  }
}

Tools

60

Returns plugin connection status, current build phase, enforcement profile, knowledge store summary, and a contextual hint for what to do next.

Complete DS discovery in two steps. Step 1: call with fileKey — discovers variables, text styles, components via plugin API, caches everything, stays at Phase 1. Step 2: call again with communitySearchResults (library names from Figma MCP search_design_system) — verifies no community libraries were missed, then advances to Phase 2 (build-ready). Build tools are BLOCKED until Step 2 completes. If a community library's variables are not discoverable via the plugin API (communityVariablesRequired response), fetch them via Figma MCP search_design_system and pass as externalVariables.

Sends text style keys to the plugin for caching. Call during DS setup phase.

Stores DS variables in the local cache for enforcement and resolution.

Computes the enforcement profile from cached DS data and sends it to the plugin. Advances to Phase 2 (inventory ready).

Returns all cached text styles from the DS.

Preloads fill (color) styles into the DS cache from a library file key. Call when discovery missed fill styles (e.g. library variables not enumerable but fill styles exist in the REST API).

Returns all cached fill (color) styles from the DS. Use the style key as fillStyleId in create_frame, create_text, create_rectangle, create_ellipse, or set_node_fill.

Discovers and caches text styles from a Figma library file.

Discovers and caches variables from a Figma library file.

Scans existing component instances on the current page to discover available DS library components, their keys, and variant properties. Call during DS discovery phase.

Maps HTML element types to DS component keys. Call once to get initial mapping. If FIGMA_TOKEN is configured (REST API discovery), all library components are already cached — missing types after the first call are confirmed gaps, proceed to build. If REST API is not available (no token), search the library via Figma MCP search_design_system for missing types, then call AGAIN with librarySearchResults to confirm gaps.

Returns cached variable values, optionally filtered by category.

Creates an auto-layout frame in Figma. All sizing uses DS variables when available. The name parameter should describe the HTML section or element role (e.g., "Header Section", "Metrics Row", "Card: Revenue"). Meaningful names enable iteration. IMPORTANT: Before creating frames for section-level elements (header, footer, sidebar), first check if the DS has a component for it via mimic_map_components or Figma MCP search_design_system.

Creates a text node in Figma with DS text style and color variable. The name parameter should describe the HTML element role (e.g., "Page Title", "Card: Revenue Label", "Subtitle"). Meaningful names enable iteration.

Creates a rectangle node in Figma.

Creates an ellipse node in Figma. Supports arcData for donut charts.

Creates a node from an SVG string in Figma. Useful for icons and custom graphics. Returns unboundChildren — a list of child nodes that need DS variable bindings. You MUST apply figma_set_node_fill to every unbound vector and figma_set_text_style + figma_set_node_fill to every unbound text. Leaving unbound children breaks DS compliance and light/dark mode.

Imports and inserts a DS component instance. Returns component info and configuration hints from the knowledge store.

Sets text on a component instance by finding a text node with the given name. Prefer figma_set_component_text_by_id when configurationHints include text node IDs, because many components contain repeated text node names.

Sets text on a component instance using an exact text node ID from configurationHints.textNodes. Use this instead of name-based text overrides when available.

Sets ALL text overrides on a component instance in a single call. Pass an array of {textNodeName, content} overrides. Saves 1 tool call per text node vs. individual figma_set_component_text calls. Use after figma_insert_component — configurationHints.textNodes tells you which nodes to override.

Sets variant properties on a component instance.

Swaps the main component of an instance to a different component.

Replaces an instance node with a new component instance at the same position.

Inserts a DS component instance into a SLOT-type component property on an existing instance (Figma Slots, GA June 2026). Use configurationHints.slotProperties from figma_insert_component to find the slotName.

Resets a SLOT-type component property back to its default content (Figma Slots, GA June 2026).

Sets the text content of a text node.

Sets the fill of a node to a DS fill style, color variable, or raw color. Priority: fillStyleId (DS color style) → fillVariable (DS variable) → fill (raw hex/RGB).

Updates layout sizing, padding, gap, and max width on a frame node.

Shows or hides a node.

Sets the explicit variable mode on a node for a given collection. Required on every new artboard to render DS variables correctly.

Sets the default variable mode on ALL variable collections for a node at once. Use this on every new artboard instead of figma_set_variable_mode — it eliminates collection name guessing.

Applies a DS text style to a text node.

Sets the absolute x/y position of a node. Use to correct top-level artboard placement after inspecting page nodes.

Moves a node to a new parent at the specified index.

Deletes a node from the Figma document. NEVER deletes artboards (top-level frames) — only child nodes within an artboard. To rebuild a screen, create a NEW artboard alongside the existing one.

Updates styling properties on an existing artboard or frame.

Returns comprehensive properties of a Figma node: type, size, layout, fills, strokes, text styles, variable bindings, and children count.

Returns the children of a node up to the specified depth.

Returns the parent node info for a given node.

Returns all pages in the current Figma file.

Switches to a different page in the Figma file.

Returns top-level nodes (artboards, frames) on the current page.

Returns all variants for a component set.

Returns detailed text information: content, style, font, color, variable bindings.

Returns the currently selected nodes in Figma.

Selects a node in Figma and scrolls it into view.

Find a Figma node by its HTML section name from the last build. Returns the node ID and metadata if found, or lists available sections.

Executes up to 6 operations sequentially via the Figma plugin bridge. Each operation specifies a type (bridge handler name) and payload. Returns an array of results in order.

Loads and returns the full knowledge store contents: components, patterns, gaps, and meta.

Saves a pattern, component recipe, or DS gap to the knowledge store.

Compiles build session data into a structured report (markdown or HTML). Advances phase to 5.

Compiles current DS knowledge into DESIGN.md format. Returns the content as a string.

Takes chart data and returns pre-computed geometry for building in Figma. Supports bar, donut, line, radar, scatter, and heatmap.

Validates a Figma node against the current DS enforcement profile. Returns compliance results from the plugin.

Classifies input as a URL, file path, or raw HTML and returns the resolved content.

Placeholder for Puppeteer-based URL rendering. Currently returns instructions to provide HTML directly.

Builds an entire data table in one call. Creates column frames with DS Table header cell and Table cell components, configures all variants, text, and sizing. Requires table cell components in the DS — if missing, returns guidance on creating them. Reduces table builds from 200+ tool calls to 1.

Builds an entire chart in one tool call. Creates chart container, visualization (SVG or native rectangles), axis labels, grid lines, and legend — all bound to DS variables. Supports line, bar, donut, and radar charts. Reduces chart builds from 30-50 tool calls to 1.

Overview

What is Mimic AI?

Mimic AI is an open-source MCP server that converts any HTML, prompt, or description into production-ready Figma designs using your existing design system components, tokens, and auto-layout. It learns from corrections and improves across builds, and after each build reports what your design system is missing.

How to use Mimic AI?

Install Node.js v20.6+, Figma desktop (Professional plan or above), and the Mimic AI plugin. Run the install script, add the Figma plugin, then configure an MCP client (e.g., Claude Code, Cursor, VS Code) with npx -y @miapre/mimic-ai. Start a build by sending a prompt or HTML to the MCP server.

Key features of Mimic AI

  • Builds real Figma layers with component instances, variable bindings, and auto-layout
  • Learns component recipes, layout patterns, and design rules across builds
  • Correct it once; all future builds use the correction
  • Automatically detects design system changes (new components, renamed tokens)
  • Generates a build report with component usage, binding quality, and DS gap recommendations
  • Enforces 18 quality rules across 6 phases (text styles, variable categories, auto-layout, etc.)

Use cases of Mimic AI

  • Designers producing DS-compliant screens without manual component hunting
  • Design system leads surfacing coverage gaps with evidence from real builds
  • New team members learning a design system by building with it
  • Agencies and freelancers quickly producing screens using a client’s library
  • DS migration teams rebuilding existing screens with a new system to assess coverage

FAQ from Mimic AI

What does Mimic AI output?

Mimic AI outputs real Figma canvas layers with component instances, variable bindings, and auto-layout — not prototypes or raw CSS. The output is the deliverable you can hand off directly.

Does it require a specific Figma plan?

Yes, you need a Figma Professional plan or above to use the Mimic AI plugin.

How does Mimic AI learn across builds?

Mimic saves component recipes, layout patterns, and design rules after each build. After three builds, recurring components are auto-verified. After ten builds, most decisions are instant. Corrections update mappings permanently.

Is Mimic AI open source?

Yes, it is open source under the MIT license.

What are the runtime requirements?

Node.js v20.6+, Figma desktop, and a Figma Professional plan or above. The MCP server runs locally; your design data never leaves your machine.

Frequently asked questions

What does Mimic AI output?

Mimic AI outputs real Figma canvas layers with component instances, variable bindings, and auto-layout — not prototypes or raw CSS. The output is the deliverable you can hand off directly.

Does it require a specific Figma plan?

Yes, you need a Figma Professional plan or above to use the Mimic AI plugin.

How does Mimic AI learn across builds?

Mimic saves component recipes, layout patterns, and design rules after each build. After three builds, recurring components are auto-verified. After ten builds, most decisions are instant. Corrections update mappings permanently.

Is Mimic AI open source?

Yes, it is open source under the MIT license.

What are the runtime requirements?

Node.js v20.6+, Figma desktop, and a Figma Professional plan or above. The MCP server runs locally; your design data never leaves your machine.

Comments

More Media & Design MCP servers