# MCP-серверы по теме «Фронтенд и UI» MCP-серверы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 116 карточек · страница 1 из 3 - HTML: https://affpapa.org/nevibecode/mcp/topic/frontend - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · thedaviddias · Claude Code, Codex, Cursor +5 · ★ 74559 — Сервер помогает агенту проверять фронтенд-код и публичные страницы по правилам качества. - [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · tldraw · Claude Code, Codex, Cursor +5 · ★ 51091 — Даёт агенту интерактивный холст tldraw: он может рисовать, менять объекты и сохранять состояние между обращениями. - [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · GLips · Claude Code, Codex, Cursor +5 · ★ 16062 — MCP-сервер передаёт агенту разметку и стили из макетов Figma. - [mcp-server-chart](https://affpapa.org/nevibecode/mcp/mcp-server-chart.md) — MCP-сервер · antvis · Claude Code, Codex, Cursor +5 · ★ 4402 — MCP-сервер для визуализации данных и построения диаграмм на базе библиотеки AntV прямо в чате с моделью. - [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · dembrandt · Claude Code, Codex, Cursor +5 · ★ 3821 — Снимает с любой страницы цвета, шрифты, отступы и компоненты и отдаёт их агенту как дизайн-токены. - [RevoGrid DataGrid MCP Pro](https://affpapa.org/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP-сервер · revolist · Claude Code, Codex, Cursor +5 · ★ 3450 — Хостинговый MCP-сервер, который подключает агента к документации RevoGrid DataGrid: примеры, проверка возможностей и подсказки по миграции. - [ShipSwift](https://affpapa.org/nevibecode/mcp/shipswift.md) — MCP-сервер · signerlabs · Claude Code, Codex, Cursor +5 · ★ 3244 — Отдаёт ИИ-агенту готовые SwiftUI-компоненты и рецепты для сборки iOS-приложений. - [Semiotic](https://affpapa.org/nevibecode/mcp/semiotic.md) — MCP-сервер · nteract · Claude Code, Codex, Cursor +5 · ★ 2716 — MCP-сервер для создания и проверки графиков на React через ассистента. - [Usertour MCP Server](https://affpapa.org/nevibecode/mcp/usertour-mcp-server.md) — MCP-сервер · usertour · Claude Code, Codex, Cursor +5 · ★ 2326 — MCP-сервер помогает ИИ создавать в приложении онбординг, опросы и чек-листы. - [TypeUI](https://affpapa.org/nevibecode/mcp/typeui.md) — MCP-сервер · bergside · Claude Code, Codex, Cursor +5 · ★ 2159 — TypeUI добавляет ИИ-кодингу подсказки по интерфейсам, дизайн-системы и варианты компоновки. - [emailmd](https://affpapa.org/nevibecode/mcp/emailmd.md) — MCP-сервер · anypost · Claude Code, Codex, Cursor +5 · ★ 1383 — Преобразует Markdown в вёрстку для писем, проверяет доставляемость и генерирует графики без картинок. - [Reticle](https://affpapa.org/nevibecode/mcp/reticle.md) — MCP-сервер · reticlehq · Claude Code, Codex, Cursor +5 · ★ 1269 — Проверяет работающее веб-приложение изнутри через MCP без скриншотов. - [rsdoctor](https://affpapa.org/nevibecode/mcp/rsdoctor.md) — MCP-сервер · web-infra-dev · Claude Code, Codex, Cursor +5 · ★ 1149 — Отдаёт агенту данные сборки Rspack: размеры ассетов, зависимости модулей, время компиляции и диагностику дублей пакетов. - [Arc UI](https://affpapa.org/nevibecode/mcp/arc-ui.md) — MCP-сервер · kuratlielia · Claude Code, Codex, Cursor +5 · ★ 968 — Подключает к AI-агенту документацию библиотеки Arc UI с анимациями на Motion. - [Figma MCP Server](https://affpapa.org/nevibecode/mcp/figma-mcp-server.md) — MCP-сервер · figma · Claude Code, Codex, Cursor +5 · ★ 2113 — Передаёт макеты, токены и структуру слоёв из Figma в агентские чаты для генерации кода. - [inspo](https://affpapa.org/nevibecode/mcp/inspo.md) — MCP-сервер · Nutlope · Claude Code, Codex, Cursor +5 · ★ 919 — Даёт агенту реальные примеры сайтов, палитры, шрифты и JSX-компоненты перед созданием интерфейса. - [next-devtools-mcp](https://affpapa.org/nevibecode/mcp/next-devtools-mcp.md) — MCP-сервер · vercel · Claude Code, Codex, Cursor +5 · ★ 832 — Подключает агента к запущенному dev-серверу Next.js: ошибки, маршруты и логи прямо из рантайма. - [Argent](https://affpapa.org/nevibecode/mcp/argent.md) — MCP-сервер · software-mansion · Claude Code, Codex, Cursor +5 · ★ 3084 — Argent связывает агента с симуляторами iOS, Android, ТВ-приставками и Electron. - [webcomponents-react-mcp-server](https://affpapa.org/nevibecode/mcp/webcomponents-react-mcp-server.md) — MCP-сервер · UI5 · Claude Code, Codex, Cursor +5 · ★ 543 — Даёт ИИ-агенту справочные материалы по UI5 Web Components for React и сведения об API компонентов. - [Firefox DevTools MCP](https://affpapa.org/nevibecode/mcp/firefox-devtools-mcp.md) — MCP-сервер · mozilla · Claude Code, Codex, Cursor +5 · ★ 518 — Управляет браузером Firefox через протокол MCP для отладки фронтенда, чтения страниц, снятия скриншотов и отправки веб-форм силами ИИ-агента. - [abell](https://affpapa.org/nevibecode/mcp/abell.md) — MCP-сервер · abelljs · Claude Code, Codex, Cursor +5 · ★ 444 — MCP-сервер связывает AI-инструменты с Abell, генератором статических сайтов. - [mcp-server-tauri](https://affpapa.org/nevibecode/mcp/mcp-server-tauri.md) — MCP-сервер · hypothesi · Claude Code, Codex, Cursor +5 · ★ 326 — MCP-сервер подключает ИИ-агента к приложениям на Tauri v2 для управления интерфейсом, просмотра логов и отладки IPC. - [figma-ui-mcp](https://affpapa.org/nevibecode/mcp/figma-ui-mcp.md) — MCP-сервер · TranHoaiHung · Claude Code, Codex, Cursor +5 · ★ 264 — Двусторонний MCP-сервер для работы ИИ с Figma: он рисует интерфейсы на canvas и возвращает существующий дизайн в виде данных. - [blatui](https://affpapa.org/nevibecode/mcp/blatui.md) — MCP-сервер · anousss007 · Claude Code, Codex, Cursor +5 · ★ 262 — Сервер помогает агенту находить, читать и устанавливать компоненты, блоки и графики BlatUI. - [walkerOS Source Browser](https://affpapa.org/nevibecode/mcp/walkeros-source-browser.md) — MCP-сервер · elbwalker · Claude Code, Codex, Cursor +5 · ★ 347 — MCP-сервер проверяет и создаёт разметку data-elb для трекинга walkerOS прямо в HTML. - [UI Beats](https://affpapa.org/nevibecode/mcp/ui-beats.md) — MCP-сервер · nikhils4 · Claude Code, Codex, Cursor +5 · ★ 234 — Находит анимированные компоненты React в каталоге UI Beats, читает их свойства и генерирует команды для установки. - [affectUI](https://affpapa.org/nevibecode/mcp/affectui.md) — MCP-сервер · flohoeller · Claude Code, Codex, Cursor +5 · ★ 234 — MCP-сервер для поиска и вставки готовых компонентов React в приложения для ИИ. - [microcharts](https://affpapa.org/nevibecode/mcp/microcharts.md) — MCP-сервер · ganapativs · Claude Code, Codex, Cursor +5 · ★ 205 — Компактный генератор микрографиков в виде готового SVG с описанием доступности. - [melta UI](https://affpapa.org/nevibecode/mcp/melta-ui.md) — MCP-сервер · tsubotax · Claude Code, Codex, Cursor +5 · ★ 202 — Передаёт агенту дизайн-контракты и проверяет сгенерированный HTML через check_html. - [Svelte MCP](https://affpapa.org/nevibecode/mcp/svelte-mcp.md) — MCP-сервер · sveltejs · Claude Code, Codex, Cursor +5 · ★ 335 — Официальный MCP-сервер Svelte даёт агенту доступ к документации и инструментам автоисправления. - [SvGrid](https://affpapa.org/nevibecode/mcp/svgrid.md) — MCP-сервер · sv-grid · Claude Code, Codex, Cursor +5 · ★ 181 — Проверяет код таблиц SvGrid на соответствие реальному API и синтаксису Svelte 5, находит опечатки в пропсах и отдаёт документацию. - [Keyline Icons](https://affpapa.org/nevibecode/mcp/keyline-icons.md) — MCP-сервер · keyline-icons · Claude Code, Codex, Cursor +5 · ★ 178 — Даёт агенту искать иконки по имени и отдавать готовый SVG или строку импорта для React. - [svelte-llm-mcp](https://affpapa.org/nevibecode/mcp/svelte-llm-mcp.md) — MCP-сервер · khromov · Claude Code, Codex, Cursor +5 · ★ 159 — MCP-сервер даёт ассистенту доступ к документации Svelte 5 и SvelteKit, чтобы он не выдумывал API при генерации кода. - [Ignite UI MCP Server](https://affpapa.org/nevibecode/mcp/ignite-ui-mcp-server.md) — MCP-сервер · IgniteUI · Claude Code, Codex, Cursor +5 · ★ 137 — Даёт ИИ-ассистенту доступ к документации и API Ignite UI. - [uisight](https://affpapa.org/nevibecode/mcp/uisight.md) — MCP-сервер · sololabstr · Claude Code, Codex, Cursor +5 · ★ 130 — Сервер замеряет вёрстку в реальном браузере и отдаёт агенту точные контрасты, размеры кликабельных зон и селекторы. - [CometChat Docs](https://affpapa.org/nevibecode/mcp/cometchat-docs.md) — MCP-сервер · cometchat · Claude Code, Codex, Cursor +5 · ★ 129 — Сервер ищет в документации CometChat сведения об SDK и готовых сценариях интеграции. - [Three.js DevTools MCP](https://affpapa.org/nevibecode/mcp/threejs-devtools-mcp.md) — MCP-сервер · DmitriyGolub · Claude Code, Codex, Cursor +5 · ★ 126 — Инспектирует сцены Three.js, меняет материалы на лету в браузере и переносит правки в код. - [NVIDIA Elements](https://affpapa.org/nevibecode/mcp/nvidia-elements.md) — MCP-сервер · NVIDIA · Claude Code, Codex, Cursor +5 · ★ 106 — Передаёт документацию и дизайн-токены Elements языковым моделям. - [mcp-server](https://affpapa.org/nevibecode/mcp/ui5-mcp-server.md) — MCP-сервер · UI5 · Claude Code, Codex, Cursor +5 · ★ 104 — Подключает инструменты разработки SAPUI5 и OpenUI5 к ИИ-ассистентам. - [pracht dev-mcp](https://affpapa.org/nevibecode/mcp/pracht-dev-mcp.md) — MCP-сервер · JoviDeCroock · Claude Code, Codex, Cursor +5 · ★ 103 — MCP-сервер на базе @pracht/cli связывает ИИ-агента с графом приложения Pracht. Дальше: https://affpapa.org/nevibecode/mcp/topic/frontend.md?page=2 ## Уточнить [react](https://affpapa.org/nevibecode/tag/react.md) · [ui](https://affpapa.org/nevibecode/tag/ui.md) · [design-system](https://affpapa.org/nevibecode/tag/design-system.md) · [components](https://affpapa.org/nevibecode/tag/components.md) · [shadcn](https://affpapa.org/nevibecode/tag/shadcn.md) · [tailwind](https://affpapa.org/nevibecode/tag/tailwind.md) · [css](https://affpapa.org/nevibecode/tag/css.md) · [typescript](https://affpapa.org/nevibecode/tag/typescript.md) · [nextjs](https://affpapa.org/nevibecode/tag/nextjs.md) · [svg](https://affpapa.org/nevibecode/tag/svg.md) · [accessibility](https://affpapa.org/nevibecode/tag/accessibility.md) · [animation](https://affpapa.org/nevibecode/tag/animation.md) ## Сузить этот список Параметры: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — значения в https://affpapa.org/nevibecode/agents.md --- NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md