MCP UI/UX Prompt Refiner

An MCP (Model Context Protocol) server that transforms basic interface prompts into world-class UI/UX design specifications. This tool helps you break free from generic AI-generated designs by outputting comprehensive, professional-grade design prompts.

Features

• 5 Specialized Tools for different aspects of UI/UX design
• 4 Knowledge Resources covering design principles, animations, UX patterns, and templates
• 11 Pre-configured Prompts for common interface types
• Supports websites, mobile apps, desktop apps, CLI tools, presentations, and more

Installation

npm install
npm run build

Usage

With Cursor/Claude

Add to your MCP settings (.cursor/mcp.json or Claude Desktop config):

{
  "mcpServers": {
    "ui-prompt-refiner": {
      "command": "node",
      "args": ["path/to/mcp-ui-prompt-refiner/dist/server.js"]
    }
  }
}

Development Mode

npm run dev

Available Tools

1. refine_ui_prompt (Primary Tool)

Transform a basic interface idea into a comprehensive design specification.

Parameters:

• rawPrompt (required): Your basic interface idea
• interfaceType: Type of interface (auto-detected if not provided)
• style: Design style (minimalist, bold-experimental, etc.)
• colorMood: Color palette mood (energetic, calm, professional, etc.)
• animationIntensity: Level of animation (subtle, moderate, dramatic, cinematic)
• targetAudience: Who will use this interface
• brandKeywords: Keywords describing the brand

2. analyze_interface

Analyze an interface request to detect type, suggest styles, and identify components.

3. compose_animations

Generate detailed animation specifications with CSS examples.

4. generate_ux_flow

Create user journey maps with interaction patterns and accessibility requirements.

5. suggest_tech_stack

Get technology recommendations based on interface type and design requirements.

Interface Types Supported

• website-landing - Conversion-focused landing pages
• website-saas - SaaS marketing websites
• website-portfolio - Portfolio/showcase websites
• website-ecommerce - Online stores
• dashboard - Analytics and data dashboards
• mobile-app - iOS/Android applications
• desktop-app - Desktop applications
• cli-terminal - Command-line interfaces
• presentation - Slide decks
• admin-panel - Backend management interfaces
• social-platform - Social networking interfaces

Design Styles

• minimalist - Clean, whitespace-focused
• bold-experimental - Creative, unconventional
• corporate-professional - Business-appropriate
• playful-creative - Fun, colorful
• luxury-elegant - Premium, sophisticated
• tech-futuristic - Modern, digital
• organic-natural - Earth-toned, flowing
• brutalist - Raw, industrial
• retro-vintage - Nostalgic
• glassmorphic - Frosted glass effects
• neumorphic - Soft shadow depth

Resources

Access design knowledge via MCP resources:

• design://principles - Gestalt, hierarchy, color theory
• design://animation-patterns - Easing functions, entry/scroll animations
• design://ux-patterns - Navigation, feedback, forms, accessibility
• design://interface-templates - Templates for each interface type

Example

User: "I need a landing page for my AI writing tool"

→ refine_ui_prompt generates:
- Complete design specification
- Color palette with psychology
- Typography system
- Component specifications
- Animation choreography
- UX flow guidelines
- Accessibility requirements
- Implementation priorities

Output Format

All tools output structured markdown that can be:

1. Saved directly to a file
2. Used as a prompt for implementation
3. Shared with design tools or team members

License

MIT