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

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

Enables converting Markdown text into clean HTML for headings, lists, code blocks, tables, links, and images, with optional full-document wrapping via x402 micropayments.

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.

Enables AI agents to convert HTML content into clean Markdown, stripping scripts and styles while preserving headings, links, lists, and images, with pay-per-call x402 micropayments and no API keys.

Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.

Automates the conversion of Figma designs into TypeScript React components and integrates with GitHub to create pull requests for the generated code. It includes visual regression testing with Playwright and accessibility validation to ensure implementations match the original designs.

Allows Cursor AI to communicate with Figma for reading designs and modifying them programmatically through a Model Context Protocol integration.

Lets AI assistants share HTML they generate as a private, end-to-end encrypted link, and update the page later at the same link. The page is encrypted locally before upload, the key stays in the link, and no account is needed.

Publish AI-generated HTML (reports, dashboards, decks) as a shareable link, and update it in place at the same URL. Tools: publish_html, update_page. Needs a free host-html.com API key (HOSTHTML_API_KEY).

Enables Cursor AI to communicate with Figma for reading designs and modifying them programmatically, allowing users to automate design tasks through natural language.

An AI recipe recommendation server based on the MCP protocol, providing functions such as recipe query, classification filtering, intelligent dietary planning, and daily menu recommendation.

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

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 coding agents to extract Figma design data and convert it into Flutter widgets and screens. Supports theme setup, component analysis, asset exports, and provides Flutter implementation guidance from Figma designs.

Enables sharing self-contained HTML files via public or access-key-protected private links. Provides MCP tools to create shares, retrieve public share metadata, and describe the service.

MCP server for generating and editing images and videos via DashScope/OpenAI-compatible APIs, with tools for text-to-image, image editing, text/video generation, and automatic local download.

Enables interaction with Figma files through intelligent API access, providing navigation, asset extraction, and design token retrieval with 95% token-optimized compact tree output format.

Enables extraction of design context from Figma files as CSS-like properties and provides tools to render Figma nodes as images. It integrates with AI agents via the Model Context Protocol to facilitate design-to-code workflows by providing layout, style, and typography information.

Thin HTTP wrapper for the Generate-Data.com API, enabling data generation, schema proposal, and field type listing through MCP tools.

Enables agents to upload, list, delete, and retrieve public URLs for self-contained HTML files on a remote nginx server via MCP, with a management page for browsing and previewing.

Model Context Protocol integration for the Figma API, enabling AI applications to access Figma files, components, and design tokens.

Enables AI coding agents to access Figma files and prototypes, allowing them to retrieve design data and assets directly.

Enables AI assistants to read Figma design files and automatically map responsive relationships between mobile and desktop screens to generate accurate frontend code. Eliminates manual copy-pasting by providing direct access to design tokens, dimensions, and screen layouts within AI-powered IDEs.

Connects AI applications to Figma API for extracting design data, generating production-ready HTML/CSS from designs, and capturing screenshots in multiple formats.

Token-efficient Figma MCP server with image export, query DSL, and design token support.

Enables assistants to discover, search, and extract real design systems — palettes, type scales, spacing, surfaces, and do/don't guidance — from the public style pages of styles.refero.design. It reports index coverage with every search and renders matched styles as structured design.md sections or parsed JSON tokens.

Searches design platforms for UI references and extracts design tokens such as colors, typography, spacing, and shadows from live websites.

Extracts text nodes from Figma designs and organizes them into structured JSON for internationalization workflows. It enables users to pull content from specific frames or entire files to automatically generate translation keys.

Bridge Figma designs to any platform with structured specs for Unity, React, Flutter, SwiftUI, and more, including layout audit, design tokens, and accessibility checks.

Converts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.

Enables AI assistants to analyze design images for composition, color harmony, typography, and accessibility compliance with actionable recommendations.

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 deterministic, headless access to Figma design files from AI agents and CI workflows using a personal access token, with tools for design snapshots, node search, text extraction, variables/tokens, and project discovery.

Enables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.

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 interaction with Figma designs through the Figma API, allowing users to export images in multiple formats, extract style data and CSS, analyze design elements, and retrieve SVG code from Figma files. Supports batch operations and comprehensive design element analysis including images, vectors, and components.

A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.

Enables AI agents to read, inspect, and export Figma designs programmatically. Provides tools for listing components, styles, and exporting assets in various formats.

A server that converts Figma designs into pseudo-code structures optimized for LLMs to understand design context, allowing easy extraction of visual elements and code-like representations from Figma files.

Enables AI assistants to read and modify Figma designs programmatically through the Model Context Protocol.