Skip to main content
Glama

Mimic AI

The design system copilot that builds Figma screens from HTML, and gets better every time you use it.

Give Mimic any HTML. It builds the equivalent in Figma using your actual design system:

  • Real components, not approximations

  • Real tokens, not hardcoded values

  • Real text styles, not manual overrides

  • Auto-layout everywhere, not fixed frames

It doesn't just build once. Every output improves the next, learning your system, your conventions, and your decisions over time.

After every build, it tells you what your design system is missing.


License: MIT Node.js: v20.6+ Platform: macOS / Windows Glama Install in VS Code Install in VS Code Insiders

Open-source MCP server. Runs locally. Your design data never leaves your machine.



The problem

You built a design system. Every token, every component, every variable. Intentional.

Then someone needs a screen and builds it from scratch.

Your system sits in the library panel. Unused.

AI tools make it worse. They generate screens that look right but break on inspection: no components, no tokens, no structure.

The cleanup takes as long as building it yourself.

Mimic fixes that.


Related MCP server: Figma MCP

It learns and compounds

The first build scans your design system.

By the third, patterns start to verify. By the tenth, most decisions are instant.

Mimic doesn't just execute builds. It builds knowledge.

Correct it once Tell Mimic: "That's not the right Badge. Use Tag/Neutral."

That decision becomes permanent. Every future build uses it.

Your design system evolves. Mimic keeps up. New components, renamed tokens, updated variants. Mimic detects changes at the start of every build and adapts automatically.

Every build is a review After each build, Mimic tells you:

  • What components were used

  • What was built from primitives and why

  • What patterns it learned

  • What your design system is missing

Recommendations come as questions, backed by evidence: "Should your design system include a Status Badge? Used 31 times as primitives."


What changes after 10 builds

  • You stop rebuilding screens by hand

  • Your team uses the same component patterns automatically

  • Design system gaps become visible, with evidence

  • New team members produce consistent output from day one

Mimic becomes the system that remembers how your team builds.


No HTML? Start from intent

Describe a screen:

"Dashboard with metrics, activity table, and status overview"

Mimic builds it using your design system: components, tokens, and layout included.

Same system. Same rules. Same output quality.


Make your design system AI-ready

Tools like Figma Make, Stitch, and generative UI depend on one thing:

Well-structured design systems.

Clear component roles. Consistent tokens. Meaningful descriptions.

Most design systems aren't there yet.

Mimic helps you get there as a side effect of using it.

Component descriptions from usage Mimic observes how components are used across builds and suggests real descriptions based on actual patterns.

DESIGN.md generation Generate a structured file describing your design system, readable by AI tools and frameworks.

Better structure → better output across every AI tool you use.


What other tools get wrong

Other tools

Mimic

Components

Draws rectangles that look like buttons

Uses your real components

Colors

Hardcoded hex values

Bound to your variables

Typography

Manual font styling

Uses your text styles

Spacing

Raw pixel values

Uses your spacing tokens

Layout

Fixed frames

Auto-layout everywhere

Output

Needs cleanup

Ready to use

Screenshot tools capture pixels. Mimic captures structure.


Works with any design system

Design system type

What Mimic does

Team library (components + tokens)

Full usage: components, variables, text styles

Team library (components only)

Uses components, flags missing tokens

Community libraries

Full support out of the box


Get started

Node.js v20.6+, Figma desktop, Professional plan or above.

1. Install

