Webpage Style Extractor

The problem

Web page styling is often reduced to a loose description: primary color, font, radius, spacing. Copying page CSS directly can pull in one-off classes, runtime-injected rules, and responsive details that do not belong to a reusable design system. The issue is not a lack of explanation, but the lack of traceable style sources. This skill targets engineers who need reusable design parameters extracted from a public page and a style guide that can drive frontend implementation.

How it works

The workflow starts from webpage-style-extractor-py/scripts/extract_page_info.py. It loads the target page with Playwright and collects:
- CSS variables: design tokens such as --color-*, --spacing-*, and --radius-*
- Computed styles: buttons, cards, inputs, navigation, links, and other visible components
- Color and typography: primary colors, text colors, background colors, font family, size, and line height
- Interaction states: :hover, :active, :focus, :focus-visible, transition, and @keyframes
- Page screenshots: used to verify the extracted values

After extraction, the skill analyzes industry-specific traits: color system, typography hierarchy, component styles, layout spacing, and motion rules. It then produces a target-page style SKILL and a result_validation.html page. The source material explicitly warns against substituting generic templates, guessed values such as #2563EB, or default fonts such as Inter for the actual page data. The analysis also distinguishes the tool SKILL from the final output SKILL: the former carries the extraction script, while the latter solidifies the extracted design parameters for page reconstruction or style transfer.

Boundaries

The workflow is intended for publicly visible pages that can be loaded, including static or JavaScript-rendered pages once key nodes are present. It does not cover login-gated, paid, or dynamically authorized content. For heavily generated frontends, still confirm that computed styles include runtime-injected values. The output is a set of design parameters and implementation examples, not a pixel-perfect clone, and it should respect the target site’s copyright and intellectual property.