# Mimic AI

Mimic AI turns HTML into a Figma layout built from your design system’s components and tokens. Use it when generated screens must follow existing UI rules.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 15
- Author: miapre
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/miapre/mimic-ai
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/mcp/mimic-ai

## What it does

Mimic AI takes HTML or a screen description, inspects the design system in the Figma file, and builds a structured Figma layout. The result uses real component instances, variable bindings, and auto-layout instead of arbitrary frames.

The server checks component choices, colors, font sizes, and variable categories while writing to Figma. When the library has no suitable match, the build report records that gap. Confirmed component recipes and corrections are retained per design-system library, so later builds can apply them again.

Each build ends with a compliance report covering used components, primitive elements and their reasons, checked rules, and missing coverage. You need Node.js `20.6` or newer plus your own Figma token; the server will not start without Node.js `20.6`.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add mimic-ai -- npx -y @miapre/mimic-ai
```

### Codex

**Platform CLI**
```bash
codex mcp add mimic-ai -- npx -y @miapre/mimic-ai
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mimic-ai": {
            "command": "npx",
            "args": [
                "-y",
                "@miapre/mimic-ai"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mimic-ai": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@miapre/mimic-ai"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add mimic-ai npx -y @miapre/mimic-ai
```

## When to use it
- turn HTML into a Figma screen
- bind generated colors to design tokens
- reuse real buttons and form components
- check a build against design-system rules
- spot missing library components

## Example prompts
- Turn this HTML into a Figma screen using the components and tokens from our design system.
- Build a Figma dashboard with metric cards and an activity table.
- Review the result and report which elements had to use primitives.

## Similar
- [REA](https://affpapa.org/en/nevibecode/mcp/rea.md) — MCP server · ★ 386989
- [GitHub](https://affpapa.org/en/nevibecode/mcp/github.md) — MCP server · ★ 33918
- [Netdata](https://affpapa.org/en/nevibecode/mcp/netdata.md) — MCP server · ★ 81115
- [browser-use](https://affpapa.org/en/nevibecode/mcp/browser-use.md) — MCP server · ★ 119160
- [Codebase Memory](https://affpapa.org/en/nevibecode/mcp/codebase-memory.md) — MCP server · ★ 47392
- [mcp-server](https://affpapa.org/en/nevibecode/mcp/mcp-server.md) — MCP server · ★ 43872

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md