HTML to Figma — Design System

Translate HTML prototypes into Figma using your design system's real components and tokens.

Connector by miapre · GitHub account verified by the MCP Registry

IndexedMITLocal (stdio)★ 15

Install

Works with Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop. Read the repository before you give any tool access to your data.

npx agentmarket install connector/miapre-html-to-figma-design-system

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

About

Translate HTML prototypes into Figma using your design system's real components and tokens.

Use cases: ui-design, frontend-development

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this server can do and what it asks for, from its tool list, install config and code. Checked Oct 25, 2026.

Tools: 7 read · 15 write · 1 delete · 3 not yet classified
Secrets: None asked for
Install scripts: None found
Runs as: Node.js package

Tools by what they do 26

Read from the source code; the running server may list different tools.

Read 7 · Look things up without changing anything.

figma_inspect
figma_list_ds
figma_validate_ds_compliance
mimic_ai_knowledge_read
mimic_compute_chart
mimic_discover_ds
mimic_pipeline_resolve

Write 15 · Create, change, send or run things.

figma_component_text
figma_create_frame
figma_create_shape
figma_create_svg
figma_create_text
figma_insert_component
figma_manage_slot
figma_set_variant
figma_swap_main_component
figma_update_node
figma_variable_modes
mimic_ai_knowledge_write

Show 3 more tools

mimic_build_chart
mimic_build_table
mimic_generate_build_report

Delete 1 · Delete, drop, revoke or wipe things.

figma_delete_node

Not yet classified 3 · We could not tell from the name and description.

mimic_ds_assets
mimic_map_components
mimic_status

Network hosts it talks to 3

git-scm.com · found in code
github.com · found in code
glama.ai · found in code

Files it touches

Your home directory (~)
~/.mimic-ai.json

Tools (26)

Read from the source code; the running server may differ. Descriptions are the server’s own words; hidden characters are shown as [U+…].

