Analyze codebases and design user interfaces using Google Gemini's visual understanding and detective capabilities for rapid prototyping and comprehensive analysis.
MIT
204,700 tools. Last updated 2026-06-15 01:18
"Design and prototyping software - Figma" matching MCP tools:
- Compare Figma design tokens with code tokens to detect mismatches, missing items, and divergent values for design-code gap analysis.MIT
- Retrieve all published design system tokens from a Figma file, including colors, text styles, and effects for consistent design implementation.
- Retrieve Figma prototyping reactions from multiple nodes to analyze user interactions and prepare data for creating connector lines in design workflows.
- Retrieve Figma prototyping reactions from multiple nodes to enable automatic connector line generation.MIT
- Export Figma design tokens (variables and paint styles) as JSON or CSS custom properties to bridge into your codebase.MIT
Matching MCP Servers
- Alicense-qualityCmaintenanceEnables visual drag-and-drop editing of Mermaid diagrams through Claude, allowing iterative refinement of software architecture designs.Last updated6MIT
- AlicenseAqualityDmaintenanceFacilitates interactive software development planning by managing tasks, tracking progress, and creating detailed implementation plans through the Model Context Protocol.Last updated627393MIT
Matching MCP Connectors
Figma MCP Pack
Generate design systems: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.
- Retrieves prototyping reactions from specified Figma nodes. Output must be processed to generate connector line parameters.MIT
- Extract design tokens from Figma variables JSON export to translate design systems across platforms like Material 3, SwiftUI, and CSS.MIT
- Generate a brand theme that outputs CSS variables and Figma Variables JSON from design tokens; requires brand name and primary color, optional neutral.MIT
- Extract design tokens, components, and structure from a Figma design by providing a URL or file ID.MIT
- Manage software project documentation workflow for requirements, design, and task specifications. Supports initialization, checking, skipping, confirmation, and task completion operations.MIT
- Apply styles from a design system policy markdown file to Figma components and frames.MIT
- Run visual regression tests comparing a React component against its Figma design to verify implementation accuracy.MIT
- Convert Figma design files into agile user stories with acceptance criteria and epics. Creates structured markdown documentation from design specifications.MIT
- Audit a Figma file to detect and report design system policy violations. Identify inconsistencies and ensure compliance with design guidelines.MIT
- Extract Figma design data including structure and images for integration into development workflows. Provide the full Figma URL to retrieve organized design information.MIT
- Reconstruct captured webpages in Figma by converting DOM structures into design elements like frames, shapes, and text for design analysis or prototyping.
- Retrieve Figma prototyping reactions from specified nodes to analyze user interactions and prepare data for creating connector lines between design elements.
- Retrieve Figma prototyping reactions from multiple nodes to analyze user interactions and prepare data for creating connector lines in designs.
- Extract design context from Figma files as CSS-like properties for layout, styles, text, and dimensions to facilitate design-to-code workflows.