This server enables automated design QA by comparing a Figma frame to a live web page, identifying discrepancies in colors, font sizes, font weights, and border radii, and generating a shareable HTML report.
End-to-end QA: Use run_design_qa with a Figma frame link and live page URL to run the full pipeline in one step.
Step-by-step execution: Break down the process using individual tools: capture_design (extract design tokens), capture_build (measure live page, optionally reusing a signed-in Chrome session via CDP), check_tokens (compare values, capping at 50 findings and marking unverifiable dimensions as "not verified"), and build_report (generate self-contained HTML and JSON report in ~/Documents/Design QA/). Each step returns a runId for chaining.
Dismiss false positives: Use dismiss_finding to add a finding hash to a baseline file, suppressing it in future runs for that Figma file.
Customize viewport: Specify a viewport width; defaults to the Figma frame width.
Robust measurement: Captures live pages through shadow DOM and same-origin iframes, using your own browser session (with remote debugging for authenticated sites, without storing credentials).
Allows comparing design frames from Figma against live web pages to check colors, fonts, border radii, and generate HTML reports.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Figma Live Design QA MCP Run design QA on https://figma.com/design/abc?node-id=12-34 vs https://staging.example.com/checkout"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Figma Live Design QA MCP helps you answer a simple question:
Does the page we built still look and feel like the design?
Give it a Figma frame and a live page. It checks the design details that should match — colors, type, fonts, and corner radii — then gives you a shareable HTML report.
It is made for designers, design engineers, and frontend teams who want a quick way to catch “almost right” details before handoff or release. You do not need to be a developer to use the actual QA workflow. A little setup is needed the first time.
Colors and near-match colors
Font family loading
Font sizes and weights
Border radii, including pills
Repeated issues, with useful locations in the page
A report with design and build screenshots where available
It does not do a pixel-perfect screenshot diff. That is intentional: Figma often uses placeholder content while the real page uses live data, so pixel diffs can create a lot of noise.
Related MCP server: mcp-a11y-service
You only need to do this once.
You need Node.js 20 or newer. From this folder, run:
npm install
npx playwright install chromium
npm run buildCreate a Figma personal access token with File content: read permission. You will add it to Claude’s configuration in the next step.
Keep it private: do not paste it into a Figma URL, a prompt, a screenshot, or a GitHub file. See Security.
Open Claude Desktop.
Go to Settings → Developer → Edit Config.
Add this inside the mcpServers object. Replace the example path with the real path to this project:
{
"mcpServers": {
"figma-live-design-qa": {
"command": "node",
"args": ["/absolute/path/to/figma-live-design-qa-mcp/dist/index.js"],
"env": { "FIGMA_TOKEN": "figd_your_token_here" }
}
}
}Save the file and restart Claude Desktop.
Check that Claude can see the Figma Live Design QA tools.
Start Chrome with remote debugging, sign in to your staging site in that window, and leave it open:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222The server reuses that signed-in session. It does not ask for or store your password. More setup details are in Setup.
In Figma, select the frame you want to check and choose Copy link to selection.
Open the matching page in your local, preview, or staging build.
Paste both links into Claude and ask for a design QA check.
Tell Claude about anything important: viewport, theme, locale, or intentional exceptions.
Open the HTML report from ~/Documents/Design QA/.
Run design QA for this checkout page.
Figma frame: https://www.figma.com/design/FILE_KEY/Checkout?node-id=12-34
Live page: https://staging.example.com/checkout
Viewport: use the Figma frame width
Theme: light
Locale: en-US
Compare the colors, font family, font size, font weight, and border radius. Highlight
near-token differences as likely hardcoded drift, explain what looks intentional, and
generate the self-contained HTML report. If a dimension cannot be checked confidently,
say that clearly instead of guessing.Short version:
Run design QA on
https://www.figma.com/design/FILE_KEY/File?node-id=12-34againsthttps://staging.example.com/checkout.
If one stage has a problem, Claude gets a runId so it can retry that stage instead of starting over.
The quality of the result depends on the frame you choose. Think of the Figma frame as the reference board for the check.
Pick a frame that shows the colors, type styles, and radii you care about.
Make sure important values are connected to Figma variables or published styles when possible.
Tell Claude which theme, breakpoint, locale, and font-loading state to use.
Call out things that are intentionally different, like third-party widgets or bespoke marketing artwork.
If a dimension says not_verified, it means there was not enough design evidence to make a fair call — not that the page failed.
The check currently covers colors, font loading, font sizes, font weights, and border radii. It does not check copy, layout geometry, line-height, or pseudo-element styles.
The report is a self-contained HTML file you can open without the app running. It includes a full render of the selected Figma frame — including placed images and image fills — fetched directly through the Figma API, plus smaller design references next to relevant findings.
If the Figma preview is missing, check that the token has File content: read permission and that the server can reach api.figma.com. The MCP does not need to open the Figma editor in a browser to capture the design image.
If you use Claude Cowork for review and handoff, ask it to read the report, summarize the biggest issues, and export the review as HTML, DOC/DOCX, or PDF.
For example:
Review the design QA report. Group the findings by severity and design-system dimension, keep the original values and occurrence counts, add a short summary for designers and product, and export the review as an HTML file and a PDF. Do not include API tokens, cookies, credentials, or private configuration values.
Please review reports before sharing. They can contain private product copy, URLs, and screenshots from the build.
Tool | What it does |
| Does the whole check in one go. This is the usual starting point. |
| Reads the selected Figma frame. |
| Reads the live page in your browser session. |
| Compares the page values with the design values. |
| Creates the HTML report and JSON details. |
| Remembers a known, intentional exception for that Figma file. |
Reports: ~/Documents/Design QA/
Run details: ~/.figma-live-design-qa-mcp/runs/
Dismissed findings: ~/.figma-live-design-qa-mcp/baselines/
You can change these locations with DESIGN_QA_HOME and DESIGN_QA_REPORT_DIR.
npm test
npm run typecheck
npm run buildThe project is a local stdio MCP server. It uses Playwright to read the live page, stores detailed run data locally, and keeps the model response compact so large DOM trees do not flood the conversation.
More detail:
Figma and the live page can use different content and still pass the useful parts of the check.
Cross-origin iframe contents are skipped.
A light/dark mode mismatch can make color comparison not_verified.
The Variables REST endpoint is Enterprise-only; the server also works from bound values and repeated values in other plans.
MIT License
Copyright (c) 2026 Madhav M Nair
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT.
IN NO EVENT SHALL THE AUTHOR OR COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Write a self-contained HTML report with all images inlined, plus report.json. Opens offline and can be shared directly. Returns the absolute path.
| Name | Required | Description | Default |
|---|---|---|---|
| runId | Yes | The runId returned by capture_design. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, but description adequately discloses key traits: self-contained, inlined images, offline-capable, shareable, returns absolute path. Lacks mention of file system side effects like overwriting.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, no fluff. Front-loaded with main action and key features.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one parameter and no output schema, the description covers purpose, output format, and return value completely. No significant gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and provides a clear description of 'runId'. Description adds no extra parameter detail, so baseline score is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states verb 'Write' and resource 'self-contained HTML report with all images inlined, plus report.json'. It distinguishes from siblings focused on capture/QA by targeting report generation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the tool should be used after 'capture_design' (runId), but does not explicitly compare to siblings like 'run_design_qa' or state when not to use.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Measure the live page in the user's own browser session, piercing shadow DOM and same-origin iframes. Reuses a running Chrome over CDP, else a copy of the Chrome profile. Never asks for or stores credentials. Viewport width defaults to the Figma frame width from the same run.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | URL of the built page. | |
| runId | Yes | The runId returned by capture_design. | |
| viewportWidth | No |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full burden and discloses key behaviors: reuses Chrome over CDP or copies profile, never asks for/stores credentials, defaults viewport to Figma frame width. However, it does not mention output format or error scenarios.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four concise sentences front-loading the main purpose, with each sentence adding unique information. No redundancy or unnecessary content.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
While it covers behavior and defaults, it omits expected output (no output schema) and prerequisites (e.g., Chrome availability). For a tool with 3 parameters and no output schema, more detail on return values would improve completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The description adds value beyond schema: explains that viewportWidth defaults to the Figma frame width, and ties runId to capture_design. Schema coverage is 67%, so description compensates with useful context.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool measures the live page in the user's browser, piercing shadow DOM and same-origin iframes. It distinguishes from siblings like capture_design by specifying it captures the built page.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage when measuring a live page after building, but does not explicitly state when to use this tool versus alternatives like run_design_qa or build_report. No exclusions or alternative suggestions are given.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Fetch a Figma frame and derive its design token set. Accepts a pasted Figma frame link or a bare file key plus nodeId. Writes the flattened node list to disk and returns a runId. Never returns the node tree.
| Name | Required | Description | Default |
|---|---|---|---|
| figma | Yes | Figma frame link, or a bare file key. | |
| nodeId | No | Node id, if not already in the link. "1-23" or "1:23". |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full burden. It discloses that the tool writes the flattened node list to disk and returns a runId, and states 'Never returns the node tree.' This is good, but it lacks details on authentication needs, rate limits, or any side effects beyond disk writes.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences long with no wasted words. It front-loads the main purpose and then adds important details about input formats and output behavior. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with 2 parameters and no output schema, the description covers inputs, side effect (writes to disk), and output (runId). It mentions that the node tree is never returned, which helps manage expectations. Missing details like file format or location could be added, but overall it's adequate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline is 3. The description adds meaning by clarifying that 'figma' can be a frame link or bare file key, and that 'nodeId' is optional if already in the link. This goes beyond the schema's minimal descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's action: 'Fetch a Figma frame and derive its design token set.' It specifies inputs (Figma link or file key + nodeId) and outputs (runId, writes to disk). The verb 'capture' and resource 'design' are distinct from siblings like 'check_tokens' or 'capture_build'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says 'Accepts a pasted Figma frame link or a bare file key plus nodeId,' providing clear input format guidance. However, it does not explain when to use this tool vs alternatives like 'capture_build' or 'run_design_qa', nor does it mention when not to use it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Compare every colour, font size, font weight and border radius in the build against the design token set. Returns findings grouped by value, capped at 50, with severities. Dimensions where no token set could be inferred are reported as "not verified" rather than guessed at.
| Name | Required | Description | Default |
|---|---|---|---|
| runId | Yes | The runId returned by capture_design. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description provides good behavioral context: it compares specific items, caps results at 50, includes severities, and reports unknown dimensions. Could mention read-only nature.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, well-structured, and front-loaded with key information. No filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with one parameter and no output schema, the description covers what it does, what it returns, and edge cases (not verified). Could note it's a check, not a modification.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The single parameter runId is fully described in the schema, and the description repeats that it comes from capture_design. Baseline score of 3 for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool compares design elements (colour, font size, etc.) against a token set and returns findings with details. It distinguishes from siblings like capture_design and capture_build by focusing on comparison.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
While the description implies use after capturing a build, it lacks explicit guidance on when to use this tool versus siblings like run_design_qa or build_report.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Add a finding to the baseline for its Figma file so it is suppressed on all future runs.
| Name | Required | Description | Default |
|---|---|---|---|
| runId | Yes | The runId returned by capture_design. | |
| reason | No | Why this is not a bug. Recorded in the baseline. | |
| findingHash | Yes | The hash from check_tokens or the report. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description must cover behavioral traits. It states the effect (suppression) but omits mutation details, reversibility, permissions, or side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
One sentence with no wasted words, but could be more structured with separate purpose and behavior sections. Still concise and front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With 3 parameters, no output schema, and no annotations, the description adequately conveys the operation's goal but lacks details on parameter sources, baseline concept, or outcome format.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline is 3. Description adds no parameter-specific meaning beyond the schema; the single sentence does not elaborate on runId, reason, or findingHash.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the tool adds a finding to a baseline to suppress it on future runs, matching the title 'Dismiss a finding'. Distinct from sibling tools like run_design_qa or check_tokens.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives, nor any prerequisites or exclusions. The description only explains what it does without comparing to siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
End-to-end design QA: measures a Figma frame and a live page, then writes an HTML report. Give it a Figma frame link and the URL of the built page. Runs capture_design, capture_build, check_tokens and build_report in sequence. On failure it returns the runId so the remaining steps can be run individually.
| Name | Required | Description | Default |
|---|---|---|---|
| buildUrl | Yes | URL of the built page to measure. | |
| figmaUrl | Yes | Figma frame link, e.g. https://figma.com/design/<key>/...?node-id=1-23 | |
| viewportWidth | No | Defaults to the Figma frame width. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Without annotations, the description carries full burden. It describes the sequential execution and failure return, but lacks details on side effects (e.g., where the HTML report is stored), output on success, or potential rate limits. The description is adequate but not thorough.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, front-loaded with the primary purpose, then details on execution and failure handling. Every sentence adds value, and it is efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (runs 4 sub-tools) and lack of output schema, the description is somewhat incomplete. It explains the sequence and failure return, but does not specify the success return value or where the HTML report is output. This leaves uncertainty for the agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, providing baseline 3. The description adds context: 'Give it a Figma frame link' for figmaUrl, 'URL of the built page' for buildUrl, and mentions viewportWidth defaults to the Figma frame width. This adds meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'End-to-end design QA: measures a Figma frame and a live page, then writes an HTML report.' It also distinguishes itself from sibling tools by explaining it runs a sequence of those tools (capture_design, capture_build, check_tokens, build_report) in one call.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear usage guidance: 'Give it a Figma frame link and the URL of the built page.' It also explains the sequential execution and fallback behavior: 'On failure it returns the runId so the remaining steps can be run individually.' This helps the agent decide when to use this composite tool versus running individual steps.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v0.1.0build_reportcapture_buildcapture_designcheck_tokensdismiss_findingrun_design_qaEach tool has a distinct role: orchestration, capturing design, capturing build, comparing, reporting, and managing baselines. No overlap in purpose.
All tool names follow a consistent verb_noun pattern in lowercase with underscores, making them predictable and easy to understand.
6 tools is well-scoped for an end-to-end design QA workflow, covering all necessary steps without unnecessary redundancy.
The tool set covers the full lifecycle: capture design, capture build, compare tokens, generate report, and dismiss findings. No obvious gaps for the stated purpose.
Score any URL against a real design contract — 42 checks, A-F grade, token + motion validation.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
Validate HTML/CSS, audit SEO and JSON-LD, check links, and capture responsive screenshots.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Mad7droid/figma-live-design-qa-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
