skills.rest
cescrafli
cescrafliCOMMUNITY
Explore all skills by this author →
GitHub

design-system

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

Related Skills

Explore More Design & Creative Skills→
sapelitesapelite

design-system

Extract design tokens and audit UI codebases for visual consistency.

Community
Advanced
mkatoguimkatogui
3

figma-handoff

Sync Figma tokens with design-tokens.json and validate DTCG structure.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

ai-slop-detector

Detect and rewrite generic AI-generated UI patterns in frontend code.

Community
Advanced
SL-A-SHSL-A-SH

normalize

Normalize UI features to match a project's design system using tokens and components.

Community
Advanced