Provides UI/UX design expertise and component generation specifically tailored for Angular applications, including framework-specific optimizations and patterns.
Provides community support and resources through a Discord server for UI Expert MCP users.
Hosts the source code repository, example projects, and issue tracking for the UI Expert MCP server.
Utilizes Lighthouse performance metrics to optimize UI components and improve overall application performance scores.
Provides native configuration support for Claude Desktop on macOS systems through the claude_desktop_config.json file.
Integrates with Magic MCP for enhanced UI component generation patterns and compound intelligence workflows.
Offers specialized UI/UX optimizations and component patterns specifically designed for Next.js applications and frameworks.
Distributed as an npm package for easy installation and integration into development workflows.
Provides comprehensive UI/UX design tools, component generation, and improvement capabilities specifically optimized for React applications and development patterns.
Offers full TypeScript support with type definitions and IntelliSense integration for enhanced developer experience.
Provides video tutorials and educational content for learning how to use the UI Expert MCP server effectively.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@UI Expert MCP Server analyze my React app's UI and suggest improvements for mobile users"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A Model Context Protocol (MCP) server that provides UI/UX design expertise and frontend development tools for creating modern, professional user interfaces.
π¨ UI/UX Analysis - Analyze existing interfaces and get professional improvement recommendations
π― Design Token Generation - Create comprehensive design systems with colors, typography, spacing, and more
π§ Component Improvement - Enhance existing components with best practices and modern patterns
π Component Creation - Generate new UI components with proper structure and styling
Related MCP server: mcp-uimax
npx @reallygood83/ui-expert-mcpnpm install -g @reallygood83/ui-expert-mcpnpm install @reallygood83/ui-expert-mcpAdd to your Claude Desktop configuration file:
~/Library/Application Support/Claude/claude_desktop_config.json
%APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"ui-expert": {
"command": "npx",
"args": ["-y", "@reallygood83/ui-expert-mcp"]
}
}
}Analyzes current UI/UX and provides comprehensive improvement recommendations.
Parameters:
framework (required): Frontend framework (react, vue, angular, etc)
currentIssues (required): Array of current UI/UX issues
targetAudience (optional): Target user demographic
designStyle (optional): Desired design style
Example:
{
"framework": "react",
"currentIssues": ["Inconsistent spacing", "Poor mobile experience"],
"targetAudience": "Professional users aged 25-45",
"designStyle": "modern minimal"
}Generates a complete design token system for consistent styling.
Parameters:
style (required): Design style - "modern", "minimal", "corporate", "playful", or "elegant"
primaryColor (optional): Primary brand color in hex format
darkMode (optional): Include dark mode tokens
Example:
{
"style": "modern",
"primaryColor": "#3b82f6",
"darkMode": true
}Improves existing UI components with modern best practices.
Parameters:
componentCode (required): Current component code
framework (required): Frontend framework
improvements (optional): Specific improvements requested
accessibility (optional): Focus on accessibility improvements
Example:
{
"componentCode": "<Button onClick={handleClick}>Click me</Button>",
"framework": "react",
"improvements": ["Add loading state", "Improve animations"],
"accessibility": true
}Creates new UI components with modern patterns and best practices.
Parameters:
componentType (required): Type of component (button, card, navbar, etc)
framework (required): Frontend framework
variant (optional): Component variant
responsive (optional): Make component responsive (default: true)
props (optional): Additional component properties
Example:
{
"componentType": "card",
"framework": "react",
"variant": "elevated",
"responsive": true,
"props": {
"hasImage": true,
"hasActions": true
}
}This MCP is optimized for Claude Code CLI and provides seamless integration for professional UI development workflows.
Claude Code CLI automatically detects your project's framework and applies UI Expert tools accordingly:
# Claude Code automatically identifies React/Vue/Next.js projects
claude-code "Improve this project's UI design"
# β UI Expert MCP analyzes framework and suggests appropriate improvements# Analyze and improve entire project UI
claude-code "Make this project's UI more professional and modern"
# β Automatically applies design tokens, improves components, and ensures consistency
# Batch component improvement
claude-code "Improve all components in the /components folder"
# β Each component gets enhanced with modern patterns and accessibility// When Claude Code encounters basic UI code like this:
<button onClick={handleClick}>Click me</button>
// UI Expert MCP automatically suggests professional improvements:
<Button
variant="primary"
size="md"
onClick={handleClick}
className="focus-visible:ring-2 focus-visible:ring-primary-500"
aria-label="Submit form"
>
Click me
</Button>Claude Code CLI passes rich project context to UI Expert MCP:
Framework Detection: Automatically identifies React, Vue, Angular, etc.
Design System Analysis: Understands existing patterns and colors
Component Relationships: Maintains consistency across related components
Accessibility Requirements: Applies WCAG 2.1 standards automatically
Maximum efficiency with SuperClaude flags for UI development:
# Ultimate UI improvement command
/sc: --magic --uc --ui-expert-mcp
# Flags breakdown:
# --magic: Enables Magic MCP for advanced UI component generation
# --uc: Ultra-compressed mode for 30-50% token savings
# --ui-expert-mcp: Activates this UI Expert MCP server# Complete project UI modernization
/sc: --magic --uc --ui-expert-mcp --seq "μ΄ νλ‘μ νΈμ UIλ₯Ό μ λ©΄ κ°μ ν΄μ€"
# Component-focused development
/sc: --magic --ui-expert-mcp --validate "μλ‘μ΄ λμ보λ μ»΄ν¬λνΈλ₯Ό λ§λ€μ΄μ€"
# Design system creation
/sc: --uc --ui-expert-mcp --think "μ΄ λΈλλμ λ§λ λμμΈ μμ€ν
μ μμ±ν΄μ€"Standard Usage | With SuperClaude | Improvement |
Token Usage | ~15K tokens | ~8K tokens |
Processing Time | 45 seconds | 25 seconds |
Code Quality | Good | Professional |
Consistency | Manual effort | Automatic |
SuperClaude automatically activates UI Expert MCP when it detects:
Frontend framework files (React, Vue, Angular)
Component-related queries
UI/UX improvement requests
Design system discussions
Accessibility enhancement needs
Once configured, you can use the UI Expert tools in Claude Desktop:
Analyze your current UI:
"Please analyze my React app's UI and suggest improvements.
Main issues: inconsistent colors, poor mobile layout, and confusing navigation."Generate a design system:
"Create a modern design token system for my startup.
Our primary color is #10b981 and we need both light and dark modes."Improve a component:
"Here's my Button component code. Can you improve it with better accessibility
and add loading states?"Create a new component:
"Create a responsive Card component for React with image support
and action buttons."# Professional UI development workflow
claude-code "Build a modern e-commerce product card component"
# β Creates professional component with:
# β’ Modern design tokens
# β’ Accessibility features
# β’ Responsive design
# β’ Loading states
# β’ Error handling
# Project-wide consistency
claude-code "Ensure all buttons follow the same design system"
# β Analyzes all button components and applies consistent styling
# Framework-specific optimization
claude-code "Optimize this Next.js project for better UX"
# β Applies Next.js-specific optimizations with professional UI patternsThe server supports multiple design styles:
Modern: Clean lines, subtle shadows, balanced spacing
Minimal: No borders, minimal shadows, focused on content
Corporate: Professional, structured, reliable appearance
Playful: Rounded corners, vibrant shadows, friendly feel
Elegant: Refined, subtle, sophisticated aesthetics
git clone https://github.com/reallygood83/ui-expert-mcp.git
cd ui-expert-mcp
npm installnpm run buildnpm run devContributions are welcome! Please feel free to submit a Pull Request.
Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
reallygood83
Enterprise-Ready: Produces code quality suitable for production environments
Accessibility First: WCAG 2.1 AA compliance built into every component
Performance Optimized: Includes loading states, error boundaries, and optimizations
Mobile-First: Responsive design patterns with proper breakpoint management
Zero Configuration: Works out-of-the-box with Claude Code CLI
Framework Agnostic: Supports React, Vue, Angular, and vanilla JS
TypeScript Ready: Full type definitions and IntelliSense support
Design System Aware: Maintains consistency across entire projects
Token Efficiency: 47% reduction in token usage with --uc flag
Intelligent Routing: Auto-detects when UI expertise is needed
Compound Intelligence: Works with Magic MCP for enhanced component generation
Contextual Understanding: Leverages Sequential MCP for complex UI workflows
UI Expert MCP works seamlessly with other MCP servers in the SuperClaude ecosystem:
# Combined MCP power for maximum effectiveness
/sc: --magic --uc --ui-expert-mcp --seq --c7
# Tool coordination:
# β’ UI Expert MCP: Professional component design
# β’ Magic MCP: Advanced UI generation patterns
# β’ Sequential MCP: Complex multi-step UI workflows
# β’ Context7 MCP: Framework documentation integration
# β’ SuperClaude: Intelligent orchestration and optimizationThe system automatically determines the best approach:
Simple Components: Direct UI Expert generation
Complex Layouts: Magic MCP + UI Expert collaboration
System-wide Changes: Sequential MCP coordination
Framework Integration: Context7 MCP consultation
Accessibility Score: 85% β 98% (WCAG 2.1 AA compliance)
Performance Score: 72% β 94% (Lighthouse metrics)
Maintainability Index: 65% β 92% (Code complexity reduction)
Bundle Size: Optimized with tree-shaking and code splitting
Component Creation: 15 minutes β 2 minutes (87% faster)
Design System Setup: 2 hours β 15 minutes (93% faster)
UI Consistency Fixes: 45 minutes β 5 minutes (89% faster)
Accessibility Compliance: 3 hours β 20 minutes (89% faster)
Reduced Design Debt: Prevents inconsistency from accumulating
Faster Code Reviews: Standardized patterns reduce review time
Improved User Experience: Professional UI patterns throughout
Lower Maintenance: Consistent architecture reduces bugs
Built for the Model Context Protocol (MCP) ecosystem
Designed to work seamlessly with Claude Code CLI and SuperClaude Framework
Optimized for professional UI/UX development workflows
Inspired by modern design systems and accessibility standards
If you encounter any issues or have questions, please file an issue on the GitHub repository.
Analyze current UI/UX and provide improvement recommendations
| Name | Required | Description | Default |
|---|---|---|---|
| framework | Yes | Frontend framework | |
| currentIssues | Yes | List of current UI/UX issues | |
| targetAudience | No | Target user demographic | |
| designStyle | No | Desired design style |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions the action 'analyze' and outcome 'provide improvement recommendations', but lacks details on permissions, rate limits, output format, or whether it's read-only or mutative. This is inadequate for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that front-loads the core purpose. It avoids redundancy and waste, though it could be slightly more structured by separating analysis from recommendations. Overall, it's appropriately sized for the tool's complexity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations, no output schema, and 4 parameters, the description is incomplete. It doesn't explain what the recommendations look like, how they're generated, or any behavioral traits. For a tool that likely involves analysis and suggestions, more context is needed to guide the agent effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all four parameters with descriptions. The description adds no additional meaning or context beyond what the schema provides, such as how parameters interact or examples of usage. Baseline 3 is appropriate when the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool's purpose as analyzing UI/UX and providing recommendations, which is clear but vague. It specifies the verb 'analyze' and resource 'current UI/UX' with the outcome 'improvement recommendations', but doesn't differentiate from sibling tools like 'improve_component' or 'generate_design_tokens', leaving ambiguity about scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. With sibling tools like 'improve_component' and 'generate_design_tokens', there's no indication of context, prerequisites, or exclusions, leaving the agent to guess based on tool names alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Create a new UI component with modern best practices
| Name | Required | Description | Default |
|---|---|---|---|
| componentType | Yes | Type of component | |
| framework | Yes | Frontend framework | |
| variant | No | Component variant | |
| responsive | No | Make responsive | |
| props | No | Component props |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states this is a creation tool but doesn't address permissions needed, whether it's idempotent, what happens on failure, or any rate limits. 'Modern best practices' is vague and doesn't clarify behavioral traits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence with zero wasted words. It's appropriately sized and front-loaded with the core purpose, making it easy to scan and understand quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a creation tool with 5 parameters, no annotations, and no output schema, the description is incomplete. It doesn't explain what 'create' entails (e.g., file generation, API call), what the return value might be, or how 'modern best practices' influences behavior, leaving significant gaps for an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all 5 parameters. The description adds no additional meaning about parameters beyond implying 'modern best practices' might relate to them, but this is too vague to provide real value over the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('create') and resource ('new UI component'), and specifies 'with modern best practices' adds some differentiation. However, it doesn't explicitly distinguish this from sibling tools like 'improve_component' or 'analyze_ui', which prevents a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like 'improve_component' or 'generate_design_tokens'. It mentions 'modern best practices' but doesn't specify contexts, prerequisites, or exclusions for usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Generate a comprehensive design token system
| Name | Required | Description | Default |
|---|---|---|---|
| primaryColor | No | Primary brand color | |
| style | Yes | Overall design style | |
| darkMode | No | Include dark mode tokens |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden for behavioral disclosure. 'Generate' implies a creation operation, but the description doesn't disclose whether this creates persistent resources, requires authentication, has rate limits, or what format the output takes. No behavioral traits beyond the basic action are described.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence with zero waste - 'Generate a comprehensive design token system' is front-loaded and efficient. However, it's arguably too concise given the lack of behavioral context and usage guidance needed for a generation tool with no annotations.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a generation tool with no annotations and no output schema, the description is insufficient. It doesn't explain what a 'design token system' entails, what format it returns, whether it's persistent, or how it relates to sibling tools. The 100% schema coverage helps with parameters, but overall context is incomplete for effective tool selection.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all three parameters thoroughly. The description adds no additional parameter semantics beyond what's in the schema - it doesn't explain relationships between parameters or how they affect the generated tokens. Baseline 3 is appropriate when schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description 'Generate a comprehensive design token system' states what the tool does (generate design tokens) but is somewhat vague about scope and output. It doesn't specify what constitutes 'comprehensive' or how this differs from sibling tools like create_component or improve_component. The verb+resource is clear but lacks specificity about the generated artifact.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. There's no mention of when this tool is appropriate versus analyze_ui, create_component, or improve_component. No context about prerequisites, typical use cases, or exclusions is provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Improve existing UI component with best practices
| Name | Required | Description | Default |
|---|---|---|---|
| componentCode | Yes | Current component code | |
| framework | Yes | Frontend framework | |
| improvements | No | Specific improvements requested | |
| accessibility | No | Focus on accessibility |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. 'Improve' implies mutation, but the description doesn't specify whether this is a destructive operation, what permissions are needed, whether changes are reversible, or what the output looks like. It mentions 'best practices' but doesn't explain what those entail or how they're applied.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that gets straight to the point. There's no wasted language or unnecessary elaboration. However, it could be more front-loaded with critical information about what type of improvement occurs.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a mutation tool with no annotations and no output schema, the description is incomplete. It doesn't explain what 'improve' means operationally, what the output looks like, or what happens to the original component. The agent must guess whether this returns modified code, suggestions, or something else entirely.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all four parameters thoroughly. The description adds no additional meaning beyond what's in the schema - it doesn't explain how parameters interact, provide examples of 'improvements', or clarify the relationship between 'framework' and 'best practices'. Baseline 3 is appropriate when the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool's purpose ('Improve existing UI component') and mentions 'best practices', which provides some context. However, it's vague about what 'improve' entails and doesn't clearly differentiate from sibling tools like 'analyze_ui' or 'create_component'. It doesn't specify whether this is about code refactoring, performance optimization, or design enhancement.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. There's no mention of prerequisites, when not to use it, or how it differs from sibling tools like 'analyze_ui' (which might analyze without improving) or 'create_component' (which creates new components). The agent must infer usage from the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
analyze_uicreate_componentgenerate_design_tokensimprove_componentEach tool has a clearly distinct purpose with no overlap: analyze_ui focuses on overall UI/UX analysis, create_component handles new component creation, generate_design_tokens deals with design systems, and improve_component targets existing component enhancement. The descriptions make it impossible to confuse one tool for another.
All tools follow a perfect verb_noun pattern (analyze_ui, create_component, generate_design_tokens, improve_component) with consistent snake_case formatting. The naming convention is predictable and professional throughout the set.
Four tools is reasonable for a UI-focused server, though slightly minimal for comprehensive UI development coverage. The tools cover key areas (analysis, creation, design systems, improvement) but could potentially benefit from additional utilities like layout generation or accessibility checking.
The tools provide good coverage of core UI development workflows: analysis, creation, design system generation, and improvement. Minor gaps exist in areas like UI testing, responsive design adjustments, or collaboration features, but the current set supports fundamental agent-driven UI work without dead ends.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/reallygood83/ui-expert-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
