visual-analysis

Analyze images and UI mockups to extract colors, typography, layout, and UI elements.

Updated Feb 5, 2026
One-click install
npx skills add https://github.com/Khoiwall/be_vidify --skill visual-analysis-khoiwall
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-analysis
Source: https://github.com/Khoiwall/be_vidify/tree/main/.opencode/skill/visual-analysis
Command: npx skills add https://github.com/Khoiwall/be_vidify --skill visual-analysis-khoiwall

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use when analyzing images, screenshots, UI mockups, or visual content for extracting information, comparing designs, or assessing visual properties like colors, typography, and layout.

Core Features & Use Cases

  • Visual content analysis: identify colors, typography, spacing, and UI components from images or mockups.
  • Design comparison: contrast variations, assess consistency across assets, and verify design system conformance.
  • Reporting and guidance: produce structured insights suitable for design reviews, accessibility checks, and documentation.

Quick Start

Upload an image or screenshot and specify your analysis goal to receive a structured visual report.

Frequently Asked Questions about visual-analysis

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

FAQPage Schema
How do I extract colors and typography from a UI mockup?

To extract colors and typography from a UI mockup, you can analyze the visual content to receive a structured report detailing color palettes, typographic properties, and spacing patterns. Upload your image and specify the analysis goal to generate the inventory.

What is visual analysis for design reviews and asset validation?

Visual analysis for design reviews is the process of identifying UI elements, layout structures, and color schemes from screenshots to assess design consistency. It delivers structured insights suitable for verifying design system conformance and documenting visual assets.

Can I compare design variations and check design system conformance using screenshots?

Yes, you can compare design variations and check design system conformance by analyzing screenshots to contrast visual properties. The process assesses consistency across assets and produces structured insights for visual audits.

Does visual analysis support both quick and deep inspection modes for product imagery?

Visual analysis supports both quick and deep inspection modes for product imagery through predefined prompts. This allows you to scale the inspection depth based on whether you need a rapid overview or a detailed component inventory.

What UI components and spacing patterns can I inventory from a screenshot?

You can inventory UI components and spacing patterns from a screenshot by analyzing the visual layout. The extraction identifies structural elements and delivers a detailed breakdown of spacing patterns and component arrangements.

How do I perform an accessibility check on a visual mockup?

To perform an accessibility check on a visual mockup, analyze the image to extract color palettes and typography details. The resulting structured visual report provides the necessary data to assess contrast ratios and visual accessibility compliance.