Image Analyzer

Use zai-mcp-server tools to understand and analyze image content. Use this skill when users need to understand images, extract information from images, analyze screenshots, or process any visual content.

Triggers

Use this skill when users mention any of the following:

• Image analysis, understanding image content, viewing images
• Extract text/info from images
• Screenshot analysis
• OCR (optical character recognition)
• Image to text
• Analyze charts, data visualizations
• Understand UI designs, interface screenshots
• Error screenshot diagnosis
• Technical diagram understanding
• Data visualization analysis

Available Tools

This skill uses tools provided by zai-mcp-server:

1. zai-mcp-server_ui_to_artifact

Purpose: Convert UI screenshots to code, prompts, design specs, or descriptions Use cases:

• Generate frontend code from UI designs
• Create AI prompts to recreate UIs
• Extract design specification documents
• Get natural language descriptions of UIs

Parameters:

• image_source: Image path or URL
• output_type: ‘code’ | ‘prompt’ | ‘spec’ | ‘description’
• prompt: Detailed description of what to generate

2. zai-mcp-server_extract_text_from_screenshot

Purpose: Extract and recognize text from screenshots Use cases:

• Extract code from code screenshots
• Recognize terminal output
• Extract document text
• General text extraction

Parameters:

• image_source: Image path or URL
• prompt: Text extraction instructions
• programming_language: Optional, specify programming language

3. zai-mcp-server_diagnose_error_screenshot

Purpose: Diagnose and analyze error messages and stack trace screenshots Use cases:

• Understand error messages
• Analyze exceptions
• Provide fix recommendations

Parameters:

• image_source: Image path or URL
• prompt: Description of what help is needed
• context: Optional, context of when error occurred

4. zai-mcp-server_understand_technical_diagram

Purpose: Analyze technical diagrams (architecture diagrams, flowcharts, UML, ER diagrams, etc.) Use cases:

• Understand system architecture
• Analyze flowcharts
• Interpret UML/ER diagrams
• Understand sequence diagrams

Parameters:

• image_source: Image path or URL
• prompt: What to understand or extract
• diagram_type: Optional, e.g., ‘architecture’, ‘flowchart’, ‘uml’, ‘er-diagram’

5. zai-mcp-server_analyze_data_visualization

Purpose: Analyze data visualizations, charts, dashboards Use cases:

• Extract insights from visualizations
• Identify trends and anomalies
• Understand metrics and data

Parameters:

• image_source: Image path or URL
• prompt: Insights or information to extract
• analysis_focus: Optional, e.g., ‘trends’, ‘anomalies’, ‘comparisons’

6. zai-mcp-server_ui_diff_check

Purpose: Compare visual differences between two UI screenshots Use cases:

• UI quality assurance
• Design vs implementation verification

Parameters:

• expected_image_source: Expected/reference UI
• actual_image_source: Actual implemented UI
• prompt: Comparison instructions

7. zai-mcp-server_analyze_image

Purpose: General-purpose image analysis, fallback for the above tools Use cases:

• Scenarios not matching specific tools above
• Flexible image understanding needs

Parameters:

• image_source: Image path or URL
• prompt: Detailed analysis requirements

Workflow

1. Identify image type and user needs

   • Determine image content type (UI, error message, diagram, data visualization, etc.)
   • Understand what information the user wants to extract

2. Select appropriate tool

   • UI design → ui_to_artifact
   • Text/code → extract_text_from_screenshot
   • Error message → diagnose_error_screenshot
   • Technical diagram → understand_technical_diagram
   • Data visualization → analyze_data_visualization
   • UI comparison → ui_diff_check
   • Other → analyze_image

3. Build clear prompt

   • Clearly specify what to extract/analyze
   • Specify output format (if needed)
   • Provide relevant context

4. Execute and present results

   • Present analysis results in a clear, structured way
   • Provide follow-up recommendations if needed

Best Practices

• Prioritize specific tools: If an image matches a specific tool’s use case, use that tool instead of the generic analyze_image
• Detailed prompts: Clear, specific prompts yield better analysis results
• Understand context: If users provide context (e.g., when an error occurred), include it in the prompt
• Verify results: For critical tasks, recommend verifying extracted information

Output Format

Depending on different tools and requirements, output can be:

• Text description
• Extracted data (JSON/structured text)
• Code snippets
• Design specification documents
• Analysis reports

Notes

• Some tools may not handle very large image files
• For blurry or low-quality images, analysis results may be less accurate
• When an image contains multiple content types, multiple tools may be needed for analysis