style-extractor
Extract reusable style guides and motion specs from websites
All Skills in This Repository (1)
Pure Emerald Level IndicatorsFrequently Asked Questions
FAQPage SchemaHow to install style-extractor?▼
Run `npx skills add Lucent-Snow/style-extractor --all -g -y` in your terminal to install the skill globally.
How to extract a design system from a website?▼
Point the skill at any URL and it opens the page in a real browser, captures screenshots and computed styles, then writes a structured style guide with semantic tokens and component state matrices.
Can it capture website animations and transitions?▼
Yes. It scans CSS transitions and keyframes, diffs styles during interactions, detects animation libraries, and produces a separate motion guide with durations, easings, and delay chains.
Does style-extractor work with Claude Code and Codex?▼
Yes. It follows the standard SKILL.md format and runs in Codex CLI, Claude Code, and other MCP-compatible clients, using Chrome DevTools for browser control.
Do I need coding skills to use style-extractor?▼
No. You simply ask in plain language to extract a site's style, and the agent handles browser automation, evidence collection, and document generation.
Related Repositories in Design & Creative
View All in Design & Creative→
nextlevelbuilderui-ux-pro-max-skill
AI design intelligence for professional UI, brands, and presentations
shadcn-uiui
Build and customize beautiful React component libraries with AI
nexu-ioopen-design
Open-source AI design studio for decks, prototypes, images, and video