Name: ui-layout-analyzer-cn
Author: yangsonhung

Imported from yangsonhung/awesome-agent-skills (skills/zh-cn/ui-layout-analyzer-cn/SKILL.md). Install upstream with npx skills add yangsonhung/awesome-agent-skills --skill ui-layout-analyzer-cn. Copyright stays with the author.

UI 布局分析器

Overview

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

何时使用

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

不要使用

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

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

使用说明

严格按照以下格式输出：

## UI 布局排版描述

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

---

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

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

---

## 功能描述

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

分析步骤

1. 识别整体结构

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

2. 划分区块

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

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

3. 识别交互元素

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

4. 描述功能

基于视觉元素推断功能：

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

注意事项

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

Install ui-layout-analyzer-cn and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "yangsonhung-awesome-agent-skills-ui-layout-analyzer-cn", "kind": "skill", "name": "ui-layout-analyzer-cn", "description": "当用户需要根据 UI 截图输出布局结构和功能说明时使用。", "publisher": "yangsonhung", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "skills-sh" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "当用户需要根据 UI 截图输出布局结构和功能说明时使用。" ], "primary": false, "metadata": { "source": { "provider": "skills.sh", "repository": "https://github.com/yangsonhung/awesome-agent-skills", "path": "skills/zh-cn/ui-layout-analyzer-cn/SKILL.md", "ref": "HEAD", "url": "https://github.com/yangsonhung/awesome-agent-skills/blob/HEAD/skills/zh-cn/ui-layout-analyzer-cn/SKILL.md", "key": "yangsonhung/awesome-agent-skills/skills/zh-cn/ui-layout-analyzer-cn/SKILL.md" } }, "instructions": "# UI 布局分析器\n\n## Overview\n\n根据用户提供的 UI 截图，分析并输出结构化的布局排版描述和功能描述。技能聚焦界面截图本身，说明页面结构、视觉区块、信息层级、控件和可能的用户流程，不负责设计新 UI 或审查实现代码。\n\n## 何时使用\n\n当用户提供一张 UI 图片并请求分析时使用此 skill。\n\n## 不要使用\n\n以下场景不应使用本技能：\n- 非 UI 图片（照片、示意图、非界面截图的图表）\n- 要求设计或创建 UI（请使用 ui-ux-pro-max）\n- 对 UI 实现代码的代码审查（请使用 code-reviewer）\n\n## 使用说明\n\n严格按照以下格式输出：\n\n```markdown\n## UI 布局排版描述\n\n### 整体结构\n描述整体结构特点（模态对话框/全屏页面/侧边栏等）、背景色、圆角、阴影等视觉特征。结尾用「---」分隔线。\n\n---\n\n### 区块 N：区块名称\n- 具体描述项\n- 使用无序列表列举关键元素\n\n[继续描述每个区块...]\n\n---\n\n## 功能描述\n\n| 功能模块 | 说明 |\n|---|---|\n| **模块名称** | 功能说明 |\n```\n\n## 分析步骤\n\n### 1. 识别整体结构\n- 页面类型：模态对话框 / 全屏页面 / 侧边栏 / 底部抽屉等\n- 背景：白色/灰色/渐变/图片背景\n- 特殊元素：圆角、阴影、", "cost": { "context_tokens": 256 } }

ui-layout-analyzer-cn

About