# UI Layout Analyzer Cn

> 当用户需要根据 UI 截图输出布局结构和功能说明时使用。

- Skill: `yangsonhung/ui-layout-analyzer-cn` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yangsonhung/ui-layout-analyzer-cn`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yangsonhung/ui-layout-analyzer-cn/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yangsonhung (https://skillmd.com/u/yangsonhung)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/yangsonhung/ui-layout-analyzer-cn

---


# UI 布局分析器

## Overview

根据用户提供的 UI 截图，分析并输出结构化的布局排版描述和功能描述。技能聚焦界面截图本身，说明页面结构、视觉区块、信息层级、控件和可能的用户流程，不负责设计新 UI 或审查实现代码。

## 何时使用

当用户提供一张 UI 图片并请求分析时使用此 skill。

## 不要使用

以下场景不应使用本技能：
- 非 UI 图片（照片、示意图、非界面截图的图表）
- 要求设计或创建 UI（请使用 ui-ux-pro-max）
- 对 UI 实现代码的代码审查（请使用 code-reviewer）

## 使用说明

严格按照以下格式输出：

```markdown
## UI 布局排版描述

### 整体结构
描述整体结构特点（模态对话框/全屏页面/侧边栏等）、背景色、圆角、阴影等视觉特征。结尾用「---」分隔线。

---

### 区块 N：区块名称
- 具体描述项
- 使用无序列表列举关键元素

[继续描述每个区块...]

---

## 功能描述

| 功能模块 | 说明 |
|---|---|
| **模块名称** | 功能说明 |
```

## 分析步骤

### 1. 识别整体结构
- 页面类型：模态对话框 / 全屏页面 / 侧边栏 / 底部抽屉 等
- 背景：白色/灰色/渐变/图片背景
- 特殊元素：圆角、阴影、边框、分隔线

### 2. 划分区块
从上到下识别每个区块，每个区块包含：
- 区块类型：标题栏 / 标签栏 / 内容区 / 列表 / 表格 / 输入区 / 操作栏 等
- 关键元素：图标、文字、按钮、输入框等
- 排列方式：左对齐/居中/右对齐、横向/纵向

### 3. 识别交互元素
- 按钮：主要按钮（填充色）/ 次要按钮（文字型）/ 图标按钮
- 输入：单行输入/多行文本/下拉选择/日期选择
- 选择器：单选/多选/开关/Tab切换
- 列表：列表项、网格布局、卡片布局

### 4. 描述功能
基于视觉元素推断功能：
- 表单类：输入、验证、提交
- 导航类：跳转、切换 Tab、返回
- 展示类：列表、详情、轮播
- 反馈类：Toast、弹窗、加载状态

## 注意事项

- 图片中的文字需要完整识别并包含在描述中
- 状态（如禁用/选中/展开）需要标注
- 区块编号使用中文数字（一、二、三...）
- 保持描述简洁但信息完整