skills.rest
klu-dev
klu-devCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/klu-dev/porting-ecc-to-vscode --skill design-system-klu-dev
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
eniosales08-AIeniosales08-AI

ui-ux-pro-max

Generate UI/UX design systems with palettes, typography, and components.

Community
Advanced
samymitysamymity
1

design-system

Generate design tokens and audit UI consistency across codebases.

Community
Intermediate