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.

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.

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