figma_component_text
Overrides text on a component instance in one call — pass an `overrides` array (a single override is just a one-item array). Each override sets one text node via textNodeName (matches by name — use for most cases) or textNodeId (exact match — use when configurationHints.textNodes gave you IDs, e.g. components with repeated node names). Use after figma_insert_component; configurationHints.textNodes lists every node that needs overriding. Saves N-1 tool calls vs. one call per node. Requires Phase 2.
figma_create_frame
Creates an auto-layout container frame (layout primitive) — the fallback when NO DS component exists for a section or layout. Every fill/padding/gap/radius binds to DS variables; component-like names are gated (pass confirmedNoComponent + primitiveOverrideReason for confirmed gaps). Name frames after their HTML role ("Header Section", "Card: Revenue"). Key params: parentId (omit for page-level artboard), direction, layoutSizing*, *Variable bindings, GRID mode. Check mimic_map_components FIRST. Phase 2+.
figma_create_shape
Creates a rectangle or ellipse primitive node bound to DS variables. Use for dividers, backgrounds, chart bars/grid-lines/data-points, avatars-as-circles, or any shape with no DS component. Params: shape ("rectangle"|"ellipse", required), parentId (required), name, width, height, fillStyleId/fillVariable/fill, and for rectangle: cornerRadius(Variable), stroke(Variable), strokeWeight, layoutPositioning, layoutSizing*; for ellipse: arcData ({startingAngle, endingAngle, innerRadius} — donut/pie segments). Requires Phase 2. Prefer a DS component over a shape when one exists.
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_update_node (op: "fill") to every unbound vector and figma_update_node (op: "text_style" then op: "fill") to every unbound text. Leaving unbound children breaks DS compliance and light/dark mode.
figma_create_text
Creates a standalone text node bound to a DS text style (textStyleId — accepts style name or key) and DS color variable (fillVariable) — both are mandatory when the DS has them. Use for text OUTSIDE components; text inside a component instance uses figma_component_text instead. Strips hardcoded line breaks (container width controls wrapping). Name nodes after their HTML role ("Page Title", "Card: Revenue Label"). Params: parentId + content required. Phase 2+.
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. Destructive and irreversible via the API — verify the nodeId with figma_inspect first if unsure.
figma_insert_component
Imports and inserts a DS component instance into the document. Returns componentKey/nodeId, configurationChecklist (booleans to enable, text nodes to override, variants to set), and _autoApplied variant defaults replayed from the knowledge store when a confirmed recipe exists. Params: componentKey (required, from mimic_map_components/discovery), parentId (required), name (instance name override), importMode ("component"|"componentSet", usually inferred), applyRecipe (false to skip auto-replay). Workflow position: Phase 3 build, after mimic_map_components. Follow up with figma_component_text an…
figma_inspect
Reads Figma document state — node properties, children, parent, text detail, pages, top-level page nodes, selection, component variants, or a build-manifest section lookup. Read-only, never blocked by phase gates. Use to verify state before/after edits, discover node IDs, or check what a component set supports. Params: target (required: "node"|"children"|"parent"|"text"|"pages"|"page"|"selection"|"variants"|"section") selects the read; nodeId (node/children/parent/text), depth (children, default 1), componentSetKey (variants), sectionName (section — HTML section name from the last build).
figma_list_ds
Lists cached DS assets from the local cache — text styles, fill (color) styles, or variables. Use to browse what mimic_discover_ds already cached before binding: find a textStyleId for figma_create_text, a fillStyleId for figma_create_shape, or a variable path for figma_update_node. Params: kind ("text_styles"|"fill_styles"|"variables", required), filter (keyword, fill_styles only), category (text|background|border|foreground|spacing|radius, variables only). Read-only.
figma_manage_slot
Fills or resets a SLOT-type component property on an existing instance (Figma Slots, GA June 2026). action="fill" inserts a DS component instance into the slot (use configurationHints.slotProperties from figma_insert_component to find slotName). action="reset" restores the slot's default content. Params: nodeId (required), slotName (required), action ("fill"|"reset", default "fill"), componentKey (required for action="fill"). Requires Phase 2. Slot fills are recorded for build-report visibility only — never auto-replayed.
figma_set_variant
Sets variant properties (e.g. Size, State, Color) on a component instance. Use figma_inspect (target: "variants") first to see available properties/values for the component set. Params: nodeId (required), properties (required, key-value map e.g. { "Size": "Large" }). Requires Phase 2. Tracks replay success/failure for the knowledge store's recipe learning.
figma_swap_main_component
Swaps or replaces a component instance's underlying component. mode="swap" (default) preserves the instance's overrides (text, variants) — use when switching to a close variant of the same component. mode="replace" removes the instance and creates a fresh one at the same position — use when swapping to an unrelated component where old overrides would be invalid. Params: nodeId (required), newComponentKey (required), mode ("swap"|"replace", default "swap"). Requires Phase 2.
figma_update_node
Mutates an existing Figma node or the editor's UI focus, dispatched by `op`. Ops: "text" (set text content), "text_style" (apply DS text style), "fill" (fillStyleId/fillVariable/raw fill), "layout" (sizing, padding, gap, alignment), "visibility" (show/hide), "position" (absolute x/y), "restyle" (artboard/frame fill+radius+stroke+padding+gap in one call), "move" (reparent via parentId+index), "select" (select+scroll into view), "page" (switch page by name/id). All ops except "select"/"page" require Phase 2 (DS discovered) and validate any *Variable path against the cached DS before sending. Use…
figma_validate_ds_compliance
Recursively checks a node (and its children) against the current DS enforcement profile — flags hardcoded colors/fonts instead of variables/styles, missing text style bindings, and other DS violations. Use during Phase 3/4 QA, especially at the 20-op build checkpoint, before generating the report. Params: nodeId (required, typically the artboard root).
figma_variable_modes
Sets the variable mode (e.g. light/dark) on a node — required on every new artboard, or DS variables render as black. By default sets the mode on ALL variable collections at once (pass modeIndex only). Pass collectionName to target a single collection instead. Params: nodeId (required, typically the artboard), modeIndex (required, 0=default/light, 1=dark), collectionName (optional). Requires Phase 2.

Show 11 more tools

