Mimic AI

Learns your design system. Builds with it. Gets better every time.

Give it any HTML. It builds the equivalent in Figma using only your design system:

• Your real components — not blue rectangles
• Your real tokens — not hardcoded hex values
• Your real text styles — not raw font sizes
• Auto-layout everywhere — not fixed frames

Correct it once, it remembers. After every build, it tells you what your DS is missing.

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 right there in the library panel. Unused.

AI tools make it worse. They generate frames that look right but fall apart on inspection — no components, no tokens, no auto-layout. The cleanup takes as long as building it yourself.

Mimic doesn't approximate your design system. It uses it.

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

It learns — and it keeps learning

The first build is a discovery — Mimic scans your library and maps everything it can find. By the third build, recurring patterns auto-verify. By the tenth, most decisions are instant. The knowledge compounds across every build you do.

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

Your DS is alive. Mimic knows that. Design systems evolve — new components get published, tokens get renamed, variants change. Mimic detects this at the start of every build. New components surface automatically. Renamed tokens re-map. Removed components fall back gracefully with an explanation. You never have to tell Mimic your DS changed — it checks every time.

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 Tab component? 4 elements across 3 builds were built as primitives." Ask Mimic to save the report as an HTML or markdown file, and you have a shareable DS audit your team can act on.

DS maintenance on autopilot. Over time, Mimic's build reports become a living record of your system's gaps. Components that keep getting requested but don't exist. Tokens that would eliminate raw values. Patterns that should be standardized. You don't have to audit your DS manually — every build does it for you, while respecting your Figma token usage by caching aggressively and minimizing library reads.

Make your DS ready for what's coming. The tools around your design system are changing fast. Figma Make generates designs by picking components based on their descriptions — the better your descriptions, the better its output. Stitch reads your library metadata to generate full screens. Generative UI — where interfaces assemble themselves from your component library in real time — is already production-ready, but it only works when components have clear descriptions, semantic roles, and structured metadata.

Most design systems aren't there yet. Mimic helps close that gap in two ways:

1. Component descriptions from usage. Mimic tracks how your components actually get used across builds — which variants, in which contexts, for what purpose. A Button used 40 times as a primary CTA across 12 builds? That's a description writing itself. Ask Mimic to suggest descriptions, review them, and add them to your library.

2. DESIGN.md generation. Mimic can generate a DESIGN.md file from your DS — the open format for describing a design system to AI tools. It includes your color tokens, typography scale, spacing, radius, and component patterns. Stitch, Cursor, Copilot, generative UI frameworks, and any AI tool that reads this format produces on-brand output from your DS.

Better-documented components mean better results from Figma Make, Stitch, generative UI, and every AI-powered design tool that comes next.

Beyond HTML — vibe design with your DS

You don't always have an HTML prototype. Sometimes you just know what you need.

"Build a system dashboard with user metrics, a recent activity table, and a status overview."

Mimic generates the layout, picks the right components from your library, applies your tokens, and delivers a DS-compliant screen. Like vibe coding, but the output is a real Figma file your team can iterate on — built entirely from your design system.

Describe a screen. Get a design. Every element traceable to your DS.

What other tools get wrong

Other AI tools can put frames on a Figma canvas. But look closer:

Screenshot-to-Figma tools are even worse — they capture pixels, not structure. The result is a flat image you can't iterate on. Mimic reads the semantic HTML and produces structured, layered Figma that designers can actually work with.

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. Use my design system."

What gets checked — automatically

Mimic runs 46 quality rules on every build. You don't configure them. You don't invoke them. They just run.

• Text nodes use 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 — not placeholder shapes
• Build report with learning summary and DS gap recommendations

The output is what you'd build yourself if you had the patience. Except Mimic does it in minutes and tells you what your DS is missing at the end.

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.

Privacy

Everything runs on your machine. No design data, component names, token values, or HTML content is sent anywhere. The only outbound call is to the Figma REST API for published component keys.

Cost & efficiency

Mimic runs on your AI plan. Every build uses tool calls and tokens. The learning loop isn't just about quality — it's about cost.

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

What you can do:

• Add components Mimic recommends — fewer primitive builds, fewer calls
• Build similar screens in sequence — patterns transfer, cache warms fast
• Use strict DS mode — fewer QA fix passes, fewer calls

Every build report includes tool call counts and efficiency savings.

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