skills.rest
MinhDuyDEV
MinhDuyDEVCOMMUNITY
Explore all skills by this author →
𝕏@MinhDuyDEVGitHub

design-system-audit

Audit design system implementations for component, token, and visual inconsistencies.

Updated Jun 18, 2026
Search Tags:#frontend#design system#design tokens#component analysis#ui audit#visual comparison
One-click install
npx skills add https://github.com/MinhDuyDEV/mdpi --skill design-system-audit-minhduydev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-audit
Source: https://github.com/MinhDuyDEV/mdpi/tree/main/.pi/skills/design-system-audit
Command: npx skills add https://github.com/MinhDuyDEV/mdpi --skill design-system-audit-minhduydev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams identify hidden inconsistencies in UI implementations, design tokens, and visual outputs so they can maintain a reliable and cohesive design system.

Core Features & Use Cases

  • UI Pattern Analysis: Reviews component usage, interaction patterns, variants, and undocumented conventions to reveal design drift.
  • Design Token Auditing: Compares colors, typography, spacing, radius, and semantic tokens against implementation usage to identify normalization opportunities.
  • Visual Comparison: Evaluates rendered interfaces against specifications or mockups to produce measurable discrepancy reports and prioritized fixes.

Quick Start

Use the design-system-audit skill to review my application UI for inconsistent components, token usage, and visual differences against the design system.

Frequently Asked Questions about design-system-audit

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

FAQPage Schema
How do I find and fix design system inconsistencies in my frontend application?▼

To fix design system inconsistencies, you need to perform a UI audit that compares component usage, design tokens, and visual outputs against specifications to identify design drift and produce prioritized remediation reports.

Can I audit design tokens like colors and spacing against my actual UI implementation?▼

Yes, you can audit design tokens by comparing colors, typography, spacing, and radius against implementation usage to identify normalization opportunities and undocumented conventions in your UI library.

How do I measure visual discrepancies between rendered interfaces and design mockups?▼

Measuring visual discrepancies involves evaluating rendered interfaces against mockups to generate measurable discrepancy reports, helping your team prioritize fixes for visual output errors and interaction patterns.

What is the best way to review UI pattern inventories during a design-to-code migration?▼

The best way to handle a design-to-code migration is to conduct a component analysis that reviews interaction patterns and variants, creating a pattern inventory to reveal undocumented conventions and prioritize remediation.

Does this UI audit workflow work for refactoring existing component libraries?▼

Yes, this UI audit workflow is designed for refactoring and migrations, applying pattern inventories and token comparisons to existing component libraries to ensure measurable analysis and cohesive design system implementation.

Related Skills

Explore More Design & Creative Skills→
ilove323ilove323

design-system

Audit UI component naming, token usage, and documentation coverage.

Community
Intermediate
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic
lync-cyberlync-cyber
133

penpot-bridge

Bridge Penpot design data with frontend code generation and token synchronization.

Community
Advanced
r3dlexr3dlex
2

visual-verdict

Compare UI screenshots against reference images to detect layout, style, and content discrepancies.

Community
Intermediate