design-system

Analyze codebase styling patterns to generate design tokens and audit visual consistency.

1|Updated Apr 6, 2026

Search Tags:#accessibility #frontend #css #design-system #design-tokens #ui-audit

Ready to run

npx skills add https://github.com/vrcms/everything-qwen-code --skill design-system-vrcms

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/vrcms/everything-qwen-code/tree/main/.qwen/skills/design-system
Command: npx skills add https://github.com/vrcms/everything-qwen-code --skill design-system-vrcms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses visual inconsistency and technical debt in UI development by providing a structured way to generate, audit, and maintain design tokens and component styles.

Core Features & Use Cases

Design System Generation: Automatically scans codebases to extract design tokens like colors, typography, and spacing, generating a comprehensive DESIGN.md and interactive preview.
Visual Audit: Scores UI consistency across ten dimensions including accessibility, typography hierarchy, and component alignment.
AI Slop Detection: Identifies and flags generic, low-quality AI-generated design patterns such as purposeless gradients or excessive animations.

Quick Start

Use the design-system skill to audit the visual consistency of the current project by running the audit command on the local development server.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate design tokens from an existing CSS or Tailwind codebase?▼

To generate design tokens from a CSS or Tailwind codebase, the skill automatically scans your project's styling patterns to extract colors, typography, and spacing into a comprehensive DESIGN.md file and interactive preview.

What is a visual UI consistency audit and how does it evaluate frontend accessibility?▼

A visual UI consistency audit scores your frontend interface across ten dimensions, evaluating accessibility compliance, typography hierarchy, and component alignment by parsing your local development server's rendered output.

Can I detect generic AI-generated design patterns and purposeless gradients in my UI?▼

You can detect generic AI-generated design patterns using the AI slop detection feature, which identifies and flags low-quality visual elements like purposeless gradients or excessive animations within your component styles.

How do I audit visual consistency during a frontend PR review or UI refactoring project?▼

To audit visual consistency during a PR review or UI refactoring project, run the audit command on your local development server to evaluate styling patterns and technical debt against your generated design system metadata.

Does the design system audit require any specific dependencies or component libraries to function?▼

The design system audit requires no external dependencies or component libraries, relying entirely on built-in CSS and Tailwind parsing capabilities to extract design system metadata and evaluate accessibility compliance directly from your codebase.