mcpField
U
ui-layout-analyzer

ui-layout-analyzer

github.com/yangsonhung设计与 UI1855 次安装12 周前更新
代码仓库

关于 ui-layout-analyzer

用于分析 UI 截图并结构化描述页面布局、视觉层级、控件和可能的工作流程，适合了解现有界面，不用于设计界面或审查代码。

主要功能

  1. 01识别整体页面结构
  2. 02按区域拆解界面
  3. 03描述可见控件与状态
  4. 04推断可能的用户流程

适用场景

  1. 01整理截图中的页面布局
  2. 02了解陌生界面的控件
  3. 03概述可能的导航和表单行为

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yangsonhung/awesome-agent-skills --skill ui-layout-analyzer

安装后在 Claude Code 中输入/ui-layout-analyzer确认已加载。

详细介绍

UI 布局分析器

概述

分析用户提供的 UI 截图，并输出结构化的布局描述和功能分析。此技能专注于界面截图，描述页面结构、视觉分区、层级、控件和可能的用户工作流，不设计新的 UI，也不审查实现代码。

使用场景

当用户提供 UI 图片并请求分析时，使用此技能。

不要使用

以下情况不要使用此技能：

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

指令

严格遵循以下格式：

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

分析步骤

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

从上到下识别各个分区，每个分区包括：

  • 分区类型：页眉 / 标签栏 / 内容区 / 列表 / 表格 / 输入区 / 操作栏
  • 关键元素：图标、文本、按钮、输入框
  • 布局：左对齐 / 居中 / 右对齐、水平 / 垂直
3. 识别交互元素
  • 按钮：主要按钮（填充式） / 次要按钮（文本式） / 图标按钮
  • 输入项：单行 / 多行文本、下拉菜单 / 日期选择器
  • 选择器：单选框 / 复选框 / 开关 / 标签切换
  • 列表：列表项、网格布局、卡片布局
4. 描述功能

根据视觉元素推断功能：

  • 表单：输入、验证、提交
  • 导航：跳转、标签切换、返回
  • 展示：列表、详情、轮播
  • 反馈：提示消息、模态框、加载状态

注意事项

  • 识别并包含图片中所有可见文本
  • 标注可见状态（禁用 / 已选中 / 已展开）
  • 使用阿拉伯数字标记分区序号（1、2、3……）
  • 描述应简洁但完整

评论

支持 Markdown