design-system

Generate and audit design systems from CSS and JavaScript code.

1|Updated Apr 21, 2026

Search Tags:#code analysis #design system #UI consistency #visual audit #AI slop detection

Ready to run

npx skills add https://github.com/ROYCE-8425/ai-marketing-hub --skill design-system-royce-8425

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/ROYCE-8425/ai-marketing-hub/tree/main/skills/design-system
Command: npx skills add https://github.com/ROYCE-8425/ai-marketing-hub --skill design-system-royce-8425

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenges of maintaining visual consistency and ensuring the quality of design systems in software projects.

Core Features & Use Cases

Generate Design System: Automatically create a design system from existing codebases.
Visual Audit: Evaluate UI components for visual consistency and adherence to design standards.
AI Slop Detection: Identify generic AI-generated design patterns that may need manual review.
Use Case: When you're starting a new project and need a cohesive design system, or when you're auditing an existing codebase for visual consistency issues.

Quick Start

Run the design-system skill to generate a design system for your project.

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, run this skill to automate the analysis of your CSS and JavaScript code, extracting design tokens and patterns to create a cohesive user interface.

What is AI slop detection in UI design?▼

AI slop detection identifies generic AI-generated design patterns within your project's UI components, flagging areas that lack visual consistency or require manual review for cohesive design standards.

How do I audit visual consistency in CSS and JavaScript components?▼

You audit visual consistency by analyzing CSS and JavaScript code for design tokens and patterns, evaluating UI components against design standards to ensure a cohesive and accessible user interface.

Do I need external dependencies to audit UI components for design standards?▼

No, you do not need external dependencies to audit UI components for design standards. This skill operates independently to evaluate visual consistency and identify AI-generated slop in your software projects.

When should I use an automated design system generator?▼

Use an automated design system generator when starting a new project that requires a cohesive design system, or when auditing an existing codebase to identify visual consistency issues and generic AI patterns.