aico-frontend-style-extraction_skill

Overview

This skill extracts design tokens (colors, typography, spacing, effects) from a reference website or screenshot and generates a standardized design-system.md file for your project. It automates visual analysis and outputs a ready-to-use design system saved to docs/reference/frontend/design-system.md. Use it to establish consistent tokens before frontend work begins.

How this skill works

The skill accepts a URL or an uploaded screenshot. For URLs it navigates with Playwright, captures a full-page screenshot, and analyzes pixels to extract exact hex values, font metadata, spacing and shadow details. It follows a checklist to systematically capture colors, typography, spacing, and effects, then formats the results into the design-system.md template and writes the file to the repo path.

When to use it

• You have a reference website URL and need to replicate its visual style.
• You provide a screenshot and ask to "extract design" or "extract style".
• Running /frontend.init and you need to create a design system from a reference.
• You need to extract colors, typography, spacing, or shadows before starting CSS/JS work.
• You want a consistent set of tokens for design-to-code handoff.

Best practices

• Always provide a full-page URL or high-resolution screenshots for accurate extraction.
• Let the tool capture multiple breakpoints or note responsive differences manually.
• Verify extracted hex values and font families against live CSS when possible.
• Document mobile vs desktop token differences if styles vary.
• Include notes on states (hover, active, disabled) and transitions for interactive components.

Example use cases

• Create a project design-system.md from a competitor’s homepage to speed component theming.
• Extract brand colors and text styles from a marketing site to bootstrap UI library tokens.
• Analyze a screenshot of a Figma export when source styles are not available.
• Generate spacing and radius scales from a reference to match layout rhythm in a new frontend.
• Capture shadow, border, and transition specs to reproduce native-feeling components.