MCP UI/UX Prompt Refiner

Instructions

Implementation Reference

• src/tools/ux-flow.ts:130-313 (handler)

  The core handler function that implements the generate_ux_flow tool logic. It generates a comprehensive UX flow specification including user journeys, patterns, state management, error handling, accessibility, and more.
  export function generateUXFlow(input: UXFlowInput): string { const { interfaceType, primaryGoal, secondaryGoals, userPersonas, customFlows } = input; const template = INTERFACE_TEMPLATES[interfaceType]; const userJourney = generateUserJourney(interfaceType, primaryGoal); const patternRecommendations = generateUXPatternRecommendations(interfaceType); return `# UX Flow Specification ## Overview **Interface Type**: ${interfaceType.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())} **Primary Goal**: ${primaryGoal} ${secondaryGoals ? `**Secondary Goals**: ${secondaryGoals.join(', ')}` : ''} ${userPersonas ? `**Target Users**: ${userPersonas.join(', ')}` : `**Target Users**: ${template.uxPriorities.join(', ')}`} --- ## User Journey Map ${userJourney.map(step => ` ### Step ${step.step}: ${step.screen} **User Action**: ${step.userAction} **System Response**: ${step.systemResponse} **Micro-Interactions**: ${step.microInteractions.map(m => `- ${m}`).join('\n')} ${step.errorHandling ? `**Error Handling**: ${step.errorHandling}` : ''} `).join('\n---\n')} --- ## UX Pattern Recommendations ${patternRecommendations} --- ## Interaction Design Principles ### Response Time Guidelines | Action Type | Expected Response | User Feedback | |-------------|-------------------|---------------| | Button click | Immediate (<100ms) | Visual press state | | Form submit | <1 second | Loading indicator | | Page load | <2 seconds | Skeleton loader | | Background task | Variable | Progress indicator | ### Feedback Loop Requirements 1. **Immediate**: Visual change on interaction (hover, press) 2. **Short-term**: Confirmation of action (toast, animation) 3. **Long-term**: Status of outcome (success page, notification) --- ## State Management ### Screen States to Design For each screen, design these states: 1. **Empty State** - First-time user guidance - Clear CTA to populate - Friendly illustration 2. **Loading State** - Skeleton that matches content structure - Meaningful progress indication - Avoid layout shift when content loads 3. **Error State** - Clear problem explanation - Actionable recovery steps - Maintain user's context/data 4. **Success State** - Celebration appropriate to action importance - Clear next steps - Easy navigation to continue 5. **Partial State** - Graceful degradation - Clear indication of limitations - Offline-capable where possible --- ## Error Handling UX ### Prevention ${Object.entries(ERROR_HANDLING_UX.preventive).map(([key, value]) => `- **${key}**: ${value}`).join('\n')} ### Communication ${Object.entries(ERROR_HANDLING_UX.informative).map(([key, value]) => `- **${key}**: ${value}`).join('\n')} ### Recovery ${Object.entries(ERROR_HANDLING_UX.recovery).map(([key, value]) => `- **${key}**: ${value}`).join('\n')} --- ## Accessibility Requirements ### Focus Management ${Object.entries(ACCESSIBILITY_PATTERNS.focusManagement).map(([key, value]) => `- **${key}**: ${value}`).join('\n')} ### Screen Reader Support ${Object.entries(ACCESSIBILITY_PATTERNS.screenReaders).map(([key, value]) => `- **${key}**: ${value}`).join('\n')} ### Color & Contrast ${Object.entries(ACCESSIBILITY_PATTERNS.colorAndContrast).map(([key, value]) => `- **${key}**: ${value}`).join('\n')} ### Motion Sensitivity ${Object.entries(ACCESSIBILITY_PATTERNS.motion).map(([key, value]) => `- **${key}**: ${value}`).join('\n')} --- ## Mobile UX Considerations ### Touch Targets - Minimum touch target: 44x44px (iOS) / 48x48dp (Android) - Spacing between targets: minimum 8px - Place primary actions in thumb-friendly zones ### Gestures - Swipe: Navigation, dismissal, actions - Long press: Context menus, selection - Pinch: Zoom (images, maps) - Pull down: Refresh content ### Mobile-Specific Patterns - Bottom sheets for additional options - Full-screen modals for focused tasks - Floating action button for primary create action - Snackbars for brief feedback --- ## Performance UX ### Perceived Performance Optimizations 1. **Instant feedback**: Respond to input immediately 2. **Optimistic updates**: Show expected result before confirmation 3. **Progressive loading**: Prioritize above-fold content 4. **Skeleton screens**: Show structure while loading 5. **Preloading**: Anticipate next action, preload resources ### Loading Strategy by Content Type | Content | Strategy | Placeholder | |---------|----------|-------------| | Text | Skeleton lines | Gray bars matching text | | Images | Blur-up/LQIP | Blurred thumbnail | | Lists | Skeleton cards | Repeated card shapes | | Data | Skeleton + spinner | Structure + activity | --- ${customFlows ? `## Custom Flow Requirements ${customFlows.map(flow => `- ${flow}`).join('\n')} ---` : ''} ## UX Quality Metrics ### Key Metrics to Track - **Task completion rate**: % of users completing primary goal - **Time to first action**: How quickly users engage - **Error rate**: Frequency of user errors - **Recovery rate**: % who recover from errors - **Satisfaction**: User-reported satisfaction scores ### Success Criteria - [ ] Users can complete primary goal without help - [ ] Error states provide clear recovery paths - [ ] Loading states prevent user confusion - [ ] Accessibility requirements met (WCAG AA) - [ ] Mobile experience is fully functional --- *This UX flow is designed to create intuitive, delightful user experiences that feel thoughtfully crafted rather than generic.* `; }
• src/server.ts:83-93 (schema)

  Zod input schema for validating arguments to the generate_ux_flow tool.
  const GenerateUXFlowSchema = z.object({ interfaceType: z.enum([ 'website-landing', 'website-saas', 'website-portfolio', 'website-ecommerce', 'dashboard', 'mobile-app', 'desktop-app', 'cli-terminal', 'presentation', 'admin-panel', 'social-platform', 'custom' ]).describe('Type of interface'), primaryGoal: z.string().describe('Main user goal (e.g., "sign up for newsletter")'), secondaryGoals: z.array(z.string()).optional().describe('Additional user goals'), userPersonas: z.array(z.string()).optional().describe('Target user types'), customFlows: z.array(z.string()).optional().describe('Custom user flows to include'), });
• src/server.ts:194-224 (registration)

  Tool registration in the ListToolsRequestSchema handler, defining name, description, and input schema for generate_ux_flow.
  { name: 'generate_ux_flow', description: 'Create detailed user experience flows including user journeys, interaction patterns, state management, error handling, and accessibility requirements.', inputSchema: { type: 'object', properties: { interfaceType: { type: 'string', enum: ['website-landing', 'website-saas', 'website-portfolio', 'website-ecommerce', 'dashboard', 'mobile-app', 'desktop-app', 'cli-terminal', 'presentation', 'admin-panel', 'social-platform', 'custom'], description: 'Type of interface' }, primaryGoal: { type: 'string', description: 'Main user goal' }, secondaryGoals: { type: 'array', items: { type: 'string' }, description: 'Additional user goals' }, userPersonas: { type: 'array', items: { type: 'string' }, description: 'Target user types' }, customFlows: { type: 'array', items: { type: 'string' }, description: 'Custom user flows to include' } }, required: ['interfaceType', 'primaryGoal'] } },
• src/server.ts:297-307 (registration)

  Dispatch handler in CallToolRequestSchema that invokes the generateUXFlow function after schema validation.
  case 'generate_ux_flow': { const parsed = GenerateUXFlowSchema.parse(args); const result = generateUXFlow({ interfaceType: parsed.interfaceType as InterfaceType, primaryGoal: parsed.primaryGoal, secondaryGoals: parsed.secondaryGoals, userPersonas: parsed.userPersonas, customFlows: parsed.customFlows, }); return { content: [{ type: 'text', text: result }] }; }
• src/tools/ux-flow.ts:5-11 (schema)

  TypeScript interface defining the input shape for the generateUXFlow handler, matching the schema.
  interface UXFlowInput { interfaceType: InterfaceType; primaryGoal: string; secondaryGoals?: string[]; userPersonas?: string[]; customFlows?: string[]; }