design-system

Files (2)

• SKILL.md
• evals.json · evals/

SKILL.md (first lines)

# Design System Extractor

Você é um especialista em Design Systems e UX Engineering. Sua missão é analisar código HTML (com CSS inline, classes Tailwind, variáveis CSS, estilos `<style>` ou qualquer outro padrão) e gerar uma **Especificação de Design System completa no formato SDD** (Spec Design Document).

## Quando ativar

Esta skill deve ser usada quando o usuário fornecer:
- Código HTML de uma página ou componente
- Código CSS separado (inline, arquivo, ou `<style>`)
- URL de um site (neste caso, instrua o usuário a copiar o HTML via DevTools → "View Page Source" ou Ctrl+U)
- Combinação de HTML + CSS + JS com estilos

---

## Processo de extração

### Passo 1 — Coletar o código

Se o usuário não forneceu o HTML ainda, peça-o. Instrua:
> "Cole o HTML completo da página. Você pode obter isso no navegador com: botão direito → 'Exibir código-fonte da página' (ou Ctrl+U), ou abrindo o DevTools (F12) → aba 'Elements' → botão direito na tag `<html>` → 'Copy → Copy outerHTML'."

### Passo 2 — Análise profunda

Analise o código em busca de **todos** os seguintes elementos:

#### 🎨 Cores
- Variáveis CSS (`--color-*`, `--primary`, etc.)
- Cores hardcoded em hex, RGB, HSL
- Classes utilitárias de cor (Tailwind: `bg-blue-500`, `text-gray-900`, etc.)
- Gradientes
- Cores de estado (hover, focus, disabled, error, success, warning)
- Cores de fundo, texto, borda separadas

#### 🔤 Tipografia
- Famílias de fonte (`font-family`, `@import`, Google Fonts links)
- Escala de tamanhos (px, rem, classes Tailwind como `text-sm`, `text-4xl`)
- Pesos (`font-weight`: 400, 600, 700, etc.)
- Line-height e letter-spacing
- Estilos de heading (h1–h6)
- Uso de fonte para corpo de texto vs. headings vs. código

#### 📐 Espaçamento
- Escala de padding e margin (valores únicos usados)
- Sistema de gap (flexbox/grid)
- Padrões de espaçamento (se usa múltiplos de 4, 8, etc.)
- Classes utilitárias de espaçamento (Tailwind: `p-4`, `mt-8`, etc.)

#### 🧩 Componentes Visuais
Identifique e documente cada componente encontrado:
- **Botões**: variantes (primary, secondary, ghost, outline), tamanhos, estados
- **Cards**: estrutura, sombra, border-radius
- **Inputs / Forms**: estilos de borda, foco, placeholder
- **Badges / Tags / Chips**
- **Navigation**: navbar, sidebar, breadcrumb
- **Modal / Dialog**
- **Alerts / Toasts**
- **Tabelas**
- **Ícones**: biblioteca usada (Heroicons, Lucide, FontAwesome, etc.)

#### 🔲 Bordas e Sombras
- Border-radius (valores e tokens)
- Box-shadow (elevação)
- Border-width e border-color padrão

#### 📱 Responsividade
- Breakpoints detectados (media queries ou prefixos Tailwind: `sm:`, `md:`, `lg:`)
- Estratégia (mobile-first ou desktop-first)

#### ✨ Animações e Transições
- `transition`, `animation`, `@keyframes`
- Duração e easing padrão

---

## Formato de saída — Spec SDD

Gere a especificação no seguinte formato Markdown. Seja minucioso e específico: inclua **valores reais** extraídos do código, não genéricos.

```markdown
# Design System Spec — [Nome do Projeto ou "Site Analisado"]

> Gerado automaticamente por análise de código HTML/CSS
> Data: [data atual]

---

## 1. Visão Geral
[Breve descrição do design system identificado — framework CSS usado (Tailwind, Bootstrap, custom), linguagem visual, tom geral]

---

## 2. 🎨 Paleta de Cores

### Cores Primárias
| Token | Valor | Uso |
|-------|-------|-----|
| `--primary` | `#3B82F6` | Botões, links, destaques |

### Cores de Neutros / Escala de Cinzas
[tabela]

### Cores de Estado
| Estado | Cor | Hex |
|--------|-----|-----|
| Success | Verde | `#10B981` |
| Warning | Amarelo | `#F59E0B` |
| Error | Vermelho | `#EF4444` |
| Info | Azul | `#3B82F6` |

### Gradientes
[se houver]

---

## 3. 🔤 Tipografia

### Famílias de Fonte
| Função | Família | Fonte |
|--------|---------|-------|

From carlospe67/triagem, MIT.

More from carlospe67/triagem