Skip to main content
Glama

inspect_ui

Analyze UI screenshots to extract structured design specifications (layout, typography, colors, spacing, components) and actionable implementation suggestions for replicating or modifying frontend code.

Instructions

用 MiMo-V2.5 视觉模型对 UI 截图做工程化分析,专供 Coding Agent 复刻/修改前端使用(结果是结构化设计数据,不是文学描述)。返回 13 项:Layout、近似尺寸与比例、Grid/columns、Spacing、Typography、Colors、边框/圆角/阴影、组件层级、图片位置与比例、响应式线索、交互线索、差异/问题、可执行实现建议——可直接用于写 HTML/CSS/React。

主动调用时机:用户要"复刻这个页面"、"按截图/设计图改前端"、"根据参考图实现 UI"时。

参数:image_path 或 image_paths 二选一(多图时逐个说明角色与差异);task 说明目标(如"我要复刻这个页面");project_context 可选,提供技术栈等背景。

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
taskNo任务目标,如'我要复刻这个页面'、'把当前页面改成目标图的样子'。
image_pathNo单张 UI 截图路径(与 image_paths 二选一)。本地图片路径:Windows 绝对路径(如 C:\screenshots\a.png)或相对项目根目录的路径(如 ./screenshots/a.png)。支持中文、空格、反斜杠。支持 JPEG/JPG/PNG/WebP/GIF/BMP,单张 Base64 不超过 50MB。
image_pathsNo多张 UI 截图路径(与 image_path 二选一)。本地图片路径:Windows 绝对路径(如 C:\screenshots\a.png)或相对项目根目录的路径(如 ./screenshots/a.png)。支持中文、空格、反斜杠。支持 JPEG/JPG/PNG/WebP/GIF/BMP,单张 Base64 不超过 50MB。
project_contextNo可选:项目背景(技术栈、框架、已有样式系统等),帮助给出更贴合的工程建议。
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the burden of behavioral disclosure. It reveals the model used (MiMo-V2.5), that the output is structured design data rather than literary prose, the exact 13 result categories, and the timing for proactive invocation. It stops short of stating return format details (e.g., whether output is JSON or a document) or any side effects/auth needs, but given that the tool is a vision analysis over local image paths, the disclosed behavior is adequately transparent for an AI agent.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is substantial but well-structured: it leads with the model and purpose, then a compact list of the 13 return items, then a clear '主动调用时机' paragraph, and finally parameter guidance. Each sentence earns its place, though the 13-item enumeration is somewhat long. Front-loading is effective: the first sentence immediately tells the agent what the tool does and for whom.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with no annotations and no output schema, the description does a solid job: it explains the output structure (13 named items), gives concrete trigger phrases, and clarifies parameter roles. It doesn't specify the exact output format (JSON vs. text) or how errors are handled, which are minor gaps. Given the tool's moderate complexity (mutually exclusive parameters, optional context, multi-image support), the description is sufficiently complete for an agent to invoke it correctly in most scenarios.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the structured schema already documents all four parameters thoroughly, including file path examples and supported formats. The description adds value beyond the schema by explaining the conceptual roles of the parameters: '多图时逐个说明角色与差异' for image_paths, 'task 说明目标' with examples, and 'project_context 可选,提供技术栈等背景'. This semantic framing helps the agent map user intent to the correct parameter values.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a specific verb ('用 MiMo-V2.5 视觉模型对 UI 截图做工程化分析') and clearly identifies the resource (UI screenshots) and purpose (replicating/modifying frontend for Coding Agents). It distinguishes itself from generic image analysis by emphasizing structured design data, listing the 13 return items, and stating when to proactively call it (e.g., user asks to '复刻这个页面' or '按截图/设计图改前端'). This separates it from siblings like analyze_image or compare_images.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description includes a dedicated '主动调用时机' section that explicitly states when to use this tool ('用户要复刻这个页面', '按截图/设计图改前端', '根据参考图实现 UI'). It also clarifies that task describes the goal and project_context is optional, and the image_path/image_paths mutual exclusivity guides selection. Although it does not name sibling alternatives explicitly to exclude, the trigger conditions are concrete and distinct enough to prevent confusion with analyze_image/compare_images.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Channel-Carl/mimo-vision'

If you have feedback or need assistance with the MCP directory API, please join our Discord server