界面布局分析

解决什么问题

在 UI 设计评审、前端联调或需求梳理场景中，我们常遇到这类痛点：一张界面截图摆在面前，却难以快速理清它的结构脉络——顶部是标题栏还是导航？中间的内容区如何划分？底部有没有操作栏？每个区块包含哪些控件？这些信息散落在视觉细节里，人工整理耗时且容易遗漏。UI 布局分析器聚焦这一痛点，通过系统化的分析流程，将一张截图转化为结构化的布局描述与功能推断，让"长什么样"和"能做什么"一目了然。

核心能力与工作步骤

核心能力在于将视觉信息结构化。技能接收 UI 截图作为输入，按固定流程展开分析：

• 识别整体结构：判断页面类型（如模态对话框、全屏页面），捕捉背景特征（白/灰/渐变）和特殊元素（圆角、阴影、边框）。
• 划分视觉区块：从上到下拆解界面，标注每个区块的类型（标题栏、列表区、输入区等）、关键元素（图标、按钮、输入框）和排列方式（对齐/横纵分布）。
• 识别交互元素：区分按钮类型（主要填充/次要文字/图标）、输入控件（单行/多行/下拉）、选择器（单选/多选/开关）和列表形式（列表项/网格/卡片）。
• 推断功能逻辑：基于控件组合推测用户操作路径——表单类页面的验证提交流程、导航类页面的跳转逻辑、展示类页面的内容轮播机制等。
• 规范输出：严格按模板生成结构化结果，包含区块清单、功能推断表和状态标注（如禁用、选中、展开状态）。

输出结果以 UiAnalysisArtifact 工件形式交付，可直接被下游 UI 设计技能用于界面重设计，或由文档拆分工具补充前端开发文档。

适用边界与注意点

仅适用于 UI 截图分析。若输入是风景照片、数据图表或手绘草图，技能无法准确识别；若需求是"帮我设计一个登录页"或"检查这段 CSS 是否有问题"，请转用专用的 UI 设计技能或代码评审工具。分析过程不涉及代码实现细节，仅聚焦界面本身的视觉与功能结构。