UI Layout Analyzer

Analyze the provided UI screenshot and output structured layout description and functional analysis.

When to Use

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

Output Format

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