MCP UI/UX Prompt Refiner

Instructions

Implementation Reference

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

  The core handler function that implements the refine_ui_prompt tool. It analyzes the input prompt, selects design parameters, and generates a comprehensive markdown specification covering style, colors, typography, layout, components, animations, UX flows, and implementation guidance.
  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 validation schema for the refine_ui_prompt tool parameters.
  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:116-151 (registration)

  Tool registration in the MCP server's listTools handler, defining name, description, and JSON schema for refine_ui_prompt.
  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)

  Dispatch handler in the MCP server's callToolRequestSchema that parses input with the schema and invokes the refineUIPrompt function.
  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 }] }; }