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

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.

Gives AI coding agents a ten-phase frontend design pipeline (audit, style direction, build, review, verify, perf, brand) with an exclusive style menu. Its verify_page tool loads a URL in a real Playwright browser at mobile and desktop viewports and returns screenshots, ARIA snapshots, console errors, failed requests, horizontal-overflow offenders, axe-core violations, and pointer type.

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

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.

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.

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

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

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.

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 AI assistants to retrieve NHS.UK frontend component templates, styles, macro options, and usage examples directly from the source repository.

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