MCP UI/UX Prompt Refiner

Instructions

Implementation Reference

• src/tools/analyzer.ts:194-210 (handler)

  Core handler function implementing the analysis logic: detects interface type, design styles, key components, user personas, design patterns, and complexity level from the raw prompt.
  export function analyzeInterface(rawPrompt: string, providedType?: InterfaceType): AnalysisResult { const interfaceType = providedType || detectInterfaceType(rawPrompt); const suggestedStyles = detectStyles(rawPrompt); const keyComponents = extractKeyComponents(rawPrompt, interfaceType); const userPersonas = inferUserPersonas(rawPrompt, interfaceType); const designPatterns = suggestDesignPatterns(interfaceType, suggestedStyles); const complexity = determineComplexity(rawPrompt, keyComponents); return { interfaceType, suggestedStyles, keyComponents, userPersonas, designPatterns, complexity }; }
• src/server.ts:62-69 (schema)

  Zod schema defining the input validation for the analyze_interface tool: rawPrompt (required) and optional interfaceType.
  const AnalyzeInterfaceSchema = z.object({ rawPrompt: z.string().describe('Interface description to analyze'), 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('Override detected interface type'), });
• src/server.ts:152-167 (registration)

  Tool registration in the ListToolsRequestHandler, defining name, description, and inputSchema for MCP discovery.
  { name: 'analyze_interface', description: 'Analyze an interface request to detect the type, suggest styles, identify components, and understand the scope. Use this before refining to understand what you\'re working with.', inputSchema: { type: 'object', properties: { rawPrompt: { type: 'string', description: 'Interface description to analyze' }, 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: 'Override detected interface type' } }, required: ['rawPrompt'] } },
• src/server.ts:279-284 (handler)

  MCP tool dispatch handler: parses arguments with schema, calls analyzeInterface core function, formats output with generateAnalysisOutput, and returns text content.
  case 'analyze_interface': { const parsed = AnalyzeInterfaceSchema.parse(args); const analysis = analyzeInterface(parsed.rawPrompt, parsed.interfaceType as InterfaceType | undefined); const result = generateAnalysisOutput(analysis, parsed.rawPrompt); return { content: [{ type: 'text', text: result }] }; }
• src/tools/analyzer.ts:212-239 (helper)

  Helper function that formats the AnalysisResult into a markdown report used by the tool handler.
  export function generateAnalysisOutput(analysis: AnalysisResult, rawPrompt: string): string { return `# Interface Analysis ## Original Request "${rawPrompt}" ## Detected Interface Type **${analysis.interfaceType.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}** ## Complexity Level **${analysis.complexity.charAt(0).toUpperCase() + analysis.complexity.slice(1)}** ## Suggested Design Styles ${analysis.suggestedStyles.map(s => `- ${s.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}`).join('\n')} ## Key Components Identified ${analysis.keyComponents.map(c => `- ${c}`).join('\n')} ## Target User Personas ${analysis.userPersonas.map(p => `- ${p}`).join('\n')} ## Recommended Design Patterns ${analysis.designPatterns.map(p => `- ${p}`).join('\n')} --- *This analysis forms the foundation for the refined design prompt.* `; }