design-system-audit

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

1|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/Kuass/kiro-gateway-plus --skill design-system-audit-kuass
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system-audit
Source: https://github.com/Kuass/kiro-gateway-plus/tree/main/.opencode/skill/design-system-audit
Command: npx skills add https://github.com/Kuass/kiro-gateway-plus --skill design-system-audit-kuass

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

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 and identify design debt?

A design system audit compares your visual inventory against code to identify undocumented tokens, naming inconsistencies, and redundant values. It generates structured audit reports highlighting discrepancies between design specs and implementation to support refactoring.

What is the best way to document design tokens from existing application screenshots?

Documenting design tokens from screenshots involves analyzing the visual inventory to catalog color palettes, typography scales, and spacing patterns. The process generates structured JSON design tokens to support design system maintenance and refactoring.

Can I compare my implemented code against design specifications to find undocumented tokens?

Yes, you can compare implemented code against design specifications to find undocumented tokens. The consistency analysis cross-references your visual inventory with the codebase to pinpoint naming inconsistencies, redundant values, and areas needing refactoring.

How do I prepare for a design system refactoring maintenance task?

Preparing for design system refactoring requires generating a comprehensive audit report of the current system. This identifies all existing design tokens and highlights discrepancies between the design specs and implemented code to guide maintenance.

Does the design system audit work without external dependencies or components?

Yes, the design system audit operates without external dependencies, using only internal references. It analyzes application screenshots directly to produce structured JSON design tokens and audit reports for identifying design debt.