How does the skill handle bot protection or CAPTCHAs?

The skill automatically detects bot challenges like Cloudflare. If detected, it pauses and prompts the user to solve the challenge manually in the browser before continuing the analysis.

What kind of output can I expect from the analysis?

The skill produces a structured Design System document including design philosophy, color tables, typography scales, spacing systems, and detailed animation keyframes.

Does this skill take screenshots for visual analysis?

No, it intentionally avoids screenshots to save context window space. Instead, it extracts raw CSS data, which provides more precise technical information for design system generation.

Can I analyze websites that require a login?

Yes. By running your local Chrome instance with remote debugging enabled, the skill can interact with your active browser session and access authenticated content.

Design System Analyzer

Name: Design System Analyzer
Author: NakanoSanku

byNakanoSanku

•

132

Design Tools

Extracts precise CSS tokens, animations, and interaction states from any website to generate a comprehensive design system prompt.

About

The Design System Analyzer empowers developers and designers to reverse-engineer any website's visual identity by performing a deep audit of its CSS logic via ChromeDevTools. Unlike standard scrapers, it captures functional data including animation keyframes, transition timings, font stacks, and interactive state rules. By synthesizing this data into a standardized, context-efficient template, the skill allows users to recreate sophisticated UI styles or document existing projects with technical precision while successfully navigating anti-bot measures.

Key Features

Context-optimized data limits to prevent model token overflow
Comprehensive animation and transition logic capture
Automated anti-bot detection with guided manual bypass
Interactive state analysis for hover, focus, and active elements
132 GitHub stars
Deep CSS token extraction for colors, spacing, and typography

Use Cases

Reverse-engineering complex UI animations and motion design patterns
Generating a complete design system specification from a reference website
Auditing an existing frontend project for design token consistency

About

Key Features

Context-optimized data limits to prevent model token overflow
Comprehensive animation and transition logic capture
Automated anti-bot detection with guided manual bypass
Interactive state analysis for hover, focus, and active elements
132 GitHub stars
Deep CSS token extraction for colors, spacing, and typography

Use Cases

Reverse-engineering complex UI animations and motion design patterns
Generating a complete design system specification from a reference website
Auditing an existing frontend project for design token consistency