home / skills / yellinzero / aico / style-extraction

style-extraction skill

safe

/employees/frontend/skills/style-extraction

This skill extracts design tokens from a reference site or screenshot and updates docs/reference/frontend/design-system.md with a complete design system.

This is most likely a fork of the aico-frontend-style-extraction skill from yellinzero

npx playbooks add skill yellinzero/aico --skill style-extraction

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

3.0 KB

---
name: aico-frontend-style-extraction
description: |
  Extract design tokens (colors, typography, spacing, effects) from reference website or screenshot to create project design system.

  UNIQUE VALUE: Creates standardized design-system.md file with all design tokens extracted systematically.

  Use this skill when:
  - User shares reference website URL and wants to extract its style
  - User provides screenshot or image and asks to "extract design", "extract style"
  - Running /frontend.init and need to create design system from reference
  - User asks to "create design system", "extract colors", "extract typography"
  - Need to establish consistent design tokens before starting frontend work

  Methods: URL (via Playwright MCP screenshot) or direct screenshot analysis
  Output: ALWAYS write to docs/reference/frontend/design-system.md
---

# Style Extraction

## Language Configuration

Before generating any content, check `aico.json` in project root for `language` field to determine the output language. If not set, default to English.

## Process

1. **Get reference material**:
   - URL: Use Playwright MCP to take screenshot, then analyze
   - Screenshot: Analyze directly
   - Description: Generate tokens based on style keywords
2. **Extract systematically** using the checklist below
3. **Save output**: ALWAYS write to `docs/reference/frontend/design-system.md`

## Extraction Checklist

### Colors

- [ ] Background colors (page, card, section)
- [ ] Text colors (primary, secondary, muted)
- [ ] Accent/brand colors
- [ ] Border colors
- [ ] State colors (success, warning, error)

### Typography

- [ ] Font families (headings, body, mono)
- [ ] Font sizes (scale from xs to 4xl)
- [ ] Font weights (normal, medium, semibold, bold)
- [ ] Line heights

### Spacing & Layout

- [ ] Border radius values
- [ ] Container max-width
- [ ] Section padding
- [ ] Component spacing scale

### Effects

- [ ] Shadows (sm, md, lg)
- [ ] Borders & dividers
- [ ] Transitions

## Output Template

```markdown
# Design System

## Colors

### Brand

- Primary: #xxx
- Secondary: #xxx

### Text

- Primary: #xxx
- Secondary: #xxx
- Muted: #xxx

### Background

- Page: #xxx
- Card: #xxx

## Typography

### Font Family

- Headings: "Font Name", sans-serif
- Body: "Font Name", sans-serif

### Font Size

- sm: 0.875rem
- base: 1rem
- lg: 1.125rem
- xl: 1.25rem

## Spacing

### Border Radius

- sm: 0.125rem
- md: 0.375rem
- lg: 0.5rem

## Effects

### Shadow

- sm: 0 1px 2px rgba(0,0,0,0.05)
- md: 0 4px 6px rgba(0,0,0,0.1)
```

## Playwright MCP Usage

If user provides URL:

1. `browser_navigate` to URL
2. `browser_take_screenshot` (fullPage: true)
3. Analyze screenshot for design tokens

## Key Rules

- ALWAYS extract actual hex values from reference - don't guess
- MUST note shadows, borders, transitions
- ALWAYS save to `docs/reference/frontend/design-system.md`

## Common Mistakes

- ❌ Guess colors without checking → ✅ Extract actual hex values
- ❌ Skip subtle details → ✅ Note shadows, borders, transitions
- ❌ Ignore responsive differences → ✅ Document mobile vs desktop

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 the project. It automates capturing hex values, font metrics, spacing scales, shadows, and transitions so teams start frontend work with consistent tokens. The output is always saved to docs/reference/frontend/design-system.md.

How this skill works

Given a URL or an uploaded screenshot, the skill captures a full-page screenshot (if URL) or analyzes the provided image, then runs a checklist-based inspection to identify colors, type, spacing, and effects. It measures actual hex values, font families and sizes, border radii, container widths, shadows, and transitions, and formats them into a single, structured design-system.md file. The process flags responsive differences and notes desktop vs mobile variations where detected.

When to use it

You have a reference website URL and need a reproducible design system.
You provide a screenshot and ask to “extract design” or “extract style.”
When running /frontend.init and you need a baseline design system from a reference.
Before starting frontend work to lock down consistent tokens (colors, typography, spacing).
When asked to “create design system”, “extract colors”, or “extract typography”.

Best practices

Provide the full-page URL for best coverage; the skill will screenshot via Playwright when given a URL.
Supply high-resolution screenshots for more accurate color sampling and font detection.
If the project uses multiple breakpoints, provide desktop and mobile screenshots to capture responsive token differences.
Verify extracted hex values and fonts against the live site if you control it; the tool extracts values but cannot access private font files.
Review the generated docs/reference/frontend/design-system.md and adjust naming or scales to match your project conventions.

Example use cases

Create a design-system.md for a new frontend repo from a competitor’s marketing site.
Extract brand and UI colors plus states (success/error/warning) from an admin dashboard screenshot.
Generate typography scale, font families, and line-height values from a marketing landing page.
Capture spacing scale, border radii, and shadow tokens before building component library.
Run during project bootstrap (/frontend.init) to produce the canonical design tokens file saved to docs/reference/frontend/design-system.md.

FAQ

What inputs does the skill accept?

A public URL (the skill screenshots via Playwright) or one or more screenshots/images uploaded directly.

Will the skill guess colors or fonts if it can’t detect them?

No. The skill extracts actual hex values and best-detected fonts and will flag items it cannot verify rather than guessing.

Where is the output saved?

Always to docs/reference/frontend/design-system.md in the repository.