style-extractor

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

436|24|Updated Feb 3, 2026

Search Tags:#documentation #design-system #keyframes #web-ui #semantic-tokens #runtime-analysis #motion-evidence

Ready to run

npx skills add https://github.com/Lucent-Snow/style-extractor --skill style-extractor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: style-extractor
Source: https://github.com/Lucent-Snow/style-extractor/tree/main
Command: npx skills add https://github.com/Lucent-Snow/style-extractor --skill style-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires , and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables automated extraction of UI style and motion evidence from live websites, empowering teams to generate consistent design guides quickly.

Core Features & Use Cases

Automated style discovery: Extract colors, typography, spacing, and component patterns from real UIs.
Motion evidence capture: Record runtime timings, keyframes, delays, and JS-driven motion traces to support design-system documentation.
Use Case: Designers want a Markdown style guide with semantic tokens and an optional HTML prototype for a new product page.

Quick Start

Use the style-extractor skill to analyze a target webpage and generate a Markdown design guide with tokens and motion recommendations.

Frequently Asked Questions about style-extractor

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

FAQPage Schema

How do I extract design tokens and motion data from an existing website?▼

You can extract a UI style guide from a live website by running analysis scripts that capture colors, typography, spacing, and component patterns, formatting the extracted design evidence into a reusable Markdown style guide with semantic tokens.

How do I capture CSS keyframes and motion delays from a live web UI?▼

You capture CSS keyframes and motion delays from a live web UI by leveraging browser automation to record runtime timings, delay chains, and JS-driven traces, producing an evidence-based Markdown guide for design-system documentation.

Can I generate a Markdown design system guide with runtime analysis from real web components?▼

Yes, you can generate a Markdown design system guide by performing runtime analysis on real web components, extracting semantic tokens and motion evidence directly from the live UI to ensure accurate and reusable design-system documentation.

What is the best way to document web UI motion evidence and semantic tokens?▼

The best way to document web UI motion evidence and semantic tokens is to use automated extraction scripts that capture runtime keyframes and raw CSS evidence, compiling the analyzed results into a structured Markdown style guide.

Does automated UI style extraction work with JavaScript-driven animations?▼

Yes, automated UI style extraction works with JavaScript-driven animations by using browser automation to capture runtime motion traces, timings, and delay chains, ensuring JS motion evidence is recorded alongside static design tokens.

Do I need browser automation to extract runtime motion data from web pages?▼

Yes, you need browser automation to extract runtime motion data from web pages, as it executes the scripts required to capture live keyframes, delay chains, and JS-driven animation traces that static HTML scraping cannot access.