# 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

```bash
npm install
npm run build
```

## Usage

### With Cursor/Claude

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

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

### Development Mode

```bash
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