figma_compare-page-with-design

MCP tool from Browser Devtools MCP Vscode Extension by serkan-ozal

Compare page with Figma design

How to use it

figma_compare-page-with-design is exposed by the Browser Devtools MCP Vscode Extension MCP server. Add the server to your MCP client (Claude Desktop, Cursor, Windsurf and others), and the figma_compare-page-with-design tool becomes available to the model automatically. See the full listing for setup details and every tool this server provides.

Install Browser Devtools MCP Vscode Extension

$npx vsce package

FULL BROWSER DEVTOOLS MCP VSCODE EXTENSION LISTING

Other tools in Browser Devtools MCP Vscode Extension (39)

a11y_take-aria-snapshot

Get ARIA snapshot (YAML format)

a11y_take-ax-tree-snapshot

Get AX tree with visual diagnostics

content_get-as-html

Get page HTML with filtering options

content_get-as-text

Get visible text content

content_save-as-pdf

Save page as PDF

content_take-screenshot

Take a screenshot (full page or element)

debug_add-watch

Add watch expression (evaluated at every tracepoint hit)

debug_clear-probes

Clear tracepoints, logpoints, and/or watch expressions

debug_list-probes

List tracepoints, logpoints, and/or watches

debug_put-exceptionpoint

Configure exception breakpoints (none, uncaught, all)

debug_put-logpoint

Set a logpoint (evaluates expression)

debug_put-tracepoint

Set a tracepoint (captures call stack)

debug_remove-probe

Remove a tracepoint, logpoint, or watch by type and id

execute

Batch-execute multiple tool calls in one request via JavaScript; use callTool(name, input, returnOutput?) to invoke tools. On browser platform the script has page (Playwright Page) for page.evaluate(), page.locator(), etc. Reduces round-trips and token usage.

Click an element

Drag and drop

Fill an input field

Hover over an element

interaction_press-key

Press a keyboard key

interaction_resize-viewport

Resize viewport (Playwright emulation)