# UI Mockups - {{FEATURE_NAME_TITLE}}

> Wireframes ASCII e descrições de cada tela/componente da feature.
> Este arquivo documenta VISUALMENTE como o usuário interagirá com o sistema.
> Generated: {{DATE}}

---

## Tela 1: {Nome da Tela}

### Wireframe

```
┌─────────────────────────────────────────────────────────┐
│  [{≡}] {Título da Página}           [🔔] [👤] [⚙]      │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  {Desenhe o wireframe ASCII aqui}                       │
│                                                          │
│  Dicas:                                                  │
│  - Use ┌─┐└┘├┤ para bordas                             │
│  - Use │ para separadores verticais                     │
│  - Use ─ para separadores horizontais                   │
│  - Use [...] para botões                                │
│  - Use [{x}] para checkboxes/toggles                    │
│  - Use emojis para ícones (🔍 📊 ⚙ 👤 etc)           │
│                                                          │
└─────────────────────────────────────────────────────────┘
```

### Descrição

- **Propósito**: {O que o usuário pode fazer nesta tela? Qual problema resolve?}
- **Componentes Principais**:
  - {Componente 1}: {Descrição breve}
  - {Componente 2}: {Descrição breve}
  - {Componente 3}: {Descrição breve}
- **Interações**:
  - **Click em {elemento}**: {O que acontece}
  - **Hover em {elemento}**: {Feedback visual}
  - **Submit form**: {Ação realizada}
- **Estados**:
  - **Default**: {Aparência inicial}
  - **Loading**: {Como mostra carregamento? Skeleton? Spinner?}
  - **Error**: {Como mostra erros? Toast? Message bar?}
  - **Empty**: {Mensagem quando não há dados? CTA para criar?}
  - **Success**: {Feedback de sucesso?}

### Responsividade

- **Desktop (> 1024px)**: {Descrição do layout desktop}
- **Tablet (768px - 1024px)**: {Mudanças no layout}
- **Mobile (< 768px)**: {Layout mobile - stack vertical? Menu hamburger?}

### Navegação

- **De**: {Tela/componente anterior}
- **Para**: {Próximas telas possíveis}
- **Ações**:
  - [{Botão}]: Navega para {tela}
  - [{Link}]: Abre {modal/página}

### Acessibilidade

- **Foco inicial**: {Onde o cursor deve iniciar?}
- **Tab order**: {Ordem lógica de navegação}
- **Screen reader**: {Principais ARIA labels}

---

## Tela 2: {Nome da Próxima Tela}

{Repita a estrutura acima para cada tela}

---

## Componentes Reutilizáveis

### {Nome do Componente}

**Wireframe:**
```
{ASCII art do componente isolado}
```

**Uso:**
- Aparece em: {Lista de telas onde este componente aparece}
- Variantes: {Diferentes versões/estados do componente}
- Props: {Parâmetros que o componente recebe}

---

## Fluxo de Navegação (Overview)

```
[Tela Inicial]
     │
     ├─[Ação 1]──▶ [Tela A]
     │                  │
     │                  └─[Voltar]──▶ [Tela Inicial]
     │
     ├─[Ação 2]──▶ [Tela B]
     │                  │
     │                  ├─[Próximo]──▶ [Tela C]
     │                  │
     │                  └─[Cancelar]──▶ [Tela Inicial]
     │
     └─[Ação 3]──▶ [Tela D]
```

---

## Notas de Design

### Paleta de Cores
- **Primária**: {Cor principal da interface}
- **Secundária**: {Cor para ações secundárias}
- **Sucesso**: {Verde para feedback positivo}
- **Erro**: {Vermelho para erros}
- **Warning**: {Amarelo para alertas}

### Tipografia
- **Títulos**: {Font, tamanho}
- **Corpo**: {Font, tamanho}
- **Labels**: {Font, tamanho}

### Espaçamento
- **Padding padrão**: {16px, 24px, etc}
- **Gap entre elementos**: {8px, 12px, etc}

---

*Template MORPH-SPEC v2.1.0 by Polymorphism Tech*
