Retrieves design-to-code specifications from a CoDesign URL, including layer positions, styles, CSS, and slice metadata for use in HTML/CSS implementation.
MIT
306,652 tools. Last updated 2026-07-25 19:02
"How to generate HTML code from Figma design files" matching MCP tools:
- Compare a design against a rendered implementation and get structured discrepancies. Provide a Figma URL, design image, or component description to produce a report of visual differences.MIT
- Extract design tokens from CSS, SCSS, Tailwind config, or Figma files to inventory them before generating a Tailwind config or component scaffold.MIT
- Generate a standalone HTML report with all UI audit findings. Runs screenshot, accessibility, performance, and code analysis, outputting a shareable file with zero external dependencies.MIT
- List connected Figma files or trigger a sync to bring design tokens, components, and page structure into Contextium libraries.MIT
- Push design tokens to Figma as variables, creating or updating variable collections automatically.MIT
Matching MCP Servers
- Alicense-qualityCmaintenanceTransforms Figma design data into a compact, LLM-friendly format for code generation, reducing size by 99.5% while preserving UI-critical information.Last updated3574MIT
- AlicenseBqualityDmaintenanceA Model Context Protocol server that converts Markdown content to HTML format.Last updated12,7262MIT
Matching MCP Connectors
Figma MCP Pack
Render HTML and CSS to PNG images over HTTP. Send HTML and CSS and get a PNG back.
- Extract design tokens from Figma files and map to Tailwind CSS utilities, updating the shared design context.MIT
- Generate a PDF from HTML content. Accepts HTML input and returns base64-encoded PDF bytes, enabling automated document creation from HTML templates.MIT
- Export, compress, and upload images from Figma design nodes to generate publicly accessible URLs for design assets.MIT
- Reviews frontend/UI code for wasteful re-renders, accessibility flaws, and questionable design, then returns categorized issues and fixes.MIT
- Pull the complete Figma design system (tokens, components, styles) into your local registry.MIT
- Compare Figma design tokens with code tokens to detect matches, missing tokens, and value divergences for design-code gap analysis.MIT
- Create or modify Figma designs programmatically with JavaScript code. Supports design operations, variables, styles, components, and prototyping transitions.MIT
- Execute a MAESTRO design decision to generate HTML, CSS, and JS with adjustable quality from draft to enterprise, optionally using a multi-agent Trifecta pipeline.MIT
- Search Figma files for design system variables, local components, and remote library assets. Returns component keys to instantiate reusable elements.MIT
- Retrieve design tokens, components, and styles from Figma using REST API. No plugin required; works headlessly in CI with environment variables.MIT
- Extract design elements like fonts, colors, and button styles from screens to maintain visual consistency when generating HTML components.
- Retrieve all design tokens from BrixUI including colors, spacing, border radius, typography, and other variables for consistent design-to-code handoff.MIT
- Export design tokens as CSS custom properties, Tailwind config, or Figma Variables JSON, with optional file output.MIT
- Generates a cost-aware design brief for coding agents tasked with UI design, polish, audit, or refactoring. Returns structured JSON with mission, rules, and controls.MIT