MCP UI/UX Prompt Refiner

# 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