MCP UI/UX Prompt Refiner

import type { InterfaceType } from '../utils/types.js'; export interface PromptTemplate { name: string; description: string; template: string; suggestedInputs: { industry?: string[]; style?: string[]; features?: string[]; }; } export const INTERFACE_PROMPTS: Record<string, PromptTemplate> = { 'website-landing': { name: 'Landing Page Design', description: 'Creates a conversion-focused landing page design specification', template: `Design a world-class landing page for {{purpose}}. Target Audience: {{audience}} Primary Goal: {{goal}} Brand Personality: {{personality}} Key sections needed: - Hero with compelling headline and CTA - Social proof/trust indicators - Feature highlights ({{features}}) - Testimonials or case studies - Pricing or offer details - Final conversion CTA Style Direction: {{style}} Animation Level: {{animationLevel}} The design should feel premium, intentional, and distinctly NOT like a generic AI-generated template. Focus on unique visual treatments, thoughtful micro-interactions, and a cohesive design language.`, suggestedInputs: { industry: ['SaaS', 'E-commerce', 'Agency', 'Startup', 'Non-profit'], style: ['minimalist', 'bold-experimental', 'corporate-professional', 'playful-creative'], features: ['product demo', 'pricing calculator', 'email capture', 'video hero', 'interactive elements'] } }, 'dashboard': { name: 'Dashboard Design', description: 'Creates a data-rich dashboard design specification', template: `Design a professional dashboard for {{purpose}}. User Type: {{userType}} Primary Data: {{dataTypes}} Key Actions: {{actions}} Must include: - Overview with key metrics/KPIs - Interactive charts and visualizations - Data tables with filtering/sorting - Navigation system (sidebar recommended) - Notification/alert system - Date/time range controls Style Direction: {{style}} Data Density: {{density}} Animation Level: {{animationLevel}} Focus on making complex data comprehensible at a glance while maintaining visual sophistication. Every element should serve a purpose.`, suggestedInputs: { industry: ['Analytics', 'Finance', 'Sales', 'Marketing', 'Operations', 'Healthcare'], style: ['minimalist', 'tech-futuristic', 'corporate-professional'], features: ['real-time updates', 'export functionality', 'custom date ranges', 'role-based views'] } }, 'mobile-app': { name: 'Mobile App Design', description: 'Creates a native-feeling mobile app design specification', template: `Design a mobile application for {{purpose}}. Platform: {{platform}} Target Users: {{users}} Core Features: {{features}} Key screens needed: - Splash/loading screen with brand moment - Onboarding flow (if first-time user) - Home/main screen - Core feature screens - Profile/settings - Navigation system (tab bar/drawer) Style Direction: {{style}} Animation Level: {{animationLevel}} Gesture Support: {{gestures}} The app should feel native to the platform while maintaining unique brand identity. Focus on thumb-friendly interactions, smooth transitions, and delightful micro-interactions.`, suggestedInputs: { industry: ['Fitness', 'Finance', 'Social', 'Productivity', 'Entertainment', 'Health'], style: ['minimalist', 'playful-creative', 'glassmorphic'], features: ['push notifications', 'offline mode', 'biometric auth', 'dark mode', 'widgets'] } }, 'website-portfolio': { name: 'Portfolio Website Design', description: 'Creates a creative portfolio design specification', template: `Design a portfolio website for {{creatorType}}. Work Type: {{workType}} Personal Brand: {{brandPersonality}} Key Projects: {{projectCount}} featured works Must include: - Impactful hero/landing experience - Work showcase (grid or featured layout) - Project detail views - About/personal story section - Skills or services offered - Contact information/form Style Direction: {{style}} Animation Level: {{animationLevel}} Special Effects: {{effects}} This portfolio should be memorable and reflect the creator's unique personality. Push creative boundaries with custom cursor effects, unique page transitions, and innovative layouts that showcase work beautifully.`, suggestedInputs: { industry: ['Designer', 'Developer', 'Photographer', 'Artist', 'Agency', 'Freelancer'], style: ['bold-experimental', 'minimalist', 'brutalist', 'luxury-elegant'], features: ['custom cursor', 'page transitions', 'project filtering', 'dark mode toggle', '3D elements'] } }, 'website-ecommerce': { name: 'E-commerce Website Design', description: 'Creates a conversion-optimized online store design specification', template: `Design an e-commerce website for {{productType}}. Brand: {{brandName}} Price Point: {{pricePoint}} Target Customer: {{customer}} Key pages needed: - Homepage with featured products and categories - Product listing pages with filters - Product detail pages with gallery - Shopping cart (drawer or page) - Checkout flow (streamlined) - User account area Style Direction: {{style}} Animation Level: {{animationLevel}} Special Features: {{features}} Focus on creating a premium shopping experience with smooth add-to-cart animations, intuitive filtering, and a frictionless checkout process. Product imagery should be the hero.`, suggestedInputs: { industry: ['Fashion', 'Electronics', 'Home goods', 'Beauty', 'Food', 'Luxury'], style: ['minimalist', 'luxury-elegant', 'playful-creative'], features: ['quick view', 'wishlist', 'size guide', 'reviews', 'related products', 'recently viewed'] } }, 'cli-terminal': { name: 'CLI Interface Design', description: 'Creates a command-line interface design specification', template: `Design a CLI tool for {{purpose}}. Primary Users: {{users}} Core Commands: {{commands}} Output Types: {{outputs}} Must include: - Clear command structure and syntax - Help system and documentation - Progress indicators for long operations - Colored/styled output formatting - Error messages with helpful guidance - Interactive prompts where needed Style Direction: {{style}} ASCII Art: {{asciiArt}} Animation Level: {{animationLevel}} Create a CLI experience that feels modern and polished. Use color strategically, provide excellent feedback, and make the tool a pleasure to use daily.`, suggestedInputs: { industry: ['Developer tools', 'DevOps', 'Data processing', 'System admin', 'Productivity'], style: ['tech-futuristic', 'minimalist', 'retro-vintage'], features: ['auto-completion', 'interactive mode', 'config files', 'plugins', 'themes'] } }, 'presentation': { name: 'Presentation Deck Design', description: 'Creates a slide presentation design specification', template: `Design a presentation deck for {{purpose}}. Audience: {{audience}} Duration: {{duration}} minutes Key Message: {{keyMessage}} Slide types needed: - Title slide with impact - Agenda/overview - Content slides ({{contentSlides}}) - Data visualization slides - Quote/highlight slides - Closing with CTA Style Direction: {{style}} Animation Level: {{animationLevel}} Brand Colors: {{colors}} Create a presentation that commands attention and reinforces key messages through thoughtful visual design. Less text, more impact. Each slide should make one point clearly.`, suggestedInputs: { industry: ['Startup pitch', 'Sales', 'Conference talk', 'Internal', 'Educational'], style: ['minimalist', 'bold-experimental', 'corporate-professional'], features: ['data charts', 'speaker notes', 'animated builds', 'video embeds'] } }, 'admin-panel': { name: 'Admin Panel Design', description: 'Creates an admin/backend interface design specification', template: `Design an admin panel for managing {{contentType}}. Admin Users: {{adminTypes}} Content Types: {{contentTypes}} Key Actions: {{actions}} Must include: - Dashboard with key metrics - Content listing with CRUD operations - Form-based content editing - User management (if applicable) - Settings/configuration - Activity logs/audit trail Style Direction: {{style}} Data Density: {{density}} Animation Level: {{animationLevel}} Focus on efficiency and clarity. Admins will use this daily, so prioritize usability over flashiness while still maintaining visual polish.`, suggestedInputs: { industry: ['CMS', 'E-commerce backend', 'User management', 'Content moderation'], style: ['minimalist', 'corporate-professional'], features: ['bulk actions', 'search/filter', 'role permissions', 'export', 'version history'] } }, 'website-saas': { name: 'SaaS Marketing Website Design', description: 'Creates a SaaS product marketing website design specification', template: `Design a marketing website for {{productName}}, a {{productDescription}}. Target Market: {{market}} Key Differentiators: {{differentiators}} Pricing Model: {{pricingModel}} Pages needed: - Homepage with product overview - Features page with detailed breakdowns - Pricing page with tier comparison - About/Team page - Resources/Blog section - Documentation preview - Sign-up/Login flows Style Direction: {{style}} Animation Level: {{animationLevel}} Interactive Demos: {{demos}} Create a website that clearly communicates the product's value while feeling as polished as the product itself. Include interactive demos or previews where possible.`, suggestedInputs: { industry: ['B2B', 'B2C', 'Developer tools', 'Marketing', 'Productivity', 'Finance'], style: ['minimalist', 'tech-futuristic', 'corporate-professional'], features: ['interactive demo', 'pricing calculator', 'integration logos', 'comparison table', 'testimonials'] } }, 'social-platform': { name: 'Social Platform Design', description: 'Creates a social networking interface design specification', template: `Design a social platform for {{community}}. Platform Focus: {{focus}} Content Types: {{contentTypes}} Key Interactions: {{interactions}} Key features needed: - Feed/timeline - User profiles - Content creation - Reactions/engagement - Messaging/chat - Notifications - Discovery/search Style Direction: {{style}} Animation Level: {{animationLevel}} Real-time Features: {{realtime}} Create an engaging social experience with satisfying interactions. Focus on making common actions (like, comment, share) feel delightful while keeping the interface clean and navigable.`, suggestedInputs: { industry: ['Professional', 'Creative', 'Interest-based', 'Local', 'Educational'], style: ['minimalist', 'playful-creative', 'glassmorphic'], features: ['stories', 'live video', 'polls', 'events', 'groups', 'marketplace'] } }, 'desktop-app': { name: 'Desktop Application Design', description: 'Creates a desktop application interface design specification', template: `Design a desktop application for {{purpose}}. Platform: {{platforms}} Primary Users: {{users}} Core Workflow: {{workflow}} Key areas needed: - Main workspace/canvas - Menu bar and toolbar - Sidebar navigation - Properties/inspector panel - Status bar - Preferences/Settings - Multi-window support Style Direction: {{style}} Animation Level: {{animationLevel}} Keyboard Shortcuts: {{shortcuts}} Create a professional desktop experience that feels native to each platform while maintaining brand consistency. Focus on keyboard efficiency and smooth panel interactions.`, suggestedInputs: { industry: ['Productivity', 'Creative tools', 'Development', 'Business', 'Communication'], style: ['minimalist', 'neumorphic', 'corporate-professional'], features: ['keyboard shortcuts', 'multi-window', 'system tray', 'auto-updates', 'offline mode'] } } }; export function getPromptTemplate(interfaceType: string): PromptTemplate | undefined { return INTERFACE_PROMPTS[interfaceType]; } export function listAvailablePrompts(): { name: string; type: string; description: string }[] { return Object.entries(INTERFACE_PROMPTS).map(([type, prompt]) => ({ type, name: prompt.name, description: prompt.description })); } export function fillPromptTemplate(type: string, variables: Record<string, string>): string { const template = INTERFACE_PROMPTS[type]; if (!template) { return `No template found for type: ${type}`; } let filledPrompt = template.template; for (const [key, value] of Object.entries(variables)) { const placeholder = `{{${key}}}`; filledPrompt = filledPrompt.replace(new RegExp(placeholder, 'g'), value || `[${key}]`); } // Replace any remaining unfilled placeholders with placeholder text filledPrompt = filledPrompt.replace(/\{\{(\w+)\}\}/g, '[$1]'); return filledPrompt; }