design-system

Name: design-system
Availability: InStock
Author: cescrafli

Generate DESIGN.md, design-tokens.json, and an HTML preview from existing UI patterns.

Updated Mar 26, 2026

Search Tags:#audit #tokens #generate #design-system #design-tokens #pr-review #ui-consistency

Ready to run

npx skills add https://github.com/cescrafli/compyrasion --skill design-system-cescrafli

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams generate a cohesive design system and audit UI consistency across codebases, reducing visual drift and review time.

Core Features & Use Cases

Generate Design System: scan CSS/Tailwind/styled-components to extract tokens, colors, typography, spacing, and create a JSON token set plus a CSS variables stylesheet; produce a DESIGN.md with rationale; and a self-contained HTML preview.
Visual Audit: score UI across dimensions like color, typography, spacing, accessibility, and polish to flag inconsistencies and provide fixes.
AI Slop Diagnostics: detect generic AI-generated design patterns and flag them for review.

Quick Start

Run the design-system workflow against your project to generate DESIGN.md, design-tokens.json, and a self-contained HTML 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 and Tailwind files?▼

To extract design tokens from CSS and Tailwind files, scan the codebase to identify colors, typography, and spacing. This process generates a structured design-tokens.json file and a CSS variables stylesheet to standardize visuals across the project.

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

A UI consistency audit scores visual design across dimensions like color, typography, spacing, and accessibility. It flags visual inconsistencies within a codebase and provides specific fixes to improve UI polish and reduce visual drift.

How do I detect AI-generated design patterns in my codebase?▼

Detect AI-generated design patterns by running an AI slop diagnostics check on your codebase. This feature identifies generic AI-driven styling patterns and flags them for review during PR evaluations to ensure visual originality.

Can I generate a design system from styled-components for PR review?▼

Yes, you can generate a design system from styled-components. The workflow scans styled-components to extract design tokens, validates visual consistency across components, and outputs a DESIGN.md file to assist during styling PR reviews.

What files are generated when creating a cohesive design system?▼

Generating a cohesive design system outputs three files: DESIGN.md containing the rationale, design-tokens.json standardizing visual values, and a self-contained HTML preview to visualize the extracted components and styles.