style-extractor
CommunityExtract UI style and motion from real websites.
Design & Creative#documentation#design-system#keyframes#web-ui#semantic-tokens#runtime-analysis#motion-evidence
AuthorLucent-Snow
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: style-extractor Download link: https://github.com/Lucent-Snow/style-extractor/archive/main.zip#style-extractor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.