HTML to Figma — Design System vs Illustrator MCP Server
A side-by-side look at the HTML to Figma — Design System and Illustrator MCP Server MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.
Verdict: choose HTML to Figma — Design System for architecture & design work as a local process; choose Illustrator MCP Server for architecture & design as a local process. You can also run both side by side in one mcpServers block.
Which MCP server should you choose?
Choose HTML to Figma — Design System when
- You need dedicated capabilities in the Architecture & Design domain.
- You prefer a local stdio subprocess transport.
- You want tools like
mimic_status, mimic_discover_ds, figma_preload_styles.
Choose Illustrator MCP Server when
- You need dedicated capabilities in the Architecture & Design domain.
- You prefer a local stdio subprocess transport.
- You have the keys it needs:
ILLUSTRATOR_MCP_TIMEOUT_NORMAL, ILLUSTRATOR_MCP_TIMEOUT_HEAVY. - You want tools like
get_document_info, get_artboards, get_layers.
Feature & specification comparison
Rows where the two servers differ are marked.
| Spec | ||
|---|---|---|
| Category | Architecture & Design | Architecture & Design |
| Quality signal | 64/100 · Good | 69/100 · Great |
| Install command | Confirmed | Confirmed |
| Transport | Local subprocess (stdio) | Local subprocess (stdio) |
| Auth | Not declared | Not declared |
| Pricing | Not declared | Not declared |
| Required env vars | None listed | ILLUSTRATOR_MCP_TIMEOUT_NORMALILLUSTRATOR_MCP_TIMEOUT_HEAVY |
| Verified owner | Community listing | Community listing |
| GitHub stars | 14 | 172 |
| Directory activity | 3 views 0 installs 0 upvotes | 6 views 0 installs 0 upvotes |
| Tools | 60 | 66 |
| Full listing | View HTML to Figma — Design System | View Illustrator MCP Server |
Tools & capabilities
HTML to Figma — Design System tools 60
mimic_statusReturns plugin connection status, current build phase, enforcement profile, knowledge store summary, and a contextual hint for what to do next.mimic_discover_dsComplete 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.figma_preload_stylesSends text style keys to the plugin for caching. Call during DS setup phase.figma_preload_variablesStores DS variables in the local cache for enforcement and resolution.figma_set_session_defaultsComputes the enforcement profile from cached DS data and sends it to the plugin. Advances to Phase 2 (inventory ready).figma_list_text_stylesReturns all cached text styles from the DS.figma_preload_fill_stylesPreloads 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_list_fill_stylesReturns 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_discover_library_stylesDiscovers and caches text styles from a Figma library file.figma_discover_library_variablesDiscovers and caches variables from a Figma library file.figma_discover_library_componentsScans existing component instances on the current page to discover available DS library components, their keys, and variant properties. Call during DS discovery phase.mimic_map_componentsMaps 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.- +48 more on the listing page
Illustrator MCP Server tools 66
get_document_infoGet document metadataget_artboardsGet all artboard informationget_layersGet layer structure as a treeget_selectionGet detailed information about the currently selected objects. While editing text (text cursor or selected characters), the containing text frame is returned with a textSelection field (selected contents, length, start; insertionPoint: true for a bare cursor).list_text_framesList text frames with summary-level information (including orientation and threaded-frame links nextFrameUUID/previousFrameUUID). Supports reading-order sort, pagination, and a lightweight contents-only mode. layer_name includes text inside groups and sublayers of that layer.get_text_frame_detailGet detailed text frame attributes including per-character runs (font, tracking, akiLeft/akiRight, tsume, proportionalMetrics), kerning pairs with manual kerning values (1/1000 em), paragraph attributes (leading, autoLeading, paragraph style), orientation (horizontal/vertical) and threaded-frame links (nextFrameUUID/previousFrameUUID). Returns cssHints for web/CSS reproduction.get_colorsGet all color information used in the document. usedFillColors / usedStrokeColors list each distinct color once with a count of how many paths and text ranges use it (most used first).get_path_itemsGet path and shape data, including paths inside groups and compound paths (clipping: true marks a clipping-mask path). Note: fill/stroke do not include per-attribute opacity; use the item-level opacity field for transparency.get_guidelinesGet guide informationget_groupsGet structure of groups, clipping masks, and compound paths. Children of a clipping-mask group mark the mask path with clipping: true. When depth cuts the tree off, the item has childrenTruncated: true and childCount (children is empty only because of the depth limit).get_effectsGet effect and appearance informationget_imagesGet embedded and linked image information: file path, broken-link status (linkBroken: file missing on disk), pixel size, and effective resolution (ppi at the placed size; rotation-safe).- +54 more on the listing page
Ready-to-paste client configs
Paste either block (or both) into your client config, e.g. claude_desktop_config.json or ~/.cursor/mcp.json. We only show a config when the install command is confirmed.
HTML to Figma — Design System
{
"mcpServers": {
"html-to-figma-design-system": {
"command": "npx",
"args": [
"-y",
"@miapre/mimic-ai"
]
}
}
}
Illustrator MCP Server
{
"mcpServers": {
"illustrator-mcp-server": {
"command": "npx",
"args": [
"-y",
"illustrator-mcp-server"
],
"env": {
"ILLUSTRATOR_MCP_TIMEOUT_NORMAL": "YOUR_ILLUSTRATOR_MCP_TIMEOUT_NORMAL_HERE",
"ILLUSTRATOR_MCP_TIMEOUT_HEAVY": "YOUR_ILLUSTRATOR_MCP_TIMEOUT_HEAVY_HERE"
}
}
}
}
Frequently asked questions
HTML to Figma — Design System is categorized under Architecture & Design and uses a local stdio subprocess. Illustrator MCP Server belongs to Architecture & Design and uses a local stdio subprocess. Pick HTML to Figma — Design System for architecture & design work and Illustrator MCP Server for architecture & design.
Copy the mcpServers block from the config section on this page into your client's config (for example claude_desktop_config.json or ~/.cursor/mcp.json), then fully restart the client.
HTML to Figma — Design System has no declared pricing — check the project's own site. Illustrator MCP Server has no declared pricing — check the project's own site. If a server needs environment variables such as API keys, define them under the env key in your client's MCP config.
Yes. MCP clients support multiple servers: add html-to-figma-design-system and illustrator-mcp-server as separate keys in the same mcpServers object, and your assistant will call tools from either one.
On AllMCPs, HTML to Figma — Design System has a quality signal of 64/100 (Good) with 3 views, 0 installs and 14 GitHub stars. Illustrator MCP Server has 69/100 (Great) with 6 views, 0 installs and 172 GitHub stars.