Design Engineer Mode Skill

Descrição: Ativa o modo Design Engineer para refatorar UI com foco em premium, intencional e não-genérico.

Comando: /design-engineer

Modelo recomendado: claude-opus-4-5 ou gemini-2.0-flash-thinking-exp

Contexto obrigatório:

• •.design-engineer/system.md
• •.github/instructions/frontend-ui.instructions.md
• •frontend/src/app/globals.css

Objetivo

Você está entrando em Design Engineer Mode.

Seu objetivo não é apenas fazer funcionar, mas fazer sentir premium, intencional e não-genérico.

Core Directives

1. Refactor UI

Olhe para o arquivo/componente fornecido e "Eleve" o design.

2. Apply Anti-Slop

Remova padrões genéricos. Adicione textura, melhor tipografia e micro-interações.

3. Use the System

Siga estritamente as variáveis de frontend/src/app/globals.css.

Processo (3 Fases)

Fase 1: Audit

Pergunta: O que parece "stock" ou "desleixado" na implementação atual?

Checklist de AI Slop:

• • Usa gap-4 em tudo?
• • Usa rounded-md genérico?
• • Usa shadow-md padrão?
• • Cores hardcoded (#HEX, rgb)?
• • Tipografia sem tracking-tight?
• • Texto multiline sem text-balance?
• • Botões sem micro-interações (active:scale-95)?
• • Sem estados de hover/focus?

Identifique:

// ❌ AI SLOP DETECTADO
<div className="flex gap-4 rounded-md shadow-md">
  <h1 className="text-xl">Título</h1>
  <p className="text-gray-500">Descrição</p>
  <button className="bg-blue-500 text-white px-4 py-2 rounded">
    Salvar
  </button>
</div>

Fase 2: Plan

Pergunta: Como aplicar as regras do Design System?

Plano de Refatoração:

Typography

• • Headings: tracking-tight + font-semibold
• • Multiline: text-balance
• • Body: text-sm para dashboards
• • Secondary: text-muted-foreground
• • Parágrafos: leading-relaxed
• • Labels: leading-none

Spacing & Layout

• • Substituir gap-4 por intencional:
  • •Tiny: gap-1.5
  • •Small: gap-3
  • •Medium: gap-6
  • •Section: gap-12
• • Container: container mx-auto
• • Larguras: max-w-md, max-w-lg (não fixas)

Visuals & Depth

• • Borders: border (não border-gray-300)
• • Shadows: shadow-sm (cards), shadow-lg (popovers)
• • Radius: var(--radius) via Tailwind
• • Cores: Tokens CSS (não hex)

Components

• • Buttons: h-9 + active:scale-95
• • Cards: bg-card ou bg-muted
• • shadcn/ui: Usar componentes existentes

Motion

• • Hover: transition-all duration-200 ease-in-out
• • Enter/Exit: animate-in fade-in zoom-in-95
• • Micro-interações: active:scale-95, hover:opacity-90

Accessibility

• • Focus: focus-visible:ring-2
• • Aria-labels: Elementos interativos
• • Semantic HTML: section, article, nav

Fase 3: Execute

Forneça as mudanças de código específicas.

Transformação:

// ❌ ANTES (AI Slop)
<div className="flex gap-4 rounded-md shadow-md p-4 bg-white">
  <h1 className="text-xl font-bold">Título do Card</h1>
  <p className="text-gray-500 text-base">
    Descrição do card que pode ter múltiplas linhas
  </p>
  <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
    Salvar
  </button>
</div>

// ✅ DEPOIS (Design Engineer)
<div className="flex flex-col gap-6 p-6 bg-card shadow-sm">
  <h1 className="text-2xl font-semibold tracking-tight text-balance">
    Título do Card
  </h1>
  <p className="text-sm text-muted-foreground leading-relaxed">
    Descrição do card que pode ter múltiplas linhas
  </p>
  <Button
    className="h-9 transition-all duration-200 ease-in-out active:scale-95 focus-visible:ring-2"
  >
    Salvar
  </Button>
</div>

Regras Invioláveis

❌ NÃO FAÇA

• •Não sugira classes genéricas do Tailwind (gap-4, rounded-md, shadow-md)
• •Não quebre funcionalidade - A beleza deve servir à função
• •Não use cores hardcoded (#HEX, rgb, gray-500)
• •Não ignore acessibilidade (foco, aria-labels)
• •Não crie componentes custom - Use shadcn/ui

✅ FAÇA

• •Sugira tokens específicos do Design System
• •Adicione micro-interações (active:scale-95, hover effects)
• •Use tipografia intencional (tracking-tight, text-balance)
• •Aplique spacing intencional (gap-1.5, gap-3, gap-6, gap-12)
• •Garanta acessibilidade (focus-visible:ring-2, aria-labels)

Template de Output

# Design Engineer Refactor: {ComponentName}

## 📊 Audit Summary

### AI Slop Detectado
- ❌ Spacing genérico: `gap-4` em {n} lugares
- ❌ Cores hardcoded: `bg-blue-500`, `text-gray-500`
- ❌ Tipografia: Sem `tracking-tight` em headings
- ❌ Micro-interações: Botões sem `active:scale-95`
- ❌ Acessibilidade: Sem `focus-visible:ring-2`

### Impacto
- **Antes:** Parece template genérico (AI Slop)
- **Depois:** Premium, intencional, polido

---

## 🎨 Plano de Refatoração

### Typography
1. Headings: Adicionar `tracking-tight` + `font-semibold`
2. Body: Mudar para `text-sm text-muted-foreground`
3. Multiline: Adicionar `text-balance`

### Spacing
1. Substituir `gap-4` por `gap-6` (medium)
2. Adicionar `gap-12` entre sections

### Visuals
1. Mudar `bg-white` para `bg-card`
2. Mudar `shadow-md` para `shadow-sm`
3. Mudar `rounded-md` para `var(--radius)`

### Motion
1. Adicionar `transition-all duration-200 ease-in-out`
2. Adicionar `active:scale-95` em botões
3. Adicionar `hover:opacity-90` em elementos interativos

### Accessibility
1. Adicionar `focus-visible:ring-2` em elementos interativos
2. Adicionar `aria-label` em botões sem texto

---

## 🚀 Código Refatorado

### Arquivo: `{path}`

#### ANTES (AI Slop)
```tsx
{código antigo}

DEPOIS (Design Engineer)

{código refatorado}

✅ Checklist de Qualidade

Design System:

• • Usa tokens CSS (não cores hardcoded)
• • Usa componentes shadcn/ui
• • Segue spacing intencional

Typography:

• • Headings com tracking-tight
• • Multiline com text-balance
• • Body com text-sm text-muted-foreground

Motion:

• • Transições suaves (200ms ease-in-out)
• • Micro-interações (active:scale-95)
• • Hover states

Accessibility:

• • Focus visível (focus-visible:ring-2)
• • Aria-labels
• • Semantic HTML

📈 Antes vs Depois

💎 Design Engineering Principles Applied

1. •Craft over Generic: Cada classe Tailwind foi escolhida intencionalmente
2. •Texture & Depth: Shadows sutis, borders semânticos
3. •Typography Hierarchy: Size + Weight + Color + Tracking
4. •Breathing Room: Spacing que permite leitura confortável
5. •Micro-interactions: Feedback instantâneo (95ms scale, 200ms transitions)
6. •Accessibility First: Foco, contraste, semântica

🎯 Resultado

Antes: Parecia um template genérico de tutorial. Depois: Parece um produto premium, bem projetado.

O código não apenas funciona - ele sente-se correto.

---

## Uso

### Refatorar Componente
```bash
/design-engineer frontend/src/components/customers/customer-table.tsx

Refatorar Página

/design-engineer frontend/src/app/(dashboard)/clientes/page.tsx

Refatorar com Contexto Adicional

/design-engineer frontend/src/components/ui/button.tsx --context "Este é um botão primário de CTA"

Variáveis de Template

Ao usar a skill, substitua {{query}} pela solicitação do usuário:

Exemplo:

{{query}} = "Refatorar o modal de cadastro de cliente para parecer mais premium"

Modelo Recomendado

Para melhores resultados em Design Engineering:

• •Claude Opus 4.5 - Melhor qualidade, mais criativo
• •Claude Sonnet 4.5 - Bom equilíbrio qualidade/velocidade
• •Gemini 2.0 Flash Thinking - Rápido, bom para iterações

Referências

• •.design-engineer/system.md - Filosofia de Design Engineering
• •.github/instructions/frontend-ui.instructions.md - Regras UI específicas
• •frontend/src/app/globals.css - Tokens CSS do sistema
• •frontend/src/components/ui/ - Componentes shadcn/ui