skills.rest
pastjean
pastjeanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/pastjean/dotfiles --skill design-system-analyzer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
htafollahtafolla
5

multimodal-looker

Analyze diagrams, screenshots, and UI mockups to extract information and assess design.

Community
Advanced
Overlord-ZOverlord-Z

style-master

Analyze frontend codebases to extract design tokens and detect styling inconsistencies.

Community
Advanced
LutimiLutimi

ckm:design-system

Organize design tokens into primitive, semantic, and component layers.

Community
Advanced
video-production-buddyvideo-production-buddy
602

visual-style

Extract visual design systems from websites, videos, or PDFs and apply them across creative tools.

Official
Intermediate