What problem does it solve?
This Skill helps ensure consistency and identify areas for improvement within design systems by auditing visual elements, documenting design tokens, and comparing implementation against design specifications.
Core Features & Use Cases
- Visual Inventory: Analyzes application screenshots to catalog color palettes, typography scales, and spacing patterns.
- Consistency Analysis: Compares the visual inventory with code to identify undocumented tokens, naming inconsistencies, and redundant values.
- Design Debt Identification: Pinpoints areas of inconsistency and suggests improvements for refactoring.
- Use Case: A team is preparing to refactor their design system. This Skill can be used to generate a comprehensive audit report of the current system, highlighting all design tokens and identifying any discrepancies between the design specs and the implemented code.
Quick Start
Use the design-system-audit skill to audit the design system for the provided application screenshots.