analyze_interface
Analyze interface descriptions to detect types, suggest styles, identify components, and understand scope before refining UI/UX designs.
Instructions
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.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| rawPrompt | Yes | Interface description to analyze | |
| interfaceType | No | Override detected interface type |
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.* `; }