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

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

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.

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.

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.

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

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.

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

An autonomous MCP server that uses the Claude Code CLI to solve coding problems without permission prompts.

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.

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

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 publishing and managing single-page HTML files on CloudBase hosting through an MCP server, including uploading, retrieving, listing, and toggling offline/online states.

Visual tech-stack inventory of any codebase: languages, frameworks, databases, AI SDKs, infra.

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.

A local stdio MCP server for managing files on XServer via SFTP, enabling secure file operations, backups, and workspace management for XServer hosting.

Generates test files locally (images, PDFs, CSVs, corrupted files, etc.) from natural language prompts, with configurable sizes and safety limits.

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

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 lightweight MCP server for basic file operations, enabling reading, writing, and listing files securely via the Model Context Protocol.

Stop your AI agent from rebuilding what already exists. MCP server that checks GitHub, npm and Python repos for maintained alternatives before you scaffold.

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 to Markdown. Strips out visual noise to drastically reduce LLM token consumption.

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

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.

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

Provides read-only access to over 100 UX/UI design checklists from Checklist.design, enabling users to search and retrieve design guidance for specific flows and screens. Runs locally without an API key.

Bidirectional MCP bridge enabling AI assistants to draw UI on Figma canvas and read designs back as structured data or code tokens via localhost, requiring Figma Desktop.

Enables MCP clients to read design structure, take screenshots, create nodes, and edit UI directly on Figma canvas via a bridge between MCP and Figma Desktop.

Enables automated export, compression, and cloud upload of Figma design assets by simply providing Figma links. Supports batch processing of nodes and children, returning structured data with publicly accessible image URLs.

Provides software design guidance via MCP, including SOLID principles, design patterns, pattern scaffolding, and heuristic code-smell detection to help review and refactor code.

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