Overview
Based on the UI screenshot provided by the user, analyze and output a structured layout description and functional description. The skill focuses on the interface screenshot itself, explaining the page structure, visual blocks, information hierarchy, controls, and possible user flows; it is not responsible for designing a 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
The following scenarios should not use this skill:
- Non-UI images (photos, diagrams, charts that are not interface screenshots)
- Requests to design or create a UI (please use ui-ux-pro-max)
- Code review of UI implementation code (please use code-reviewer)
Usage Instructions
Strictly output in the following format:
## UI 布局排版描述
### 整体结构
描述整体结构特点（模态对话框/全屏页面/侧边栏等）、背景色、圆角、阴影等视觉特征。结尾用「---」分隔线。
---
### 区块 N：区块名称
- 具体描述项
- 使用无序列表列举关键元素
[继续描述每个区块...]
---
## 功能描述
| 功能模块 | 说明 |
|---|---|
| **模块名称** | 功能说明 |
Analysis Steps
1. Identify the overall structure
- Page type: modal dialog / full-screen page / sidebar / bottom drawer, etc.
- Background: white/gray/gradient/image background
- Special elements: rounded corners, shadows, borders, dividers
2. Divide into blocks
Identify each block from top to bottom; each block includes:
- Block type: title bar / tab bar / content area / list / table / input area / action bar, etc.
- Key elements: icons, text, buttons, input fields, etc.
- Arrangement: left-aligned/centered/right-aligned, horizontal/vertical
3. Identify interactive elements
- Buttons: primary button (filled color) / secondary button (text style) / icon button
- Input: single-line input/multiline text/dropdown select/date picker
- Selectors: single choice/multiple choice/switch/Tab switching
- Lists: list items, grid layout, card layout
4. Describe functionality
Infer functionality based on visual elements:
- Form type: input, validation, submission
- Navigation type: jump, Tab switching, back
- Display type: list, details, carousel
- Feedback type: Toast, popup, loading state
Notes
- Text in the image must be fully recognized and included in the description
- States (such as disabled/selected/expanded) must be annotated
- Use Chinese numerals for block numbering (one, two, three...)
- Keep the description concise but complete in information