clearshot

截图分析

当大模型查看截图并试图直接从像素生成代码（或反馈、描述）时，往往会忽略空间关系、误读组件层级，并凭空编造设计细节。解决方法：在“看到图像”和“对图像作出回应”之间，构建一个结构化的中间表示。本技能提供的正是这一中间层。

入口条件

只有当图像是数字界面，且对话涉及构建、调试、设计或评估该 UI 时，才运行分析。幻灯片、文档和手写笔记不属于界面；DevTools、终端 UI 以及带有 UI 上下文的 CLI 输出则属于界面。

• 分享界面截图是为了询问截图内容（例如 Slack 讨论串、错误消息、管理记录）：直接回答问题，不做分析。
• 图像不是界面，但对话涉及构建 UI（例如“做一个有这张照片感觉的页面”）：将其视为灵感来源；描述它的氛围、质感和分量，不做结构化分析。
• 两者都不符合：静默跳过此技能。

分析层级

每次分析都结合事实与审美。不存在单独的“分析模式”或“定性模式”——每条观察都以具体信息（十六进制颜色值、像素测量值）为依据，同时说明它带来的感受（层级、分量、协调性）。这体现了资深设计师的思考方式：先感受，再探究原因，两者兼顾。

第 1 级：映射（始终运行）

将截图划分为 5×5 网格。对于每个被占据的区域，说明其中的内容（导航、主视觉、侧边栏、内容区、页脚、模态框、抽屉、空白区域），其相对于视口的大致尺寸，以及它与相邻区域的关系。

记录每个可见元素：类型（按钮、输入框、卡片、图像、图标、文本、链接、开关、下拉菜单、选项卡、徽章、头像、表格、图表等）、标签/内容（准确的可见文本）、位置（网格区域 + 相对位置）、状态（默认、悬停、活动、禁用、已选中、错误、加载中、聚焦）、尺寸（像素估值）、背景色（十六进制）、文本颜色（十六进制）、边框（可见/无 + 圆角，单位为 px）、阴影（无/小/中/大）、图标（若有）。按区域分组。

还要记录：视线首先落在哪里。布局是疏朗还是局促。层级是否清晰，还是彼此争夺注意力。哪些设计显得有意为之，哪些像是无心之举。

第 2 级：系统（始终运行）

提取可见内容背后的设计系统：

**颜色：**页面背景、卡片/表面背景、主要操作、次要操作、主要文本、次要/弱化文本、边框/分隔线、强调色、危险操作、成功状态。所有颜色值均使用十六进制。说明配色是否协调统一，还是拼凑而成——是否有明确的系统，还是颜色随意搭配？

**排版：**标题样式（字号，单位为 px；字重；大小写）、正文（字号、字重、行高）、说明文字/小字，以及可识别的字体系列。说明字体大小层级是否经过有意设计——字号是否按规律递进，还是变化杂乱？

**间距与形状：**间距模式（紧凑：4-8px / 舒适：12-16px / 宽松：24-32px+）、圆角模式（锐利：0-2px / 轻微：4-6px / 圆润：8-12px / 胶囊形）、整体密度（紧凑 / 舒适 / 宽松）。说明各区域的间距是一致还是不一致。

Level 3：蓝图（构建时升级）

当用户需要根据截图实现、重建或克隆 UI 时，运行此级别。如果对话涉及根据此截图编写代码，LLM 应升级到 Level 3。

布局架构： 页面布局模式（单列、侧边栏 + 内容区、仪表板网格、居中容器、全宽布局），各分区的内容布局（弹性行、弹性列、指定列数的 CSS 网格、堆叠），容器宽度（限制最大宽度或全宽），响应式场景（移动端 <640px／平板端 640-1024px／桌面端 >1024px），滚动线索（内容被截断、粘性页眉、固定底栏），z-index 层级（遮罩层、模态框、下拉菜单、提示消息）。

交互图： 主要 CTA（最重要的单一操作）、次要操作、导航模式（顶部导航、侧边导航、标签页、面包屑、底栏）、表单元素及分组、数据展示模式（表格、卡片网格、列表）、可见状态（加载中、空状态、错误、成功）。指出用户可能犹豫或感到不便的地方，以及哪些设计显得精致。

输出

根据上下文调整输出。不要为了凑结构而硬加标题和分区，一段话足以说明时就用一段话。

评审／反馈： 先指出问题或需要关注之处。每条观察都要以具体细节为依据（准确的十六进制值、间距或导致问题的元素），并说明其对体验的影响。不要面面俱到，只关注重要事项。

实现规范（Level 3）： 使用带标题的结构化输出，包括布局图、按分区列出的元素、设计令牌、布局架构、交互图。这是构建文档。

对比（两张截图）： 哪些地方发生了变化、有哪些改进、哪些方面退步了，以及还有哪些问题需要处理。

核心原则

具体明确。 “带有一些卡片的仪表板”绝不可接受。“3 列网格、约 280px 的卡片、#F9FAFB 背景、8px 圆角、柔和阴影——卡片显得轻飘，仿佛浮在空中”才是合格的描述。每条观察都必须同时包含测量值和判断。

优先使用十六进制值，而非颜色名称；使用像素值，而非模糊尺寸。 说 #3B82F6，不要说“蓝色”。说约 16px，不要说“有一点”。如果不确定，给出尽可能准确的估计，并注明不确定。

按分区分组，而非按元素类型分组。 导航中的元素应放在一起。不要把整个页面的按钮统统列在一起。

指出不明显之处。 自定义插画、不寻常的组件模式、暗示的动画、动态数据与静态数据的区别。这些都是容易导致实现偏差的地方。

配合用户的节奏。 快速迭代时，输出要简洁；要求详细克隆时，则要详尽。但分析深度（Level 1+2）始终相同——变化的是输出多少，而不是观察多少。