style-extractor

Name: style-extractor
Availability: InStock
Author: fantay

Extract design tokens, typography, spacing, and motion primitives from websites.

Updated Apr 6, 2026

Search Tags:#tokens #design-system #style-guide #web-scrape #component-states #motion-guide #evidence-manifest

Ready to run

npx skills add https://github.com/fantay0312/fantayspec --skill style-extractor-fantay0312

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extracts evidence-based design-system documentation from live websites, enabling teams to reuse tokens, motion rules, and component patterns without copying product IA.

Core Features & Use Cases

Collects tokens (colors, typography, spacing, radii), component states, and motion primitives from real sites
Generates style guides, motion guides, and evidence manifests for future products
Supports references, scripts, and assets directories for on-demand tasks

Quick Start

Run the extractor against a target site to produce a complete <project>-<style> extraction in the prescribed folder structure.

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 component states from a live website?▼

To extract design tokens and component states from a live website, run the extractor against a target site to capture colors, typography, spacing, radii, and motion primitives into structured artifacts and references for reuse.

What is a style guide evidence manifest and when do I need one?▼

A style guide evidence manifest organizes extracted design tokens, component states, and motion primitives from real sites into structured artifacts. You need one when capturing reusable design-system evidence to fuel future product projects.

Can I generate a motion guide from web-scraping existing sites?▼

Yes, you can generate a motion guide by web-scraping existing sites. The extractor captures motion primitives from target websites and organizes them into structured motion guides ready for reuse in future products.

Does the design system extraction process capture typography and spacing tokens?▼

Yes, the design system extraction process captures typography and spacing tokens. It collects colors, typography, spacing, and radii from real sites, organizing them into structured style guides and evidence manifests for immediate reuse.

Are there limitations to extracting component patterns without copying product information architecture?▼

A key limitation consideration is that while the extractor captures reusable component patterns and states from live websites, it explicitly avoids copying the underlying product information architecture, focusing solely on design-system evidence like tokens and motion rules.