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