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
1---2name: ui-layout-analyzer3description: Use when analyzing a UI screenshot to describe layout structure and interface functionality.4---5
6# UI Layout Analyzer
7
8## Overview
9
10Analyze 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.
11
12## When to Use
13
14Use this skill when the user provides a UI image and requests analysis.
15
16## Do not use
17
18Do not use this skill for:
19- Non-UI images (photos, diagrams, charts that are not interface screenshots)
20- Requests to design or create UI (use ui-ux-pro-max instead)
21- Code review of UI implementation (use code-reviewer instead)
22
23## Instructions
24
25Follow this format exactly:
26
27```markdown
28## UI Layout Description
29
30### Overall Structure
31Describe the overall structure type (modal dialog/full page/sidebar/drawer), background color, rounded corners, shadows, etc. End with "---".
32
33---
34
35### Section N: Section Name
36- Specific description items
37- Use bullet points for key elements
38
39[Continue describing each section...]
40
41---
42
43## Function Description
44
45| Function Module | Description |
46|---|---|
47| **Module Name** | Function description |
48```
49
50## Analysis Steps
51
52### 1. Identify Overall Structure
53- Page type: Modal dialog / Full page / Sidebar / Bottom drawer
54- Background: White/gray/gradient/image background
55- Special elements: Rounded corners, shadows, borders, dividers
56
57### 2. Divide into Sections
58Identify sections top to bottom, each containing:
59- Section type: Header / Tab bar / Content area / List / Table / Input area / Action bar
60- Key elements: Icons, text, buttons, input fields
61- Layout: Left-aligned/centered/right-aligned, horizontal/vertical
62
63### 3. Identify Interactive Elements
64- Buttons: Primary (filled) / Secondary (text) / Icon buttons
65- Inputs: Single-line/multiline text/dropdown/date picker
66- Selectors: Radio/checkbox/switch/tab switch
67- Lists: List items, grid layout, card layout
68
69### 4. Describe Functions
70Infer functions from visual elements:
71- Form: Input, validation, submit
72- Navigation: Jump, tab switch, back
73- Display: List, detail, carousel
74- Feedback: Toast, modal, loading state
75
76## Notes
77
78- Recognize and include all text visible in the image
79- Mark states (disabled/selected/expanded) when visible
80- Use Arabic numerals for section numbers (1, 2, 3...)
81- Keep descriptions concise but complete
yangsonhung