Verified:GitHub

design-system

Extract design tokens and audit visual inconsistencies in front-end codebases.

Updated Aug 27, 2026

Search Tags:#accessibility #css #tailwind #tokens #design-system #component-library #visual-audit

One-click install

npx skills add https://github.com/Maelwalser/claude-config --skill design-system-maelwalser

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Maelwalser/claude-config/tree/main/skills/design-system
Command: npx skills add https://github.com/Maelwalser/claude-config --skill design-system-maelwalser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Projects often suffer from inconsistent styling, scattered tokens, and divergent component implementations that make UI maintenance slow and error-prone. This Skill centralizes visual decisions, extracts canonical design tokens, and surfaces precise file:line fixes to restore consistency and accelerate development.

Core Features & Use Cases

Token extraction: Scan CSS, Tailwind, and styled-component patterns to extract colors, typography, spacing, border-radius, shadows, and breakpoints into a structured design-tokens.json and CSS custom properties.
Visual audit & scoring: Evaluate UI quality across ten dimensions (color, typography, spacing, components, responsiveness, dark mode, animation, accessibility, density, polish) with concrete examples and remediation steps that reference exact files and line numbers.
Documentation & preview: Generate a DESIGN.md with rationale for decisions and a self-contained HTML preview illustrating components and theme variations for stakeholder review.
AI slop detection: Identify generic or AI-generated styling patterns (gratuitous gradients, meaningless glass morphism, overused defaults) and recommend targeted changes.
Use cases: Start a new design system, audit an existing codebase for visual drift, or review PRs that touch themes, tokens, or component styles.

Quick Start

Use the design-system skill to scan the repository, extract design tokens, produce DESIGN.md, and generate an interactive design-preview.html.

Frequently Asked Questions about design-system

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

FAQPage Schema

How do I extract design tokens from an existing CSS and Tailwind codebase?▼

To audit visual drift and inconsistent styling, the skill evaluates UI quality across ten dimensions including color, typography, spacing, and accessibility, then reports precise file:line remediation steps.

Can I use this to review pull requests that touch component styles?▼

The skill generates a DESIGN.md documenting the rationale for decisions and a self-contained interactive HTML preview illustrating components and theme variations for stakeholder review.

Does this design system tool work with styled-components?▼

The visual audit evaluates ten dimensions including color, typography, spacing, components, responsiveness, dark mode, animation, accessibility, density, and polish, providing concrete examples and remediation steps referencing exact files and line numbers.

What is the best way to detect AI slop in CSS styling patterns?▼

The skill generates a DESIGN.md documenting the rationale for decisions and a self-contained interactive HTML preview illustrating components and theme variations for stakeholder review.