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.

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.

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

Screenshot tools capture pixels. Mimic captures structure.

Works with any design system

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 46 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"]
    }
  }
}

{
  "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 bridge running and the Figma plugin active.

Cost and efficiency

Mimic gets cheaper over time.

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