skills.rest
zardusai-cyber
zardusai-cyberCOMMUNITY
Explore all skills by this author →
GitHub

design-system

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

1|1|Updated Mar 31, 2026
Search Tags:#tailwind#design-system#design-tokens#css-patterns#ui-consistency#visual-audit
One-click install
npx skills add https://github.com/zardusai-cyber/zardus_setup --skill design-system-zardusai-cyber
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/zardusai-cyber/zardus_setup/tree/main/ecc/skills/design-system
Command: npx skills add https://github.com/zardusai-cyber/zardus_setup --skill design-system-zardusai-cyber

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to maintain visual consistency across projects, leading to UI fragmentation and higher maintenance costs.

Core Features & Use Cases

  • Generate a cohesive design system by analyzing CSS patterns (CSS/Tailwind/styled-components), then produce design-tokens.json, a DESIGN.md with rationale, and a self-contained preview page.
  • Perform visual audits to score consistency across components, typography, spacing, and accessibility, surfacing gaps and actionable fixes.
  • Validate branding and tokens across new projects or redesign efforts with a self-contained preview for quick validation.

Quick Start

Scan your codebase to generate tokens, design docs, and a live preview.

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 patterns and Tailwind styles?▼

You can generate a cohesive design system by scanning your codebase to extract tokens, output a DESIGN.md file with rationale, and build a self-contained HTML preview for visual validation.

What is a visual audit for UI consistency and how does it score components?▼

A visual audit for UI consistency analyzes your project's typography, spacing, and accessibility to score component uniformity, surfacing gaps and actionable fixes to resolve visual fragmentation.

Can I audit styled-components and Tailwind codebases for design system fragmentation?▼

Yes, you can audit styled-components and Tailwind codebases to detect UI fragmentation, score visual consistency across components, and receive actionable fixes to align with branding guidelines.

What is the best way to document design system rationale for a web redesign?▼

The best way to document design system rationale is to generate a DESIGN.md file that extracts tokens from your CSS patterns and explains the reasoning behind each visual decision.

Do I need existing branding guidelines to generate a design system?▼

You do not need existing branding guidelines to generate a design system, as the Skill can extract tokens directly from your existing CSS patterns and produce a self-contained HTML preview for validation.

Why does my web project have inconsistent UI components and how do I fix it?▼

Inconsistent UI components stem from fragmented CSS patterns, which you can fix by running a visual audit to extract standardized design tokens and generate a cohesive design system.

Related Skills

Explore More Design & Creative Skills→
billydeeii136billydeeii136

ui-styling

Generate UI components using shadcn/ui and Tailwind CSS utility classes.

Community
Intermediate
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
markus41markus41
18

css-generation

Generate CSS variables, Tailwind configurations, and styled-components themes from design tokens.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced