skills.rest
gagandeepgill
gagandeepgillCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generates design token systems and audits UI codebases for visual consistency.

1|Updated Aug 31, 2026
Search Tags:#accessibility#design system#css#design tokens#tailwind#ui consistency#visual audit
One-click install
npx skills add https://github.com/gagandeepgill/puzzle-game --skill design-system-gagandeepgill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/gagandeepgill/puzzle-game/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/gagandeepgill/puzzle-game --skill design-system-gagandeepgill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams struggle with inconsistent colors, typography, and spacing scattered across CSS, Tailwind, and styled-components, and often cannot pinpoint why a UI feels off. This Skill generates a cohesive design system from an existing codebase or audits one across ten visual dimensions with concrete fixes. ## Core Features & Use Cases - Design System Generation: Scans CSS, Tailwind, and styled-components to extract colors, typography, spacing, radii, shadows, and breakpoints, then outputs DESIGN.md, design-tokens.json, and a self-contained HTML preview page. - Visual Audit: Scores a UI across 10 dimensions including color consistency, typography hierarchy, spacing rhythm, dark mode, accessibility, and polish, with specific file:line fixes. - AI Slop Detection: Flags generic AI-generated design patterns such as gratuitous gradients, purple-to-blue defaults, and purposeless glass morphism. - Use Case: Before a redesign, run an audit against your local dev server to get a scored report of visual inconsistencies, then generate a token set to standardize the palette and spacing scale. ## Quick Start Ask the AI to audit the visual consistency of your app running at localhost and generate a design token set from the existing styles.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate a design system from an existing codebase?▼

Run the generate mode, which scans your CSS, Tailwind, or styled-components for existing color, typography, and spacing patterns. It outputs a design-tokens.json file, CSS custom properties, a DESIGN.md with rationale, and a self-contained HTML preview page.

How do I audit a website for visual consistency?▼

Run the audit mode against a URL such as your local dev server, optionally listing pages to check. The audit scores 10 dimensions including color consistency, typography hierarchy, spacing rhythm, dark mode, and accessibility, each with specific examples and file:line fixes.

What design issues does the visual audit check for?▼

The audit covers color palette drift, unclear typography hierarchy, arbitrary spacing values, inconsistent components, broken responsive behavior, incomplete dark mode, gratuitous animation, accessibility gaps in contrast and focus states, information density, and missing polish like hover and empty states.

Can it detect generic AI-generated design patterns?▼

Yes, the slop-check mode flags common AI design tells such as gratuitous gradients, purple-to-blue default palettes, purposeless glass morphism cards, excessive scroll animations, and generic centered hero layouts over stock gradients.

Does the design system generator work with Tailwind projects?▼

Yes, the generation mode scans Tailwind alongside plain CSS and styled-components to extract existing patterns. Extracted values are consolidated into a token set delivered as JSON and CSS custom properties.

Related Skills

Explore More Design & Creative Skills→
chris78reychris78rey

rapid-tailwind-components

Provide copy-paste Tailwind CSS v3+ UI component HTML snippets.

Community
Basic
MaelwalserMaelwalser

design-system

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

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
PriyanshKuniyalPriyanshKuniyal

design-system-patterns

Define atomic design tokens, theming infrastructure, and reusable component libraries for UI workflows.

Community
Advanced