"Resources for Frontend and UI Design" matching MCP servers:

Enables AI coding agents to search public design-system catalogs and retrieve only the relevant tokens or sections for a chosen brand, so generated UI matches a specified visual style instead of generic AI output.

Provides comprehensive UI design assistance tools for LLMs, generating color palettes, typography, spacing systems, shadows, design tokens, and more via the MCP protocol.

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.

MCP server for ingesting UI screenshots, Figma MCP node JSON, or hybrid Figma-plus-screenshot sources into a cross-platform design-to-code artifact pipeline.

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

Provides AI assistants with frontend development tools including component scaffolding, bundle analysis, accessibility checks, and responsive design guidance. Enables automated generation of React components with tests and stories, bundle optimization recommendations, and WCAG compliance fixes.

Enables frontend developers to read Moonvy design files, extract page lists, layer trees, node styles, design tokens, and download assets such as cutouts and snapshots for precise frontend implementation.

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

Transforms design inputs (URLs, screenshots, descriptions) into production-ready React components following G2's Elevate 2.0 design system, providing both an MCP server for Claude Code and a web interface.

Imports public websites and extracts UI components and design tokens, making them available via MCP for AI coding agents to reuse in implementations.

Native Claude Code integration for @annondeveloper/ui-kit — a zero-dependency React component library with 147 components, 3 weight tiers, physics-based animations, and OKLCH color system. Gives Claude deep awareness of the library's components, design patterns, and conventions. Includes 5 skills for component discovery, code generation, design system reference, tier selection, and accessibility

This MCP server renders UI design artifacts headlessly, runs deterministic linters, and manages stateful design review loops with an independent vision critic.

Enables AI agents to manage routes on the Design Canvas infinite canvas app, including adding, removing, listing routes, and capturing screenshots of the canvas.

Manages design tokens (colors, spacing, fonts) in a JSON file and enables agents to read, write, export, and detect drift between tokens and CSS via MCP.

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 AI assistants to generate production-ready, professional UI design systems and components from simple descriptions, with real images, animated components, and automated quality checks.

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.

MCP server for the coss ui design system, enabling AI agents to fetch components, props, and design tokens on demand for accurate, low-cost code generation.

A local stdio MCP server that enables AI coding tools to search and retrieve reusable interactive and motion design parts from a design-notes library, returning each part's notes, anchors, extracted parameters, and the absolute path to its self-contained index.html source. It also serves the original README provenance and source URLs for a given note.