# MCP servers for Frontend and UI MCP servers for Frontend and UI: what each one does, an install command and example prompts. 116 cards · page 3 of 3 - HTML: https://affpapa.org/en/nevibecode/mcp/topic/frontend?page=3 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [Talivia Revenue Analytics](https://affpapa.org/en/nevibecode/mcp/talivia-revenue-analytics.md) — MCP server · talivia-group · Claude Code, Codex, Cursor +5 · ★ 32 — Connects your AI agent to Talivia to track web traffic directly to payments. - [UICapsule](https://affpapa.org/en/nevibecode/mcp/uicapsule.md) — MCP server · kyh · Claude Code, Codex, Cursor +5 · ★ 32 — Remote MCP server holding a catalog of React components that move in unusual ways. - [nakkas](https://affpapa.org/en/nevibecode/mcp/nakkas.md) — MCP server · arikusi · Claude Code, Codex, Cursor +5 · ★ 30 — Builds animated SVG graphics from declarative JSON configurations. - [AINDF](https://affpapa.org/en/nevibecode/mcp/aindf.md) — MCP server · 0design · Claude Code, Codex, Cursor +5 · ★ 28 — A read-only MCP server over a single AINDF design-system bundle. - [XamlMcp](https://affpapa.org/en/nevibecode/mcp/xamlmcp.md) — MCP server · trrahul · Claude Code, Codex, Cursor +4 · ★ 27 — MCP server to inspect and control live XAML applications. - [UI Verify](https://affpapa.org/en/nevibecode/mcp/ui-verify.md) — MCP server · uiverify · Claude Code, Codex, Cursor +5 · ★ 24 — Hosted visual regression testing service for coding agents. - [DevTool MCP](https://affpapa.org/en/nevibecode/mcp/devtool-mcp.md) — MCP server · standardbeagle · Claude Code, Codex, Cursor +5 · ★ 22 — Gives the agent a handle on your running app: dev-server control, a reverse proxy and frontend diagnostics. - [rive-mcp](https://affpapa.org/en/nevibecode/mcp/rive-mcp.md) — MCP server · ODU33104 · Claude Code, Codex, Cursor +5 · ★ 22 — Create and edit .riv animations, inspect their structure, and export previews through an MCP client. - [ui-annotator-mcp](https://affpapa.org/en/nevibecode/mcp/ui-annotator-mcp.md) — MCP server · mcpware · Claude Code, Codex, Cursor +5 · ★ 21 — Runs a proxy that injects hover overlays onto any web page so AI assistants reference interface elements by exact names. - [wpf-visual-tree](https://affpapa.org/en/nevibecode/mcp/wpf-visual-tree.md) — MCP server · faze79 · Claude Code, Codex, Cursor +4 · ★ 20 — This MCP server lets an AI agent inspect and operate a running WPF app, including its element tree, bindings, screenshots, and UI input. - [buoy](https://affpapa.org/en/nevibecode/mcp/buoy.md) — MCP server · ahoybuoy · Claude Code, Codex, Cursor +5 · ★ 20 — Gives a coding agent your tokens and component rules, then flags hardcoded colors and off-scale spacing with a line-level fix. - [webcomponents-mcp-server](https://affpapa.org/en/nevibecode/mcp/webcomponents-mcp-server.md) — MCP server · UI5 · Claude Code, Codex, Cursor +5 · ★ 20 — An MCP server that feeds UI5 Web Components docs into your AI assistant. - [memi](https://affpapa.org/en/nevibecode/mcp/memi.md) — MCP server · memi-design · Claude Code, Codex, Cursor +5 · ★ 48 — Maps the UI already in your repo and reports accessibility and design-system problems down to the line. - [Roast My Design System](https://affpapa.org/en/nevibecode/mcp/roast-my-design-system.md) — MCP server · gregkozakiewicz · Claude Code, Codex, Cursor +5 · ★ 27 — Audits UI codebases for missing tokens and serves design rules to your agent so generated components stick to your design system. - [marmo-ui](https://affpapa.org/en/nevibecode/mcp/marmo-ui.md) — MCP server · mahmoudilyan · Claude Code, Codex, Cursor +5 · ★ 19 — Wires your agent to live Marmo UI component APIs so it builds dashboards from real props instead of guessing them. - [Nekzus-npm-sentinel-mcp](https://affpapa.org/en/nevibecode/mcp/nekzus-npm-sentinel-mcp.md) — MCP server · Nekzus · Claude Code, Codex, Cursor +5 · ★ 19 — Inspects NPM packages for security flaws, dependency trees, and quality scores directly from your AI coding assistant. - [Kinetik UI](https://affpapa.org/en/nevibecode/mcp/kinetik-ui.md) — MCP server · NURULLAHTURGUT · Claude Code, Codex, Cursor +5 · ★ 18 — Gives your coding agent the Kinetik UI registry of animated React Native and Expo components: search, source and an install plan inside the chat. - [CleanSlice](https://affpapa.org/en/nevibecode/mcp/cleanslice.md) — MCP server · CleanSlice · Claude Code, Codex, Cursor +5 · ★ 18 — A remote MCP server that serves the CleanSlice architecture documentation for full-stack NestJS and Nuxt apps, so the agent reads the conventions before it writes code. - [matchcn](https://affpapa.org/en/nevibecode/mcp/matchcn.md) — MCP server · francesco0242 · Claude Code, Codex, Cursor +5 · ★ 17 — Discovers shadcn UI components across external registries by behavior and layout description rather than exact package names. - [FTX MCP — FactoryTalk Optix MCP Server](https://affpapa.org/en/nevibecode/mcp/ftx-mcp-factorytalk-optix-mcp-server.md) — MCP server · asqi-carter · Claude Code, Codex, Cursor +5 · ★ 17 — Connects FactoryTalk Optix Studio to AI assistants on Windows 11. - [ng-blatui](https://affpapa.org/en/nevibecode/mcp/ng-blatui.md) — MCP server · anousss007 · Claude Code, Codex, Cursor +5 · ★ 17 — The ng-blatui MCP server gives the agent access to a catalog of 157 components, 16 blocks, 70 charts and 35 page templates from the Angular UI library. - [Scandit](https://affpapa.org/en/nevibecode/mcp/scandit.md) — MCP server · Scandit · Claude Code, Codex, Cursor +5 · ★ 20 — The Scandit MCP server connects your agent to the SDK for capturing barcodes, QR codes, and documents. - [Bestax](https://affpapa.org/en/nevibecode/mcp/bestax.md) — MCP server · allxsmith · Claude Code, Codex, Cursor +5 · ★ 13 — An MCP server that gives agents access to the bestax-bulma React component library: props, code examples, Bulma v1 CSS variables and ready-made prompts. - [Iconoteka](https://affpapa.org/en/nevibecode/mcp/iconoteka.md) — MCP server · iconoteka · Claude Code, Codex, Cursor +5 · ★ 12 — Gives your assistant a catalog of 1,400 icons across 7 weights and 2 styles, and hands back real SVG markup instead of a guessed path. - [3D AR Studio](https://affpapa.org/en/nevibecode/mcp/3d-ar-studio.md) — MCP server · nirholas · Claude Code, Codex, Cursor +5 · ★ 11 — Turns 3D models into an augmented-reality scene in the browser and hands back one link that opens it in someone's room. - [nuxt-i18n-mcp](https://affpapa.org/en/nevibecode/mcp/nuxt-i18n-mcp.md) — MCP server · fabkho · Claude Code, Codex, Cursor +5 · ★ 11 — An MCP server that lets your coding agent manage translations in Nuxt projects: spot missing keys, drop dead ones, rename across every locale. - [Open Components](https://affpapa.org/en/nevibecode/mcp/open-components.md) — MCP server · uxfront-com · Claude Code, Codex, Cursor +5 · ★ 11 — Hands your agent the contracts and rules for UI components, section by section, so the code matches the UX, DX and AX standard. - [Ply UI](https://affpapa.org/en/nevibecode/mcp/ply-ui.md) — MCP server · ply-ui-ng · Claude Code, Codex, Cursor +5 · ★ 10 — Hands your coding agent the Ply component catalog for Angular and Tailwind: search, metadata, and installs through the CLI. - [figma-mcp-express](https://affpapa.org/en/nevibecode/mcp/figma-mcp-express.md) — MCP server · sunhome243 · Claude Code, Codex, Cursor +5 · ★ 9 — Lets an agent work inside the live Figma Desktop file: nodes, components, variables, styles and prototype links. - [ui-ticket-mcp](https://affpapa.org/en/nevibecode/mcp/ui-ticket-mcp.md) — MCP server · 0ics-srls · Claude Code, Codex, Cursor +5 · ★ 9 — Click an element in the browser, leave a comment, and your coding agent picks it up over MCP and edits the code. - [amCharts 5](https://affpapa.org/en/nevibecode/mcp/amcharts-5.md) — MCP server · amcharts · Claude Code, Codex, Cursor +5 · ★ 9 — Gives your agent on-demand access to amCharts 5 docs, code samples and API reference. - [MCP Bench Router](https://affpapa.org/en/nevibecode/mcp/mcp-bench-router.md) — MCP server · K1ta141k · Claude Code, Codex, Cursor +5 · ★ 7 — Sends design and frontend prompts to whichever model currently leads the designarena.ai board, through OpenRouter. - [HTML/CSS to Image API](https://affpapa.org/en/nevibecode/mcp/htmlcss-to-image-api.md) — MCP server · htmlcsstoimage · Claude Code, Codex, Cursor +5 · ★ 7 — Renders HTML/CSS into images, captures live website screenshots, and fills reusable templates to produce images or PDFs. - [liquefy-ui](https://affpapa.org/en/nevibecode/mcp/liquefy-ui.md) — MCP server · liquefy-ui · Claude Code, Codex, Cursor +5 · ★ 6 — Answers questions about liquefy-ui from the library's actual API surface, so your coding agent stops making up props. - [validator](https://affpapa.org/en/nevibecode/mcp/validator.md) — MCP server · swatchdog-dev · Claude Code, Codex, Cursor +5 · ★ 6 — Compares agent-written CSS against your design system and lists every value that sits off-token. - [mcp](https://affpapa.org/en/nevibecode/mcp/megberts-mcp.md) — MCP server · megberts · Claude Code, Codex, Cursor +5 · ★ 5 — Lets an AI assistant create pages, upload assets and publish a site to a custom domain. ## Refine [react](https://affpapa.org/en/nevibecode/tag/react.md) · [ui](https://affpapa.org/en/nevibecode/tag/ui.md) · [design-system](https://affpapa.org/en/nevibecode/tag/design-system.md) · [components](https://affpapa.org/en/nevibecode/tag/components.md) · [shadcn](https://affpapa.org/en/nevibecode/tag/shadcn.md) · [tailwind](https://affpapa.org/en/nevibecode/tag/tailwind.md) · [css](https://affpapa.org/en/nevibecode/tag/css.md) · [typescript](https://affpapa.org/en/nevibecode/tag/typescript.md) · [nextjs](https://affpapa.org/en/nevibecode/tag/nextjs.md) · [svg](https://affpapa.org/en/nevibecode/tag/svg.md) · [accessibility](https://affpapa.org/en/nevibecode/tag/accessibility.md) · [animation](https://affpapa.org/en/nevibecode/tag/animation.md) ## Narrow this list Parameters: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — values in https://affpapa.org/en/nevibecode/agents.md --- NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md