skills.rest
ROYCE-8425
ROYCE-8425COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/ROYCE-8425/ai-marketing-hub --skill design-system-royce-8425
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
gerald-icagerald-ica

superdesign

Analyze codebases to extract UI context and design tokens.

Community
Advanced
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic
Ayushman-11Ayushman-11

ui-visual-validator

Validate UI modifications through visual regression testing and design system compliance.

Community
Advanced
PatrickjoshanedezPatrickjoshanedez

anti-slop

Detect and remove generic AI-generated patterns from text files.

Official
Intermediate