Ui layout analyzer cn

Skill YangsonHung/awesome-agent-skills/skills/zh-cn/ui-layout-analyzer-cn

A collection of AI Agent Skills that provide professional domain capabilities for intelligent assistants like Claude Code.

Install

npx -y skills add YangsonHung/awesome-agent-skills --skill ui-layout-analyzer-cn

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

14 stars14 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

SKILL.md

2.4 KB, as published. Nobody here has run it

UI 布局分析器

Overview

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

何时使用

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

不要使用

以下场景不应使用本技能：

非 UI 图片（照片、示意图、非界面截图的图表）
要求设计或创建 UI（请使用 ui-ux-pro-max）
对 UI 实现代码的代码审查（请使用 code-reviewer）

使用说明

严格按照以下格式输出：

## UI 布局排版描述

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

---

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

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

---

## 功能描述

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

分析步骤

1. 识别整体结构

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

2. 划分区块

从上到下识别每个区块，每个区块包含：

区块类型：标题栏 / 标签栏 / 内容区 / 列表 / 表格 / 输入区 / 操作栏等
关键元素：图标、文字、按钮、输入框等
排列方式：左对齐/居中/右对齐、横向/纵向

3. 识别交互元素

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

4. 描述功能

基于视觉元素推断功能：

表单类：输入、验证、提交
导航类：跳转、切换 Tab、返回
展示类：列表、详情、轮播
反馈类：Toast、弹窗、加载状态

注意事项

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