Agent skill · 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.
What it needs
About 2k tokens when loaded.
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--a6bd38