"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.

Search, inspect and install the 21 free MIT components of Marvelous UI (framework-agnostic Web Components and CSS) and their design tokens into a project. Runs locally over stdio with no network calls.

MCP server providing 51 design skills covering product thinking, UX, visual design, Figma, frontend, motion, branding, and portfolio storytelling, accessible via tools and resources.

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

A design harness for AI coding agents. Better Design gives an agent design systems, UI and UX principles, icons and UI review: it finds or creates a design system that fits the product and installs its components, explains how sign-up, forms and onboarding should work, and reviews finished screens for readability, accessibility and unclear copy.

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.

Enables offline composition and validation of Basecoat UI interfaces in Astro and static HTML projects via curated templates, design resources, and static checks.

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

MCP server for the NS UI React component registry. Search components, inspect source and details, list categories, get install commands, and retrieve design-token conventions.

Enables agents to commission and refine web pages, product prototypes, landing pages, decks, images, and motion through the desktop app, and to read design files, copy artifacts, and access design systems.

Enables AI coding agents to audit rendered web pages for design and UI defects by measuring geometry, styles, contrast and motion in a local browser and judging them against evidence-tiered rules. Findings come back as short, fixable items expressed in the project's own design tokens, while only sanitized numeric measurements leave the machine.

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

Enables Claude to search and retrieve curated design references, browse categories and tags, read style guides, and save new UI references from URLs so UI work starts from chosen inspirations rather than generic defaults.