"How to generate HTML code from Figma design files" matching MCP servers:

This MCP server lets AI agents connect to Figma to read, analyze, create, and modify designs, including elements, styles, assets, and code generation. It works with free Figma accounts and supports parallel multi-agent use across MCP-compatible clients.

Transforms Figma design data into a compact, LLM-friendly format for code generation, reducing size by 99.5% while preserving UI-critical information.

MCP server for ingesting UI screenshots, Figma MCP node JSON, or hybrid Figma-plus-screenshot sources into a cross-platform design-to-code artifact pipeline.

An MCP server that integrates AI agents with Figma, enabling reading and programmatic modification of designs.

Transform Figma designs into pixel-perfect React + Tailwind components using the Model Context Protocol.

MCP server that parses .sketch design files into CSS-aligned, LLM-friendly JSON, enabling AI coding agents to generate high-fidelity HTML, Vue, or React code.

The pixel-diff verifier for Figma-to-code: converts a frame to HTML, React, Next.js or Tailwind with design tokens, then renders it and pixel-diffs it against Figma until it converges. Also verifies your own running app.

Provides 8 MCP tools for frontend design: load design system, generate components, scaffold pages, review consistency, extract tokens, check WCAG 2.2 AA, test responsiveness, and export to Figma.

Enables an agent to turn a paper's draft into editable Figma frames for publication-ready figures, checking every number against the paper and verifying the exported PDF.

Converts a Figma file into a React project using Ant Design, AG Grid, ApexCharts, and Tailwind CSS, with optional export of mobile screens as a React Native (Expo) app.

Compares Figma frames to live pages, checking colors, fonts, and border radii, and generates a shareable HTML report.

Maps design components, tokens, and patterns to their code implementations, providing AI coding agents with exact-match resolution across any design tool and framework. Enables agents to reliably discover and reuse existing components across React, Vue, Flutter, SwiftUI, and more.

Enables Cursor AI to read and modify Figma designs programmatically via the Model Context Protocol.

Enables AI agents to directly control Figma Desktop via MCP, supporting UI creation, editing, prototyping, and variable management with over 60 tools.

Enables AI agents to read, inspect, and edit Figma files through a Model Context Protocol server with 107 tools, visual snapshots, fidelity tools, and optional REST API access.

Extracts SVG icons from Figma and generates React TSX icon components automatically, enabling AI assistants like GitHub Copilot and Claude to manage icon workflows.

Converts Figma to Markdown. Strips out visual noise to drastically reduce LLM token consumption.

Enables AI agents to read and modify Figma designs programmatically through WebSocket communication, supporting document manipulation, styling, text replacement, and component management.

Provides Figma design context to AI agents, enabling code generation, design system integration, and canvas manipulation through MCP.

Model Context Protocol server that bridges design and development, giving AI assistants complete access to Figma for extraction, creation, debugging, and bidirectional token sync.

Enables users to connect Figma and use natural language to read design content, extract copy, and generate code from Figma files.

Enables AI agents to extract design systems, analyze components, and maintain design-code consistency from Figma files, providing intelligent component analysis and accessibility compliance.

Enables AI assistants to control Figma in real-time through Model Context Protocol, allowing design creation, editing, and reading operations directly from VS Code.

Enables AI agents to read, analyze, and modify Figma designs, including bulk style updates, accessibility audits, comment triage, and code generation from designs.

Enables Cursor AI to read and modify Figma designs via the Model Context Protocol, allowing programmatic control over documents, components, styles, and more.

MCP server that enables AI agents to read, analyze, and modify Figma designs, including comment management via Figma's REST API. Works with any Figma account and supports parallel execution.

Enables creating and editing Figma-like 16:9 HTML slide decks through a visual canvas, with tools to open existing HTML, manage decks, and export slides as presentable HTML.

A design harness for AI coding agents. Better Design gives an agent design systems, UI and UX principles, icons and UI review: it finds or creates a design system that fits the product and installs its components, explains how sign-up, forms and onboarding should work, and reviews finished screens for readability, accessibility and unclear copy.

Pull a Figma frame once, then let Claude Code, Codex or any MCP agent read it offline with no rate limits. Six read-only tools serve the normalized node tree, design tokens and locally built SVG icons from a vault you can commit, so teammates need no Figma token.

Provides read-only Figma design data to AI agents via MCP, supporting local .fig files and browser-based figma.com access without plugins or API tokens.

Bridges Claude Design projects into existing Claude Desktop sessions by fetching code files, chat history, and project bundles.

Enables reading and patching VRoid Studio 2.x .vroid files by inspecting textures and parameters, exporting layer PNGs, and writing verified new files with replaced layers, item colors, or saved settings.

Enables Claude AI to extract design information from Figma files and create or update designs via a Figma plugin, supporting both readonly and write modes.

Converts Figma designs (frames, components, instances) into inspectable packets and static Unity UGUI YAML prefabs via the Figma REST API, enabling direct design-to-Unity asset generation.

Enhanced Figma MCP Server that exposes prototype flow data — screen lists, prototype connections, and full flow maps — via the Figma REST API. Designed as a replacement for the official Figma MCP server, adding prototype interaction layer so Claude Code can understand entire user flows from a single Figma URL.

Enables offline reading and rendering of Figma .fig files, allowing AI agents to extract design specs, export assets, and generate code without needing the Figma API or network access.

A read-only Figma MCP server that lets Claude list frames, read a frame's layout as flexbox, extract color and text styles as CSS variables, export icons as SVG, and render a PNG of the frame for visual comparison. This gives Claude everything it needs to build a matching web page from a design on Figma's free plan, with responses cached locally.

Enables AI-driven UI/UX design and prototyping in Figma by letting agents generate AutoLayout screens, modify canvas elements, and wire interactive prototype flows through natural language.

Bridges a local Figma development plugin to a local MCP server, letting the client read and write real canvas layers through the Figma Plugin API without consuming official MCP or Dev Mode quota. Supports layer and auto-layout editing, component and variable inspection, design-to-code context retrieval, and PNG/JPG/SVG/PDF export.

A design-intelligent MCP server for Figma with 201 tools and built-in design rules, works with Cursor and Claude Code.