skills.rest
Markson22
Markson22COMMUNITY
Explore all skills by this author →
GitHub

reversa-design-system

Extract design tokens and documentation from CSS, theme files, and screenshots.

Updated Nov 4, 2025
Search Tags:#typography#documentation#screenshots#css#tokens#design-system#design-token
One-click install
npx skills add https://github.com/Markson22/MKV-SYTEM --skill reversa-design-system-markson22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/Markson22/MKV-SYTEM/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/Markson22/MKV-SYTEM --skill reversa-design-system-markson22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Este Skill extrai e documenta o sistema de design de um projeto legado, reunindo cores, tipografia, espaçamento, tokens e componentes a partir de CSS, temas e capturas de tela.

Core Features & Use Cases

  • Extração de paleta de cores primárias, secundárias e de destaque, bem como tons neutros.
  • Catalogação de tokens de tipografia e espaçamento, com referências a arquivos de tema e CSS.
  • Geração de documentação consolidada para design system a partir de fontes disponíveis (CSS, temas e capturas de tela).

Quick Start

Use este skill para extrair e documentar os tokens de design a partir dos recursos de estilo disponíveis no projeto.

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 design tokens from legacy CSS files?▼

You can catalog design tokens from screenshots by parsing screenshot references alongside CSS and theme files. This process extracts component metadata and visual styling cues to build a centralized design-system catalog.

What is the best way to document a design system from existing project styles?▼

The best way to document a design system from existing styles is parsing CSS variables and theme configurations to generate consolidated documentation. This inventories colors, typography, spacing tokens, and component metadata into a structured report.

Can I extract color and typography tokens from theme configuration files?▼

Yes, you can extract color and typography tokens from theme configuration files. The Skill parses these theme files alongside CSS variables to inventory primary, secondary, and neutral color palettes as well as typography and spacing tokens.

Does this approach work for building a design-system catalog from scattered styling resources?▼

Yes, this approach works for building a design-system catalog from scattered styling resources. It satisfies parsing CSS, theme files, and screenshot references to produce a centralized and structured design-system documentation report.

What are the limitations when extracting spacing tokens from legacy projects?▼

A limitation when extracting spacing tokens from legacy projects is reliance on available CSS variables, theme configurations, and screenshot references. Accurate extraction depends entirely on the structural consistency and availability of these underlying styling sources.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-design-system

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

Community
Advanced
dylantarredylantarre
38

design-tokens-structure

Structures design tokens into a 3-layer system for theming and governance.

Community
Basic
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic