Extract design tokens from CSS, SCSS, or Tailwind config to inventory a project's visual styles before creating a Tailwind config or component scaffold. Optionally fetch tokens from Figma.
MIT
524,225 tools. Updated 2026-09-06 14:34
"How to generate HTML code from Figma design files" matching MCP tools:
- Extract design elements like fonts, colors, and button styles from screens to maintain visual consistency when generating HTML components.-
- Audit a Figma or Penpot design export against your contract, recovering screen/state from frame names and reporting missing or unmapped screens and states.MIT
- List connected Figma files or trigger a sync to bring design tokens, components, and page structure into Contextium libraries.MIT
- Convert raw HTML/CSS into Symbols.app DOMQL components and receive a component catalog, syntax reference, and design system tokens.Creative Commons Attribution Non Commercial 4.0 International
- Convert Figma designs into frontend code that matches your tech stack and style variables. Automatically detects and applies project configurations.Mozilla Public 2.0
Matching MCP Servers
desrid-html-to-figmaofficial
AlicenseNot gradedqualityBmaintenanceThis 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.MIT- AlicenseNot gradedqualityBmaintenanceTransforms Figma design data into a compact, LLM-friendly format for code generation, reducing size by 99.5% while preserving UI-critical information.1305MIT
Matching MCP Connectors
Render HTML and CSS to PNG images over HTTP. Send HTML and CSS and get a PNG back.
Figma MCP Pack
- Push design tokens to Figma as variables, creating or updating variable collections automatically.MIT
- 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
- Pull the full design system from Figma—tokens, components, styles—into the local registry for developer use.MIT
- Converts a design graph from Figma or a live site into pixel-faithful React JSX with inline styles, using a template-based deterministic emitter.MIT
- Generate Terraform files from a completed infrastructure design session. Returns a file summary and download link, or inline code as a fallback.Apache 2.0
- Compare Figma design tokens with code-side tokens to identify matching, missing, and divergent values. Pinpoint design-code gaps for accurate parity 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
- Extracts a complete design contract JSON from Figma components, covering props, anatomy, variant overrides, resolved tokens, and a11y contrast pairs for design-to-code handoff or component docs.MIT
- 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
- Generate interactive bar, line, or pie charts from pandas aggregated data, saving as self-contained HTML files.MIT
- Generate a React project skeleton with Vite, antd, AG Grid, ApexCharts, and Tailwind, automatically wiring Figma design tokens into the configuration files.MIT