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

•

디자인 도구

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

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.

주요 기능

01Context-optimized data limits to prevent model token overflow

02Comprehensive animation and transition logic capture

03Automated anti-bot detection with guided manual bypass

04Interactive state analysis for hover, focus, and active elements

05132 GitHub stars

06Deep CSS token extraction for colors, spacing, and typography

사용 사례

01Reverse-engineering complex UI animations and motion design patterns

02Generating a complete design system specification from a reference website

03Auditing an existing frontend project for design token consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nakanosanku/ohmyskills design-system-analyzer

For use in Claude.ai and ChatGPT

Download Skill