Mimic AI — Claude Code MCP server: what it does, how to install
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.
claude mcp add mimic-ai -- npx -y @miapre/mimic-aiWhat Mimic AI 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.
What it helps with
- 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 for the agent
- 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.
How to install Mimic AI
Platform CLI
claude mcp add mimic-ai -- npx -y @miapre/mimic-aiPlatform CLI
codex mcp add mimic-ai -- npx -y @miapre/mimic-aiConfig file
{
"mcpServers": {
"mimic-ai": {
"command": "npx",
"args": [
"-y",
"@miapre/mimic-ai"
]
}
}
}Config file
{
"servers": {
"mimic-ai": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@miapre/mimic-ai"
]
}
}
}Platform CLI
gemini mcp add mimic-ai npx -y @miapre/mimic-aiStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Mimic AI
How do I install Mimic AI in Claude Code?
Run claude mcp add mimic-ai -- npx -y @miapre/mimic-ai. Node.js 20.6 or newer is required.
What does Mimic AI do?
This MCP server converts HTML or an interface description into a Figma layout that uses components, variables, and text styles from the design system. It also produces a compliance report for the build.
What does Mimic AI need to work with Figma?
It needs your own Figma token and a design system in the Figma file. The server runs locally and sends network requests to Figma’s API.
