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

Enables AI assistants to discover, document, and generate React code using the pastel-themed Baby Design UI component library. It provides tools for retrieving design tokens and component specifications to streamline the development of user interfaces.

Exposes GOV.UK Frontend components and Design System patterns and styles as MCP resources for use with AI assistants.

LLM routing proxy that cuts API costs 60-90% by auto-selecting the cheapest capable model across OpenAI, Anthropic, and Google. Provides stats, config, and model comparison tools via MCP.

Enables coding agents to visually verify front-end changes by capturing screenshots at real breakpoints, identifying the single element responsible for overflow, and surfacing console and network errors.

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.

A comprehensive MCP server for frontend analysis. It provides Google Lighthouse audits, code quality checks, SEO metadata verification, accessibility analysis, and bundle optimization for React and Next.js projects.

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.

An MCP server that provides tools for frontend development, including i18n issue detection, OpenAPI type generation, and project structure analysis.

Web scraper and token compressor that converts HTML to clean markdown with 70-80% fewer tokens. Single-page compression and multi-page BFS crawling with auto-fallback fetch modes.

Provides tools for frontend testing including code analysis, test generation, test execution, and React component testing for Jest and Cypress frameworks.

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 AI agents to analyze and scaffold React/Next.js applications enforcing Feature-Sliced Design (FSD) conventions, providing tools for project analysis, rule retrieval, and entity generation.

Enables AI assistants to render interactive charts as generative UI inline in chat, including bars, lines, areas, donuts, tooltips, table views, and built-in series analysis.

MCP server that lets AI agents search and inspect shadcn components from the encode-ui registry, returning metadata, source code, and install commands.

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.

🎨 AI-powered UI/UX design intelligence - 1519+ curated design resources through MCP | React, Vue, Next.js, Flutter & more

MCP server that gives Claude deep awareness of your frontend codebase by scanning components, hooks, services, routes, and data flow for React or Vue projects.

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