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

Enables frontend navigation and browser automation through a deterministic MCP server, integrating Browser Use and optional code graph hints for coding agents.

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.

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.

Delegates frontend/UI refinement to Gemini via agy CLI, using iterative vision loops and diff-gating to realign UIs to design mockups without affecting backend code.

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

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.

Captures webpage styles and HTML, converts CSS to Tailwind, and applies extracted designs to frontend frameworks like React.

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

MCP server for extracting UI components, design tokens, and patterns from websites and generating production-ready React, Vue, and HTML components.

Enables coding agents to see the UI they just changed without flooding their context window, returning a structured text summary (console errors, failed requests, overflow, layout shifts, accessibility violations) plus small crops of only the regions that changed since the last capture. All output is fitted into a chosen token budget, with captures stored on disk and evicted automatically.

One-click website design cloning with Puppeteer. Captures HTML, CSS, colors, fonts, and layout structured data for recreation.

Enables AI tools to interact with browsers for enhanced frontend development, providing context to LLMs through tools like API call analysis, screenshots, element selection, and documentation ingestion.

Bridges Claude Code with Claude Design, enabling sending design instructions, reading replies, and pulling generated files into the codebase.

Enables AI-driven UI inspection and optimization by scanning websites with configurable viewports, capturing screenshots, running deterministic accessibility and layout checks, and generating prioritized reports with fix prompts.

Enables agents and users to query mapped UI flows, retrieve immutable revision-bound browser evidence and screenshots, compare flow changes across revisions, and inspect coverage gaps or UI impact.

Enables searching public UI design libraries (Refero, Mobbin, ScreensDesign, Dribbble) for real app and website screens, downloading them into a category-organized local library that can be searched offline, and capturing screenshots of any web page with a real browser. Works from any MCP client or as a standalone CLI.

Enables AI agents to drive Playwright-based browser automation for UI testing, returning JSON/HTML reports with screenshots without server-side LLM or test scripts.

Converts any rendered web page into a complete, LLM-readable design specification—including block screenshots, distilled computed CSS, design tokens, responsive deltas, and alpha-channel-analyzed assets—so models can accurately reproduce the design.

Enables developers to search and retrieve captured UI and interaction cases by their intended purpose during coding sessions, making reproduced design references directly available to coding agents.