skills.rest
llmh333
llmh333COMMUNITY
Explore all skills by this author →
GitHub

design-system

Scan existing UI styling and extract reusable design tokens.

Updated Sep 13, 2025
Search Tags:#accessibility#design system#design tokens#tailwind#component patterns#ui consistency#visual audit
One-click install
npx skills add https://github.com/llmh333/employee_management_spring --skill design-system-llmh333
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/llmh333/employee_management_spring/tree/main/.gemini/skills/design-system
Command: npx skills add https://github.com/llmh333/employee_management_spring --skill design-system-llmh333

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent styling by turning scattered CSS or component patterns into a coherent design system, and by auditing UI for accessibility, hierarchy, spacing, and polish issues.

Core Features & Use Cases

  • Design system generation: Scans your existing styling (CSS/Tailwind/styled-components), extracts reusable foundations (colors, typography, spacing, radius, shadows, breakpoints), and outputs a token set plus rationale.
  • Visual audit scoring: Evaluates your UI across key dimensions like color consistency, typography hierarchy, responsive behavior, dark mode coverage, accessibility, and component consistency.
  • AI slop detection: Flags common “generic AI” styling smells such as overuse of gradients, glass morphism without purpose, inconsistent rounding, and purposeless animation.

Quick Start

Run the design-system skill in generate mode against your codebase to produce DESIGN.md, design-tokens.json, and a self-contained design-preview.html.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I extract design tokens from existing CSS and Tailwind styles?▼

Audit UI for accessibility and consistency by evaluating your frontend across dimensions like color contrast, typography hierarchy, responsive behavior, and dark mode coverage. This generates a structured audit report scored by consistency, accessibility, responsiveness, and polish.

Can I detect generic AI styling patterns in my frontend components?▼

Detect generic AI styling patterns by scanning pages and components for specific visual smells such as overuse of gradients, purposeless glass morphism, inconsistent rounding, and unnecessary animations. This flags low-quality AI-generated styling issues across your UI.

How do I generate a visual design system for new UI initiatives?▼

Generate a visual design system for new UI initiatives by scanning your codebase to produce structured outputs including a DESIGN.md rationale, a design-tokens.json file, and a self-contained interactive preview HTML to establish a cohesive styling foundation.

Does this design system generation work with styled-components?▼

Review PR styling regressions by running a visual audit on your frontend to detect inconsistencies in spacing, hierarchy, and component patterns. This evaluates your UI across responsiveness and polish dimensions to flag styling regressions.

Related Skills

Explore More Design & Creative Skills→
zardusai-cyberzardusai-cyber
1

design-system

Analyze CSS patterns to generate design tokens, DESIGN.md, and HTML preview.

Community
Advanced
samymitysamymity
1

Design System — Generate & Audit Visual Systems

Generate design token sets and audit UI consistency across accessibility dimensions.

Community
Advanced
m-salauddinm-salauddin

tailwind-design-system

Standardize design tokens and component variants in Tailwind configurations.

Community
Intermediate
oakossoakoss
14

design-system

Establish a scalable design system with three-layer token hierarchy and theming.

Official
Advanced