HTML to Figma — Design System MCP server

Mimic AI

Transforms HTML into Figma using only your design system, enforcing correct component usage and falling back safely when needed, while improving accuracy with every build.

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

Gated, not steered

AI writing into Figma isn't the hard part anymore; several tools do it now. The differences show up in what happens when the AI reaches for something your design system doesn't have. A tool that steers an agent toward your components can still land on a raw hex value, a raw pixel size, or a font your system doesn't use, and general guidance for that category of tool is that the result may need manual review and cleanup before it's usable. Mimic enforces at write time, inside the Figma plugin itself, not just in the prompt.

What the gate blocks

• Raw hex/rgb fills where a DS color variable exists
• Raw pixel font sizes where a DS text style exists
• Fonts outside the design system
• Variable category mismatches (e.g. a background token used as a stroke)
• Primitive frames for elements the DS already has as components (buttons, badges, inputs, table cells, and more)

If the DS genuinely has no equivalent, Mimic says so in the build report instead of quietly leaving a raw value in place.

What the learning accumulates

• Component recipes, replayed automatically once confirmed across builds
• Majority-wins variant defaults, learned from your own usage patterns
• Design rules you set once by correcting a build, enforced on every one after
• No-good compilation: patterns tried and confirmed not to work, so they aren't retried
• Staleness detection: flags a stored recipe the moment it stops matching your current DS
• All scoped per design system library: nothing bleeds across unrelated files

Nothing else accumulates this across builds. A hand-authored Figma Agent Skill is static text; it doesn't learn from what you correct.

What the report proves Every build ends in a compliance-audited report: components used and their keys, primitives built and why, which stored rules were checked and whether they held, and where the DS still has coverage gaps. It's built to be shown to a stakeholder, not just read by the person who ran the build.

Why Mimic exists

Shortened. The full README is on GitHub.