18 MCP servers and agent skills in the Architecture & Design category, ranked by quality score.
Bidirectional Figma server over a local WebSocket relay: turn a selection into framework-aware code (reusing your components and tokens), or author frames, text, styles, variables, and whole screens back onto the canvas. 92 tools, any MCP client, no Dev Mode seat or paid tier.
"Mermaid for human movement" — a text language any LLM can write, rendered as a safe, anatomically-clamped 3D human figure in the browser.
Construction plan takeoff on stdio — load a plan PDF, read the title block, adopt the drawing scale (never applied silently), one-click trace rooms, and export real-world quantities (square footage, linear feet, counts) with provenance receipts. Install via NPM: `npx -y opentakeoff-mcp`
Expert design & marketing knowledge for web / iOS / Android / macOS UI/UX: 83 sourced, prescriptive docs plus deterministic generators (design tokens, color systems, type scales, WCAG a11y) and a one-call `create_design_system`. Offline, no API key, reads only local files. Install via NPM: `npx -y saglitzdesign-mcp`.
Create workflow, sequence, and architecture diagrams using FlowZap Code DSL. 7 tools for validation, playground URL generation, syntax docs, graph export, artifact parsing, diffing, and patching. No API key required. Install via NPM: `npx -y flowzap-mcp`
AI-native architecture platform for engineering teams. Describe a system in natural language (e.g. "payment service with Stripe, Kafka, PostgreSQL") → get an interactive typed diagram with 167 cloud components → export to 14 production frameworks (Java Spring Boot, Python FastAPI, Go chi, Rust Axum, .NET, Kotlin Ktor, Ruby Rails, Elixir Phoenix, Docker Compose, Terraform, Mermaid, ADR, and more).
Expose a company's complete design system (colors, typography, logos, components, guidelines, CSS tokens) to AI tools via MCP. Auto-parses CSS / Markdown / PDF / SVG / fonts; supports `marketing` vs `product` contexts with shared overrides; ships 12 tools, 16+ resources under `brandkit://`, and 4 prompts; stdio + SSE + Streamable HTTP transports. Install via NPM: `npx -y brandkit-mcp serve`.
Catch bad animations before they ship. 13 deterministic checks on the live page (duration, easing, stagger, exits, reduced-motion, touch-gated hover) with no API key or LLM, plus optional vision-LLM UX review across viewports. Install via NPM: `npx -y motionlint mcp`
Agent-native UI/UX design validation: model user journeys as state machines and prove what AI-generated screens are missing (unreachable states, missing empty/loading/error states, WCAG contrast, touch targets, localization overflow) before code exists — then verify the code implements the contract. Deterministic CI gates (`uxloom check`, `uxloom audit`), one-command setup (`npx uxloom init`).
Let your AI author Mermaid diagrams (flowchart, sequence, ER, mindmap) in a shared workspace, then read, comment on, embed, and present them at a clean URL — instead of pasting back hundreds of lines of prose. Hosted endpoint `https://mcp.diagramzu.ai/mcp` or local `npx -y @diagramzu/mcp`. 14 tools incl. diagram CRUD, version history, comments, presentation decks, and `analyze_diagram` lints.
Generate premium iOS mobile UI mockups (PNG + HTML) from a single text prompt. Pairs Claude (Opus 4.7 by default) with a Playwright headless renderer. Two backends — `claude` CLI (uses your Claude Code subscription) or Anthropic API. Stdio + HTTP transports, MIT.
MCP server for AI Diagram Maker — generate flowcharts, sequence diagrams, ERDs, system/network architecture, UML, mindmap, and workflow from natural language, code, ASCII, images, or Mermaid. Inline rendering using MCP Apps UI and editable diagram URLs. Requires API key.