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.

---

<p align="center">

</p>

---

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.

| Build | What Mimic knows | What you experience |
|---|---|---|
| 1 | Nothing. Cold start. Scans your entire DS. | "It found my components and used them. Some primitives where my DS has gaps." |
| 5 | Core patterns verified. Common components cached. | "It remembered that I use Button/Primary for CTAs. It didn't ask about tabs this time." |
| 20 | Deep knowledge. Recipes for every common component. | "I point it at an HTML and get a DS-compliant Figma screen in minutes. It knows my system better than the new hire." |
| 50+ | Comprehensive DS audit data. Recurring gaps visible. | "The gap report says I've used status badges as primitives 31 times. I finally built the component. Mimic started using it immediately." |

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

| | Mimic | Claude Design | Figma Make | Framelink | html.to.design |
|---|---|---|---|---|---|
| Output | Figma canvas (real layers) | HTML / React prototype | Interactive prototype | Read-only context | Figma canvas (paid) |
| Uses your components | Yes, real instances | No | Partial (Make Kits) | No (agent infers) | Partial |
| Variable bindings | Yes, every node | No | No (raw values) | No | No |
| Auto-layout | Every frame | N/A | N/A | N/A | Partial |
| Works with any library | Yes | No | Make Kits only | N/A | Limited |
| Learns across builds | Yes | No | No | No | No |
| DS gap detection | Yes, every build | No | No | No | No |
| Open source | Yes (MIT) | No | No | Yes (MIT) | No |

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

| 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, recommends adding them |
| Community libraries (Material Design, Apple iOS, etc.) | Full support including variable and component discovery |

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.

<details>
<summary><strong>Claude Code</strong></summary>

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

</details>

<details>
<summary><strong>Cursor</strong></summary>

Add to .cursor/mcp.json:

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

</details>

<details>
<summary><strong>VS Code</strong></summary>

Click the install badge above, or add to settings:

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

</details>

<details>
<summary><strong>Windsurf / JetBrains</strong></summary>

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

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

</details>

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

---

<details>
<summary><strong>How it works (architecture)</strong></summary>

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

Intelligence flows down. Binding feedback flows up. The MCP layer validates variable paths before reaching the plugin. The plugin reports exactly which DS bindings succeeded and which failed. Tool responses carry contextual hints so the LLM always knows what to do next.

- Building is unlimited. Frames, components, and token bindings have no rate limit.
- Inspecting is limited. Reading the library uses Figma's daily quota. Mimic caches aggressively to stay well under.
- Token bindings are real. Update a variable in the DS, re-publish, and every node updates automatically.
- Auto-layout everywhere. Every frame resizes correctly. Nothing is manually positioned.

</details>

<details>
<summary><strong>58 tools available</strong></summary>

Status and learning: mimic_status, mimic_discover_ds, mimic_ai_knowledge_read, mimic_ai_knowledge_write, mimic_generate_build_report, mimic_generate_design_md

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

Build: figma_create_frame, figma_create_text, figma_create_rectangle, figma_create_ellipse, figma_create_svg, figma_insert_component, figma_batch, mimic_build_table, mimic_build_chart

Edit: figma_set_component_text, figma_batch_set_component_text, figma_set_component_text_by_id, figma_set_text, figma_set_text_style, figma_set_node_fill, figma_set_node_position, figma_set_layout_sizing, figma_set_variant, figma_set_visibility, figma_set_variable_mode, figma_set_all_variable_modes, figma_swap_main_component, figma_replace_component, figma_restyle_artboard, figma_move_node, figma_delete_node

Inspect and 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, mimic_find_node

Rendering and charts: mimic_pipeline_resolve, mimic_render_url, mimic_compute_chart

</details>

<details>
<summary><strong>Figma setup details</strong></summary>

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

Personal Access Token. Figma > Profile > Settings > Security > Personal access tokens > Generate new token. Name: "Mimic AI", expiration: 90 days. Check five scopes: current_user:read, file_content:read, file_metadata:read, library_assets:read, library_content:read. All read-only. Mimic never writes to your library. Copy the token 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.

</details>

---

FAQ

<details>
<summary><strong>Does it work with community libraries like Material Design or Apple iOS kits?</strong></summary>

Yes. Mimic discovers components and variables from any library enabled in your Figma file, including community-published libraries.

</details>

<details>
<summary><strong>Does my design data leave my machine?</strong></summary>

No. Everything runs locally. The only outbound call is to the Figma REST API for published component keys (read-only). No telemetry, no tracking.

</details>

<details>
<summary><strong>What MCP clients are supported?</strong></summary>

Any MCP client works. The 6-phase protocol and contextual tool hints are optimized for Claude Code. Cursor, VS Code, Windsurf, and JetBrains get the full toolset but may not follow the protocol as closely.

</details>

<details>
<summary><strong>How is this different from screenshot-to-Figma tools?</strong></summary>

Screenshot tools capture pixels, not structure. The result is a flat image you can't iterate on. Mimic reads semantic HTML and produces structured, layered Figma with real components, variable bindings, and auto-layout.

</details>

<details>
<summary><strong>What happens when my design system changes?</strong></summary>

Mimic detects DS changes at the start of every build. New components surface automatically. Renamed tokens re-map. Removed components fall back gracefully with an explanation in the build report.

</details>

<details>
<summary><strong>Can I use it without a published design system?</strong></summary>

Yes, but with limited enforcement. Without published components, Mimic builds with primitives and raw values. Without tokens, it accepts hardcoded colors. The build report shows exactly what's missing and what adding it would unlock.

</details>

---

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