skills.rest
Ruggery
RuggeryCOMMUNITY
Explore all skills by this author →
GitHub

reversa-design-system

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

Updated Aug 14, 2026
Search Tags:#typography#documentation#design system#css#color palette#design tokens#tailwind
One-click install
npx skills add https://github.com/Ruggery/OCR_Cartorio --skill reversa-design-system-ruggery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-design-system
Source: https://github.com/Ruggery/OCR_Cartorio/tree/main/.agents/skills/reversa-design-system
Command: npx skills add https://github.com/Ruggery/OCR_Cartorio --skill reversa-design-system-ruggery

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Legacy projects rarely document their visual system, forcing developers to reverse-engineer colors, typography, and spacing from scattered stylesheets. This Skill automates that extraction and produces structured design token documentation. ## Core Features & Use Cases - Multi-source token extraction: Parses CSS/SCSS variables, Tailwind config, MUI/Chakra/Mantine themes, styled-components, Style Dictionary token files, and Storybook stories. - Categorized documentation: Generates separate files for color palette, typography, spacing/grid/breakpoints, and a consolidated token table, each value tagged with a confidence level (extracted, inferred, or undefined). - Screenshot support: Uses interface screenshots as a complementary visual source to confirm tokens when style files are incomplete. - Use Case: When onboarding onto a legacy codebase with a tailwind.config.js and scattered SCSS variables, run this Skill to produce a complete design-system/ folder documenting every color, font scale, and breakpoint before starting a UI redesign. ## Quick Start Analyze the stylesheets and theme files in this project and document the full design system in the output folder.

Frequently Asked Questions about reversa-design-system

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

FAQPage Schema
How do I document a design system from an existing codebase?▼

Point the Skill at your project's style sources and it extracts colors, typography, spacing, and other tokens into categorized Markdown files. It reads CSS variables, Sass variables, Tailwind config, and UI library theme objects automatically.

What file formats can be analyzed for design tokens?▼

Supported sources include CSS/SCSS/LESS variables, tailwind.config.js, MUI createTheme, Chakra extendTheme, Mantine and Ant Design themes, styled-components and Emotion theme objects, Style Dictionary files, tokens.json, and design-tokens.yaml.

Can design tokens be extracted from screenshots?▼

Yes, screenshots are supported as a complementary visual source to confirm tokens, but they require a model with image support. Tokens inferred from screenshots are marked with a lower confidence level than those extracted from config files.

How are uncertain or missing design tokens handled?▼

Every documented token carries a confidence marker: green for values extracted from configuration files, yellow for values inferred from usage or screenshots, and red for tokens referenced in code but never defined.

Where does the generated design system documentation go?▼

Output files are written to the design-system folder inside the configured output directory, producing color-palette.md, typography.md, spacing.md, tokens.md, and a consolidated design-system.md document.

Related Skills

Explore More Design & Creative Skills→
lacsousalacsousa

reversa-design-system

Extracts and documents design tokens from CSS, theme files, and screenshots.

Community
Intermediate
bfree-trainerbfree-trainer
60

extract

Extract reusable UI components, design tokens, and layout patterns from frontend codebases.

Official
Advanced
izzoaizzoa
22

ss-verify

Inspect rendered browser screenshots for visual defects in layout, typography, contrast, and spacing.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

figma-intake

Extract Figma file structure, design tokens, and component inventories into build-spec.json.

Official
Advanced