design-audit

Compare live page implementations against Figma references and design systems to produce Markdown audits.

Updated Apr 8, 2026
One-click install
npx skills add https://github.com/rahulnadkarni-dev/DQA-skill --skill design-audit-rahulnadkarni-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/rahulnadkarni-dev/DQA-skill/tree/main
Command: npx skills add https://github.com/rahulnadkarni-dev/DQA-skill --skill design-audit-rahulnadkarni-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to ensure that live implementations align with Figma designs and the project design system, leading to visual drift and inconsistent user experiences. This skill automates a structured audit that surfaces deviations and produces a comprehensive Markdown report.

Core Features & Use Cases

  • Compare a page's live UI against its Figma reference and the design system tokens to surface discrepancies.
  • Generate a structured Markdown audit that documents findings, rationale, and recommended fixes.
  • Useful for design reviews, migration audits, and post-implementation QA across pages and components.

Quick Start

Provide the Figma file URL and the page routes to initiate the audit and generate the report.

Frequently Asked Questions about design-audit

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

FAQPage Schema
How do I audit frontend code for design drift against Figma?

To audit frontend code for design drift, compare a page's live implementation against its Figma reference and current design system. This generates a structured Markdown audit documenting deviations, rationale, and recommended fixes.

Can I check design system token usage during a migration code review?

Yes, you can check design system token usage during a migration code review by applying the audit to frontend codebases. It enforces a schema tracking migration status and design-system usage to ensure actionable remediation.

What is the best way to compare live UI implementation with Figma designs?

The best way to compare live UI implementation with Figma designs is by providing the Figma file URL and page routes to initiate an automated audit. This surfaces discrepancies and produces a comprehensive Markdown report.

Does the design audit work for both desktop and mobile frontend variations?

Yes, the design audit works for desktop and mobile frontend variations. It applies to frontend codebases across routes or component paths to surface discrepancies and document findings with evidence.

What limitations exist when auditing frontend quality for visual inconsistencies?

When auditing frontend quality for visual inconsistencies, the process requires a Figma file URL and accessible page routes or component paths to function. It outputs a structured Markdown audit and does not automatically apply code fixes.