---
id: design-extractor
name: design-extractor
description: >
  Extrai o sistema de design completo de qualquer site e gera um arquivo design.md detalhado e 100% utilizável.
  Use esta skill SEMPRE que o usuário pedir para: extrair o design de um site, gerar um design.md, capturar o visual/estilo de um site, reverter a engenharia do design de uma página, clonar o estilo visual de uma marca, documentar tokens de design de qualquer URL.
  Triggers: "extrai o design", "design.md", "captura o estilo", "clone o visual", "tokens de design", "reverse engineer do design", "analisa o design do site", "copia o estilo do site", "design system do site".
---

# Design Extractor Skill

Extrai o sistema de design completo de qualquer site e gera um `design.md` com frontmatter YAML + prosa — o mesmo formato do exemplo de referência da Anthropic.

---

## FASE 1 — Coleta de dados brutos

**1.1 — Fetch HTML principal**

Use `web_fetch` na URL com `html_extraction_method: "markdown"`. Procure por:
- `<link rel="stylesheet">` → busque cada CSS externo
- `<style>` tags inline
- CSS-in-JS serializado (`__NEXT_DATA__`, styled-components, Emotion, Stitches)
- Tailwind config exposta no JS bundle
- Design tokens em JSON/JS (`window.__THEME__`, `window.__TOKENS__`)

**1.2 — Fetch CSS adicionais**

Tente via `web_fetch`:
```
/style.css  /main.css  /global.css  /app.css  /styles/globals.css
/_next/static/css/*.css   /static/css/main.*.css   /assets/css/main.css
```

**1.3 — Web search**
- `"[marca] design system"` e `"[marca] brand guidelines"`

---

## FASE 2 — Extração (28 categorias)

Extraia **obrigatoriamente** cada item. Se não encontrado, **infira** e marque com `*inferido`.

### 2.0 Metadados
```
nome, versão, modo default (light/dark/system), suporta dark (true/false)
archetype: frase curta da estética (ex: "Warm Editorial · Slate-on-Ivory")
chips: 4-6 micro-descrições [cor primária, tipografia, accent hex, radius]
```

### 2.1 Consumer Contract (regras de uso)
```
standalone:        pode ser usado sem assets externos?
goal:              objetivo em 1 frase
priority_order:    tokens > componentes > prosa > framework defaults
mode_rule:         qual CTA usar em light vs dark
font_rule:         fallback quando fonte customizada indisponível
asset_rule:        funciona sem logos/fotos?
accessibility_rule: WCAG AA, focus rings, touch targets mínimos
```

### 2.2 Cores — Semantic UI Slots
Mapear 1:1 com CSS custom properties:
```
primary / primary-foreground
secondary / secondary-foreground
tertiary (3ª cor de marca)
neutral
background / foreground
surface / surface-foreground
card / card-foreground
popover / popover-foreground
muted / muted-foreground
accent / accent-foreground
destructive / destructive-foreground
border / input / ring
success / warning / info
chart-1 … chart-5
```

### 2.3 Cores — M3 Surface Ladder
```
surface-container-low
surface-container
surface-container-high
surface-container-highest
surface-bright   (cor de destaque editorial — ex: clay panel)
surface-dim      (versão apagada)
surface-inverse / surface-inverse-foreground
```

### 2.4 Cores — Brand Swatches Nomeados
Liste TODAS as cores nomeadas do brand palette. Ex:
`clay #d97757 / clay-deep #c6613f / ivory-light #faf9f5 / slate-dark #141413 / olive #788c5d / kraft #d4a27f / manilla #ebdbbc / fig #c46686`

### 2.5 Cores — Semantic Aliases & Gradientes
```
ink → slate-dark / paper → ivory-medium / primary-soft → clay wash
--gradient-hero: linear-gradient(135deg, #... 0%, #... 100%)
```

