design-system

Generate or audit design systems from a codebase for visual consistency.

2|Updated Apr 14, 2026

Search Tags:#design system #design audit #design automation #UI consistency #visual audit

Ready to run

npx skills add https://github.com/klu-dev/porting-ecc-to-vscode --skill design-system-klu-dev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/klu-dev/porting-ecc-to-vscode/tree/main/.github/skills/design-system
Command: npx skills add https://github.com/klu-dev/porting-ecc-to-vscode --skill design-system-klu-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenges of designing or maintaining a cohesive visual design system for UI elements across various platforms, helping ensure visual consistency and efficient development.

Core Features & Use Cases

Design System Generation: Automates the creation of a comprehensive design system from an existing codebase.
Visual Audit: Scores UI elements against 10 dimensions of consistency, accessibility, and functionality.
AI Slop Detection: Identifies generic AI-generated design patterns that may undermine the intended design.

Quick Start

Generate a design system for a new project with minimal style and earth-tone palette.

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?▼

To generate a design system from an existing codebase, this Skill analyzes your source code to automatically extract and formulate a comprehensive visual style guide including color palettes, typography, and responsiveness rules.

What is a UI visual audit and how does it improve consistency?▼

A UI visual audit evaluates your interface elements against 10 dimensions of consistency, accessibility, and functionality, scoring each area to pinpoint exactly where visual and structural improvements are needed.

Can I use this to audit visual consistency for accessibility issues?▼

Yes, you can audit visual consistency for accessibility issues since the visual audit specifically scores UI elements across 10 dimensions that include both consistency and accessibility compliance checks.

What's the best way to detect generic AI-generated design patterns in my UI?▼

The best way to detect generic AI-generated design patterns is using the built-in AI slop detection feature, which identifies repetitive or unsuitable automated design patterns that undermine your intended visual style.

Does the design system generation support custom color palettes like earth tones?▼

Yes, design system generation supports custom color palettes like earth tones, allowing you to quickly initiate projects with specific minimal styles and tailored visual parameters from the start.