refine_ui_prompt

Instructions

Implementation Reference

• src/tools/refine-prompt.ts:260-385 (handler)

  Core handler function that executes the refine_ui_prompt tool logic. Analyzes input, generates comprehensive UI/UX specification using design principles, styles, colors, layouts, components, animations, and UX flows.

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

• src/server.ts:40-60 (schema)

  Zod input schema (RefinePromptSchema) used for validating tool arguments before calling the handler.

  const RefinePromptSchema = z.object({
    rawPrompt: z.string().describe('Your basic interface idea or requirements'),
    interfaceType: z.enum([
      'website-landing', 'website-saas', 'website-portfolio', 'website-ecommerce',
      'dashboard', 'mobile-app', 'desktop-app', 'cli-terminal', 'presentation',
      'admin-panel', 'social-platform', 'custom'
    ]).optional().describe('Type of interface (auto-detected if not provided)'),
    style: z.enum([
      'minimalist', 'bold-experimental', 'corporate-professional', 'playful-creative',
      'luxury-elegant', 'tech-futuristic', 'organic-natural', 'brutalist',
      'retro-vintage', 'glassmorphic', 'neumorphic', 'custom'
    ]).optional().describe('Desired design style'),
    colorMood: z.enum([
      'energetic', 'calm', 'professional', 'playful', 'luxurious',
      'trustworthy', 'innovative', 'natural', 'bold', 'neutral'
    ]).optional().describe('Color palette mood'),
    animationIntensity: z.enum(['subtle', 'moderate', 'dramatic', 'cinematic'])
      .optional().describe('Level of animation effects'),
    targetAudience: z.string().optional().describe('Who will use this interface'),
    brandKeywords: z.array(z.string()).optional().describe('Keywords describing the brand'),
  });

• src/server.ts:115-151 (registration)

  Tool registration definition returned by ListToolsRequestHandler, including name, description, and JSON schema for MCP protocol compliance.

  {
    name: 'refine_ui_prompt',
    description: 'Transform a basic interface idea into a comprehensive, world-class UI/UX design specification. This is the main tool that generates detailed design prompts covering visual design, typography, colors, animations, and user experience.',
    inputSchema: {
      type: 'object',
      properties: {
        rawPrompt: { type: 'string', description: 'Your basic interface idea or requirements' },
        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 (auto-detected if not provided)'
        },
        style: {
          type: 'string',
          enum: ['minimalist', 'bold-experimental', 'corporate-professional', 'playful-creative', 'luxury-elegant', 'tech-futuristic', 'organic-natural', 'brutalist', 'retro-vintage', 'glassmorphic', 'neumorphic', 'custom'],
          description: 'Desired design style'
        },
        colorMood: {
          type: 'string',
          enum: ['energetic', 'calm', 'professional', 'playful', 'luxurious', 'trustworthy', 'innovative', 'natural', 'bold', 'neutral'],
          description: 'Color palette mood'
        },
        animationIntensity: {
          type: 'string',
          enum: ['subtle', 'moderate', 'dramatic', 'cinematic'],
          description: 'Level of animation effects'
        },
        targetAudience: { type: 'string', description: 'Who will use this interface' },
        brandKeywords: {
          type: 'array',
          items: { type: 'string' },
          description: 'Keywords describing the brand'
        }
      },
      required: ['rawPrompt']
    }
  },

• src/server.ts:265-277 (handler)

  MCP server dispatcher that handles 'refine_ui_prompt' tool calls, validates input with schema, invokes the refineUIPrompt function, and formats response.

  case 'refine_ui_prompt': {
    const parsed = RefinePromptSchema.parse(args);
    const result = refineUIPrompt({
      rawPrompt: parsed.rawPrompt,
      interfaceType: parsed.interfaceType as InterfaceType | undefined,
      style: parsed.style as DesignStyle | undefined,
      colorMood: parsed.colorMood as ColorMood | undefined,
      animationIntensity: parsed.animationIntensity as AnimationIntensity | undefined,
      targetAudience: parsed.targetAudience,
      brandKeywords: parsed.brandKeywords,
    });
    return { content: [{ type: 'text', text: result }] };
  }