Mimic AI

Everything to Figma using your DS. Learns it. Gets better every build.

Give Mimic any HTML, a prompt, or a description. It builds production-ready Figma using your real components, tokens, and auto-layout. Correct it once, it remembers forever. After every build, it tells you what your design system is missing.

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

Why Mimic exists

You built a design system. Components, tokens, variables. Every decision intentional. Then someone needs a screen in Figma and starts from scratch. Hardcoded colors. Raw font sizes. Frames that break when you resize them. Your system sits right there in the library panel. Unused.

AI tools don't help either. Claude Design generates prototypes you have to rebuild in Figma. Figma Make produces 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.

It learns your system

The first build scans the design system. By the third, recurring components auto-verify. By the tenth, most decisions are instant. The knowledge compounds across every build.

Correct it once. Tell Mimic "That's not the right Badge, use Tag/Neutral." The mapping updates permanently. Every future build uses the correction without you having to repeat yourself.

Your DS evolves. Mimic keeps up. New components, renamed tokens, updated variants, all detected at the start of every build. You never have to tell Mimic your DS changed.

Every build is a DS review. After each build, Mimic generates a report: what components it used, what it built from primitives and why, what patterns it learned, and what your DS is missing. Recommendations come as questions, not commands: "Should your DS include a Status Badge? 4 elements across 3 builds were built as primitives."

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"

"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.

How Mimic compares

Claude Design is great for ideation. Figma Make is great for interactive prototyping. Framelink is great for giving AI context about your designs. Mimic is for when the output needs to be the actual Figma file you ship with.

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
• Design system leads testing their system by building real screens, surfacing coverage gaps with evidence
• 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
• DS migration teams rebuilding existing screens with a new system to assess coverage before committing
• 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.

What it learns and enforces

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.
• 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-*.
• 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.
• Chart color semantics. Brand, Success, Warning, and Error colors are excluded from chart palettes. Only neutral utility colors suggested for data visualization.

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
• Bulk chart builder: Bar, line, donut, and radar charts in one call with DS color bindings

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

FAQ

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