### 2.6 Dark Mode Completo
Dark mode não é só inverter — documente:
- Todos os tokens que mudam (background, surface, card, text, border, ring)
- **Elevações dark-specific** (sombras mais escuras em dark):
  ```
  elevation-raised:   0 1px 2px rgba(0,0,0,0.40)
  elevation-floating: 0 4px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.60)
  elevation-overlay:  0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.25), 0 16px 24px rgba(0,0,0,0.35)
  elevation-modal:    0 4px 8px rgba(0,0,0,0.35), 0 16px 32px rgba(0,0,0,0.45), 0 32px 64px rgba(0,0,0,0.55)
  ```
- Ativação: `class="dark"` / `data-theme="dark"` / `prefers-color-scheme`
- O botão primário muda de cor no dark?

### 2.7 Tipografia — Font Roles Nomeados
```
display  — hero/display grande
body     — prose/leitura
eyebrow  — labels de seção, categorias
mono     — código, URLs, nomes de modelo
sans     — UI labels, nav, botões
serif    — editorial (se diferente de body)
```

### 2.8 Tipografia — Escala Per-Role
Cada role tem spec completo:
| Role | fontFamily | fontSize | fontWeight | lineHeight | letterSpacing |
|------|-----------|----------|------------|-----------|---------------|
| display | ... | 72px | 400 | 1.1 | -0.02em |
| heading | ... | 48px | 700 | 1.1 | -0.02em |
| title | ... | 32px | 700 | 1.1 | -0.015em |
| subtitle | ... | 24px | 600 | 1.2 | -0.01em |
| body-lg | ... | 20px | 400 | 1.4 | 0em |
| body | ... | 18px | 400 | 1.55 | 0em |
| body-sm | ... | 16px | 400 | 1.4 | 0em |
| label | ... | 14px | 500 | 1.4 | -0.005em |
| caption | ... | 12px | 400 | 1.4 | 0em |
| mono | ... | 14px | 400 | 1.5 | 0em |

### 2.9 Tipografia — Dual-Voice & Case Rules
```
dual-voice: qual fonte para prose vs UI? (ex: "Serif body, Sans UI")
case-eyebrow: sentence-case / uppercase / capitalize
case-btn:     sentence-case / uppercase
case-heading: sentence-case / title-case
```

### 2.10 Espaçamento
```yaml
# Escala numérica
"0": 0px / "1": 4px / "2": 8px / "3": 12px / "4": 16px / "5": 20px
"6": 24px / "8": 32px / "12": 48px / "16": 64px / "24": 96px / "32": 128px

# Aliases nomeados
xs: 4px / sm: 8px / md: 16px / lg: 24px / xl: 32px

# Layout primitivos
section:      128px  (espaçamento de seção editorial)
site-margin:  80px   (margem lateral do site)
site-gutter:  24px   (gutter interno)
container-max: 1400px
surface-pad:  96px   (padding de superfície full-width)
surface-min-h: 360px (altura mínima de seção)
nav-padx:     24px
section-padx: 64px
section-pady: 96px
```

### 2.11 Border Radius — Escala + Aliases Semânticos
```yaml
none: 0px / sm: 4px / md: 6px / lg: 8px / xl: 16px / full: 9999px

# Semânticos obrigatórios
button: [valor]   ← radius do botão primário
card:   [valor]   ← radius do card padrão
input:  [valor]   ← radius do input
```

### 2.12 Sombras Utilitárias
```css
--shadow-2xs:  0 1px rgba(0,0,0,0.05);
--shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
--shadow-sm:   0 1px 3px rgba(0,0,0,0.10);
--shadow-md:   0 4px 6px rgba(0,0,0,0.07);
--shadow-lg:   0 10px 15px rgba(0,0,0,0.10);
--shadow-xl:   0 20px 25px rgba(0,0,0,0.10);
--shadow-2xl:  0 25px 50px rgba(0,0,0,0.25);
--shadow-inner: inset 0 2px 4px rgba(0,0,0,0.05);
```

### 2.13 Sombras Brand-Specific (nomeadas com propósito)
```css
--shadow-paper: 0 1px 0 rgba(foreground, 0.12);   /* hairline bottom */
--shadow-soft:  0 8px 24px -12px rgba(0,0,0,0.12); /* card lift suave */
--shadow-[accent]: 0 16px 40px -16px rgba(ACCENT, 0.4); /* elevação colorida */
```

