design-system

Generates design tokens and audits UI visual consistency across ten dimensions.

Updated Jun 13, 2026
One-click install
npx skills add https://github.com/malinovskiy-makar/qls --skill design-system-malinovskiy-makar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/malinovskiy-makar/qls/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/malinovskiy-makar/qls --skill design-system-malinovskiy-makar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Codebases often accumulate inconsistent colors, arbitrary spacing, and generic AI-generated styling with no cohesive design system, making UIs look unpolished and hard to maintain. ## Core Features & Use Cases - Design System Generation: Scans CSS, Tailwind, and styled-components to extract colors, typography, spacing, and shadows, then produces design-tokens.json, DESIGN.md, and an interactive HTML preview. - Visual Audit: Scores a UI across 10 dimensions including color consistency, typography hierarchy, spacing rhythm, dark mode, accessibility, and polish, with fixes citing exact file:line locations. - AI Slop Detection: Flags generic AI-generated patterns like 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 styling across the app. ## Quick Start Ask the AI to audit the visual consistency of your app running at localhost:3000 and generate a design token set from the findings.

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 to scan your CSS, Tailwind, or styled-components for existing color, typography, spacing, and shadow patterns. It outputs a design-tokens.json file, a DESIGN.md with rationale, and a self-contained HTML preview page.

How to audit a website for visual consistency issues?▼

Run the audit mode against a URL such as your local dev server, optionally listing specific pages. The UI is scored 0-10 across ten dimensions including color consistency, typography hierarchy, spacing rhythm, accessibility, and polish, with fixes citing exact file and line.

Does the design audit work with Tailwind CSS projects?▼

Yes, the scanning step explicitly supports Tailwind alongside plain CSS and styled-components. It extracts tokens from whichever styling approach your codebase uses and checks consistency against them.

What is AI slop detection in UI design?▼

AI slop detection flags generic patterns common in AI-generated interfaces, such as gratuitous gradients, purple-to-blue defaults, purposeless glass morphism cards, excessive scroll animations, and personality-free font stacks.

What are the limitations of automated visual audits?▼

Automated audits score structural dimensions like spacing scales and contrast ratios but cannot judge subjective brand fit or aesthetic intent. Results should guide human design review rather than replace it.