MCP UI/UX Prompt Refiner

import type { RefinePromptInput, InterfaceType, DesignStyle, ColorMood, AnimationIntensity } from '../utils/types.js'; import { analyzeInterface } from './analyzer.js'; import { getDesignPrinciplePrompt, VISUAL_TECHNIQUES, COMPOSITION_PATTERNS } from '../resources/design-principles.js'; import { getAnimationPrompt } from '../resources/animation-patterns.js'; import { getUXFlowPrompt } from '../resources/ux-patterns.js'; import { getTemplatePrompt, INTERFACE_TEMPLATES } from '../resources/templates.js'; const COLOR_PALETTES: Record<ColorMood, { primary: string; description: string; psychology: string }> = { energetic: { primary: 'Vibrant oranges, electric blues, hot pinks', description: 'High-saturation colors that pop and demand attention', psychology: 'Excitement, urgency, youthfulness, action-oriented' }, calm: { primary: 'Soft blues, sage greens, warm grays', description: 'Muted, low-saturation colors that soothe', psychology: 'Trust, stability, relaxation, clarity' }, professional: { primary: 'Navy blues, slate grays, subtle teals', description: 'Conservative palette with subtle accent', psychology: 'Authority, reliability, expertise, credibility' }, playful: { primary: 'Bright yellows, turquoise, coral', description: 'Fun, varied palette with unexpected combinations', psychology: 'Joy, creativity, friendliness, approachability' }, luxurious: { primary: 'Deep purples, golds, black', description: 'Rich, dark colors with metallic accents', psychology: 'Exclusivity, sophistication, premium quality' }, trustworthy: { primary: 'Royal blue, forest green, warm white', description: 'Stable, established color choices', psychology: 'Reliability, security, honesty, dependability' }, innovative: { primary: 'Electric purple, neon accents, dark backgrounds', description: 'Futuristic palette with bold contrasts', psychology: 'Forward-thinking, cutting-edge, tech-savvy' }, natural: { primary: 'Earth tones, leafy greens, sky blues', description: 'Nature-inspired organic palette', psychology: 'Sustainability, wellness, authenticity' }, bold: { primary: 'Pure red, stark black, bright white', description: 'High-contrast, unapologetic color choices', psychology: 'Confidence, power, statement-making' }, neutral: { primary: 'Warm grays, off-whites, subtle beige', description: 'Understated palette letting content shine', psychology: 'Sophistication, timelessness, versatility' } }; const STYLE_CHARACTERISTICS: Record<DesignStyle, string[]> = { minimalist: [ 'Generous whitespace (at least 40% of screen)', 'Limited color palette (2-3 colors maximum)', 'Typography-driven hierarchy', 'Hidden complexity, revealed on demand', 'Clean lines, no decorative elements', 'Functional animations only' ], 'bold-experimental': [ 'Broken grid layouts, overlapping elements', 'Oversized typography as visual element', 'Unexpected color combinations', 'Custom cursor and hover effects', 'Asymmetric compositions', 'Statement animations and transitions' ], 'corporate-professional': [ 'Structured grid system', 'Conservative color palette', 'Clear information hierarchy', 'Professional photography', 'Subtle, purposeful animations', 'Consistent component styling' ], 'playful-creative': [ 'Rounded corners and soft shapes', 'Vibrant, varied color palette', 'Custom illustrations over photos', 'Bouncy, elastic animations', 'Informal typography choices', 'Delightful micro-interactions' ], 'luxury-elegant': [ 'Dramatic use of space', 'Rich, dark color schemes', 'Serif typography for headlines', 'High-quality imagery', 'Smooth, slow transitions', 'Gold or metallic accents' ], 'tech-futuristic': [ 'Dark mode primary', 'Neon accent colors', 'Monospace or geometric fonts', 'Glowing/gradient effects', 'Data visualization elements', 'Smooth, precise animations' ], 'organic-natural': [ 'Flowing, curved shapes', 'Earth-tone color palette', 'Natural textures and patterns', 'Organic blob backgrounds', 'Gentle, flowing animations', 'Sustainability-focused imagery' ], brutalist: [ 'Raw, unpolished aesthetic', 'System fonts, stark typography', 'High contrast, harsh colors', 'Visible grid/structure', 'Minimal or jarring animations', 'Anti-design choices' ], 'retro-vintage': [ 'Nostalgic color palettes', 'Retro typography choices', 'Grain/noise textures', 'Vintage-style illustrations', 'Analog-feeling transitions', 'Period-appropriate imagery' ], glassmorphic: [ 'Frosted glass effects (backdrop-blur)', 'Layered transparency', 'Subtle borders on glass elements', 'Colorful, gradient backgrounds', 'Light, airy feel', 'Depth through layering' ], neumorphic: [ 'Soft shadow pairs (light + dark)', 'Extruded/inset appearance', 'Monochromatic color schemes', 'Subtle, tactile feel', 'Pressed/raised states', 'Soft, subtle animations' ], custom: [ 'Unique to project requirements', 'Blend of multiple styles', 'Custom visual language' ] }; function generateColorSection(mood: ColorMood, style: DesignStyle): string { const palette = COLOR_PALETTES[mood]; return ` ## Color Palette ### Mood: ${mood.charAt(0).toUpperCase() + mood.slice(1)} ${palette.description} **Psychological Impact**: ${palette.psychology} ### Recommended Colors - **Primary**: ${palette.primary} - **Secondary**: Complementary tones that support the primary - **Accent**: High-contrast color for CTAs and highlights (use sparingly - 10% rule) - **Neutrals**: Carefully selected grays that complement the palette ### Application Rules - Follow the 60-30-10 rule (dominant-secondary-accent) - Ensure 4.5:1 contrast ratio for text (WCAG AA) - Use accent color exclusively for interactive/important elements - Create dark mode variant with inverted luminance values `; } function generateStyleSection(styles: DesignStyle[]): string { const primaryStyle = styles[0]; const characteristics = STYLE_CHARACTERISTICS[primaryStyle]; return ` ## Design Style: ${primaryStyle.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())} ### Core Characteristics ${characteristics.map(c => `- ${c}`).join('\n')} ${styles.length > 1 ? `### Secondary Influences Blend with: ${styles.slice(1).map(s => s.replace(/-/g, ' ')).join(', ')}` : ''} ### Visual Language Apply these principles consistently across all components: - Every element should feel intentional - Maintain visual rhythm through consistent spacing - Create depth through layering and shadow - Use animation to reinforce the style personality `; } function generateLayoutSection(interfaceType: InterfaceType): string { const template = INTERFACE_TEMPLATES[interfaceType]; return ` ## Layout Structure ### Grid System - **Desktop**: 12-column grid, 1200-1440px max-width - **Tablet**: 8-column grid, fluid - **Mobile**: 4-column grid, full-width with padding ### Spacing Scale (8px base) - xs: 4px | sm: 8px | md: 16px | lg: 24px | xl: 32px | 2xl: 48px | 3xl: 64px ### Section Flow ${template.sections.map((s, i) => `${i + 1}. ${s}`).join('\n')} ### Responsive Behavior - Mobile-first approach - Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl) - Stack elements vertically on mobile - Maintain touch targets (minimum 44x44px) `; } function generateComponentSection(components: string[], style: DesignStyle): string { return ` ## Component Specifications ### Key Components ${components.slice(0, 10).map(c => ` #### ${c} - Design with ${style} characteristics - Include hover, focus, active, disabled states - Ensure keyboard accessibility - Add meaningful micro-interactions `).join('')} ### Component States Every interactive component must have: 1. **Default** - Resting state 2. **Hover** - Mouse over (desktop) 3. **Focus** - Keyboard focus with visible indicator 4. **Active** - Being pressed/clicked 5. **Disabled** - Unavailable state 6. **Loading** - Async operation in progress ### Micro-Interactions - Button press: Scale down slightly (0.98), then spring back - Card hover: Lift up (translateY -4px) with enhanced shadow - Form focus: Border color transition, subtle glow - Toggle: Smooth slide with state color change - Menu open: Staggered reveal of items `; } export function refineUIPrompt(input: RefinePromptInput): string { const analysis = analyzeInterface(input.rawPrompt, input.interfaceType); const style = input.style || analysis.suggestedStyles[0]; const colorMood = input.colorMood || 'professional'; const animationIntensity = input.animationIntensity || 'moderate'; const output = `# World-Class UI/UX Design Specification ## Project Overview **Original Request**: "${input.rawPrompt}" **Interface Type**: ${analysis.interfaceType.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())} **Complexity**: ${analysis.complexity} **Target Audience**: ${input.targetAudience || analysis.userPersonas.join(', ')} ${input.brandKeywords ? `**Brand Keywords**: ${input.brandKeywords.join(', ')}` : ''} --- ${generateStyleSection([style, ...analysis.suggestedStyles.filter(s => s !== style)])} ${generateColorSection(colorMood, style)} ## Typography ### Font Pairing - **Headlines**: Bold, expressive font (e.g., Space Grotesk, Clash Display, or custom) - **Body**: Highly readable font (e.g., Inter, Plus Jakarta Sans, or system fonts) - **Monospace** (if needed): JetBrains Mono, Fira Code ### Type Scale (1.25 ratio) - Display: 4rem (64px) - H1: 3rem (48px) - H2: 2.25rem (36px) - H3: 1.75rem (28px) - H4: 1.25rem (20px) - Body: 1rem (16px) - Small: 0.875rem (14px) - Caption: 0.75rem (12px) ### Typography Rules - Line height: 1.5 for body, 1.2 for headings - Maximum line length: 65-75 characters - Use font-weight for hierarchy, not just size - Ensure text contrast meets WCAG AA (4.5:1) ${generateLayoutSection(analysis.interfaceType)} ${generateComponentSection(analysis.keyComponents, style)} ${getAnimationPrompt(animationIntensity)} ${getUXFlowPrompt(analysis.interfaceType)} ## Visual Effects & Techniques ### Depth & Dimension ${VISUAL_TECHNIQUES.depthCreation.map(t => `- ${t}`).join('\n')} ### Texture & Pattern ${VISUAL_TECHNIQUES.textureAndPattern.map(t => `- ${t}`).join('\n')} ### Dynamic Elements ${VISUAL_TECHNIQUES.dynamicElements.map(t => `- ${t}`).join('\n')} ## Section-by-Section Design Notes ${COMPOSITION_PATTERNS.heroSections.slice(0, 3).map((h, i) => `### Hero Option ${i + 1} ${h}`).join('\n\n')} ### Content Sections ${COMPOSITION_PATTERNS.contentSections.slice(0, 4).map(c => `- ${c}`).join('\n')} ### Navigation ${COMPOSITION_PATTERNS.navigationPatterns.slice(0, 3).map(n => `- ${n}`).join('\n')} ## Implementation Priorities ### Phase 1: Foundation 1. Set up design tokens (colors, spacing, typography) 2. Build core layout components (grid, containers) 3. Create base component library (buttons, inputs, cards) ### Phase 2: Sections 4. Implement hero section with primary animations 5. Build content sections with scroll-triggered effects 6. Create navigation with interactive states ### Phase 3: Polish 7. Add micro-interactions to all components 8. Implement loading states and transitions 9. Optimize animations for performance 10. Add accessibility features --- ## Quality Checklist ### Design Quality - [ ] Consistent visual language throughout - [ ] Clear visual hierarchy on every screen - [ ] Intentional use of whitespace - [ ] Cohesive color application - [ ] Typography creates clear hierarchy ### Animation Quality - [ ] Animations feel natural and purposeful - [ ] No janky or stuttering motion - [ ] Loading states provide feedback - [ ] Reduced motion alternatives exist - [ ] 60fps performance maintained ### UX Quality - [ ] Clear user flows with minimal friction - [ ] Obvious interactive elements - [ ] Helpful error states and recovery - [ ] Accessible to all users (WCAG AA) - [ ] Mobile experience is first-class --- *This specification is designed to create a stunning, professional interface that stands apart from typical AI-generated designs. Focus on intentionality, consistency, and delightful details.* `; return output; }