analyze_interface
Analyze interface descriptions to detect types, suggest styles, identify components, and understand scope for UI/UX design refinement.
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 that analyzes the interface prompt: detects type, styles, key components, user personas, design patterns, and complexity level.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 for validating input to the analyze_interface tool.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 ListTools response, defining name, description, and input schema.{ 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/tools/analyzer.ts:212-239 (helper)Helper function to generate formatted markdown output from the analysis result, used in the tool dispatch.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.* `; }