design-system-analyzer

Extract design tokens and CSS snippets from UI screenshots.

8|1|Updated Jun 9, 2010

Search Tags:#tokens #design-system #analyze #reverse-engineer #UI-design #CSS-snippets

Ready to run

npx skills add https://github.com/pastjean/dotfiles --skill design-system-analyzer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system-analyzer
Source: https://github.com/pastjean/dotfiles/tree/main/.claude/skills/design-system-analyzer
Command: npx skills add https://github.com/pastjean/dotfiles --skill design-system-analyzer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the extraction and documentation of design-system elements from UI designs.

Core Features & Use Cases

Design-token extraction: Identify colors, typography, spacing, and component styles from screenshots and mockups to generate a token set.
CSS snippet generation: Produce ready-to-use CSS tokens and style rules for implementation.
Design-system documentation: Compile findings into a structured design-system document that can be fed into a design system repo or style guide.

Quick Start

Provide a UI design image or screenshot to analyze, and the skill will return a tokenized design system with CSS-ready outputs.

Frequently Asked Questions about design-system-analyzer

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

FAQPage Schema

How do I extract design tokens from a UI screenshot?▼

To extract design tokens from a UI screenshot, provide the image to the analyzer. It identifies colors, typography, spacing, and component styles to generate a structured token set.

Can I generate CSS snippets directly from UI design images?▼

Yes, you can generate CSS snippets directly from UI design images. The analysis outputs code-ready CSS tokens and style rules for immediate integration into your project.

What is the best way to reverse-engineer a design system from existing mockups?▼

The best way to reverse-engineer a design system from mockups is using automated visual analysis. It extracts patterns and elements, compiling them into a structured design-system document.

Does the design system analyzer output documentation for a style guide?▼

Yes, the design system analyzer outputs documentation for a style guide. It compiles extracted colors, typography, and components into a structured document for your design system repo.

How do I document UI components and patterns for a design system?▼

You can document UI components and patterns by analyzing UI screenshots. The tool identifies visual elements and compiles the findings into a structured, tokenized design system document.

What UI design inputs are needed to start extracting design tokens?▼

You need to provide a UI design image or screenshot to start extracting design tokens. The analyzer processes these visual inputs to identify and output your design system elements.