mimic_ai_knowledge_read
Loads the knowledge store: learned component recipes, layout/pattern data, DS gaps, user-defined rules, and meta stats (build counts, replay savings). Call at the start of a session to see what Mimic has already learned about this DS. Params: format ("json" default — structured data; "design_md" — renders the current DS + recipes as a DESIGN.md-style markdown string for documentation/handoff).
mimic_ai_knowledge_write
Saves a component recipe, layout pattern, DS gap, or user-defined design rule to the persistent knowledge store — the mechanism that lets Mimic learn across builds. Use "rule" when the user corrects build behavior in a generalizable way (e.g. "cards always have a header + content frame"); other types are usually written automatically by the build pipeline. Params: type ("component"|"pattern"|"gap"|"rule", required), id (unique key, required), data (entry payload, required).
mimic_build_chart
Bulk chart builder — creates an entire chart in ONE call: container, visualization (native rectangles or stroke-free SVG), axis labels, grid lines, and legend, all bound to DS variables and text styles. Use for ANY HTML chart instead of hand-building; reduces 30-50 tool calls to 1. chartType: bar, line, donut, radar. Key params: parentId, chartType, title, data, dimensions, colors (neutral DS data palette — never Brand/Success/Warning/Error). Use mimic_compute_chart for geometry-only. Phase 2+.
mimic_build_table
Bulk table builder — creates an entire data table in ONE call: column frames, DS Table header cell + Table cell components, variants (cellVariants for per-value badge colors), text, and consistent row height. Use for ANY HTML data table instead of cell-by-cell insertion; reduces 200+ tool calls to 1. Requires table cell components in the DS (returns creation guidance if missing). Key params: parentId, columns (header/style/cellVariants), rows ("text|supporting" syntax), cellHeight. Phase 2+.
mimic_compute_chart
Computes chart geometry (bar positions, SVG paths, arc angles, grid lines, axis labels) from raw data WITHOUT building anything in Figma — pure math, no bridge/Figma calls, usable at any phase. Use when you need coordinates/paths to hand-build a chart yourself; use mimic_build_chart instead when you just want the finished chart created in one call. Supports chartType: bar, horizontalBar, donut, line, radar, scatter, heatmap. Params: chartType (required), data (required, points), dimensions (chart-type-specific sizing).
mimic_discover_ds
Discover the design system. Call with fileKey — discovers variables, text styles, and components and computes the enforcement profile. With a FIGMA_TOKEN + resolvable library file key, the full library is enumerated over REST and discovery AUTO-COMPLETES to Phase 2 (build-ready); no other tool or MCP is needed (self-contained). Only when REST cannot enumerate the library does it stay at Phase 1 with communityLibraryCheckRequired + a _howToComplete block: the preferred fix is to supply a library file key + FIGMA_TOKEN so REST runs; search_design_system is an OPTIONAL fallback for community libr…
mimic_ds_assets
Manual escape hatch for DS discovery/preload/finalize — the low-level building blocks mimic_discover_ds already orchestrates automatically. Use this ONLY when the automatic flow needs a targeted redo: re-discovering one asset kind after a partial load, preloading variables/styles/fill-styles fetched some other way, or manually finalizing the enforcement profile. Params: action ("discover"|"preload"|"set_defaults"), kind ("styles"|"variables"|"components"|"fill_styles", required for discover/preload), plus action-specific params (fileKey for discover, styleKeys/variables/libraryFileKey for prel…
mimic_generate_build_report
Compiles the current build session into a structured report — DS component usage, primitives with justifications, DS changes/staleness, gap recommendations, binding-quality failures, efficiency (tool calls, cache hits, replay savings), and design-rule compliance. MANDATORY at the end of every build, before responding to the user — advances phase to 5 and resets per-build counters. No params.
mimic_map_components
Maps HTML element types (button, input, badge, table, tab, avatar, dropdown, textarea, header, footer, sidebar, ...) to DS component keys for the current build. Call once after mimic_discover_ds with all section-level + control element types. With FIGMA_TOKEN configured, one call is enough — all library components are pre-cached and missing types are confirmed gaps. Without a token, call again with librarySearchResults (from Figma MCP search_design_system) to close the loop. Workflow position: Phase 1-2, right after DS discovery, before figma_insert_component.
mimic_pipeline_resolve
Classifies build input as a URL, local file path, or raw HTML string and returns the resolved content ready for building. Use FIRST when the user gives you a link, a file path, or ambiguous input instead of raw HTML — it tells you what you actually received. Params: input (string, required). Workflow position: before mimic_discover_ds, at the very start of a build.
mimic_status
START EVERY SESSION HERE. Returns Figma plugin connection status, the current build phase (0=idle through 5=report), enforcement profile, cached DS counts, knowledge store summary (learned components/patterns/gaps/rules), and a contextual `hint` telling you exactly what to call next. Also clears build-interrupt state after a plugin reconnect and warns if a completed build is missing its mandatory report. No params — call with no arguments.

Compare and alternatives

Featured in

Signals

Stars: 15
Forks: 6
Open issues: 1
Last commit: Oct 9, 2026 (19 days ago)
Last release: Jul 14, 2026 (3 months ago)

From GitHub (fetched Oct 24, 2026).

Details

Registry name: io.github.miapre/html-to-figma-design-system
Version: 1.1.0
Auth: No auth
Packages: npm html-to-figma-design-system
License: MIT
Repository: github.com/miapre/html-to-figma-design-system
Website: github.com/miapre/html-to-figma-design-system
First seen: Oct 24, 2026
Last checked: Oct 24, 2026
Source: Official MCP Registry github-graphql