### 2.14 Elevation Scale (semântica de uso)
```css
--elevation-flat:     none
--elevation-raised:   0 1px 6px rgba(0,0,0,0.10)         /* default card */
--elevation-floating: [3-stop cascade]                    /* hover, dropdowns */
--elevation-overlay:  0 16px 40px rgba(foreground, 0.14) /* popovers */
--elevation-modal:    0 24px 64px rgba(foreground, 0.18) /* dialogs */
```

### 2.15 Hairline System (bordas alpha como sistema)
```
hairline-width:  1px
hairline-style:  solid
hairline-color:  rgba(foreground, 0.10)  ← SEMPRE alpha, nunca hex sólido
hairline-card:   1/0  (cards têm borda?)
hairline-input:  1/0
hairline-table:  1/0
```

### 2.16 Grid e Breakpoints
```
xs: 0px / sm: 640px / md: 768px / lg: 1024px / xl: 1280px / 2xl: 1536px
container: max-width + padding horizontal
colunas por breakpoint / gap / gutter
reading-column: ~640px (~75ch)
inline-media: ~880px
```

### 2.17 Motion — Todos os Tokens
```css
/* durations */
--duration-ultra-fast: 50ms  --duration-faster: 100ms  --duration-fast: 150ms
--duration-normal: 200ms     --duration-gentle: 350ms  --duration-slow: 500ms
--duration-slower: 700ms     --duration-ultra-slow: 1000ms

/* easings */
--ease-linear: linear
--ease-in:  cubic-bezier(0.4, 0, 1, 1)
--ease-out: cubic-bezier(0, 0, 0.2, 1)
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
--ease-accelerate-mid: cubic-bezier(0.7, 0, 1, 0.5)
--ease-decelerate-mid: cubic-bezier(0.1, 0.9, 0.2, 1)
--ease-easy-ease: cubic-bezier(0.33, 0, 0.67, 1)
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1)

/* brand behavior */
press:         scale(0.97) | none   ← usa press transform?
hover-opacity: 0.8 | 1              ← fade on hover?
```

### 2.18 Componentes — Spec Completo por Estado

Para CADA componente, documente **cada estado separadamente**:

**button-primary** (default):
```
backgroundColor, textColor, borderColor, typography (font/size/weight)
rounded, padding, height, shadow (EXATO — pode ter inset highlight)
```
**button-primary-hover**: o que muda (bg, shadow)

**button-secondary** default + hover (padrão: transparent+borda → hover: fill invertido?)

**button-ghost** default (alpha hairline border, transparent bg)

**card** default + **card-hover** (shadow lift? surface tint? border shift?)

**input-text** default + focus (ring color) + error + disabled

**badge-default** (todas variantes de cor)

**nav-header** (height, bg, border, link typography, CTA style)

**inverse-section** (dark bg, light text, CTA diferente, padding)

**editorial-hero** (bg, display typography, padding)

### 2.19 Preview Tokens (quick reference)
```yaml
button_primary_bg, button_primary_text, button_primary_border
button_secondary_bg, button_secondary_text, button_secondary_border
button_tertiary_text
surface_bg, card_bg
text, text_muted
border, accent
button_radius, card_radius, input_radius
```

### 2.20 Brand Primitives (geometry decisions)
```yaml
case-eyebrow, case-btn, case-marquee, case-nav-brand, case-section-heading
motion-press, motion-hover-opacity
btn-height, btn-padx, btn-pady, btn-shadow, btn-shadow-hover, btn-active-bg
btn-border-width, btn-secondary-border-width
nav-cta-height, nav-cta-padx
card-pad, card-pad-sm, card-shadow, card-shadow-hover
hairline-width, hairline-style, hairline-color, hairline-card, hairline-input, hairline-table
nav-height, nav-padx, section-padx, section-pady, surface-pad, surface-min-h, container-max
```

