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[];
  }