Scan React/Next codebases for exported UI components, Tailwind/shadcn signals, and Figma↔code name mappings so you can reuse existing components before building a Figma design.
MIT
675,138 tools. Updated 2026-10-19 04:15
"Servers for creating UI in Figma using MCP" matching MCP tools:
- Convert complex HTML/CSS layouts into editable Figma vector nodes using Satori, for UI components like flexbox cards and multi-column designs.MIT
- Export Figma frames or components as PNG or SVG images for game UI, saving them to a specified output directory.MIT
- Duplicate any page in your Figma document by providing its page ID, creating an exact copy of all contents with an optional custom name.MIT
- Estimate effort for converting UI blocks from Figma designs or web pages into reusable code, generating a UI architect prompt and CSV output.MIT
- Retrieve guidelines for creating UI components, including patterns and preferences, to ensure consistent design and implementation from the start of development.-
Matching MCP Servers
- AlicenseAqualityAmaintenanceBidirectional 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.5981 npm264MIT
- AlicenseAqualityBmaintenanceEnables 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.10981 npmMIT
Matching MCP Connectors
Figma MCP Pack
Mlola UI components, tokens and design rules for coding agents, with a markup checker
- Identify UI components in a Figma design, including charts, tables, and forms, using a Figma file URL.-
- Execute multiple Figma commands sequentially in a single batch call to improve performance for bulk operations such as creating icons or setting variables.-
- Generate a visual design handoff spec for a Figma frame, covering spacing, anatomy, colors, typography, grid, and assets, to guide developers.MIT
- Create UI designs in Figma from text descriptions by parsing prompts for common patterns like headers, cards, forms, and footers.-
- Add text elements to Figma designs with font customization and alignment options for creating UI content.-
- 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
- Push design tokens to Figma as variables, creating or updating variable collections automatically.MIT
- Create a knowledge folder for organizing documents, enabling subsequent uploads via UI or API.MIT
- Checks Figma WebSocket bridge health before using Figma tools. Returns status, connected clients, latency, and uptime to prevent failed operations.MIT
- Draw or modify Figma canvas by executing JavaScript code in a sandboxed environment using figma.* proxy. Returns execution results, logs, and warnings.MIT
- Create a variable in a Figma collection with a specified type (BOOLEAN, FLOAT, STRING, COLOR). Starts empty, so set per-mode values and bind to nodes or paints later. Not for EASING/TIMING.MIT
- Retrieve the complete field schema needed for creating or editing companies in Less Annoying CRM. Get all required and optional fields, their types, formats, and custom field indicators before creating a company.MIT
- Analyze images using a vision model to explain screenshots, UI, diagrams, charts, or error messages that need reasoning. Not for text extraction.MIT
- Commit a tested evaluator draft to create a read-only version, enabling subsequent pipeline creation for UI rendering.-
- Store content into an inbox for later batch processing, letting you categorize items in the MindBase UI instead of creating a wiki note immediately.MIT