skills.rest
tuantiensiu
tuantiensiuCOMMUNITY
Explore all skills by this author →
GitHub

visual-analysis

Extract colors, typography, and layout data from images and UI mockups.

1|Updated Jan 10, 2026
Search Tags:#typography#screenshot#visual-analysis#design-review#layout-analysis#ui-analysis#color-extraction
One-click install
npx skills add https://github.com/tuantiensiu/todo-app --skill visual-analysis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-analysis
Source: https://github.com/tuantiensiu/todo-app/tree/main/.opencode/skill/visual-analysis
Command: npx skills add https://github.com/tuantiensiu/todo-app --skill visual-analysis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyzing images, screenshots, and visual content to extract actionable information, compare designs, and assess visual properties such as colors, typography, and layout.

Core Features & Use Cases

  • Analyze UI mockups and screenshots to identify UI components, text, icons, and imagery.
  • Extract color palettes and typography details, and evaluate spacing and layout patterns across designs.
  • Compare multiple visuals to highlight design differences, inconsistencies, and accessibility cues.
  • Generate structured reports that summarize findings for design reviews or handoffs.

Quick Start

Attach the image or screenshot and request a specific analysis task, such as identifying colors and typography.

Frequently Asked Questions about visual-analysis

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

FAQPage Schema
How do I extract a color palette and identify typography from a UI screenshot?▼

To extract a color palette and identify typography from a UI screenshot, simply attach the image file and request the specific analysis task. The tool processes the visual data to tag fonts and generate structured color details.

What is the best way to compare design differences across multiple screenshots?▼

Comparing design differences across multiple screenshots is done by submitting the images for visual analysis. The tool evaluates layout patterns, spacing, and inconsistencies to highlight distinct visual variations.

Can I generate a structured design review report from an image mockup?▼

Yes, you can generate a structured design review report from an image mockup. The tool analyzes visual properties like spacing and color, outputting a summarized document suitable for design handoffs.

Does visual analysis assess accessibility cues and spacing patterns in layouts?▼

Yes, visual analysis assesses accessibility cues and spacing patterns in layouts. It extracts structured visual data from UI mockups to evaluate layout patterns and identify potential accessibility issues.

What image formats work for UI layout analysis and component identification?▼

UI layout analysis and component identification work with standard image and screenshot formats. You attach the visual file to the conversation, and the tool identifies UI components, text, icons, and imagery.

Are there limitations when analyzing complex imagery instead of UI mockups?▼

A limitation when analyzing complex imagery instead of UI mockups is that the tool is optimized for structured visual data like color extraction and typography tagging, which may not yield actionable results on non-UI photographs.

Related Skills

Explore More Design & Creative Skills→
binan-makerbinan-maker

recreate-screenshot

Recreate UI screens from screenshots or image references with pixel-perfect accuracy.

Community
Advanced
Asymmetric-alAsymmetric-al
1

ui-ux-pro-max

Search UI/UX style guidelines across color, typography, and layout domains.

Official
Advanced
LutimiLutimi

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind CSS into React interfaces.

Community
Advanced
0xRayAI0xRayAI

multimodal-looker

Analyze diagrams, screenshots, and UI mockups to generate structured specifications.

Official
Intermediate