"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.

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.

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

A Model Context Protocol server that converts Markdown content to HTML format.

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.

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

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.

An MCP server that converts Markdown to HTML, supporting both stdio and HTTP interfaces for easy integration with Cursor and other MCP clients.

Enables AI agents like Claude to interact with Figma designs through 50+ tools for creating, styling, and manipulating design elements, components, and variables via a WebSocket relay and Figma plugin.

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.

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.

An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.

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.

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

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

An MCP server that retrieves relevant code snippets and documents to assist in generating pymilvus code, converting between ORM and client, and translating Milvus code between programming languages.

An MCP server that converts HTML to PDF with built-in fonts, CSS, and streaming, enabling AI agents to generate static PDFs from HTML strings.

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.

Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.

An MCP server that enables AI assistants to interact with Figma designs for tasks like reading document info, creating elements, and managing auto layouts. It facilitates real-time design automation via a custom Figma plugin and WebSocket server integration.

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 Claude Cowork on Windows to read, write, edit, list, find, and regex-search files inside a WSL distribution over stdio, accepting Windows and Linux path spellings. Access is confined to server-fixed roots, with secrets files refused, key-shaped strings redacted, and no delete or move operations.

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

MCP server that routes Claude Desktop chat into Claude Code, enabling headless execution and terminal handoff with session continuity.

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

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

Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.

Enables Claude Desktop and other AI tools to interact directly with Figma, allowing for powerful AI-assisted design capabilities through natural language commands.

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 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 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 AI agents to read, analyze, and modify Figma designs, including bulk style updates, accessibility audits, comment triage, and code generation from designs.

Turns real technical work from a Claude Code session into a saved, professional design doc with one slash command, no copy-pasting or signup required.

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

Enables agents to discover how a website serves its data, verify sources with evidence, export OpenAPI 3.1, and generate tested TypeScript or Python clients.