mcpField
U
ui-layout-analyzer

ui-layout-analyzer

github.com/yangsonhungDesign & UI1855 installsUpdated 12w ago
Repository

About ui-layout-analyzer

A skill for analyzing UI screenshots into structured descriptions of page layout, visual hierarchy, controls, and likely workflows. It is intended for requests to understand an existing interface, not to design one or review its code.

Key features

  1. 01Identifies overall page structure
  2. 02Breaks screens into sections
  3. 03Describes visible controls and states
  4. 04Infers likely user workflows

Use cases

  1. 01Documenting a screenshot's layout
  2. 02Understanding controls in an unfamiliar interface
  3. 03Summarizing likely navigation and form behavior

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/yangsonhung/awesome-agent-skills --skill ui-layout-analyzer

After installing, type/ui-layout-analyzerin Claude Code to confirm it loaded.

Details

From the project README

UI Layout Analyzer

Overview

Analyze a provided UI screenshot and output a structured layout description plus functional analysis. The skill focuses on interface screenshots, describing page structure, visual sections, hierarchy, controls, and likely user workflows without designing new UI or reviewing implementation code.

When to Use

Use this skill when the user provides a UI image and requests analysis.

Do not use

Do not use this skill for:

  • Non-UI images (photos, diagrams, charts that are not interface screenshots)
  • Requests to design or create UI (use ui-ux-pro-max instead)
  • Code review of UI implementation (use code-reviewer instead)

Instructions

Follow this format exactly:

## UI Layout Description

### Overall Structure
Describe the overall structure type (modal dialog/full page/sidebar/drawer), background color, rounded corners, shadows, etc. End with "---".

---

### Section N: Section Name
- Specific description items
- Use bullet points for key elements

[Continue describing each section...]

---

## Function Description

| Function Module | Description |
|---|---|
| **Module Name** | Function description |

Analysis Steps

1. Identify Overall Structure
  • Page type: Modal dialog / Full page / Sidebar / Bottom drawer
  • Background: White/gray/gradient/image background
  • Special elements: Rounded corners, shadows, borders, dividers
2. Divide into Sections

Identify sections top to bottom, each containing:

  • Section type: Header / Tab bar / Content area / List / Table / Input area / Action bar
  • Key elements: Icons, text, buttons, input fields
  • Layout: Left-aligned/centered/right-aligned, horizontal/vertical
3. Identify Interactive Elements
  • Buttons: Primary (filled) / Secondary (text) / Icon buttons
  • Inputs: Single-line/multiline text/dropdown/date picker
  • Selectors: Radio/checkbox/switch/tab switch
  • Lists: List items, grid layout, card layout
4. Describe Functions

Infer functions from visual elements:

  • Form: Input, validation, submit
  • Navigation: Jump, tab switch, back
  • Display: List, detail, carousel
  • Feedback: Toast, modal, loading state

Notes

  • Recognize and include all text visible in the image
  • Mark states (disabled/selected/expanded) when visible
  • Use Arabic numerals for section numbers (1, 2, 3...)
  • Keep descriptions concise but complete

Comments

Markdown supported