skills.rest
daodaolee
daodaoleeCOMMUNITY
Explore all skills by this author →
Website𝕏@daodaolee_GitHub

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
One-click install
npx skills add https://github.com/daodaolee/ai-driven-sdlc --skill style-extractor-daodaolee
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
KrishnatejavepaKrishnatejavepa
14

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools MCP.

Community
Advanced
BeerspitnightBeerspitnight
1

frontend-designer

Converts UI/UX design inputs into structured frontend specifications for React, Vue, or HTML/CSS.

Community
Advanced
SwimmingLiuSwimmingLiu
1

normalize

Analyze and redesign frontend features to align with design system guidelines.

Community
Intermediate
Lucent-SnowLucent-Snow
436

style-extractor

Extract UI style and motion data from websites into Markdown design guides.

Community
Advanced