Skip to main content
Glama
Sign In

Screenrove: UI Design Reference & Screenshots (free Mobbin alternative)

by com.screenrove
OverviewDiscussionsAdmin

Let the user pick a reference

pick_reference

Show a person 2 to 6 matching references side by side in their browser and let them click the one to build from. Returns a URL to open for them; then call wait_for_pick with the pickId for their choice and a build prompt. Only when a person is there to choose: autonomous agents should use build_recipe.

Tool call template

This tool declares no required parameters. Add optional parameters from the input schema as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {},
    "name": "pick_reference"
  }
}

Input Schema

NameRequiredDescriptionDefault
qNoSearch words, e.g. "pricing page", "onboarding", "empty state". The best matches become the options. Can be combined with tag filters, or left out when tag filters are given.
goalNoWhat the user is building, shown on the page and used in the build prompt, e.g. "NSDR premium upgrade page".
kindNoOnly search this kind of screen.
taskNoTag filter, as in search_screens, e.g. create.
countNoHow many options to show when searching, 2 to 6.
stackNoPreferred stack for the build prompt.
stateNoTag filter, as in search_screens, e.g. empty.
patternNoTag filter, as in search_screens, e.g. pricing-page.
productNoOnly search this product id.
screensNoComma-separated screen ids to show instead of searching, e.g. from an earlier search_screens.
componentNoTag filter, as in search_screens, e.g. comparison-table.

Output Schema

NameRequiredDescriptionDefault
urlNo
nextNo
pickIdNo
statusNo
optionsNo
canvasUrlNo

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed13 schema fields changed
    • changedInput schema / properties / component / description
      Previous value: -"Tag filter, as in searchScreens, e.g. comparison-table."New value: +"Tag filter, as in search_screens, e.g. comparison-table."
    • addedInput schema / properties / count / maximum
      Added value: +6
    • addedInput schema / properties / count / minimum
      Added value: +2
    • changedInput schema / properties / count / type
      Previous value: -"number"New value: +"integer"
    • changedInput schema / properties / pattern / description
      Previous value: -"Tag filter, as in searchScreens, e.g. pricing-page."New value: +"Tag filter, as in search_screens, e.g. pricing-page."
    • changedInput schema / properties / screens / description
      Previous value: -"Comma-separated screen ids to show instead of searching, e.g. from an earlier searchScreens."New value: +"Comma-separated screen ids to show instead of searching, e.g. from an earlier search_screens."
    • changedInput schema / properties / state / description
      Previous value: -"Tag filter, as in searchScreens, e.g. empty."New value: +"Tag filter, as in search_screens, e.g. empty."
    • changedInput schema / properties / task / description
      Previous value: -"Tag filter, as in searchScreens, e.g. create."New value: +"Tag filter, as in search_screens, e.g. create."
    • removedOutput schema / properties / canvasUrl / description
      Removed value: -"Experimental pan-and-zoom canvas view of the same pick."
    • removedOutput schema / properties / next / description
      Removed value: -"What to do next."
    • removedOutput schema / properties / options / items
      Removed value: -{
-  "properties": {
-    "id": {
-      "type": "string"
-    },
-    "imageUrl": {
-      "type": "string"
-    },
-    "kind": {
-      "description": "flow is an onboarding step, marketing a public web page, product an in-app screen.",
-      "enum": [
-        "flow",
-        "marketing",
-        "product"
-      ],
-      "type": "string"
-    },
-    "notes": {
-      "type": "string"
-    },
-    "previewUrl": {
-      "description": "Screen-sized preview (the top of long pages). Present on pick options and related screens.",
-      "type": "string"
-    },
-    "product": {
-      "type": "string"
-    },
-    "productName": {
-      "description": "Present on pick options and related screens.",
-      "type": "string"
-    },
-    "scope": {
-      "description": "What was captured. marketing: logged-out marketing pages only. public-demo: logged out, but real\nproduct surfaces or public demos were used. task-incomplete: signed in, but the journey stops before\nits result. signed-in: signed in, and the journey reaches its result.\n",
-      "enum": [
-        "marketing",
-        "public-demo",
-        "task-incomplete",
-        "signed-in"
-      ],
-      "type": "string"
-    },
-    "style": {
-      "description": "What the screen looks like, judged from its first viewport (tags/style-spec.md). Searchable through q.",
-      "properties": {
-        "accentHue": {
-          "description": "The accent hue of buttons and highlights, or none.",
-          "type": "string"
-        },
-        "aesthetic": {
-          "description": "One or two of minimal, editorial, playful, technical, glassy, bold, warm, data-dense, retro, corporate.",
-          "items": {
-            "type": "string"
-          },
-          "type": "array"
-        },
-        "caption": {
-          "description": "What makes the screen look the way it does.",
-          "type": "string"
-        },
-        "colorMode": {
-          "enum": [
-            "monochrome",
-            "single-accent",
-            "multi-color",
-            "pastel",
-            "vivid-gradient"
-          ],
-          "type": "string"
-        },
-        "density": {
-          "enum": [
-            "airy",
-            "balanced",
-            "dense"
-          ],
-          "type": "string"
-        },
-        "headingFont": {
-          "enum": [
-            "sans",
-            "serif",
-            "mono",
-            "rounded",
-            "display"
-          ],
-          "type": "string"
-        },
-        "imagery": {
-          "description": "One or two of none, product-ui, photography, illustration, 3d, icons-only, charts.",
-          "items": {
-            "type": "string"
-          },
-          "type": "array"
-        },
-        "theme": {
-          "enum": [
-            "light",
-            "dark",
-            "mixed"
-          ],
-          "type": "string"
-        }
-      },
-      "type": "object"
-    },
-    "tags": {
-      "description": "Design-problem tags. The first pattern is the primary one. See listTags.",
-      "properties": {
-        "component": {
-          "items": {
-            "type": "string"
-          },
-          "type": "array"
-        },
-        "pattern": {
-          "items": {
-            "type": "string"
-          },
-          "type": "array"
-        },
-        "state": {
-          "items": {
-            "type": "string"
-          },
-          "type": "array"
-        },
-        "task": {
-          "items": {
-            "type": "string"
-          },
-          "type": "array"
-        }
-      },
-      "type": "object"
-    },
-    "title": {
-      "type": "string"
-    }
-  },
-  "type": "object"
-}
    • removedOutput schema / properties / status / enum
      Removed value: -[
-  "pending"
-]
    • removedOutput schema / properties / url / description
      Removed value: -"Open this for the user."
  2. Changed1 schema field changed
    • addedOutput schema / properties / options / items / properties / style
      Added value: +{
+  "description": "What the screen looks like, judged from its first viewport (tags/style-spec.md). Searchable through q.",
+  "properties": {
+    "accentHue": {
+      "description": "The accent hue of buttons and highlights, or none.",
+      "type": "string"
+    },
+    "aesthetic": {
+      "description": "One or two of minimal, editorial, playful, technical, glassy, bold, warm, data-dense, retro, corporate.",
+      "items": {
+        "type": "string"
+      },
+      "type": "array"
+    },
+    "caption": {
+      "description": "What makes the screen look the way it does.",
+      "type": "string"
+    },
+    "colorMode": {
+      "enum": [
+        "monochrome",
+        "single-accent",
+        "multi-color",
+        "pastel",
+        "vivid-gradient"
+      ],
+      "type": "string"
+    },
+    "density": {
+      "enum": [
+        "airy",
+        "balanced",
+        "dense"
+      ],
+      "type": "string"
+    },
+    "headingFont": {
+      "enum": [
+        "sans",
+        "serif",
+        "mono",
+        "rounded",
+        "display"
+      ],
+      "type": "string"
+    },
+    "imagery": {
+      "description": "One or two of none, product-ui, photography, illustration, 3d, icons-only, charts.",
+      "items": {
+        "type": "string"
+      },
+      "type": "array"
+    },
+    "theme": {
+      "enum": [
+        "light",
+        "dark",
+        "mixed"
+      ],
+      "type": "string"
+    }
+  },
+  "type": "object"
+}
  3. Changed9 schema fields changed
    • addedInput schema / properties / component
      Added value: +{
+  "description": "Tag filter, as in searchScreens, e.g. comparison-table.",
+  "type": "string"
+}
    • addedInput schema / properties / pattern
      Added value: +{
+  "description": "Tag filter, as in searchScreens, e.g. pricing-page.",
+  "type": "string"
+}
    • changedInput schema / properties / q / description
      Previous value: -"Search words, e.g. \"pricing page\", \"onboarding\", \"empty state\". The best matches become the options."New value: +"Search words, e.g. \"pricing page\", \"onboarding\", \"empty state\". The best matches become the options. Can be combined with tag filters, or left out when tag filters are given."
    • addedInput schema / properties / state
      Added value: +{
+  "description": "Tag filter, as in searchScreens, e.g. empty.",
+  "type": "string"
+}
    • addedInput schema / properties / task
      Added value: +{
+  "description": "Tag filter, as in searchScreens, e.g. create.",
+  "type": "string"
+}
    • changedOutput schema / properties / options / items / properties / previewUrl / description
      Previous value: -"Screen-sized preview (the top of long pages). Present on pick options."New value: +"Screen-sized preview (the top of long pages). Present on pick options and related screens."
    • changedOutput schema / properties / options / items / properties / productName / description
      Previous value: -"Present on pick options."New value: +"Present on pick options and related screens."
    • addedOutput schema / properties / options / items / properties / scope
      Added value: +{
+  "description": "What was captured. marketing: logged-out marketing pages only. public-demo: logged out, but real\nproduct surfaces or public demos were used. task-incomplete: signed in, but the journey stops before\nits result. signed-in: signed in, and the journey reaches its result.\n",
+  "enum": [
+    "marketing",
+    "public-demo",
+    "task-incomplete",
+    "signed-in"
+  ],
+  "type": "string"
+}
    • addedOutput schema / properties / options / items / properties / tags
      Added value: +{
+  "description": "Design-problem tags. The first pattern is the primary one. See listTags.",
+  "properties": {
+    "component": {
+      "items": {
+        "type": "string"
+      },
+      "type": "array"
+    },
+    "pattern": {
+      "items": {
+        "type": "string"
+      },
+      "type": "array"
+    },
+    "state": {
+      "items": {
+        "type": "string"
+      },
+      "type": "array"
+    },
+    "task": {
+      "items": {
+        "type": "string"
+      },
+      "type": "array"
+    }
+  },
+  "type": "object"
+}
  4. Changed1 schema field changed
    • changedInput schema / properties / q / description
      Previous value: -"Search words, e.g. \"pricing page\". The best matches become the options."New value: +"Search words, e.g. \"pricing page\", \"onboarding\", \"empty state\". The best matches become the options."
  5. Changed1 schema field changed
    • changedOutput schema / (root)
      Previous value: -nullNew value: +{
+  "properties": {
+    "canvasUrl": {
+      "description": "Experimental pan-and-zoom canvas view of the same pick.",
+      "type": "string"
+    },
+    "next": {
+      "description": "What to do next.",
+      "type": "string"
+    },
+    "options": {
+      "items": {
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "imageUrl": {
+            "type": "string"
+          },
+          "kind": {
+            "description": "flow is an onboarding step, marketing a public web page, product an in-app screen.",
+            "enum": [
+              "flow",
+              "marketing",
+              "product"
+            ],
+            "type": "string"
+          },
+          "notes": {
+            "type": "string"
+          },
+          "previewUrl": {
+            "description": "Screen-sized preview (the top of long pages). Present on pick options.",
+            "type": "string"
+          },
+          "product": {
+            "type": "string"
+          },
+          "productName": {
+            "description": "Present on pick options.",
+            "type": "string"
+          },
+          "title": {
+            "type": "string"
+          }
+        },
+        "type": "object"
+      },
+      "type": "array"
+    },
+    "pickId": {
+      "type": "string"
+    },
+    "status": {
+      "enum": [
+        "pending"
+      ],
+      "type": "string"
+    },
+    "url": {
+      "description": "Open this for the user.",
+      "type": "string"
+    }
+  },
+  "type": "object"
+}
  6. First observed

TDQS

A4.5/5.0
Behavior4/5

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

Annotations cover the safety profile (readOnlyHint=false, non-destructive, non-idempotent), and the description adds the crucial behavioral fact that this opens an interactive browser session the user must act on and that the pick is completed via wait_for_pick. It doesn't mention session expiry or what happens if the user never picks, which keeps it from a 5.

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

Conciseness5/5

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

Three sentences, front-loaded with the core action and return value, then the follow-up, then the exclusion rule. No filler.

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

Completeness5/5

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

The two-step human-in-the-loop workflow, the URL return, and the fallback for autonomous agents are all covered, and an output schema exists to handle return-shape details. Nothing an agent needs to invoke this correctly is missing.

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

Parameters3/5

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

With 11 parameters at 100% schema description coverage, the schema already documents each field thoroughly, including the 2-6 count bound and tag-filter examples. The description adds no parameter-level detail beyond implying a search-and-filter model, so the baseline of 3 is appropriate.

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?

States a concrete verb, resource, and scope: shows 2-6 matching references side by side and lets the user click one to build from. It also clarifies the return value (a URL to open) and the required follow-up (wait_for_pick with the pickId), which no sibling tool does.

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?

Explicitly names the condition ('Only when a person is there to choose') and the alternative ('autonomous agents should use build_recipe'). It also states the next step in the workflow, so an agent knows both when to select this tool and what to do after it.

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

All Screenrove: UI Design Reference & Screenshots (free Mobbin alternative) toolsInspect
Try in Browser
Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources