home / skills / yellinzero / aico / aico-frontend-style-extraction

aico-frontend-style-extraction skill

safe

/.codex/skills/aico-frontend-style-extraction

This skill extracts design tokens from a reference site or screenshot and generates a complete design-system.md for your project.

npx playbooks add skill yellinzero/aico --skill aico-frontend-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 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.

FAQ

Which input formats are supported?

URL (captured via Playwright) and direct image/screenshot uploads are supported.

Where is the output saved?

The skill always writes the resulting design system to docs/reference/frontend/design-system.md.

Does it guess colors or fonts?

No. It extracts actual hex values and reads font metadata when available; guesses are avoided.