### 2.21 Aliases (mapeamentos semânticos)
```yaml
# Seções/blocos
"--block-1": "--surface-bright"
"--block-2": "--surface-container-low"
"--block-7": "--surface-inverse"

# Tipografia
"--text-h1": "--text-heading"
"--text-h2": "--text-title"
"--text-lead": "--text-body"
"--text-nav": "--text-label"
"--text-btn": "--text-label"

# Font weights
"--font-weight-display": "400"
"--font-weight-heading": "700"
"--font-weight-btn": "500"

# Tracking aliases
"--tracking-display": "-0.02em"
"--tracking-btn": "-0.005em"

# Shadow aliases
"--shadow-1": "--elevation-flat"
"--shadow-2": "--elevation-raised"
"--shadow-3": "--elevation-floating"
```

### 2.22 Showcase (copy real do site)
```yaml
kicker:        "[categoria — ex: 'AI safety company']"
headline:      "[headline principal encontrado no site]"
lead:          "[subtítulo ou lead text]"
primary_cta:   "[texto do botão CTA primário]"
secondary_cta: "[texto do botão CTA secundário]"
tertiary_cta:  "[link/CTA terciário se houver]"
```

### 2.23 Imagens e Ícones
```
ícone-lib:    Lucide / Heroicons / Phosphor / Tabler / FontAwesome / custom
ícone-sizes:  16px (inline), 20px (button), 24px (featured)
imagem-estilo: foto / ilustração / 3D / flat / mixed
aspect-ratios: card (16:9? 4:3?), hero, avatar
img-radius:   none / 8px / full (avatar)
```

### 2.24 Estilo Visual Geral
```
aesthetic:     minimal/editorial/luxury/playful/corporate/dark/moody
personality:   3-5 adjetivos que descrevem visualmente a marca
inspiração:    Material / Apple HIG / Radix / Ant Design / custom
```

---

## FASE 3 — Seções de Prosa (após o YAML)

**3.1 Visual Theme & Atmosphere** — a "personalidade" do design em 2 parágrafos

**3.2 Color Palette & Roles** — POR QUÊ cada cor existe; hierarquia de decisões; alpha vs sólido

**3.3 Typography Rules** — dual-voice split; mínimos; regras de caso; pesos; tracking

**3.4 Components** — assinaturas visuais dos componentes; patterns de hover

**3.5 Layout Principles** — spacing rhythm; container; coluna de leitura

**3.6 Depth & Elevation** — filosofia de profundidade; quando usar shadow vs surface tint

**3.7 Do's and Don'ts**
```
✅ Do:    [lista das regras positivas mais importantes]
❌ Don't: [lista dos erros mais comuns a evitar]
```

**3.8 Responsive Behavior** — como seções colapsam; tamanho mínimo de texto; nav mobile

**3.9 Accessibility & Interaction** — WCAG AA; focus rings; touch targets; reduced-motion

**3.10 Agent Prompt Guide** — como solicitar componentes em prompts:
```
Quick Color Reference (tabela: role → hex)
Example Prompts: hero, card, nav, dark section
Iteration Guide: 6-8 regras para corrigir quando algo sai errado
```

**3.11 Implementation Guide**
```
Tabela de mappings: design.md token | Tailwind | shadcn slot | Value
Critical CSS snippet (:root { ... })
```

---

## Regras de Qualidade

1. **NUNCA campo vazio** — inferir e marcar `*inferido`
2. **Sombras com valores EXATOS** — copiar box-shadow completo
3. **Alpha borders sempre rgba()** — nunca converter para hex sólido
4. **Hover states separados** — cada componente tem seu hover documentado individualmente
5. **CSS variables com valores reais** — nunca `var(--algo)` sem o valor
6. **Dark mode completo** — inclui elevation shadows dark-specific
7. **brand_primitives captura geometry** — altura botão, padding, hairline values
8. **showcase usa copy REAL** — título, headline, CTAs exatos do site
9. **Preview tokens** — conjunto de 12 tokens quick-reference sempre presente
10. Tailwind: mapear classes → tokens equivalentes
11. CSS-in-JS: extrair dos objetos JS serializados no HTML
12. Fontes Google: extrair URL completa com pesos incluídos

---

## Referências

Para casos especiais (Tailwind config, CSS-in-JS, tokens JSON), consulte `references/css-patterns.md`.