bash <(curl -fsSL https://raw.githubusercontent.com/miapre/mimic-ai/main/install.sh)

2. Add the Figma plugin

Plugins → Development → Import plugin from manifest → select ~/mimic-ai/plugin/manifest.json

3. Connect (each session)

Terminal:

cd ~/mimic-ai && npm run bridge

Figma: Plugins → Development → Mimic AI → Run

4. Enable your design system

Assets panel → Team library icon → toggle on. Once per file. Community libraries work out of the box.

5. Build

"Build this HTML in Figma using my design system."


What gets checked automatically

Every build enforces 49 quality rules. You don't configure them. They just run.

  • Text uses your text styles, not raw font properties

  • Colors bound to your variables, not hardcoded

  • Spacing bound to your tokens where available

  • Every frame uses auto-layout, resizable, not static

  • Content matches the source exactly, nothing invented

  • Your components used wherever a match exists

  • Charts built with real data and auto-layout

  • Build report with learning summary and DS gap recommendations

The result is what you'd build manually, without the time cost.

Full specification: GOLDEN_RULES.md


MCP client setup

Works with any MCP client. Optimized for Claude Code.

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

Add to .cursor/mcp.json:

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

Click the install badge above, or add to settings:

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

Windsurf: ~/.codeium/windsurf/mcp_config.json JetBrains: Settings → Tools → AI Assistant → MCP Servers

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

All clients need the bridge running and the Figma plugin active.


Your AI assistant talks to Mimic. Mimic talks to Figma. Everything happens locally.

  • Building is unlimited. Frames, components, and token bindings have no rate limit.

  • Inspecting is limited. Reading your library uses Figma's daily quota. Mimic caches aggressively to stay well under.

  • Token bindings are real. Update a variable in your DS, re-publish, and every node updates automatically.

  • Auto-layout everywhere. Every frame resizes correctly. Nothing is manually positioned.

Status & learning: mimic_status, mimic_discover_ds, mimic_ai_knowledge_read, mimic_ai_knowledge_write

DS setup: figma_preload_styles, figma_preload_variables, figma_discover_library_styles, figma_discover_library_variables, figma_set_session_defaults, figma_list_text_styles, figma_read_variable_values

Build: figma_create_frame, figma_create_text, figma_create_rectangle, figma_create_ellipse, figma_create_chart, figma_insert_component, figma_batch

Edit: figma_set_component_text, figma_set_text, figma_set_node_fill, figma_set_layout_sizing, figma_set_variant, figma_set_visibility, figma_swap_main_component, figma_replace_component, figma_restyle_artboard, figma_move_node, figma_delete_node

Inspect & QA: figma_get_node_props, figma_get_node_children, figma_get_node_parent, figma_get_text_info, figma_get_component_variants, figma_get_selection, figma_select_node, figma_get_page_nodes, figma_get_pages, figma_change_page, figma_validate_ds_compliance, figma_tag_raw_exception

Rendering: mimic_pipeline_resolve, mimic_render_url, mimic_generate_build_report, mimic_generate_design_md

Desktop app required. Browser Figma won't work. Download

Personal Access Token. Figma → Profile → Settings → Personal access tokens → Generate. Read access. Copy immediately.

Publish your DS. Components and tokens in a separate file, published as a team library. Re-publish after changes.

Professional plan or above. Free plan can't publish libraries.


Cost and efficiency

Mimic gets cheaper over time.

Build

Tool calls

Why

1st (cold)

~140

Full DS discovery, no cache, every pattern new

5th (warm)

~80

Most patterns cached, discovery skipped for known components

10th+ (hot)

~55

Nearly everything cached, decisions instant

What drives cost down:

  • Cache: every pattern Mimic learns skips a DS search next time

  • DS components: inserting a component = ~3 calls. Building the same thing from primitives = ~10-15 calls

  • DS gap recommendations: when Mimic suggests a component, it's also telling you how to make future builds cheaper

Every build report includes tool call counts and efficiency savings.


Privacy

Everything runs locally.

No design data leaves your machine. No telemetry. No tracking.

The only outbound call is to the Figma REST API for published component keys.


Constraints

  • Figma Professional plan required. Free plan can't publish libraries.

  • First-build font caching. Text styles may need a second build to render correctly.

  • npx mode. Doesn't set FIGMA_ACCESS_TOKEN. Use the full installer for team library support.

  • Claude-optimized. The 46-rule governance and learning reports work best with Claude Code. Other MCP clients get the tools but may not follow the full protocol.


License

MIT

Available Tools

18 tools
figma_component_textA
Idempotent

Overrides text on a component instance in one call — pass an overrides array (a single override is just a one-item array). Each override sets one text node via textNodeName (matches by name — use for most cases) or textNodeId (exact match — use when configurationHints.textNodes gave you IDs, e.g. components with repeated node names). Use after figma_insert_component; configurationHints.textNodes lists every node that needs overriding. Saves N-1 tool calls vs. one call per node. Requires Phase 2.

Inputs: nodeId (required), overrides (required).

figma_create_frameA

Creates an auto-layout container frame (layout primitive) — the fallback when NO DS component exists for a section or layout. Every fill/padding/gap/radius binds to DS variables; component-like names are gated (pass confirmedNoComponent + primitiveOverrideReason for confirmed gaps). Name frames after their HTML role ("Header Section", "Card: Revenue"). Key params: parentId (omit for page-level artboard), direction, layoutSizing*, *Variable bindings, GRID mode. Check mimic_map_components FIRST. Phase 2+.

Inputs: name (required), x, y, gap, +41 more.

figma_create_svgA

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_update_node (op: "fill") to every unbound vector and figma_update_node (op: "text_style" then op: "fill") to every unbound text. Leaving unbound children breaks DS compliance and light/dark mode.

Inputs: parentId (required), svgString (required), name, fillVariable, +3 more.

figma_create_textA

Creates a standalone text node bound to a DS text style (textStyleId — accepts style name or key) and DS color variable (fillVariable) — both are mandatory when the DS has them. Use for text OUTSIDE components; text inside a component instance uses figma_component_text instead. Strips hardcoded line breaks (container width controls wrapping). Name nodes after their HTML role ("Page Title", "Card: Revenue Label"). Params: parentId + content required. Phase 2+.

Inputs: content (required), parentId (required), name, width, +8 more.

figma_delete_nodeA
Destructive

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. Destructive and irreversible via the API — verify the nodeId with figma_inspect first if unsure.

Inputs: nodeId (required).

figma_inspectA
Read-onlyIdempotent

Reads Figma document state — node properties, children, parent, text detail, pages, top-level page nodes, selection, component variants, or a build-manifest section lookup. Read-only, never blocked by phase gates. Use to verify state before/after edits, discover node IDs, or check what a component set supports. Params: target (required: "node"|"children"|"parent"|"text"|"pages"|"page"|"selection"|"variants"|"section") selects the read; nodeId (node/children/parent/text), depth (children, default 1), componentSetKey (variants), sectionName (section — HTML section name from the last build).

Inputs: target (required), depth, nodeId, sectionName, +1 more.

figma_list_dsA
Read-onlyIdempotent

Lists cached DS assets from the local cache — text styles, fill (color) styles, or variables. Use to browse what mimic_discover_ds already cached before binding: find a textStyleId for figma_create_text, a fillStyleId for figma_create_shape, or a variable path for figma_update_node. Params: kind ("text_styles"|"fill_styles"|"variables", required), filter (keyword, fill_styles only), category (text|background|border|foreground|spacing|radius, variables only). Read-only.

Inputs: kind (required), filter, category.

figma_manage_slotA

Fills or resets a SLOT-type component property on an existing instance (Figma Slots, GA June 2026). action="fill" inserts a DS component instance into the slot (use configurationHints.slotProperties from figma_insert_component to find slotName). action="reset" restores the slot's default content. Params: nodeId (required), slotName (required), action ("fill"|"reset", default "fill"), componentKey (required for action="fill"). Requires Phase 2. Slot fills are recorded for build-report visibility only — never auto-replayed.

Inputs: nodeId (required), slotName (required), action, componentKey.

figma_update_nodeA

Mutates an existing Figma node or the editor's UI focus, dispatched by op. Ops: "text" (set text content), "text_style" (apply DS text style), "fill" (fillStyleId/fillVariable/raw fill), "layout" (sizing, padding, gap, alignment), "visibility" (show/hide), "position" (absolute x/y), "restyle" (artboard/frame fill+radius+stroke+padding+gap in one call), "move" (reparent via parentId+index), "select" (select+scroll into view), "page" (switch page by name/id). All ops except "select"/"page" require Phase 2 (DS discovered) and validate any *Variable path against the cached DS before sending. Use figma_delete_node (separate, destructive tool) to remove a node instead.

Inputs: op (required), x, y, fill, +26 more.

figma_validate_ds_complianceA
Read-onlyIdempotent

Recursively checks a node (and its children) against the current DS enforcement profile — flags hardcoded colors/fonts instead of variables/styles, missing text style bindings, and other DS violations. Use during Phase 3/4 QA, especially at the 20-op build checkpoint, before generating the report. Params: nodeId (required, typically the artboard root).

Inputs: nodeId (required). Returns: summary, violations

figma_variable_modesA
Idempotent

Sets the variable mode (e.g. light/dark) on a node — required on every new artboard, or DS variables render as black. By default sets the mode on ALL variable collections at once (pass modeIndex only). Pass collectionName to target a single collection instead. Params: nodeId (required, typically the artboard), modeIndex (required, 0=default/light, 1=dark), collectionName (optional). Requires Phase 2.

Inputs: nodeId (required), modeIndex (required), collectionName.

mimic_ai_knowledge_readA
Read-onlyIdempotent

Loads the knowledge store: learned component recipes, layout/pattern data, DS gaps, user-defined rules, and meta stats (build counts, replay savings). Call at the start of a session to see what Mimic has already learned about this DS. Params: format ("json" default — structured data; "design_md" — renders the current DS + recipes as a DESIGN.md-style markdown string for documentation/handoff).

Inputs: format.

mimic_ai_knowledge_writeA
Idempotent

Saves a component recipe, layout pattern, DS gap, or user-defined design rule to the persistent knowledge store — the mechanism that lets Mimic learn across builds. Use "rule" when the user corrects build behavior in a generalizable way (e.g. "cards always have a header + content frame"); other types are usually written automatically by the build pipeline. Params: type ("component"|"pattern"|"gap"|"rule", required), id (unique key, required), data (entry payload, required).

Inputs: id (required), data (required), type (required).

mimic_build_chartA

Bulk chart builder — creates an entire chart in ONE call: container, visualization (native rectangles or stroke-free SVG), axis labels, grid lines, and legend, all bound to DS variables and text styles. Use for ANY HTML chart instead of hand-building; reduces 30-50 tool calls to 1. chartType: bar, line, donut, radar. Key params: parentId, chartType, title, data, dimensions, colors (neutral DS data palette — never Brand/Success/Warning/Error). Use mimic_compute_chart for geometry-only. Phase 2+.

Inputs: data (required), title (required), parentId (required), chartType (required), +8 more.

mimic_build_tableA

Bulk table builder — creates an entire data table in ONE call: column frames, DS Table header cell + Table cell components, variants (cellVariants for per-value badge colors), text, and consistent row height. Use for ANY HTML data table instead of cell-by-cell insertion; reduces 200+ tool calls to 1. Requires table cell components in the DS (returns creation guidance if missing). Key params: parentId, columns (header/style/cellVariants), rows ("text|supporting" syntax), cellHeight. Phase 2+.

Inputs: rows (required), columns (required), parentId (required), cellHeight, +5 more.

mimic_discover_dsA

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.

Inputs: fileKey (required), libraryKey, skipRestApi, libraryFileKey, +4 more. Returns: hint, phase, _stopBuild, phaseLabel, +4 more

mimic_map_componentsA

Maps HTML element types (button, input, badge, table, tab, avatar, dropdown, textarea, header, footer, sidebar, ...) to DS component keys for the current build. Call once after mimic_discover_ds with all section-level + control element types. With FIGMA_TOKEN configured, one call is enough — all library components are pre-cached and missing types are confirmed gaps. Without a token, call again with librarySearchResults (from Figma MCP search_design_system) to close the loop. Workflow position: Phase 1-2, right after DS discovery, before figma_insert_component.

Inputs: elementTypes (required), librarySearchResults. Returns: hint, mapped, missing, notFound, +3 more

mimic_statusA
Read-onlyIdempotent

START EVERY SESSION HERE. Returns Figma plugin connection status, the current build phase (0=idle through 5=report), enforcement profile, cached DS counts, knowledge store summary (learned components/patterns/gaps/rules), and a contextual hint telling you exactly what to call next. Also clears build-interrupt state after a plugin reconnect and warns if a completed build is missing its mandatory report. No params — call with no arguments.

Inputs: no named parameters. Returns: hint, phase, dsCache, cacheHits, +4 more

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

    TDQS

    A4.4/5.0

    Scored across 18 tools

    Disambiguation5/5

    Each tool has a clearly distinct purpose, from reading state to creating and modifying various Figma elements. The descriptions are detailed and prevent ambiguity even among similar operations like creating text vs. overriding component text.

    Naming Consistency5/5

    Tool names follow a consistent verb_noun pattern with snake_case, using 'figma_' prefix for Figma operations and 'mimic_' for server-specific actions. This makes it easy to predict and select the right tool.

    Tool Count5/5

    With 18 tools, the set covers a broad domain (Figma DS integration, building, knowledge management) without being excessive. Each tool serves a specific function, and the count feels justified by the server's scope.

    Completeness3/5

    The tool set covers discovery, creation, update, deletion, and validation, but a critical gap exists: the described workflow references 'figma_insert_component' which is not included. This missing tool breaks the expected CRUD lifecycle for components, a fundamental operation for this server's purpose.

    Maintenance

    ActivitySlowing
    ResponsivenessLimited data

    Related MCP Connectors

    Related MCP Servers

    • A
      license
      B
      quality
      D
      maintenance
      An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
      19
      1,224 npm
      7,094
      MIT
    • A
      license
      A
      quality
      D
      maintenance
      Enables interaction with Figma files through intelligent API access, providing navigation, asset extraction, and design token retrieval with 95% token-optimized compact tree output format.
      15
      1
      MIT
    • A
      license
      Not graded
      quality
      D
      maintenance
      Converts Figma designs to React/Vue code using existing Design System components, ensuring consistency by enforcing component library usage instead of custom CSS or Tailwind.
      12 npm
      1
      MIT
    • F
      license
      A
      quality
      C
      maintenance
      Provides access to Appian's Aurora design system documentation via GitHub, enabling LLMs to query components, layouts, and patterns. It supports both public and internal repositories with features for keyword searching and detailed component guidance.
      7
      12
      -