Mimic AI

Production-ready Figma from your design system. Describe it, build it, ship it.

Tell Mimic what you need. It builds it in Figma using real design system components, tokens, and auto-layout. Give it HTML, a prompt, or a description. The output uses the DS for everything.

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

Glama Install in VS Code Install in VS Code Insiders

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

Why Mimic exists

Design systems exist to make output consistent. But when someone needs a screen in Figma, they often start from scratch. Whether it's your own team library, a community kit like Material Design or the Apple iOS kit, or a client's published system, the components sit in the library panel. Unused.

AI tools don't solve this. Claude Design generates prototypes you have to rebuild in Figma. Figma Make generates interactive demos with raw CSS values instead of real components. The cleanup takes as long as building it yourself.

Mimic is different. The output is the deliverable: real Figma layers with real component instances, variable bindings, and auto-layout. Nothing to convert. Nothing to swap. Hand it off.

How it works

Pick any starting point:

"Build a dashboard with three metric cards and an activity table"

"Here's the HTML from our staging environment, build it in Figma"

"Take this Stitch export and apply our design system"

"Rebuild this Claude Design prototype with real components"

Mimic discovers the design system on your file, matches components and tokens, and builds structured Figma. Same rules, same output quality, regardless of how you start.

Who it's for

Mimic works with any Figma library: your team's, a community kit, or a client's published system.

• Designers who want DS-compliant screens without manual component hunting
• New team members learning a DS by building with it, seeing what components exist and what's missing
• Agencies and freelancers picking up a client's library and needing to produce screens fast
• Anyone evaluating a DS by building the same screen with different libraries to compare
• DS teams testing their system by building real screens, surfacing coverage gaps with evidence
• DS migration teams rebuilding existing screens with a new system to assess coverage before committing
• Open source library maintainers generating showcase pages that demonstrate components in real context
• Developers who need a Figma reference that matches their frontend components
• Product managers who want to mock up ideas using the DS without waiting for a designer

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)

Figma: Plugins > Development > Mimic AI > Run

The bridge starts automatically when you make your first tool call. No separate process to manage.

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 a settings page with three form fields and a save button."

One call discovers the entire DS (variables, styles, components), preloads everything, and advances to build-ready. No multi-step setup.

How Mimic compares

Claude Design is great for ideation. Figma Make is great for interactive prototyping. Mimic is for when the output needs to be the actual Figma file you ship with.

It learns and enforces

The first build scans the design system. By the third, recurring components auto-verify. Patterns lock in. Corrections become permanent rules that are enforced in code.

What it learns:

• Component recipes: Configure a component once (variants, booleans, text slots), Mimic replays that configuration on every future insert. After 3 builds, the recipe is confirmed and auto-applied.
• Layout patterns: Frame configs (direction, padding, gap, fills) captured from the first build and reused when the same pattern appears.
• Design rules: Correct Mimic once ("brand color is only for links", "cards must have a card header component"), it saves the rule and enforces it on every future build. Rules are injected into tool responses at the exact moment they're relevant.
• DS gaps: Patterns built as primitives are tracked across builds. Mimic surfaces recommendations backed by evidence ("Status Badge used 31 times as primitives across 5 builds").

How it enforces:

• Variable categories. Uses bg-* for a stroke? Mimic warns and suggests border-. Uses bg- as text color? Warns and suggests text-*. The variable still binds (it's valid), but the mismatch is flagged.
• Component-first from experience. If Mimic has used a Badge component in 3+ builds and you try to build one as a raw frame, it blocks with the component key and says "use this instead."
• Rule compliance. Every build report audits stored rules against what was built. Violations are listed with evidence. Clean builds get an all-clear.
• Chart color semantics. Brand, Success, Warning, and Error colors are excluded from chart palettes. Only neutral utility colors suggested for data visualization.

How it compounds:

• Correct it once. Tell Mimic: "That's not the right Badge, use Tag/Neutral." The mapping updates permanently. Every future build uses it.
• DS evolves, Mimic keeps up. New components, renamed tokens, updated variants, all detected at the start of every build.
• Every build is a DS review. After each build, Mimic reports what components were used, what was built from primitives and why, what rules were followed or violated, and what the DS is missing.

Efficiency features:

• Text batch: All text overrides on a component instance set in a single call
• Bulk table builder: An entire data table (headers, cells, variants, text) in one call instead of inserting cells one by one

What gets checked automatically

Every build enforces 18 quality rules across 6 sequential phases.

• Text uses DS text styles, not raw font properties
• Colors bound to DS variables, not hardcoded
• Variable categories enforced: text-* for text, bg-* for fills, border-* for strokes
• Semantic colors (Brand, Success, Warning, Error) restricted to their intended use
• Spacing and radius bound to DS tokens where available
• Every frame uses auto-layout
• Content matches the source exactly, character for character
• DS components used wherever a match exists, including learned components from prior builds
• Components fully configured: text overrides, variants, icon slots
• User-defined design rules enforced at point of use and audited in the build report
• Build report with component usage %, binding quality, rule compliance, and DS gap recommendations

Full specification: CLAUDE.md

Works with any design system

Enforcement adapts to what the DS provides. A library with text styles but no color variables enforces text styles and accepts raw colors. The build report shows what's missing and what adding it would unlock.

MCP client setup

Works with any MCP client. Optimized for Claude Code.

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

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

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

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

All clients need the Figma plugin active. The bridge is embedded and starts automatically.

MCP Client (Claude Code, Cursor, VS Code)
    |
    | MCP Protocol (stdio)
    v
MCP Server (intelligence layer)
    - Tool registry, DS cache, knowledge store
    - Variable validation + suggestions before plugin
    - Circuit breaker (3 failures -> stop + report)
    - Chart geometry engine (Node.js)
    - Phase enforcement (6 sequential phases)
    |
    | Embedded WebSocket bridge (auto-starts)
    v
Figma Plugin (enforcement gate)
    - DS enforcement: rejects raw values when DS has tokens
    - Binding feedback: reports which bindings succeeded/failed
    - Thin handlers: mechanical operations only
    |
    v
Figma Plugin API > Canvas

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. Non-Inter DS fonts may fail on the first text node. Retry succeeds.
• npx mode. Doesn't set FIGMA_ACCESS_TOKEN. Use the full installer for team library support.
• Graduated DS enforcement. Adapts to what the DS provides. A component-only library gets components; raw values fill the gaps. The report shows what to add.
• Claude-optimized. The 6-phase protocol and contextual tool hints work best with Claude Code. Other MCP clients get the tools but may not follow the full protocol.

Contributing

Issues and PRs welcome. See the issue tracker.

License

MIT