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

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

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.

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

MCP server that fetches remote or local HTML resources and converts them to Markdown, enabling AI clients to summarize or process web content.

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.

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

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.

MCP server that lets you drive Claude Code sessions hands-free by voice from any MCP client, enabling remote models to send prompts, monitor progress, and get results read back.

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

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.

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

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 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 agents to discover how a website serves its data, verify sources with evidence, export OpenAPI 3.1, and generate tested TypeScript or Python clients.

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

Converts raw HTML to clean Markdown, optimized for LLM token efficiency and deterministic processing.

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.

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.

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.

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 AI clients to read receipt and invoice files, organize them with standardized filenames, append entries to an Excel-friendly CSV ledger, and search ledger records locally without network access or deletion.

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.

A personal MCP bridge that lets ChatGPT drive a local Codex CLI, translating instructions into Codex app-server threads and returning compact summaries of what Codex did.

Create, edit, inspect, and publish collaborative HTML documents from AI agents through the HTML Docs MCP server.

Enables agents to roll true-random, reproducible design briefs, generate and compare multiple page directions, and critique final pages against each brief and its global prohibitions.

Read-only Figma MCP server that enables design-to-code workflows by talking to the Figma REST API with a personal access token, for use with Claude Code and GitHub Copilot.