figma_batch
Executes up to 6 operations sequentially via the Figma plugin bridge. Each operation specifies a type (bridge handler name) and payload. Returns an array of results in order.
LABSCO SUMMARY
Enforcement at write time rather than instruction in the prompt — the difference shows when the design system has a gap.
Several tools can write into Figma. This one gates the write inside the plugin: a raw hex where a colour variable exists, a raw pixel size where a text style exists, a font outside the system, or a primitive frame where the library already has a component, are refused rather than merely discouraged. Where the design system genuinely has no equivalent, that becomes a line in the build report instead of a raw value quietly left in the file. The knowledge store is the other half — confirmed component recipes and your corrections carry into later builds, scoped per library.
What it is
A server that drives a companion Figma plugin to build screens from HTML using your design system. It discovers the library's components, variables, text styles and fill styles, turns them into an enforcement profile, then builds with them — refusing a raw value wherever a design-system equivalent exists, and recording the gap where one does not.
What you get
- Design-system discovery first: mimic_discover_ds in two steps, plus figma_discover_library_styles, figma_discover_library_variables and figma_discover_library_components, all cached and compiled into a session profile by figma_set_session_defaults
- Primitives placed with DS values — figma_create_frame with auto-layout, figma_create_text carrying a DS text style and colour variable, rectangles, ellipses with arcData for donut charts, and figma_create_svg for icons
- Component instances inserted from the library, with text set by node name, by exact node ID, or all overrides in one batch call, variants set, main components swapped, instances replaced, and SLOT properties filled or reset
- Node editing: fills from a DS style, a colour variable or a raw colour, layout sizing with padding and gap, visibility, text styles, absolute position, reparenting and deletion — with top-level artboards protected from deletion
- Reading back what exists: node properties, children to a depth, parent, pages, page nodes, component variants, detailed text info and the current selection, plus selecting a node and scrolling it into view
- figma_validate_ds_compliance checks a node against the active enforcement profile, and mimic_generate_build_report compiles the session into a Markdown or HTML report naming the components used, the primitives built and why, and where the design system had no equivalent
- A knowledge store read and written across builds — component recipes, patterns and recorded DS gaps — and mimic_generate_design_md compiles what it has learned into DESIGN.md form
- Whole-object builders: mimic_build_table constructs a data table in one call and mimic_build_chart a chart, with mimic_compute_chart returning the geometry first, and figma_batch running up to six operations through the plugin bridge at once
Requirements
Published as @miapre/mimic-ai and launched over stdio with npx, on Node.js 20.6 or newer, macOS or Windows. It is half of a pair: the companion Figma plugin does the writing and holds the enforcement gate, so Figma has to be open with the plugin running and the design-system library reachable by file key. Everything runs locally, and the project states that design data does not leave the machine.
Setup effort
Follow the published steps — bash <(curl -fsSL https://raw.githubusercontent.com/miapre/mimic-ai/main/install.sh)
USE CASES
01
Turning an HTML page into a Figma screen
Resolve the input, build the frames with auto-layout, and insert real component instances from the library rather than drawing lookalikes.
02
Teaching it your library before the first build
Discover the components, styles and variables in the design-system file, then compile them into the profile that governs the session.
03
Proving a build stayed on-system
Validate the node against the enforcement profile, then generate the report naming components used, primitives built and the reason for each.
04
Building a table or a chart without placing every node
One call constructs the whole table or chart with DS values applied; the geometry can be computed first if you want to see it.
05
Correcting a component choice so it stays corrected
Update the mapping from HTML element to design-system component and write it to the knowledge store, where later builds pick it up.
06
Finding where your design system is actually short
The build report records every primitive built because no component existed; the design document compiles what has accumulated across builds.
60 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
figma_batch_set_component_text
Sets ALL text overrides on a component instance in a single call. Pass an array of {textNodeName, content} overrides. Saves 1 tool call per text node vs. individual figma_set_component_text calls. Use after figma_insert_component — configurationHints.textNodes tells you which nodes to override.
figma_change_page
Switches to a different page in the Figma file.
figma_create_ellipse
Creates an ellipse node in Figma. Supports arcData for donut charts.
figma_create_frame
Creates an auto-layout frame in Figma. All sizing uses DS variables when available. The name parameter should describe the HTML section or element role (e.g., "Header Section", "Metrics Row", "Card: Revenue"). Meaningful names enable iteration. IMPORTANT: Before creating frames for section-level elements (header, footer, sidebar), first check if the DS has a component for it via mimic_map_components or Figma MCP search_design_system.
figma_create_rectangle
Creates a rectangle node in Figma.
figma_create_svg
Creates a node from an SVG string in Figma. Useful for icons and custom graphics. Returns unboundChildren — a list of child nodes that need DS variable bindings. You MUST apply figma_set_node_fill to every unbound vector and figma_set_text_style + figma_set_node_fill to every unbound text. Leaving unbound children breaks DS compliance and light/dark mode.
figma_create_text
Creates a text node in Figma with DS text style and color variable. The name parameter should describe the HTML element role (e.g., "Page Title", "Card: Revenue Label", "Subtitle"). Meaningful names enable iteration.
figma_delete_node
Deletes a node from the Figma document. NEVER deletes artboards (top-level frames) — only child nodes within an artboard. To rebuild a screen, create a NEW artboard alongside the existing one.
figma_discover_library_components
Scans existing component instances on the current page to discover available DS library components, their keys, and variant properties. Call during DS discovery phase.
figma_discover_library_styles
Discovers and caches text styles from a Figma library file.
figma_discover_library_variables
Discovers and caches variables from a Figma library file.
figma_fill_slot
Inserts a DS component instance into a SLOT-type component property on an existing instance (Figma Slots, GA June 2026). Use configurationHints.slotProperties from figma_insert_component to find the slotName.
figma_get_component_variants
Returns all variants for a component set.
figma_get_node_children
Returns the children of a node up to the specified depth.
figma_get_node_parent
Returns the parent node info for a given node.
figma_get_node_props
Returns comprehensive properties of a Figma node: type, size, layout, fills, strokes, text styles, variable bindings, and children count.
figma_get_page_nodes
Returns top-level nodes (artboards, frames) on the current page.
figma_get_pages
Returns all pages in the current Figma file.
figma_get_selection
Returns the currently selected nodes in Figma.
figma_get_text_info
Returns detailed text information: content, style, font, color, variable bindings.
figma_insert_component
Imports and inserts a DS component instance. Returns component info and configuration hints from the knowledge store.
figma_list_fill_styles
Returns all cached fill (color) styles from the DS. Use the style key as fillStyleId in create_frame, create_text, create_rectangle, create_ellipse, or set_node_fill.
figma_list_text_styles
Returns all cached text styles from the DS.
figma_move_node
Moves a node to a new parent at the specified index.
figma_preload_fill_styles
Preloads fill (color) styles into the DS cache from a library file key. Call when discovery missed fill styles (e.g. library variables not enumerable but fill styles exist in the REST API).
figma_preload_styles
Sends text style keys to the plugin for caching. Call during DS setup phase.
figma_preload_variables
Stores DS variables in the local cache for enforcement and resolution.
figma_read_variable_values
Returns cached variable values, optionally filtered by category.
figma_replace_component
Replaces an instance node with a new component instance at the same position.
figma_reset_slot
Resets a SLOT-type component property back to its default content (Figma Slots, GA June 2026).
figma_restyle_artboard
Updates styling properties on an existing artboard or frame.
figma_select_node
Selects a node in Figma and scrolls it into view.
figma_set_all_variable_modes
Sets the default variable mode on ALL variable collections for a node at once. Use this on every new artboard instead of figma_set_variable_mode — it eliminates collection name guessing.
figma_set_component_text
Sets text on a component instance by finding a text node with the given name. Prefer figma_set_component_text_by_id when configurationHints include text node IDs, because many components contain repeated text node names.
figma_set_component_text_by_id
Sets text on a component instance using an exact text node ID from configurationHints.textNodes. Use this instead of name-based text overrides when available.
figma_set_layout_sizing
Updates layout sizing, padding, gap, and max width on a frame node.
figma_set_node_fill
Sets the fill of a node to a DS fill style, color variable, or raw color. Priority: fillStyleId (DS color style) → fillVariable (DS variable) → fill (raw hex/RGB).
figma_set_node_position
Sets the absolute x/y position of a node. Use to correct top-level artboard placement after inspecting page nodes.
figma_set_session_defaults
Computes the enforcement profile from cached DS data and sends it to the plugin. Advances to Phase 2 (inventory ready).
figma_set_text
Sets the text content of a text node.
figma_set_text_style
Applies a DS text style to a text node.
figma_set_variable_mode
Sets the explicit variable mode on a node for a given collection. Required on every new artboard to render DS variables correctly.
figma_set_variant
Sets variant properties on a component instance.
figma_set_visibility
Shows or hides a node.
figma_swap_main_component
Swaps the main component of an instance to a different component.
figma_validate_ds_compliance
Validates a Figma node against the current DS enforcement profile. Returns compliance results from the plugin.
mimic_ai_knowledge_read
Loads and returns the full knowledge store contents: components, patterns, gaps, and meta.
mimic_ai_knowledge_write
Saves a pattern, component recipe, or DS gap to the knowledge store.
mimic_build_chart
Builds an entire chart in one tool call. Creates chart container, visualization (SVG or native rectangles), axis labels, grid lines, and legend — all bound to DS variables. Supports line, bar, donut, and radar charts. Reduces chart builds from 30-50 tool calls to 1.
mimic_build_table
Builds an entire data table in one call. Creates column frames with DS Table header cell and Table cell components, configures all variants, text, and sizing. Requires table cell components in the DS — if missing, returns guidance on creating them. Reduces table builds from 200+ tool calls to 1.
mimic_compute_chart
Takes chart data and returns pre-computed geometry for building in Figma. Supports bar, donut, line, radar, scatter, and heatmap.
mimic_discover_ds
Complete DS discovery in two steps. Step 1: call with fileKey — discovers variables, text styles, components via plugin API, caches everything, stays at Phase 1. Step 2: call again with communitySearchResults (library names from Figma MCP search_design_system) — verifies no community libraries were missed, then advances to Phase 2 (build-ready). Build tools are BLOCKED until Step 2 completes. If a community library's variables are not discoverable via the plugin API (communityVariablesRequired response), fetch them via Figma MCP search_design_system and pass as externalVariables.
mimic_find_node
Find a Figma node by its HTML section name from the last build. Returns the node ID and metadata if found, or lists available sections.
mimic_generate_build_report
Compiles build session data into a structured report (markdown or HTML). Advances phase to 5.
mimic_generate_design_md
Compiles current DS knowledge into DESIGN.md format. Returns the content as a string.
mimic_map_components
Maps HTML element types to DS component keys. Call once to get initial mapping. If FIGMA_TOKEN is configured (REST API discovery), all library components are already cached — missing types after the first call are confirmed gaps, proceed to build. If REST API is not available (no token), search the library via Figma MCP search_design_system for missing types, then call AGAIN with librarySearchResults to confirm gaps.
mimic_pipeline_resolve
Classifies input as a URL, file path, or raw HTML and returns the resolved content.
mimic_render_url
Placeholder for Puppeteer-based URL rendering. Currently returns instructions to provide HTML directly.
mimic_status
Returns plugin connection status, current build phase, enforcement profile, knowledge store summary, and a contextual hint for what to do next.
BEFORE YOU INSTALL
What to know first
Tools you get
60 tools when we connected. The current documentation describes a consolidated 26-tool surface in which tools such as figma_inspect and figma_update_node absorb several granular ones; the capability is the same.
Requires
- npx on PATH
- Node.js v20.6+
- The Figma desktop app (browser Figma isn't supported)
- A Figma Professional plan or above
Where it runs
All 6 documented clients run the server on your machine.
CONTEXT COST
Moderate Standing cost
Rated by the size of the 60 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Server setup
TERMINAL
bash <(curl -fsSL https://raw.githubusercontent.com/miapre/mimic-ai/main/install.sh)This clones the repo to ~/mimic-ai, runs npm install, and prompts for your Figma personal access token
In the Figma desktop app: Plugins > Development > Import plugin from manifest > select ~/mimic-ai/plugin/manifest.json
Each session, start the plugin in Figma: Plugins > Development > Mimic AI > Run
Add the mimic-ai entry to your MCP client (client tabs below); every client needs the Figma plugin running
MCP Clients
Claude Code, Cursor, Windsurf, JetBrains IDEs
JSON
{
"mcpServers": {
"mimic-ai": {
"command": "npx",
"args": [
"-y",
"@miapre/mimic-ai"
]
}
}
}FIGMA_TOKEN is optional: set it in the server's env block, or in ~/.mimic-ai.json. Without it Mimic still works, falling back to a slower, plugin-only discovery path.
VS Code
VS CODE · JSON
{
"servers": {
"mimic-ai": {
"command": "npx",
"args": [
"-y",
"@miapre/mimic-ai"
]
}
}
}FIGMA_TOKEN is optional: set it in the server's env block, or in ~/.mimic-ai.json. Without it Mimic still works, falling back to a slower, plugin-only discovery path.
Any MCP client — local build
ANY MCP CLIENT — LOCAL BUILD · JSON
{
"mcpServers": {
"mimic-ai": {
"command": "node",
"args": [
"<YOUR_PATH_TO_MIMIC_AI>/mcp.js"
]
}
}
}FIGMA_TOKEN is optional: set it in the server's env block, or in ~/.mimic-ai.json. Without it Mimic still works, falling back to a slower, plugin-only discovery path.
