visual-analysis

Extract text, elements, and visual properties from images and screenshots.

Updated Jan 9, 2026
One-click install
npx skills add https://github.com/maplin-co/ai-course --skill visual-analysis-maplin-co
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-analysis
Source: https://github.com/maplin-co/ai-course/tree/main/.opencode/skill/visual-analysis
Command: npx skills add https://github.com/maplin-co/ai-course --skill visual-analysis-maplin-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps users understand and extract information from visual content like images, screenshots, and UI mockups, saving time on manual visual inspection.

Core Features & Use Cases

  • Image Analysis: Extract text, identify elements, and analyze visual properties.
  • Design Assessment: Compare designs, check color palettes, and evaluate layouts.
  • Use Case: Quickly get a list of all text elements from a screenshot of a mobile app to ensure consistency.

Quick Start

Analyze this image and list all visible text elements.

Frequently Asked Questions about visual-analysis

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract all text elements from a UI screenshot?

To extract text from a UI screenshot, visual analysis identifies and lists all visible text elements. This helps ensure consistency across mobile app or web interfaces without manual inspection.

Can I generate design tokens from an image mockup?

Yes, you can generate design tokens from an image mockup. The analysis outputs structured Markdown, JSON, or code formats containing extracted color palettes and typography properties for implementation guidance.

What is the best way to compare two images for layout differences?

The best way to compare images for layout differences is using visual analysis to assess visual properties and layout structures. It evaluates UI elements and design components to identify variations.

Does image analysis work for extracting color palettes from screenshots?

Yes, image analysis works for extracting color palettes from screenshots. It breaks down visual properties to identify the specific colors used, which can then be exported as structured data.

How do I get a structured breakdown of UI elements in JSON?

You get a structured breakdown of UI elements in JSON by providing a screenshot for visual analysis. It processes the layout structures and visual properties, outputting the extracted information in JSON format.

When do I need visual analysis for design assessment?

You need visual analysis for design assessment when checking color palettes, comparing designs, or evaluating layouts from mockups. It automates information extraction to save time on manual visual inspection.