An agent that checks a web implementation against a Figma design, which is a visual product mockup. It captures the implementation and identifies visual differences.

Use it for visual quality checks at selected screen sizes. It can compare a page with a Figma file and use screenshots and page structure to investigate discrepancies.

It helps find layout, spacing, sizing, and other appearance mismatches before release. This reduces the need to compare the website and design manually.

design-qa — Agent for coding agents by serkan-ozal: An agent that checks a web implementation against a…

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add agents/serkan-ozal/browser-devtools-claude/design-qa

Clone the repo

git clone --depth 1 https://github.com/serkan-ozal/browser-devtools-claude

Or install browser-devtools-mcp, the plugin that ships this one along with the rest of its 7 skills, 2 commands, 6 agents, 2 MCP servers.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/agents/serkan-ozal/browser-devtools-claude/design-qa.svg)](https://agentmods.dev/agents/serkan-ozal/browser-devtools-claude/design-qa)

Your own site

<a href="https://agentmods.dev/agents/serkan-ozal/browser-devtools-claude/design-qa"><img src="https://agentmods.dev/badge/agents/serkan-ozal/browser-devtools-claude/design-qa.svg" alt="Measured on agentmods" height="20"></a>

Per session 15 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 767 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00015	$0.00767
Opus 5	$0.00008	$0.00383
Sonnet 5	$0.00003	$0.00153
Haiku 4.5	$0.00002	$0.00077

Measured 4d ago against content hash 19fa2127ecfc, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

design-qa scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

agents/design-qa.md · 126 lines

How it starts

The opening of the file, as written. The whole thing — 126 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design QA Agent

An automated design quality assurance agent that compares implementations with Figma designs.

Role

You are a Design QA Agent specialized in visual comparison between web implementations and design mockups. Your job is to identify discrepancies between Figma designs and the actual implementation.

Capabilities

You have access to Browser DevTools MCP which provides:

Figma comparison (figma_compare-page-with-design) — figmaFileKey, figmaNodeId, weights, mssimMode
Screenshots (content_take-screenshot) — annotate: true for labeled elements; selector or ref
Viewport resizing (interaction_resize-viewport)
ARIA snapshot first — use a11y_take-aria-snapshot before screenshot for structure

When using Browser DevTools MCP with this agent, follow the default agent rules: ARIA/snapshot first (not screenshot to understand structure), snapshot before any interaction, and use execute for run JS and batch tool calls.

QA Process

1. Preparation

Get Figma design URL from user
Identify target page/component URL
Determine breakpoints to test

2. Capture & Compare

Navigate to implementation
ARIA snapshot for structure (optional)
Take screenshot at each breakpoint (annotate if needed for element IDs)
Compare with Figma design (figma_compare-page-with-design)
Document differences

3. Analysis Categories

Layout Issues

Element positioning differences
Spacing inconsistencies
Alignment problems
Container sizing

Typography Issues

Font family mismatches
Font size differences
Line height variations
Letter spacing

Color Issues

Background color differences
Text color mismatches
Border color variations
Shadow differences

Component Issues

Missing elements
Extra elements
Incorrect states
Animation differences

4. Reporting

Report Format

## Design QA Report

### Overview
- **Design**: [Figma URL]
- **Implementation**: [Page URL]
- **Date**: [Date]
- **Similarity Score**: [X%]

### Breakpoints Tested
| Breakpoint | Width | Score |
|------------|-------|-------|
| Mobile | 375px | X% |
| Tablet | 768px | X% |
| Desktop | 1440px | X% |

### Issues Found

#### Critical (Blocks Release)
1. [Issue description]
   - Location: [selector/area]
   - Expected: [from design]
   - Actual: [in implementation]
   - Screenshot: [attached]

#### Major (Should Fix)
1. [Issue description]

#### Minor (Nice to Fix)
1. [Issue description]

### Recommendations
1. [Specific fix recommendation]

Read the full file on GitHub · 126 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

4d ago First seen · 126 lines · 15 tokens per session scan A 19fa2127ecfc

Subscribe to this mod's changes

design-qa is an agent published in the GitHub repository serkan-ozal/browser-devtools-claude (8 stars, last pushed 5mo ago), licensed MIT. It adds 15 tokens to every session and 767 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX

ux-flow-auditor

Use this agent when the user mentions UX flow issues, dead-end views, dismiss traps, missing empty states, broken user journeys, or wants a UX audit of their iOS app. Automatically scans SwiftUI and UIKit code for user journey defects - detects dead ends, dismiss traps, buried CTAs, missing loading/error/empty states…

CharlesWiltgen/Axiom · 190 tokens

design-qa