browser-devtools-mcp

# /figma Compare the current page with a Figma design. ## Usage ``` /figma <figma-url> ``` ## Description Compares the current browser page with a Figma design using visual similarity analysis. Identifies differences between the implementation and the design. ## Arguments - `figma-url` (required): URL to the Figma frame or component ## Examples ``` /figma https://www.figma.com/file/abc123/Design?node-id=1:2 /figma https://www.figma.com/design/xyz789/App?node-id=100:200 ``` ## Requirements - `FIGMA_ACCESS_TOKEN` environment variable must be set - Amazon Bedrock must be enabled (`AMAZON_BEDROCK_ENABLE=true`) - Bedrock vision model configured (`AMAZON_BEDROCK_VISION_MODEL_ID`) ## Output Returns: - Visual similarity score (0-100%) - List of detected differences - Side-by-side comparison screenshots - Specific areas with deviations ## Use Cases - Design QA during development - Regression testing after CSS changes - Verify responsive implementations - Catch unintended visual changes ## MCP Tools Used - `figma_compare-page-with-design` - Compare with Figma design - `content_take-screenshot` - Capture current state