skills.rest
maplin-co
maplin-coOFFICIAL
Explore all skills by this author →
GitHub

design-system-audit

Audit design systems for consistency and output structured JSON design tokens.

Updated Jan 9, 2026
Search Tags:#consistency#refactoring#design system#audit#design tokens#design debt
One-click install
npx skills add https://github.com/maplin-co/ai-course --skill design-system-audit-maplin-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-audit
Source: https://github.com/maplin-co/ai-course/tree/main/.opencode/skill/design-system-audit
Command: npx skills add https://github.com/maplin-co/ai-course --skill design-system-audit-maplin-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of auditing design systems, ensuring consistency, identifying technical debt, and bridging the gap between design specifications and implementation.

Core Features & Use Cases

  • Visual Inventory: Analyzes application screenshots to catalog color palettes, typography, spacing, and component variants.
  • Consistency Analysis: Compares the visual inventory against code to identify discrepancies, undocumented tokens, and naming issues.
  • Use Case: A team is preparing to refactor their design system. This Skill can be used to comprehensively audit the existing system, document all design tokens, and pinpoint areas of inconsistency before the refactoring begins.

Quick Start

Use the design-system-audit skill to audit the design system for the 'Acme Corp' application.

Frequently Asked Questions about design-system-audit

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

FAQPage Schema
How do I audit my design system for consistency before refactoring?▼

To audit a design system for consistency, you analyze application screenshots to catalog color palettes, typography, spacing, and component variants, then compare this visual inventory against your codebase to identify discrepancies and undocumented design tokens.

What is design debt and how do I identify it in my application?▼

Design debt consists of inconsistencies between visual specifications and code implementation. You identify it by comparing visual inventory data against your actual components to pinpoint undocumented tokens, naming issues, and areas lacking adherence to design system standards.

How do I extract and document design tokens from existing UI components?▼

You extract and document design tokens by analyzing application screenshots and code to catalog color palettes, typography scales, and spacing patterns. The process outputs structured JSON design tokens that standardize your visual specifications.

Can I compare my design specifications against code implementation to find discrepancies?▼

Yes, you can compare design specifications against code implementation by running a consistency analysis. This process evaluates your visual inventory against the codebase to identify discrepancies, undocumented tokens, and naming issues across component variants.

What do I need to prepare before auditing design system inconsistencies?▼

Before auditing design system inconsistencies, you need application screenshots capturing your current UI components and visual states. These screenshots provide the visual inventory required to analyze color palettes, typography, spacing, and component variants accurately.

Related Skills

Explore More Design & Creative Skills→
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
KuassKuass
1

design-system-audit

Audit design systems for consistency and generate structured JSON design tokens.

Community
Intermediate
chris-arsenaultchris-arsenault

drift-audit

Categorize inconsistent code implementations into drift variants for unification.

Community
Advanced
smarmen86smarmen86

design-review

Audit live web interfaces for layout and spacing issues and apply atomic CSS fixes.

Community
Advanced