Inspect Element — Read Design Mode State
Read element data from the Design Mode overlay to provide detailed information about selected or specific elements.
Read a Specific Element by Selector
Use mcp__design-mode__read_element with the CSS selector. Returns computed styles, box model, source file mapping, and text content.
Read All Annotations
Use mcp__design-mode__read_annotations. Returns all user annotations with full element data (styles, box model, source info, comments).
Read Selected Elements (via eval)
If you need custom queries, use mcp__design-mode__eval_js:
JSON.stringify((() => {
if (!window.__designMode) return { error: 'Design Mode not active' };
const selected = [];
window.__designMode.elements.forEach((e, id) => {
if (e.selected) selected.push({ id, selector: e.selector, tagName: e.tagName, componentName: e.componentName, sourceFile: e.sourceFile, text: e.text.slice(0, 50), annotation: e.annotation });
});
return selected;
})())Source File Lookup
To locate the source file for an element, follow the priority order in ../references/source-lookup.md.
Tips
- Prefer the MCP tools (
read_element,read_annotations) over raw eval — they handle errors and are faster. - For custom queries beyond what the MCP tools provide, use
mcp__design-mode__eval_js. - If Design Mode is not active, the MCP tools return a clear error message.
- Take a screenshot with
mcp__design-mode__screenshotto see the current state visually.