skills.rest
vrcms
vrcmsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/vrcms/everything-qwen-code --skill design-system-vrcms
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Overlord-ZOverlord-Z

style-master

Analyze frontend codebases to extract design tokens and detect styling inconsistencies.

Community
Advanced
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
webdriveriowebdriverio
11

Frontend Components

Enforce frontend component coding standards across web UI projects.

Official
Basic
mgaldinomgaldino
5

visual-audit

Audit slide decks for visual hierarchy, typography, readability, color contrast, accessibility, and consistency.

Community
Intermediate