Agent skill · design visual · affaan-m
design-system
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or reviewing a PR that touches styling.
Why this skill is useful
Adds executable scripts for generating design systems and auditing visual consistency that aren't available in standard design practices.
What it needs
Requires node installed locally. About 2k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
Design System — Generate & Audit Visual Systems When to Use Starting a new project that needs a design system Auditing an existing codebase for visual consistency Before a redesign — understand what you have When the UI looks "off" but you can't pinpoint why Reviewing PRs that touch styling How It Works Mode 1: Generate Design System Analyzes your codebase and generates a cohesive design system: Output: DESIGN.md + design-tokens.json + design-preview.html Mode 2: Visual Audit Scores your UI across 10 dimensions (0-10 each): Each dimension gets a score, specific examples, and a fix with exact file:line. Mode 3: AI Slop Detection Identifies generic AI-generated design patterns: Examples Generate for a SaaS app: Audit existing UI: Check for AI slop:
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/design-system--7fbc55