Can I use my own logged-in Chrome session for the analysis?

Yes, the skill is optimized for use with a local Chrome instance running with remote debugging enabled, allowing it to access sites where you are already authenticated.

What is included in the final design system output?

The output is a comprehensive prompt containing color tables, font stacks, spacing systems, animation keyframes, interaction principles, and implementation notes.

Does it take screenshots for visual analysis?

No, it specifically avoids screenshots to prevent context overflow. Instead, it extracts all visual data directly from the CSS and computed styles for higher precision and efficiency.

How does this skill handle anti-bot measures like Cloudflare?

The skill includes a built-in check for bot challenges. If detected, it pauses and instructs the user to solve the CAPTCHA manually in the browser before resuming the extraction.

Design System Analyzer

Name: Design System Analyzer
Author: flatitas

byflatitas

0•

Design Tools

Extracts precise CSS tokens, animations, and interaction states from websites to generate comprehensive design system documentation and prompts.

The Design System Analyzer is a specialized Claude Code skill designed to bridge the gap between inspiration and implementation. It leverages ChromeDevTools to perform a deep technical audit of any website's UI, extracting critical data points like keyframes, transition logic, typography stacks, and color tokens. Instead of relying on context-heavy screenshots, it parses raw CSS to build a high-fidelity design system prompt that developers can use to replicate or extend visual styles while maintaining full accessibility and layout principles. It is particularly effective for reverse-engineering complex motion patterns and maintaining brand consistency across new frontend projects.

Key Features

01Detailed mapping of interaction states like hover, focus, and active effects

02Deep CSS token extraction including colors, spacing, and typography variables

03Automated capture of @keyframes, animation usage, and transition logic

04Standardized output generation using structured design system templates

05Built-in anti-bot detection with guided manual intervention steps

060 GitHub stars

Use Cases

01Converting a live website's visual identity into a structured design system prompt for AI generation

02Reverse-engineering sophisticated UI animations and transitions for implementation in new frameworks

03Auditing existing web applications to document inconsistent CSS tokens and layout patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flatitas/ohmyskills design-system-analyzer

For use in Claude.ai and ChatGPT

Download Skill