Skip to main content
Glama

Detect UI elements in a screenshot

riv_ui_detect

Inspect a UI screenshot or design comp to detect elements, returning a nested tree with geometry, fills, and a numbered overlay PNG for building animated prototypes.

Instructions

Find the rectangles, text runs and images in a UI screenshot or design comp. Returns a nested element tree with rects, corner radii and fill colours, plus a numbered overlay PNG. Coordinates come back in the source resolution but are recovered from a downscaled analysis, so expect a pixel or two, and corner radii within about a pixel. Each element carries renderMode ("vector-panel" | "raster" — how it would be reconstructed; flat fills are test-rendered and turned into crops when more than 2% of their visible pixels would differ, the measured share is returned as renderRisk) and semanticHint ("panel" | "text" | "image" | "line" — what it looks like) as independent fields. Look at the overlay, give each element a role, and pass the result to riv_ui_prototype to get an animated .riv. This is geometry only — it does not know a button from a card. If you have the vector source, pass svgPath instead of imagePath: nothing is estimated, the element tree is the SVG's own group nesting, non-rectangular artwork comes through as "vector-shape" with its real bezier vertices, becomes "vector-text" (editable Rive text — the bundled Inter is substituted unless you pass fonts, and a run whose glyphs are missing is baked as a picture instead, always with a warning), embedded data comes through as its own pixels, and Figma layer names arrive as roleHint.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
fontsNoFonts for the SVG's <text>. svgPath only — pass the same list to riv_ui_prototype
minAreaNoIgnore regions smaller than this many pixels (default 576). imagePath only
svgPathNoVector source instead of a screenshot (Figma/Illustrator SVG export). Nothing is estimated: rects, fills, corner radii and nesting come straight from the file
figmaUrlNoA Figma link to one frame (Copy link to selection), fetched as SVG through the Figma REST API. Off unless FIGMA_TOKEN is set in the server's environment; without it this errors and nothing is requested. Everything else works offline
imagePathNoScreenshot or design comp (PNG/JPEG)
maxElementsNoKeep at most this many elements, largest first (default 120, or 300 for svgPath)
overlayPathNoWhere to write the numbered overlay PNG

Schema Changelog

Changes observed during successful MCP inspections.

  1. Addedv0.6.1

TDQS

A4.5/5.0
Behavior5/5

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

With no annotations provided, the description carries the full disclosure burden and discharges it thoroughly: precision limits ('expect a pixel or two, and corner radii within about a pixel'), the downscaled-analysis recovery caveat, the renderRisk >2% crop threshold, and failure modes (figmaUrl errors without FIGMA_TOKEN; font runs with missing glyphs are baked as pictures 'always with a warning'). It even discloses default font substitution (bundled Inter), which is exactly the beyond-annotations context this dimension rewards.

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

Conciseness3/5

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

The first sentence front-loads the purpose and every sentence carries technical content, so there is no fluff — but the entire description is one dense, unbroken paragraph that mixes precision notes, renderMode semantics, workflow advice, and SVG-mode detail. Bullet points or paragraph separation between imagePath mode and svgPath/figmaUrl mode would make the high-value guidance much more scannable for an agent.

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?

With no output schema, the description must explain return values, and it does: nested element tree with rects/corner radii/fills, numbered overlay PNG, renderMode/renderRisk/semanticHint/roleHint semantics, and coordinate behavior. Minor gaps remain (exact tree JSON shape, coordinate-origin conventions, error-message formats), but for a 7-parameter dual-mode tool with zero annotations this is highly complete.

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

Parameters5/5

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

Schema coverage is 100%, so the baseline is 3, but the description adds substantial behavioral meaning beyond the schema: fonts gain substitution/baking semantics, svgPath gains 'vector-shape'/'vector-text' output behavior, imagePath gains precision/estimation caveats, and figmaUrl gains the roleHint mapping for Figma layer names. This exceeds what the JSON schema provides for nearly every parameter.

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 states a specific verb and resource: 'Find the rectangles, text runs and images in a UI screenshot or design comp.' It differentiates from siblings by declaring 'This is geometry only — it does not know a button from a card' and by routing the output to riv_ui_prototype, which separates it from semantic/import/editing siblings like riv_import_svg, riv_critique, and riv_edit.

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

Usage Guidelines4/5

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

The description gives explicit mode-selection guidance: 'If you have the vector source, pass svgPath instead of imagePath' and explains when figmaUrl is viable (requires FIGMA_TOKEN). It also states the follow-on workflow ('pass the result to riv_ui_prototype') and the scope boundary (geometry only). It does not explicitly exclude or compare siblings by name beyond riv_ui_prototype, which costs the fifth point.

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