design-system-analyzer_skill

Overview

This skill analyzes any website's UI style using Chrome DevTools to extract precise CSS tokens, animations, and interaction states. It handles complex sites and guides the user through anti-bot checks when needed. The output is a fully populated design-system prompt that can be used to recreate or document the visual language.

How this skill works

The tool navigates to the target URL in a remote-debugging Chrome session, checks for bot challenges and pauses if human verification is required. It runs a sequence of extraction routines to collect CSS variables, keyframes, transitions, interaction rules, typography, layout tokens, and implementation hints. Finally, it synthesizes the collected data into a fixed design-system prompt structure, filling every required field and marking unavailable data as "Not observed."

When to use it

• When you need an accurate, reproducible design system from an existing site
• When auditing a product for consistency of tokens, spacing, and typography
• To document motion and interaction patterns for engineering handoff
• When reverse-engineering a competitor’s UI to understand visual language
• Before redesigns to capture the current UI baseline and anti-patterns

Best practices

• Run Chrome locally with remote debugging enabled to avoid CAPTCHAs and shared cookies
• Solve any bot challenge manually in the browser and confirm before continuing
• Respect extraction limits: collect up to the configured token/animation counts to prevent context overflow
• Do not rely on screenshots; extract visual data from CSS rules and computed styles
• Review and edit the synthesized prompt for product-specific nuance before distribution

Example use cases

• Generate a system prompt that designers and engineers can use to rebuild a component library
• Produce an accessibility review by extracting focus, hover, and motion constraints
• Create a handoff package that includes tokens, keyframes, and interaction examples
• Compare two versions of a site to identify drifting tokens or broken spacing systems