Production-ready Figma from your design system. Describe it, build it, ship it.
Tell Mimic what you need. It builds it in Figma using real design system components, tokens, and auto-layout. Give it HTML, a prompt, or a description. The output uses the DS for everything.
After every build, it tells you what the design system is missing.
Open-source MCP server. Runs locally. Your design data never leaves your machine.
Design systems exist to make output consistent. But when someone needs a screen in Figma, they often start from scratch. Whether it's your own team library, a community kit like Material Design or the Apple iOS kit, or a client's published system, the components sit in the library panel. Unused.
AI tools don't solve this. Claude Design generates prototypes you have to rebuild in Figma. Figma Make generates interactive demos with raw CSS values instead of real components. The cleanup takes as long as building it yourself.
Mimic is different. The output is the deliverable: real Figma layers with real component instances, variable bindings, and auto-layout. Nothing to convert. Nothing to swap. Hand it off.
Pick any starting point:
"Build a dashboard with three metric cards and an activity table"
"Here's the HTML from our staging environment, build it in Figma"
"Take this Stitch export and apply our design system"
"Rebuild this Claude Design prototype with real components"
Mimic discovers the design system on your file, matches components and tokens, and builds structured Figma. Same rules, same output quality, regardless of how you start.
Mimic works with any Figma library: your team's, a community kit, or a client's published system.
- Designers who want DS-compliant screens without manual component hunting
- New team members learning a DS by building with it, seeing what components exist and what's missing
- Agencies and freelancers picking up a client's library and needing to produce screens fast
- Anyone evaluating a DS by building the same screen with different libraries to compare
- DS teams testing their system by building real screens, surfacing coverage gaps with evidence
- DS migration teams rebuilding existing screens with a new system to assess coverage before committing
- Open source library maintainers generating showcase pages that demonstrate components in real context
- Developers who need a Figma reference that matches their frontend components
- Product managers who want to mock up ideas using the DS without waiting for a designer
Node.js v20.6+, Figma desktop, Professional plan or above.
bash <(curl -fsSL https://raw.githubusercontent.com/miapre/mimic-ai/main/install.sh)Plugins > Development > Import plugin from manifest > select ~/mimic-ai/plugin/manifest.json
Figma: Plugins > Development > Mimic AI > Run
The bridge starts automatically when you make your first tool call. No separate process to manage.
Assets panel > Team library icon > toggle on. Once per file. Community libraries work out of the box.
"Build a settings page with three form fields and a save button."
One call discovers the entire DS (variables, styles, components), preloads everything, and advances to build-ready. No multi-step setup.
| Claude Design | Figma Make | Mimic | |
|---|---|---|---|
| Output | HTML / React prototype | Interactive prototype | Figma canvas (real layers) |
| Uses your Figma components | No, infers from code | Partial, Make Kits (CSS subset) | Yes, real instances from your library |
| Variable bindings | No | No (raw values) | Yes, every node |
| Auto-layout | N/A | N/A | Every frame |
| Works with any Figma library | No | Only via Make Kits | Yes, any enabled library |
| Learns across builds | No | No | Yes, patterns, recipes, gap tracking |
| DS audit after build | No | No | Yes, every build |
| Output ready for hand-off | No, needs Figma conversion | No, needs component swap | Yes |
Claude Design is great for ideation. Figma Make is great for interactive prototyping. Mimic is for when the output needs to be the actual Figma file you ship with.
The first build scans the design system. By the third, recurring components auto-verify. Patterns lock in. Corrections become permanent rules that are enforced in code.
What it learns:
- Component recipes: Configure a component once (variants, booleans, text slots), Mimic replays that configuration on every future insert. After 3 builds, the recipe is confirmed and auto-applied.
- Layout patterns: Frame configs (direction, padding, gap, fills) captured from the first build and reused when the same pattern appears.
- Design rules: Correct Mimic once ("brand color is only for links", "cards must have a card header component"), it saves the rule and enforces it on every future build. Rules are injected into tool responses at the exact moment they're relevant.
- DS gaps: Patterns built as primitives are tracked across builds. Mimic surfaces recommendations backed by evidence ("Status Badge used 31 times as primitives across 5 builds").
How it enforces:
- Variable categories. Uses bg-* for a stroke? Mimic warns and suggests border-. Uses bg- as text color? Warns and suggests text-*. The variable still binds (it's valid), but the mismatch is flagged.
- Component-first from experience. If Mimic has used a Badge component in 3+ builds and you try to build one as a raw frame, it blocks with the component key and says "use this instead."
- Rule compliance. Every build report audits stored rules against what was built. Violations are listed with evidence. Clean builds get an all-clear.
- Chart color semantics. Brand, Success, Warning, and Error colors are excluded from chart palettes. Only neutral utility colors suggested for data visualization.
How it compounds:
- Correct it once. Tell Mimic: "That's not the right Badge, use Tag/Neutral." The mapping updates permanently. Every future build uses it.
- DS evolves, Mimic keeps up. New components, renamed tokens, updated variants, all detected at the start of every build.
- Every build is a DS review. After each build, Mimic reports what components were used, what was built from primitives and why, what rules were followed or violated, and what the DS is missing.
Efficiency features:
- Text batch: All text overrides on a component instance set in a single call
- Bulk table builder: An entire data table (headers, cells, variants, text) in one call instead of inserting cells one by one
Every build enforces 18 quality rules across 6 sequential phases.
- Text uses DS text styles, not raw font properties
- Colors bound to DS variables, not hardcoded
- Variable categories enforced: text-* for text, bg-* for fills, border-* for strokes
- Semantic colors (Brand, Success, Warning, Error) restricted to their intended use
- Spacing and radius bound to DS tokens where available
- Every frame uses auto-layout
- Content matches the source exactly, character for character
- DS components used wherever a match exists, including learned components from prior builds
- Components fully configured: text overrides, variants, icon slots
- User-defined design rules enforced at point of use and audited in the build report
- Build report with component usage %, binding quality, rule compliance, and DS gap recommendations
Full specification: CLAUDE.md
| Design system type | What Mimic does |
|---|---|
| Team library (components + tokens) | Full usage: components, variables, text styles |
| Team library (components only) | Uses components, flags missing tokens, recommends adding them |
| Community libraries (Material Design, Apple iOS, etc.) | Full support including variable and component discovery |
Enforcement adapts to what the DS provides. A library with text styles but no color variables enforces text styles and accepts raw colors. The build report shows what's missing and what adding it would unlock.
Works with any MCP client. Optimized for Claude Code.
Claude Code
{
"mcpServers": {
"mimic-ai": {
"command": "npx",
"args": ["-y", "@miapre/mimic-ai"]
}
}
}Cursor
Add to .cursor/mcp.json:
{
"mcpServers": {
"mimic-ai": {
"command": "npx",
"args": ["-y", "@miapre/mimic-ai"]
}
}
}VS Code
Click the install badge above, or add to settings:
{
"mcp": {
"servers": {
"mimic-ai": {
"command": "npx",
"args": ["-y", "@miapre/mimic-ai"]
}
}
}
}Windsurf / JetBrains
Windsurf: ~/.codeium/windsurf/mcp_config.json
JetBrains: Settings > Tools > AI Assistant > MCP Servers
{
"mcpServers": {
"mimic-ai": {
"command": "npx",
"args": ["-y", "@miapre/mimic-ai"]
}
}
}All clients need the Figma plugin active. The bridge is embedded and starts automatically.
How it works (architecture)
MCP Client (Claude Code, Cursor, VS Code)
|
| MCP Protocol (stdio)
v
MCP Server (intelligence layer)
- Tool registry, DS cache, knowledge store
- Variable validation + suggestions before plugin
- Circuit breaker (3 failures -> stop + report)
- Chart geometry engine (Node.js)
- Phase enforcement (6 sequential phases)
|
| Embedded WebSocket bridge (auto-starts)
v
Figma Plugin (enforcement gate)
- DS enforcement: rejects raw values when DS has tokens
- Binding feedback: reports which bindings succeeded/failed
- Thin handlers: mechanical operations only
|
v
Figma Plugin API > Canvas
Intelligence flows down. Binding feedback flows up. The MCP layer validates variable paths before reaching the plugin. The plugin reports exactly which DS bindings succeeded and which failed. Tool responses carry contextual hints so the LLM always knows what to do next.
- Building is unlimited. Frames, components, and token bindings have no rate limit.
- Inspecting is limited. Reading the library uses Figma's daily quota. Mimic caches aggressively to stay well under.
- Token bindings are real. Update a variable in the DS, re-publish, and every node updates automatically.
- Auto-layout everywhere. Every frame resizes correctly. Nothing is manually positioned.
58 tools available
Status and learning: mimic_status, mimic_discover_ds, mimic_ai_knowledge_read, mimic_ai_knowledge_write, mimic_generate_build_report, mimic_generate_design_md
DS setup: figma_preload_styles, figma_preload_variables, figma_discover_library_styles, figma_discover_library_variables, figma_discover_library_components, figma_set_session_defaults, figma_list_text_styles, figma_read_variable_values, mimic_map_components
Build: figma_create_frame, figma_create_text, figma_create_rectangle, figma_create_ellipse, figma_create_svg, figma_insert_component, figma_batch, mimic_build_table, mimic_build_chart
Edit: figma_set_component_text, figma_batch_set_component_text, figma_set_component_text_by_id, figma_set_text, figma_set_text_style, figma_set_node_fill, figma_set_node_position, figma_set_layout_sizing, figma_set_variant, figma_set_visibility, figma_set_variable_mode, figma_set_all_variable_modes, figma_swap_main_component, figma_replace_component, figma_restyle_artboard, figma_move_node, figma_delete_node
Inspect and QA: figma_get_node_props, figma_get_node_children, figma_get_node_parent, figma_get_text_info, figma_get_component_variants, figma_get_selection, figma_select_node, figma_get_page_nodes, figma_get_pages, figma_change_page, figma_validate_ds_compliance, mimic_find_node
Rendering and charts: mimic_pipeline_resolve, mimic_render_url, mimic_compute_chart
Figma setup details
Desktop app required. Browser Figma won't work. Download
Personal Access Token. Figma > Profile > Settings > Security > Personal access tokens > Generate new token. Name: "Mimic AI", expiration: 90 days. Check five scopes: current_user:read, file_content:read, file_metadata:read, library_assets:read, library_content:read. All read-only. Mimic never writes to your library. Copy the token immediately.
Publish your DS. Components and tokens in a separate file, published as a team library. Re-publish after changes.
Professional plan or above. Free plan can't publish libraries.
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.
- Figma Professional plan required. Free plan can't publish libraries.
- First-build font caching. Non-Inter DS fonts may fail on the first text node. Retry succeeds.
- npx mode. Doesn't set
FIGMA_ACCESS_TOKEN. Use the full installer for team library support. - Graduated DS enforcement. Adapts to what the DS provides. A component-only library gets components; raw values fill the gaps. The report shows what to add.
- Claude-optimized. The 6-phase protocol and contextual tool hints work best with Claude Code. Other MCP clients get the tools but may not follow the full protocol.
Issues and PRs welcome. See the issue tracker.
MIT