Ui Layout Analyzer

---
name: ui-layout-analyzer
description: Analyze UI images and output layout description with functional analysis. Triggers when user sends a UI screenshot and says "analyze this UI", "describe this interface layout", "what does this UI do", or "output UI layout and function description".
---

# 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.

## 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:

```markdown
## 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