UI/UX Optimization MCP & DevTools Ecosystem

Comprehensive guide, Model Context Protocol (MCP) server configurations, Cursor Rules (.cursorrules), and automated evaluation tools for high-performance, accessible, and aesthetic application UI/UX.

---

1. Overview & Architecture

Modern AI-assisted frontend development requires a cohesive pipeline spanning from design tokens to real-browser verification. This repository synthesizes the best tools from cursor.directory, the Model Context Protocol (MCP) ecosystem, and production accessibility standards.

+-------------------------------------------------------------------------------+
|                       UI/UX OPTIMIZATION PIPELINE                            |
+-------------------------------------------------------------------------------+
| 1. Design Ingestion   : Figma MCP / Stitch MCP / Design Markdown Tokens       |
| 2. Design System      : shadcn/ui + Radix Primitives + Tailwind CSS + CVA     |
| 3. AI Reasoning Rules : StyleSeed + Apple HIG + WCAG 2.2 Strict .cursorrules  |
| 4. Living Architecture: Excalidraw Architect MCP / Mermaid Diagrams          |
| 5. Automated Audit    : Chrome DevTools MCP (Lighthouse) + axe-core Engine   |
| 6. E2E Verification   : Playwright MCP (Accessibility Snapshots & Regression) |
+-------------------------------------------------------------------------------+

---

2. Included MCP Server Configurations

Config files are provided in mcp-configs/:

MCP Server	Primary Capability	Key Tools / Actions
Stitch MCP	AI Screen Generation & Token Design System	generate_screen_from_text, create_design_system, apply_design_system, edit_screens
Figma Context MCP	Figma Layer, Auto-Layout & Token Extractor	get_figma_node, extract_tokens, export_components
Chrome DevTools MCP	CDP-based Live Audit & Performance Diagnostics	lighthouse_audit, take_snapshot, performance_analyze_insight, list_console_messages
Playwright MCP	Accessibility Tree Automation & Test Synthesis	navigate_page, click, fill_form, take_snapshot
Excalidraw Architect MCP	Visual Architecture & Knowledge Graphs	create_diagram, mermaid_to_excalidraw, kg_render, export_diagram

Quick Setup for Cursor / Claude Desktop

Add the following to your claude_desktop_config.json or Cursor MCP settings:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    },
    "figma-context": {
      "command": "npx",
      "args": ["-y", "figma-context-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_API_TOKEN"
      }
    },
    "excalidraw-architect": {
      "command": "npx",
      "args": ["-y", "excalidraw-architect-mcp@latest"]
    }
  }
}

---

3. Curated Cursor Rules (cursor-rules/)

Production-ready .cursorrules templates curated from cursor.directory:

1. cursor-rules/.cursorrules-styleseed.md: Anti-AI Vibe rules. Eliminates cheap gradients, inconsistent borders, and chaotic animations. Enforces clean subtle borders and precise typography scaling.
2. cursor-rules/.cursorrules-apple-hig.md: Apple Human Interface Guidelines (HIG) and Design Tips. Enforces 44x44pt touch targets, high-contrast typography, and tactile active feedback.
3. cursor-rules/.cursorrules-shadcn-tailwind.md: shadcn/ui + Radix Slot + Tailwind CSS + CVA architecture.
4. cursor-rules/.cursorrules-wcag22-a11y.md: Strict accessibility rules (WCAG 2.2 AA/AAA compliance, required aria-label, visible focus rings, label-input bindings).

---

4. Automated UI/UX Evaluation Script (scripts/)

Run automated real-browser evaluations using Playwright and axe-core:

# Install dependencies
npm install

# Run automated evaluation
npm run eval:ui

Evaluation Rubric (100 Points Total)

• Accessibility & Contrast (axe-core): 25 Points (0 critical violations, WCAG AA/AAA compliant)
• Glanceability & DOM Geometry: 25 Points (Clear heading hierarchy, 3-second glanceable layout)
• Design System & Computed Styles: 25 Points (Unified font features tnum, shadowless hairline borders)
• Live Interaction & Touch Targets: 25 Points (44x44pt touch target compliance, keyboard focusable controls)

---

5. Pure Monochrome Design System Template

Located in templates/monochrome-shadcn/, providing high-contrast pure black and white styling for mission-critical software:

• Strict zero-color palette (#ffffff, #09090b, #121215, #27272a, #52525b, #a1a1aa, #f4f4f5)
• Solid inverted badges, double borders, and hairline dividers for status representation
• Tabular numbers (tnum 1) and SF Pro / SF Mono typography

---

6. License

MIT License (c) 2026 Critical Platform & Contributors.