MCP UI/UX Prompt Refiner

import type { InterfaceType, DesignStyle } from '../utils/types.js'; export interface InterfaceTemplate { type: InterfaceType; name: string; description: string; sections: string[]; keyComponents: string[]; suggestedStyles: DesignStyle[]; animationFocus: string[]; uxPriorities: string[]; techConsiderations: string[]; } export const INTERFACE_TEMPLATES: Record<InterfaceType, InterfaceTemplate> = { 'website-landing': { type: 'website-landing', name: 'Landing Page', description: 'Conversion-focused single page to capture leads or drive specific action', sections: [ 'Hero with headline, subhead, and primary CTA', 'Social proof / trust indicators', 'Feature highlights / value propositions', 'How it works / process steps', 'Testimonials / case studies', 'Pricing or offer details', 'FAQ section', 'Final CTA / footer' ], keyComponents: [ 'Hero section with impactful visuals', 'CTA buttons with hover states', 'Feature cards with icons', 'Testimonial carousel/grid', 'Pricing cards', 'FAQ accordion', 'Email capture form', 'Sticky navigation' ], suggestedStyles: ['bold-experimental', 'minimalist', 'tech-futuristic'], animationFocus: ['Scroll-triggered reveals', 'Parallax hero', 'Hover effects on CTAs'], uxPriorities: ['Clear value proposition', 'Easy conversion path', 'Trust building'], techConsiderations: ['SEO optimization', 'Fast initial load', 'Mobile-first'] }, 'website-saas': { type: 'website-saas', name: 'SaaS Marketing Website', description: 'Multi-page website for software products with features, pricing, and sign-up', sections: [ 'Homepage with hero and feature overview', 'Features page with detailed breakdowns', 'Pricing page with tier comparison', 'About/Team page', 'Blog/Resources section', 'Customer stories/Case studies', 'Documentation preview', 'Sign-up/Login flows' ], keyComponents: [ 'Navigation with mega menu', 'Feature comparison tables', 'Interactive demos/previews', 'Pricing toggle (monthly/annual)', 'Integration logos grid', 'Blog post cards', 'Documentation sidebar', 'Auth forms' ], suggestedStyles: ['corporate-professional', 'minimalist', 'tech-futuristic'], animationFocus: ['Page transitions', 'Feature demos', 'Pricing toggle animation'], uxPriorities: ['Clear feature differentiation', 'Easy pricing comparison', 'Quick sign-up'], techConsiderations: ['CMS integration', 'Analytics tracking', 'A/B testing ready'] }, 'website-portfolio': { type: 'website-portfolio', name: 'Portfolio Website', description: 'Showcase of work, projects, or creative output for individuals or agencies', sections: [ 'Hero with name/brand and tagline', 'Selected work showcase', 'About section with personal story', 'Skills/Services offered', 'Project case studies', 'Testimonials from clients', 'Contact information/form', 'Blog or thoughts section' ], keyComponents: [ 'Project grid/masonry layout', 'Project detail modal or page', 'Smooth image galleries', 'Skill visualization', 'Timeline/experience section', 'Contact form', 'Social links', 'Custom cursor' ], suggestedStyles: ['bold-experimental', 'minimalist', 'brutalist'], animationFocus: ['Custom cursor effects', 'Image reveals', 'Text animations', 'Page transitions'], uxPriorities: ['Showcase work effectively', 'Express personality', 'Easy contact'], techConsiderations: ['Image optimization', 'Smooth scrolling', 'Fast page loads'] }, 'website-ecommerce': { type: 'website-ecommerce', name: 'E-commerce Website', description: 'Online store for selling products with catalog, cart, and checkout', sections: [ 'Homepage with featured products', 'Product category pages', 'Product detail pages', 'Shopping cart', 'Checkout flow (multi-step)', 'User account/orders', 'Search and filters', 'Wishlist functionality' ], keyComponents: [ 'Product cards with quick view', 'Image zoom/gallery', 'Size/variant selectors', 'Add to cart animation', 'Mini cart dropdown', 'Filter sidebar', 'Search with suggestions', 'Checkout stepper' ], suggestedStyles: ['minimalist', 'luxury-elegant', 'playful-creative'], animationFocus: ['Add to cart feedback', 'Product image transitions', 'Filter animations'], uxPriorities: ['Easy product discovery', 'Smooth checkout', 'Trust and security'], techConsiderations: ['Performance with many images', 'Real-time inventory', 'Payment integration'] }, 'dashboard': { type: 'dashboard', name: 'Analytics Dashboard', description: 'Data visualization and management interface for monitoring and analytics', sections: [ 'Overview with key metrics', 'Interactive charts and graphs', 'Data tables with sorting/filtering', 'Sidebar navigation', 'Settings/configuration', 'Notifications center', 'User management (if applicable)', 'Export/reporting tools' ], keyComponents: [ 'Stat cards with trends', 'Line/bar/pie charts', 'Data tables with actions', 'Date range picker', 'Filter dropdowns', 'Search functionality', 'Notification badges', 'User avatar/menu' ], suggestedStyles: ['minimalist', 'corporate-professional', 'tech-futuristic'], animationFocus: ['Chart animations', 'Loading states', 'Number counting', 'Smooth transitions'], uxPriorities: ['Quick data comprehension', 'Easy navigation', 'Efficient workflows'], techConsiderations: ['Real-time updates', 'Large dataset handling', 'Responsive tables'] }, 'mobile-app': { type: 'mobile-app', name: 'Mobile Application', description: 'Native or hybrid mobile app interface for iOS/Android', sections: [ 'Splash/Loading screen', 'Onboarding flow', 'Home/Main screen', 'Navigation (tab bar/drawer)', 'Feature screens', 'Settings/Profile', 'Search functionality', 'Notifications' ], keyComponents: [ 'Bottom tab navigation', 'Pull-to-refresh', 'Floating action button', 'Modal sheets', 'Toast messages', 'Loading spinners', 'Empty states', 'Gesture interactions' ], suggestedStyles: ['minimalist', 'playful-creative', 'glassmorphic'], animationFocus: ['Screen transitions', 'Gesture feedback', 'Loading states', 'Micro-interactions'], uxPriorities: ['One-handed use', 'Quick actions', 'Offline support'], techConsiderations: ['60fps animations', 'Battery efficiency', 'Platform conventions'] }, 'desktop-app': { type: 'desktop-app', name: 'Desktop Application', description: 'Native desktop application interface for Windows/Mac/Linux', sections: [ 'Main workspace area', 'Menu bar/toolbar', 'Sidebar navigation', 'Properties panel', 'Status bar', 'Preferences/Settings', 'File browser', 'Multi-window support' ], keyComponents: [ 'Menu bar with shortcuts', 'Toolbar with icon buttons', 'Resizable panels', 'Tab system', 'Context menus', 'Modal dialogs', 'Progress indicators', 'Keyboard shortcuts' ], suggestedStyles: ['minimalist', 'corporate-professional', 'neumorphic'], animationFocus: ['Panel transitions', 'Context menu appears', 'Drag and drop feedback'], uxPriorities: ['Keyboard efficiency', 'Multi-tasking support', 'Professional workflow'], techConsiderations: ['Cross-platform consistency', 'Window management', 'System integration'] }, 'cli-terminal': { type: 'cli-terminal', name: 'CLI/Terminal Interface', description: 'Command-line interface with text-based interaction', sections: [ 'Command input area', 'Output display', 'Help/documentation', 'Progress indicators', 'Error messages', 'Interactive prompts', 'Configuration display', 'Status information' ], keyComponents: [ 'Command prompt', 'Syntax highlighting', 'Auto-completion', 'Progress bars (ASCII)', 'Spinners', 'Tables and lists', 'Color-coded output', 'Interactive menus' ], suggestedStyles: ['tech-futuristic', 'minimalist', 'retro-vintage'], animationFocus: ['Typing effects', 'Progress animations', 'Spinner variations'], uxPriorities: ['Clear feedback', 'Efficient input', 'Helpful errors'], techConsiderations: ['Terminal compatibility', 'Color support detection', 'Responsive width'] }, 'presentation': { type: 'presentation', name: 'Presentation/Slide Deck', description: 'Visual presentation slides for talks, pitches, or education', sections: [ 'Title slide', 'Agenda/Overview', 'Content slides', 'Data visualization slides', 'Quote/Highlight slides', 'Image/Video slides', 'Comparison slides', 'Closing/CTA slide' ], keyComponents: [ 'Large headlines', 'Supporting visuals', 'Bullet points (minimal)', 'Charts and graphs', 'Icon illustrations', 'Speaker notes', 'Progress indicator', 'Transition effects' ], suggestedStyles: ['minimalist', 'bold-experimental', 'corporate-professional'], animationFocus: ['Slide transitions', 'Element builds', 'Chart animations', 'Text reveals'], uxPriorities: ['Readability from distance', 'Clear narrative flow', 'Memorable visuals'], techConsiderations: ['Export formats', 'Aspect ratio options', 'Offline capability'] }, 'admin-panel': { type: 'admin-panel', name: 'Admin Panel', description: 'Backend management interface for content, users, and system settings', sections: [ 'Dashboard overview', 'Content management', 'User management', 'Settings/Configuration', 'Activity logs', 'Media library', 'Role permissions', 'System health' ], keyComponents: [ 'Data tables with CRUD', 'Form builders', 'Rich text editor', 'File uploader', 'Role-based UI', 'Audit trail viewer', 'Bulk actions', 'Search and filters' ], suggestedStyles: ['minimalist', 'corporate-professional'], animationFocus: ['Loading states', 'Save confirmations', 'Smooth transitions'], uxPriorities: ['Efficiency', 'Clear data display', 'Error prevention'], techConsiderations: ['Role-based access', 'Audit logging', 'Bulk operations'] }, 'social-platform': { type: 'social-platform', name: 'Social Platform', description: 'Social networking interface with feeds, profiles, and interactions', sections: [ 'Feed/Timeline', 'User profiles', 'Messaging/Chat', 'Notifications', 'Search/Discover', 'Create/Post', 'Settings/Privacy', 'Groups/Communities' ], keyComponents: [ 'Post cards', 'Like/React buttons', 'Comment threads', 'Share modal', 'Story/Status row', 'Chat bubbles', 'Profile cards', 'Notification list' ], suggestedStyles: ['minimalist', 'playful-creative', 'glassmorphic'], animationFocus: ['Like animations', 'Feed updates', 'Message sends', 'Pull to refresh'], uxPriorities: ['Engaging feed', 'Easy posting', 'Real-time updates'], techConsiderations: ['Real-time sync', 'Image/video handling', 'Push notifications'] }, 'custom': { type: 'custom', name: 'Custom Interface', description: 'Custom interface type - will be analyzed based on prompt', sections: ['To be determined based on requirements'], keyComponents: ['To be determined based on requirements'], suggestedStyles: ['minimalist', 'bold-experimental'], animationFocus: ['To be determined based on requirements'], uxPriorities: ['To be determined based on requirements'], techConsiderations: ['To be determined based on requirements'] } }; export function getTemplatePrompt(interfaceType: InterfaceType): string { const template = INTERFACE_TEMPLATES[interfaceType]; return ` ## Interface Template: ${template.name} ### Description ${template.description} ### Recommended Sections ${template.sections.map((s, i) => `${i + 1}. ${s}`).join('\n')} ### Key Components to Include ${template.keyComponents.map(c => `- ${c}`).join('\n')} ### Suggested Design Styles ${template.suggestedStyles.join(', ')} ### Animation Focus Areas ${template.animationFocus.map(a => `- ${a}`).join('\n')} ### UX Priorities ${template.uxPriorities.map(p => `- ${p}`).join('\n')} ### Technical Considerations ${template.techConsiderations.map(t => `- ${t}`).join('\n')} `; }