skills.rest
nonlinear
nonlinearCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-discrepancy

Identify gaps between design references and live UI using Chrome Relay.

Updated Feb 10, 2026
Search Tags:#qa#figma#relay#design-review#component-audit#design-discrepancy#live-vs-design
One-click install
npx skills add https://github.com/nonlinear/skills --skill design-discrepancy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-discrepancy
Source: https://github.com/nonlinear/skills/tree/main/design-discrepancy
Command: npx skills add https://github.com/nonlinear/skills --skill design-discrepancy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires openpyxl.

What problem does it solve?

Aligns reference designs (Figma/docs) with live UI to reveal gaps that cause rework and QA delays.

Core Features & Use Cases

  • Surface discrepancies between design specs and implemented UI via Chrome Relay.
  • Generate structured, action-ready reports and keep progress tracked in MD/Excel.
  • Trigger on demand with phrases like "compare X with Y" or "design vs live site" for audits.

Quick Start

Provide Figma link and live URL, ensure Relay is ON, then run a discrepancy check against the target page.

Frequently Asked Questions about design-discrepancy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check for design discrepancies between Figma and a live website?▼

To check for design discrepancies, provide a Figma link and live URL, ensure Chrome Relay is ON, then run a discrepancy check to surface gaps between the reference design and implemented UI.

Can I automate component audits across different UI states?▼

Yes, you can automate component audits by triggering checks across various pages and states, comparing live UI against design references from macro layouts down to micro details using Chrome Relay.

What do I need to run a design vs live site comparison?▼

To run a design vs live site comparison, you need a Figma link or design docs, the target live URL, Chrome Relay turned ON, and reporting artifacts like Markdown or Excel to document findings.

How does a component audit handle reporting and progress tracking?▼

A component audit handles reporting by generating structured, action-ready reports and tracking progress using Markdown and Excel outputs, ensuring documented findings for design QA workflows.

What is the best way to document design QA findings for developer handoff?▼

The best way to document design QA findings is generating structured Markdown and Excel reports that align reference designs with live UI, revealing gaps to prevent rework and QA delays.

Are there limitations when using Chrome Relay for macro and micro UI audits?▼

Limitations include requiring Chrome Relay to be ON and integration with Figma or docs; without these prerequisites, the system cannot surface discrepancies between design specs and implemented UI.

Related Skills

Explore More Design & Creative Skills→
Nikhil-Chopra-7Nikhil-Chopra-7
1

design-qa

Compare live frontend implementations against Figma designs and generate severity-scored mismatch reports.

Community
Advanced
SentioLabsSentioLabs
1

atlassian-spec-to-backlog

Convert Confluence specification documents into structured Jira backlogs with Epics and linked tickets.

Official
Intermediate
dabowmandabowman

figma-plugins

Develops and deploys Figma plugins using the official Plugin API and manifest configuration.

Community
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate