skills.rest
RLuf
RLufCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

reversa-design-system

Extract design tokens, color palettes, and typography from CSS, theme files, and screenshots.

Updated Jun 26, 2026
Search Tags:#typography#design system#css#color palette#design tokens#tailwind#reverse engineering
One-click install
npx skills add https://github.com/RLuf/fzagent --skill reversa-design-system-rluf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/RLuf/fzagent/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/RLuf/fzagent --skill reversa-design-system-rluf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Legacy projects rarely document their visual design system, making reverse engineering and redesigns slow and error-prone. This Skill analyzes existing stylesheets, theme configurations, and screenshots to produce a complete, documented design system. ## Core Features & Use Cases - Token Extraction: Parses CSS/SCSS variables, Tailwind configs, MUI/Chakra/Mantine themes, styled-components, and Style Dictionary token files to recover colors, typography, spacing, shadows, and breakpoints. - Structured Documentation: Generates organized Markdown files (color-palette.md, typography.md, spacing.md, tokens.md, design-system.md) in the reversa output folder. - Confidence Scoring: Labels every token as extracted from config, inferred from usage/screenshots, or referenced but undefined. - Use Case: When migrating a legacy web app to a new frontend, run this Skill against its CSS and theme files to reconstruct the full design token catalog before rebuilding components. ## Quick Start Analyze the stylesheets and theme files in this legacy project and document its complete design system with colors, typography, and spacing tokens.

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 a legacy CSS project?▼

Point the Skill at your CSS, SCSS, or LESS files and it parses custom properties and Sass variables to recover colors, spacing, and typography. Results are written as categorized Markdown documents with hex, rgb, and hsl values.

How to document a design system from Tailwind or MUI theme files?▼

The Skill reads tailwind.config.js custom themes and MUI createTheme or Chakra extendTheme objects directly. It extracts the full token set including breakpoints, elevation shadows, and border-radius scales into tokens.md.

Can design tokens be extracted from screenshots?▼

Yes, screenshots serve as a complementary visual source to confirm tokens, but require a model with image support. Tokens inferred from screenshots are marked with a yellow confidence level rather than green.

What output files does design system extraction generate?▼

It creates color-palette.md, typography.md, spacing.md, tokens.md, and a consolidated design-system.md inside the design-system folder of the reversa output directory. The output location is read from .reversa/state.json.

What are the limitations of automated design token extraction?▼

Tokens referenced in code but never defined are flagged with red confidence and cannot be resolved automatically. Dynamic runtime theming and values computed in JavaScript may also be missed since analysis is static.

Related Skills

Explore More Design & Creative Skills→
RuggeryRuggery

reversa-design-system

Extracts design tokens from CSS, theme files, and screenshots into documentation.

Community
Intermediate
tolonlotolonlo

create-m3-theme

Create and register an Angular Material 3 theme for OWASP Juice Shop.

Community
Intermediate
saddam-eng-techsaddam-eng-tech

component-docs

Generate JSDoc comments and Storybook stories for React TypeScript components.

Community
Intermediate
DavidEdeniDavidEdeni
1

browser-testing-with-devtools

Capture live DOM, console, network, and performance data via Chrome DevTools MCP.

Community
Intermediate