Loading ToolBench
MCP server for Design Mode — visual UI annotation and inspection overlay for Claude Code. Provides tools to inject an interactive overlay into web pages for element inspection, annotation, and source file mapping.
Design Mode MCP has fundamental definition quality gaps. While tool naming follows verb conventions (activate, deactivate, read_annotations, set_annotation, etc.), parameter descriptions are sparse or missing, input schemas are not visible in the provided source code, and output schemas are completely undocumented. The server operates as a Chrome DevTools Protocol wrapper for browser-based UI annotation and inspection. Tool descriptions are present but lack detail on return types, prerequisites, and recovery guidance. No error handling patterns are evident. Parameters like 'selector' in inspect_element and highlight_element lack format specifications, constraint documentation, or examples. The tool set is composition-friendly (each tool does one thing), but the definitions themselves do not meet production standards for LLM-driven agent planning.
Inject the Design Mode overlay into the current browser page. Shows hover highlights, click-to-select, annotation panels, and a toolbar.
Remove the Design Mode overlay from the page.
Remove an annotation from a specific element in Design Mode.
Retrieve the DOM structure and element tree of the current page with Design Mode metadata.
Highlight a specific element on the page with the Design Mode overlay visualization.
Get detailed information about a specific element on the page including its DOM structure, styles, computed properties, and box model.
Read all annotations created in Design Mode from the active page. Returns structured data of all annotated elements with their metadata.
Output schemas completely undocumented. read_annotations, get_page_structure, and inspect_element return unspecified structured data. LLMs cannot plan downstream operations without knowing returned field names and types.
Input parameter descriptions are minimal or missing. 'selector' in inspect_element and highlight_element lacks format specification (CSS selector syntax, regex support?). 'element_id' in set_annotation and delete_annotation lacks definition: is it a DOM node ID, a data attribute, or an internal identifier?
Tool descriptions lack recovery guidance and error context. No description explains what happens if a selector matches no elements, if annotations cannot be read from the current page, or how to handle timeout failures. Error responses will leave LLMs stuck.
| Scored | Grade | Overall | Spec posture | Rubric |
|---|---|---|---|---|
| 2026-09-23 | F | 36 | 2026-07-28+ | v2 |
Create or update an annotation on a specific element in Design Mode.
Change the viewport dimensions for responsive design testing.
No input validation constraints visible. set_annotation accepts arbitrary 'text' and 'element_id' with no length limits, character restrictions, or uniqueness guarantees. Unbounded parameters invite malformed calls.
read_annotations and get_page_structure have no pagination or result limiting declared. If a page has 1000+ annotated elements, the response could exhaust context window without guidance on pagination, limits, or truncation.