skills.rest
maximoseo
maximoseoCOMMUNITY
Explore all skills by this author →
GitHub

reversa-design-system

Extract design tokens and guidelines from CSS variables, theme files, and screenshots.

Updated Aug 27, 2026
Search Tags:#typography#css#design-system#spacing#color-palette#token-extraction
One-click install
npx skills add https://github.com/maximoseo/github-repos-radar --skill reversa-design-system-maximoseo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/maximoseo/github-repos-radar/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/maximoseo/github-repos-radar --skill reversa-design-system-maximoseo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extrai e documenta o design system do projeto legado a partir de CSS, arquivos de tema e screenshots. Use quando arquivos de estilo ou screenshots de interface estiverem disponíveis.

Core Features & Use Cases

  • Extrai cores, tipografia, espaçamento, tokens e componentes a partir de CSS/temas.
  • Gera documentação consolidada para manutenção e porting.
  • Use cases: auditoria de design, migração para tokens modernos, documentação de componentes.

Quick Start

Analise os arquivos CSS, temas e capturas de tela disponíveis para gerar a documentação do design system.

Frequently Asked Questions about reversa-design-system

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

FAQPage Schema
How do I extract a design system from legacy CSS files?▼

To extract a design system from legacy CSS, parse available style files, theme configurations, and interface screenshots. This process scopes color palettes, typography, spacing scales, and tokens to generate a comprehensive, structured design system dossier for maintenance or porting.

What is the best way to document legacy design tokens for a migration?▼

Documenting legacy design tokens for a migration involves analyzing CSS variables and theme files to consolidate colors, typography, and spacing into a structured output. This generates a comprehensive dossier that serves as a reference for modernizing component libraries.

Can I audit a design system using only screenshots and CSS variables?▼

Yes, you can audit a design system using only screenshots and CSS variables. By scoping analysis of these available assets, the system extracts component references, color palettes, and spacing scales to produce consolidated documentation without needing access to the original source code.

How to generate documentation for legacy UI components from theme files?▼

To generate documentation for legacy UI components from theme files, parse the theme configurations to extract token definitions and component references. This analysis produces a structured design system dossier that consolidates guidelines for ongoing maintenance and system porting.

Does extracting a color palette from CSS require external dependencies?▼

No, extracting a color palette from CSS does not require external dependencies. The extraction process analyzes CSS variables and theme files directly to identify and document color tokens, typography, and spacing scales without needing additional libraries or component frameworks.

Related Skills

Explore More Design & Creative Skills→
afsjrafsjr

reversa-design-system

Extract design tokens from CSS and theme files into categorized markdown documentation.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
sandrasocialsandrasocial
1

normalize

Audit UI components and realign them with design system standards.

Community
Advanced
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate