style-extractor

Extracts web UI style guides and motion analysis from live sites or screenshots.

Updated Feb 11, 2026

Search Tags:#UI/UX #design system #style guide #web scraping #motion design #animation extraction

Ready to run

npx skills add https://github.com/daodaolee/ai-driven-sdlc --skill style-extractor-daodaolee

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: style-extractor
Source: https://github.com/daodaolee/ai-driven-sdlc/tree/main/.agents/skills/style-extractor
Command: npx skills add https://github.com/daodaolee/ai-driven-sdlc --skill style-extractor-daodaolee

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the extraction of design system elements from live websites or screenshots, including colors, typography, spacing, components, and crucially, dynamic motion effects.

Core Features & Use Cases

Comprehensive Style Extraction: Captures static design tokens (colors, fonts, spacing) and dynamic motion evidence (timings, keyframes, easing).
Runtime Motion Analysis: Analyzes real-time animations using browser developer tools to document complex or JS-driven motion.
Use Case: A design team needs to create a style guide for a new web application. They can use this Skill to analyze an existing competitor's website, extracting all visual and interactive design patterns into a structured, reusable format.

Quick Start

Use the style-extractor skill to extract the design style from the provided URL 'https://example.com'.

Frequently Asked Questions about style-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extract a style guide from an existing website?▼

You can extract a style guide from a website by analyzing live URLs or screenshots to capture static design tokens including colors, typography, spacing, and components into a structured format.

Can I extract web animations and motion design from live sites?▼

Yes, you can extract web animations and motion design from live sites by using browser developer tools integration to analyze runtime animations, capturing keyframes, easing, and delay chains.

Does style extraction work with screenshots or only live URLs?▼

Style extraction works with both live URLs and static screenshots, allowing you to capture visual design patterns and extract UI components without needing direct runtime access.

Do I need browser developer tools to analyze runtime animations?▼

Yes, analyzing runtime animations requires browser developer tools integration, specifically using chrome-devtools-mcp to inspect and document real-time keyframes and motion evidence.

What is the best way to document a competitor's UI design system?▼

The best way to document a competitor's UI design system is to automate the extraction of visual and interactive design patterns from their live website, capturing both static styles and dynamic motion effects.