skills.rest
Pabloprogramador23
Pabloprogramador23COMMUNITY
Explore all skills by this author →
GitHub

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Updated Jun 6, 2026
Search Tags:#typography#documentation#screenshots#css#tokens#design-system#color-palette
One-click install
npx skills add https://github.com/Pabloprogramador23/loja --skill reversa-design-system-pabloprogramador23
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/Pabloprogramador23/loja/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/Pabloprogramador23/loja --skill reversa-design-system-pabloprogramador23

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extract and document a legacy design system by harvesting color palettes, typography scales, spacing tokens, and component tokens from CSS, theme files, and screenshots to create a structured, searchable reference.

Core Features & Use Cases

  • Extract color palettes, typography scales, spacing tokens, border radii, shadows, and other design tokens from CSS variables, Tailwind themes, and theme files.
  • Consolidate assets and screenshots into a cohesive design-system reference to support design reviews and engineering handoff.
  • Generate a design-system.md and a token catalog for reuse across projects.

Quick Start

Run the reversa tool on the repository to generate the design-system documentation in the _reversa_sdd/design-system folder.

Frequently Asked Questions about reversa-design-system

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

FAQPage Schema
Where does the generated design system documentation get saved?▼

The generated design system documentation gets saved in the _reversa_sdd/design-system folder, containing the design-system.md file and a complete token catalog for reuse across projects.

How do I extract design tokens from CSS variables and legacy theme files?▼

To extract design tokens from CSS variables and legacy theme files, run the reversa tool on your repository to harvest color palettes, typography scales, and spacing tokens, generating a consolidated design-system reference.

Can I extract a color palette and typography scale from Tailwind themes?▼

Yes, you can extract a color palette and typography scale from Tailwind themes. The tool harvests these design tokens directly from your theme configurations and CSS sources to build a searchable reference.

What is the best way to document a legacy design system for engineering handoff?▼

The best way to document a legacy design system for engineering handoff is to consolidate extracted tokens into a design-system.md file and token catalog, providing a structured reference for both design reviews and development.

Do I need screenshots to accurately capture design tokens from my project?▼

Screenshots are optional but recommended to accurately capture design tokens. The tool requires CSS variables and theme sources as a baseline, and uses screenshots to supplement the extraction process.

Where does the generated design system documentation get saved?▼

The generated design system documentation gets saved in the _reversa_sdd/design-system folder, containing the design-system.md file and a complete token catalog for reuse across projects.

Related Skills

Explore More Design & Creative Skills→
silaslopes100silaslopes100

reversa-design-system

Extract design tokens from CSS, Tailwind, and UI library configurations.

Community
Intermediate
applewaveapplewave
1

phase-5-design-system

Create platform-agnostic design systems with tokens and base components.

Community
Advanced
CJHarmathCJHarmath

web-styling

Provide structured styling patterns for React web UI with Tailwind CSS and design tokens.

Community
Intermediate
stribusstribus
1

reversa-design-system

Extract and normalize design tokens from CSS and theme files into structured documentation.

Community
Intermediate