style-extractor - Web UI Style and Motion Extraction Tool
Extract reusable design systems from web interfaces including colors, typography, spacing, components and motion timing.
Tags
Updated: 2026-02-11Capabilities
Typical Inputs
Typical Outputs
What this skill does
- extract web UI styles
- capture motion evidence
- create semantic tokens
- generate style guides
- take screenshots
- evaluate scripts
Inputs
- website URLs
- web repositories
- Chrome MCP tools
- project name
- style variant
- motion importance
Outputs
- style guide Markdown files
- evidence folders with screenshots
- CSS/JS traces
- motion analysis
- HTML prototypes
Requirements
- Chrome MCP access
- file system write access
- project directory
- evidence gathering time