Complete UX Design Specification (Steps 3-14)

Full autonomous pass through all workflow steps with party mode team: - Step 3: Core Experience validated and enriched - Step 4: Emotional response mapping (Carla: segurança→surpresa→confiança, Rafael: alívio→revelação→empoderamento, micro-emotions defined) - Step 5: Inspiration analysis (WhatsApp, iFood, Nubank, Typeform patterns) - Step 6: Design system choice (Tailwind CSS + custom components for MPA) - Step 7: Defining experience mechanics (5-screen flow detailed) - Step 8: Visual foundation (blue/gold palette, Inter typeface, 4px grid) - Step 9: Design direction ("Consulta Jurídica Digital" concept) - Step 10: User journey flows with Mermaid diagrams (4 journeys) - Step 11: Component strategy (6 custom components: ChipSelector, StepperProgress, PreviewCard, LegalBadge, LoadingState, CopyFallback) - Step 12: UX consistency patterns (buttons, feedback, forms, navigation) - Step 13: Responsive design (mobile-only + desktop adaptation) and accessibility (WCAG 2.1 AA guideline) - Step 14: Workflow completion https://claude.ai/code/session_01CvrcMDqfCKWV2hC3xpRbx3
2026-03-08 22:32:24 +00:00 · 2026-03-08 22:32:24 +00:00 · 6e55d58206
parent caa7e51026
commit 6e55d58206
1 changed files with 694 additions and 1 deletions
--- a/docs/jus-ia-project/ux-design-specification.md
+++ b/docs/jus-ia-project/ux-design-specification.md
@ -1,5 +1,5 @@
 ---
-stepsCompleted: [1, 2]
+stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
 inputDocuments:
  - prd.md
  - product-brief.md
@ -81,3 +81,696 @@ O advogado responde perguntas sobre seu caso e recebe um pedido otimizado pronto
 - **Agrupamento por momento mental**: 2-3 perguntas relacionadas por tela, máximo 4-5 telas no fluxo completo.
 - **Placeholders contextuais**: Quando texto livre for necessário, exemplos específicos guiam a resposta (ex: "Ex: demissão sem justa causa em 15/01/2026").
 - **Progresso visual claro**: Indicador de progresso mostra 4-5 etapas — nunca mais que isso.
+
+---
+
+## Desired Emotional Response
+
+### Primary Emotional Goals
+
+**Para Dra. Carla (nunca usou IA):** Segurança → Surpresa → Confiança. Ela precisa sentir que está no controle (perguntas familiares sobre seu caso), ser surpreendida pelo resultado (preview com fundamentação jurídica que ela reconhece), e sair confiante de que a ferramenta funciona.
+
+**Para Dr. Rafael (usa IA mas itera):** Alívio → Revelação → Empoderamento. Ele precisa sentir alívio ao ver que as perguntas certas estão sendo feitas (não precisa pensar no prompt), revelação ao entender que o problema era o pedido e não a ferramenta, e empoderamento ao ter um caminho repetível.
+
+**Para Dr. Marcos (dono de escritório):** Controle → Praticidade → Tranquilidade. Precisa sentir que tem controle sobre como a equipe usa IA (deep links por área), que a solução é prática (sem admin panel, sem configuração), e tranquilidade de que a qualidade está garantida (base verificada do Jus IA).
+
+### Emotional Journey Mapping
+
+| Momento | Emoção Desejada | Emoção a Evitar | Mecanismo UX |
+|---------|----------------|-----------------|--------------|
+| **Abrir o link** | Curiosidade confiante | Desconfiança, "mais uma ferramenta" | Linguagem jurídica desde o primeiro pixel, sem menção a IA/prompt |
+| **Primeira pergunta** | "Isso é sobre o meu caso" | "Estão pedindo meus dados" | Pergunta relevante e específica, não genérica |
+| **Durante o fluxo** | Fluidez, progresso | Tédio, burocracia, "formulário do governo" | Toque único, progresso visual, 4-5 telas máximo |
+| **Pergunta da IA** | "Boa pergunta, não tinha pensado nisso" | "Por que está perguntando isso?" | Pergunta contextual que demonstra inteligência sem parecer aleatória |
+| **Loading da IA** | Expectativa positiva | Ansiedade, impaciência | Indicador com microcopy: "Analisando seu caso..." (não "Processando...") |
+| **Preview** | Surpresa + validação | Desconfiança do resultado | Fundamentação jurídica visível (artigos, súmulas) — a linguagem do advogado |
+| **Redirect** | Satisfação, "funcionou!" | Medo de perder o que foi feito | Confirmação visual antes do redirect, opção de copiar |
+| **Resultado no Jus IA** | "Por que não fiz isso antes?" | "Preciso refazer tudo" | Prompt bem construído = resultado na primeira tentativa |
+
+### Micro-Emotions
+
+**Críticas para o sucesso:**
+- **Confiança > Ceticismo**: Cada elemento visual deve reforçar credibilidade institucional (Jusbrasil como âncora de confiança)
+- **Competência > Confusão**: O advogado nunca deve se perguntar "o que devo fazer agora?" — a próxima ação é sempre óbvia
+- **Progresso > Estagnação**: Cada toque leva visivelmente adiante — barra de progresso + feedback imediato
+
+**A evitar ativamente:**
+- **Ansiedade**: "Estou colocando dados do meu cliente aqui?" → Microcopy: "Seus dados não são armazenados"
+- **Frustração**: "Perdi o que já respondi" → Estado preservado no browser back
+- **Condescendência**: "Isso é para quem não sabe usar IA" → Linguagem de profissional para profissional
+
+### Emotion-Design Connections
+
+| Emoção Desejada | Decisão de UX |
+|-----------------|---------------|
+| Segurança | Sem login, sem dados retidos, disclaimer visível mas não invasivo |
+| Competência | Microcopy em linguagem jurídica, perguntas que demonstram expertise do sistema |
+| Velocidade | Toque único, agrupamento por momento mental, indicador de progresso compact |
+| Surpresa positiva | Preview com artigos/súmulas específicos — "a máquina sabe direito" |
+| Controle | Botão voltar visível, browser back funcional, opção de copiar antes do redirect |
+
+### Emotional Design Principles
+
+1. **Credibilidade antes de tudo**: A primeira impressão determina se Carla continua ou fecha. Cada pixel deve comunicar "ferramenta jurídica profissional", não "startup de IA".
+2. **Inteligência demonstrada, não declarada**: Não dizer "nossa IA é inteligente" — mostrar fazendo perguntas que o advogado reconhece como relevantes.
+3. **Progresso como recompensa**: Cada resposta leva visivelmente ao resultado — o advogado sente que está construindo algo, não preenchendo formulário.
+4. **Transparência sem sobrecarga**: "Seus dados não são armazenados" uma vez, discreto. Não repetir em cada tela.
+
+---
+
+## UX Pattern Analysis & Inspiration
+
+### Inspiring Products Analysis
+
+**1. WhatsApp — Experiência de entrada e compartilhamento**
+- O que faz bem: preview de links (OG tags) cria primeira impressão antes do clique. Compartilhar é o gesto mais natural. A maioria dos advogados brasileiros (90%) usa profissionalmente.
+- UX lesson: O link compartilhado precisa ter preview rico e auto-explicativo. O advogado que recebe deve entender o valor antes de clicar.
+
+**2. iFood / Rappi — Fluxo de seleção em poucos toques**
+- O que faz bem: Categoria → Subcategoria → Customização em 3-4 telas. Decisões por toque único. Progresso visível. Funciona perfeitamente em mobile com uma mão.
+- UX lesson: Nosso fluxo (Tipo de tarefa → Área → Subtipo → Perguntas → Preview) deve ter a mesma fluência. Cada tela uma decisão principal. Chips e seleções, não campos de texto.
+
+**3. Nubank — Confiança em mobile para produto financeiro**
+- O que faz bem: Tom profissional mas acessível. Linguagem clara sem jargão técnico financeiro. Feedback visual imediato em cada ação. Funciona como "ferramenta financeira" sem parecer "app de banco".
+- UX lesson: O Start Kit deve parecer "ferramenta jurídica" assim como o Nubank parece "ferramenta financeira" — sem parecer que é IA por trás.
+
+**4. Typeform — Fluxo conversacional um passo por vez**
+- O que faz bem: Uma pergunta por tela cria sensação de conversa, não formulário. Transições suaves. Progresso visual. Lógica condicional que pula perguntas irrelevantes.
+- UX lesson: O agrupamento por "momento mental" é nossa versão otimizada deste padrão — conversacional mas mais eficiente que uma pergunta por tela.
+
+### Transferable UX Patterns
+
+**Navigation Patterns:**
+- **Seleção por chips (iFood)**: Para tipo de tarefa, área do direito, subtipo — toque único, visual claro
+- **Stepper linear (Nubank onboarding)**: Indicador de progresso 4-5 etapas, sempre visível no topo
+- **Deep link direto (WhatsApp)**: Entrada no fluxo exato via URL — pula seleção inicial quando possível
+
+**Interaction Patterns:**
+- **Progressive disclosure (Typeform)**: Mostrar perguntas condicionais apenas quando relevantes (ex: jornada contratual só aparece se CLT)
+- **Chip selection (Material Design)**: Respostas pré-definidas como chips tocáveis, sem dropdown
+- **Inline validation (Nubank)**: Feedback imediato ao responder, sem esperar submit
+
+**Feedback Patterns:**
+- **Skeleton loading (Nubank)**: Durante chamada LLM, mostrar estrutura da próxima tela com shimmer
+- **Microcopy contextual (Typeform)**: Texto helper que guia sem explicar demais
+- **Success celebration (Duolingo)**: Micro-animação no preview para marcar o "momento aha"
+
+### Anti-Patterns to Avoid
+
+- **Formulário longo com scroll**: Advogado entre audiências não vai scrollar. Uma tela = uma decisão.
+- **Dropdown menus em mobile**: Dropdowns são péssimos em touch. Sempre chips ou radio buttons.
+- **Loading genérico ("Carregando...")**: Não comunica valor. Usar microcopy contextual ("Analisando seu caso...").
+- **Explicação antes da ação**: Não mostrar tutorial ou onboarding. A primeira tela já é a primeira pergunta.
+- **Linguagem de chatbot**: "Olá! Sou um assistente de IA..." — este framing afasta a Dra. Carla imediatamente.
+
+### Design Inspiration Strategy
+
+**Adotar diretamente:**
+- Chip selection para todas as perguntas de seleção (iFood/Material)
+- Stepper linear compact no topo (Nubank)
+- OG tags ricas para preview no WhatsApp
+
+**Adaptar ao contexto:**
+- Progressive disclosure do Typeform → agrupamento por momento mental (2-3 perguntas/tela)
+- Tom conversacional do Typeform → linguagem jurídica profissional
+- Celebração do Duolingo → micro-feedback sutil no preview (profissional, não gamificado)
+
+**Evitar explicitamente:**
+- Chatbot UI com balões de conversa — parece IA, afasta Carla
+- Onboarding/tutorial antes do fluxo — barra de entrada
+- Multi-step wizard com 8+ etapas — parece burocracia
+
+---
+
+## Design System Foundation
+
+### Design System Choice
+
+**Decisão: Tailwind CSS + componentes custom leves (sem framework de componentes)**
+
+### Rationale for Selection
+
+1. **MPA mobile-first**: Tailwind funciona perfeitamente com server-rendered HTML — sem dependência de JavaScript framework pesado
+2. **Performance**: CSS utilitário gera bundles mínimos. Cada page load carrega apenas o CSS usado — crítico para 3G entre audiências
+3. **Customização total**: Sem overhead de Material Design ou Bootstrap que traria componentes desnecessários e visual genérico
+4. **Boring technology**: Tailwind é estável, bem documentado, ampla comunidade. Sem risco de lock-in ou abandono
+5. **Velocidade de desenvolvimento**: Utility-first permite iterar rapidamente no MVP sem criar sistema de design complexo
+
+### Implementation Approach
+
+- **Base**: Tailwind CSS v4+ com configuração customizada de design tokens
+- **Componentes**: HTML semântico + classes Tailwind. Componentes server-side (templates/partials), não client-side
+- **JavaScript**: Minimal — progressive enhancement para interações que melhoram a experiência (transições, validação inline) mas não são obrigatórias
+- **Ícones**: Heroicons (já integrado com Tailwind) para consistência visual
+
+### Customization Strategy
+
+- Design tokens customizados no Tailwind config: cores, tipografia, espaçamento, border-radius
+- Componentes reutilizáveis via templates/partials do backend (não React/Vue/Svelte)
+- Preflight reset + base styles para consistência cross-browser
+- Sem tema escuro no MVP — foco em uma experiência visual coesa
+
+---
+
+## Core User Experience
+
+### Defining Experience
+
+**"Responda sobre seu caso e receba um pedido jurídico otimizado pronto para gerar resultado na primeira tentativa."**
+
+Este é o equivalente do Start Kit ao "Swipe to match" do Tinder — a interação que, se perfeita, define o produto. O advogado descreve seu caso respondendo perguntas e recebe um artefato jurídico (pedido otimizado) que funciona de primeira. A mágica é: as perguntas certas extraem as informações certas, sem que o advogado precise saber o que é relevante para um bom prompt.
+
+### User Mental Model
+
+**O que o advogado espera:** Uma consulta estruturada. Semelhante a quando um colega mais experiente pergunta sobre o caso antes de ajudar: "Qual o vínculo?", "Quanto tempo?", "Tem registro de ponto?". O advogado entende perguntas — faz isso todo dia com clientes.
+
+**O que NÃO espera:** Um chat com IA. Não espera campo de texto livre para "descrever seu caso". Não espera ter que saber o que é relevante. Não espera vocabulário técnico de IA.
+
+**Modelo mental correto a reforçar:** "Estou consultando um sistema especialista que sabe fazer as perguntas certas sobre meu tipo de caso."
+
+**Workarounds atuais:**
+- Carla: escreve petição do zero, 2-3 horas. Copia modelo de colega.
+- Rafael: copia prompts do Google, itera 3-5x no ChatGPT. Gasta 1h tentando.
+- Marcos: equipe usa ChatGPT sem padrão, resultados inconsistentes.
+
+### Success Criteria
+
+| Critério | Indicador | Meta |
+|----------|-----------|------|
+| "Isso funciona de primeira" | Resultado no Jus IA sem reformulação | >70% |
+| "Foi rápido" | Tempo do primeiro toque ao redirect | <5 min |
+| "Não precisei aprender nada" | Conclusão sem abandono | >60% |
+| "Vou mandar pra colega" | Tráfego por referral/WhatsApp | >30% |
+| "Não perdi nada ao voltar" | Estado preservado no browser back | 100% |
+
+### Novel UX Patterns
+
+O Start Kit combina padrões estabelecidos de forma inovadora:
+
+**Padrão estabelecido (familiar):** Fluxo de seleção tipo e-commerce (categoria → subcategoria → detalhes). O advogado já faz isso no iFood e Nubank.
+
+**Inovação invisível:** A transição de perguntas determinísticas para perguntas geradas por IA. O advogado não percebe que mudou de fase — as perguntas da IA são renderizadas identicamente às estruturadas (chips, seleções, placeholders contextuais).
+
+**Padrão novo que precisa de validação:** O preview como "contrato de confiança" — mostrar fundamentação jurídica antes do redirect. Este é o ponto de risco: se o preview for confuso ou parecer "prompt", quebra a confiança. Se mostrar artigos/súmulas reconhecíveis, cria o "momento aha".
+
+### Experience Mechanics
+
+**1. Initiation:**
+- Advogado recebe link via WhatsApp, post do Jusbrasil, ou acesso direto
+- Deep link pode pré-selecionar área (ex: `/trabalhista/horas-extras` pula seleção inicial)
+- Se link genérico: primeira tela = "O que você precisa?" com chips de tipo de tarefa
+
+**2. Interaction (4-5 telas):**
+- **Tela 1 — Tipo + Área**: "O que você precisa?" [Petição Inicial] [Contestação] [Pesquisa] + Área do direito [Trabalhista] [Cível] (agrupados se deep link não pré-selecionou)
+- **Tela 2 — Subtipo**: Subtipos da área selecionada como chips (ex: [Horas Extras] [Rescisão Indireta] [Dano Moral])
+- **Tela 3 — Dados do caso**: Perguntas estruturadas agrupadas por momento mental (empregador PJ/PF, regime, jornada, período — todas no mesmo contexto "relação de trabalho")
+- **Tela 4 — Refinamento contextual**: Perguntas da IA + determinísticas restantes, renderizadas identicamente (registro de ponto, testemunhas, pagamento parcial). Loading state: "Analisando seu caso..."
+- **Tela 5 — Preview + Redirect**: Pedido montado com fundamentação jurídica + botão "Gerar no Jus IA →"
+
+**3. Feedback:**
+- Barra de progresso no topo atualiza a cada avanço (4-5 steps)
+- Seleção de chip: feedback visual imediato (cor + check)
+- Loading IA: skeleton com shimmer + microcopy ("Analisando seu caso...")
+- Preview: fundamentação jurídica destacada visualmente (badges com artigos/súmulas)
+
+**4. Completion:**
+- Preview mostra o pedido montado em linguagem jurídica (não o prompt raw)
+- Fundamentação jurídica como badges clicáveis (art. 59 CLT, Súmula 85 TST)
+- Botão primário: "Gerar no Jus IA →" (redirect via URL parametrizada)
+- Se URL excede limite: fallback com "Copiar pedido" + link direto para Jus IA
+- Microcopy: "Seus dados não são armazenados após o redirecionamento"
+
+---
+
+## Visual Design Foundation
+
+### Color System
+
+**Paleta primária — Confiança jurídica:**
+
+| Token | Cor | Uso |
+|-------|-----|-----|
+| `primary` | Azul escuro (#1E3A5F) | Ações primárias, header, elementos de confiança |
+| `primary-light` | Azul médio (#2E5A8F) | Hover states, links |
+| `accent` | Dourado/âmbar (#D4A843) | Destaque, badges de fundamentação jurídica, CTA secundário |
+| `surface` | Branco (#FFFFFF) | Background de cards e áreas de conteúdo |
+| `background` | Cinza muito claro (#F8F9FA) | Background geral das páginas |
+| `text-primary` | Cinza escuro (#1A1A2E) | Texto principal |
+| `text-secondary` | Cinza médio (#6B7280) | Texto auxiliar, placeholders |
+
+**Paleta semântica:**
+
+| Token | Cor | Uso |
+|-------|-----|-----|
+| `success` | Verde (#059669) | Confirmação, progresso completo |
+| `warning` | Âmbar (#D97706) | Atenção, fallback copy-paste |
+| `error` | Vermelho (#DC2626) | Erros de validação |
+| `info` | Azul claro (#0284C7) | Dicas, microcopy informativo |
+
+**Rationale:** Azul escuro + dourado = vocabulário visual de escritórios de advocacia, tribunais, e instituições jurídicas brasileiras. Transmite credibilidade e profissionalismo sem parecer tech startup. O dourado/âmbar para badges de fundamentação jurídica cria destaque sem parecer gamificado.
+
+**Acessibilidade:** Contraste mínimo 4.5:1 para texto normal, 3:1 para texto grande. Primary (#1E3A5F) sobre branco = ratio 8.2:1 (passa AAA).
+
+### Typography System
+
+**Typeface:**
+- **Primary (headings)**: Inter — clean, profissional, excelente legibilidade em mobile. Sem serifa para modernidade sem perder seriedade.
+- **Body text**: Inter — mesma família para consistência. Pesos variados para hierarquia.
+- **Fallback**: system-ui, -apple-system, sans-serif
+
+**Type scale (mobile-first):**
+
+| Token | Size | Weight | Line Height | Uso |
+|-------|------|--------|-------------|-----|
+| `heading-1` | 24px (1.5rem) | 700 | 1.3 | Título da página |
+| `heading-2` | 20px (1.25rem) | 600 | 1.35 | Seções |
+| `heading-3` | 16px (1rem) | 600 | 1.4 | Subtítulos |
+| `body` | 16px (1rem) | 400 | 1.5 | Texto principal |
+| `body-small` | 14px (0.875rem) | 400 | 1.5 | Microcopy, helpers |
+| `caption` | 12px (0.75rem) | 400 | 1.4 | Disclaimers, labels |
+
+**Desktop scale**: +2px nos headings (heading-1: 28px, heading-2: 22px). Body mantém 16px.
+
+### Spacing & Layout Foundation
+
+**Base unit:** 4px (0.25rem)
+
+**Spacing scale:**
+
+| Token | Value | Uso |
+|-------|-------|-----|
+| `space-1` | 4px | Gap mínimo entre elementos inline |
+| `space-2` | 8px | Padding interno de chips, gap entre chips |
+| `space-3` | 12px | Padding interno de inputs |
+| `space-4` | 16px | Margem entre elementos de formulário |
+| `space-6` | 24px | Margem entre seções dentro de uma tela |
+| `space-8` | 32px | Margem entre seções principais |
+
+**Layout:**
+- **Mobile**: Single column, 100% width com padding lateral de 16px
+- **Desktop**: Max-width 640px centralizado — o fluxo não precisa ser wide, mantém foco
+- **Cards**: Background white, border-radius 12px, padding 16px, sombra sutil
+- **Chips**: Height 44px mínimo (touch target), border-radius 8px, padding horizontal 16px
+- **Botões**: Height 48px, full-width em mobile, border-radius 8px
+
+### Accessibility Considerations
+
+- **Touch targets**: Mínimo 44x44px para todos os elementos interativos
+- **Contraste**: WCAG AA (4.5:1 texto normal, 3:1 texto grande)
+- **Focus indicators**: Outline visível para navegação por teclado (`:focus-visible`)
+- **Semantic HTML**: `<form>`, `<fieldset>`, `<legend>`, `<label>` corretos para screen readers
+- **Skip links**: Não necessário — cada página é curta e focada em uma decisão
+
+---
+
+## Design Direction Decision
+
+### Design Directions Explored
+
+Considerando o contexto do produto (MPA mobile-first, público jurídico conservador, necessidade de confiança), a equipe convergiu para uma direção única clara — não há necessidade de explorar 6-8 variações para um produto de fluxo linear com foco funcional.
+
+### Chosen Direction: "Consulta Jurídica Digital"
+
+**Conceito:** O Start Kit visualmente se posiciona como uma consulta estruturada digital — profissional, limpo, sem distrações. A estética evoca a seriedade de um escritório de advocacia moderno, não uma startup de IA.
+
+**Elementos-chave:**
+- **Header minimal**: Logo (se houver) + indicador de progresso. Sem navegação, sem menu — o fluxo é linear
+- **Cards de conteúdo**: Fundo branco com sombra sutil sobre background cinza claro. Uma pergunta/agrupamento por card
+- **Chips de seleção**: Azul escuro outline, preenchimento sólido ao selecionar. Cantos arredondados (8px), nunca quadrados
+- **Botão primário**: Azul escuro sólido, full-width em mobile, texto branco. Único CTA por tela
+- **Preview card**: Fundo branco com borda dourada sutil. Badges de fundamentação jurídica em dourado/âmbar. Visualmente diferente das telas de perguntas para marcar o "momento aha"
+- **Tipografia**: Peso 600 para perguntas (heading-3), peso 400 para helpers. Hierarquia clara
+
+### Design Rationale
+
+1. **Público conservador**: Advogados de 42-50 anos associam credibilidade a visual clean e institucional, não a interfaces coloridas ou experimentais
+2. **Foco funcional**: O produto é um fluxo utilitário de 4-5 telas — sofisticação visual excessiva atrasa o loading e distrai do objetivo
+3. **Mobile-first**: Cards empilhados em coluna única com chips é o padrão mais eficiente para toque com uma mão
+4. **Diferenciação no preview**: A tela de preview é o único momento que merece destaque visual (borda dourada, badges) — é o ponto de conversão
+
+### Implementation Approach
+
+- Tailwind CSS com design tokens customizados (cores, tipografia, espaçamento)
+- Componentes como partials server-side (não SPA)
+- Mobile-first: estilos base para mobile, media queries para desktop
+- Performance: CSS inline crítico + Tailwind purged para bundle mínimo
+
+---
+
+## User Journey Flows
+
+### Jornada 1: Fluxo Principal (Dra. Carla — Petição Trabalhista via WhatsApp)
+
+```mermaid
+flowchart TD
+    A[WhatsApp: recebe link] --> B[Abre no celular]
+    B --> C{Deep link específico?}
+    C -->|Sim /trabalhista/horas-extras| E[Tela 3: Dados do Caso]
+    C -->|Não - link genérico| D[Tela 1: Tipo + Área]
+    D --> D2[Tela 2: Subtipo]
+    D2 --> E
+    E --> F{Perguntas determinísticas completas?}
+    F -->|Sim| G[Loading: Analisando seu caso...]
+    G --> H[Tela 4: Refinamento IA + perguntas restantes]
+    H --> I[Tela 5: Preview com fundamentação]
+    I --> J{URL < 2000 chars?}
+    J -->|Sim| K[Botão: Gerar no Jus IA →]
+    J -->|Não| L[Fallback: Copiar pedido + link Jus IA]
+    K --> M[Redirect para Jus IA]
+    L --> M
+    M --> N[Resultado na primeira tentativa]
+```
+
+**Detalhamento por tela:**
+
+**Tela 1 — Tipo + Área** (skip se deep link):
+- Header: indicador de progresso (step 1/5)
+- Pergunta: "O que você precisa?"
+- Chips: [Petição Inicial] [Contestação] [Pesquisa de Jurisprudência] [Parecer] [Contrato]
+- Pergunta condicional: "Qual área?" — [Trabalhista] [Cível]
+- Botão: "Continuar →"
+
+**Tela 2 — Subtipo** (skip se deep link específico):
+- Header: indicador de progresso (step 2/5)
+- Pergunta: "Que tipo de [petição trabalhista]?"
+- Chips: [Horas Extras] [Rescisão Indireta] [Dano Moral] [Acúmulo de Função] [...]
+- Botão: "Continuar →"
+
+**Tela 3 — Dados do caso** (agrupamento por momento mental):
+- Header: indicador de progresso (step 3/5)
+- Grupo 1 "Relação de Trabalho": Empregador PJ/PF | Regime CLT/PJ/Autônomo | Jornada contratual
+- Grupo 2 "Período": Data início | Data fim (ou "ainda empregado")
+- Grupo 3 "Detalhes específicos": Horas extras estimadas/semana | Banco de horas?
+- Botão: "Continuar →"
+
+**Tela 4 — Refinamento contextual:**
+- Header: indicador de progresso (step 4/5)
+- Loading state: skeleton + "Analisando seu caso para perguntas específicas..."
+- Perguntas renderizadas como chips/seleção quando possível:
+  - "Há registro de ponto?" [Sim, eletrônico] [Sim, manual] [Não havia controle]
+  - "Existem testemunhas?" [Sim] [Não]
+  - "Houve pagamento parcial de HE?" [Sim, parcial] [Não, nenhum]
+- Se texto livre necessário: placeholder contextual "Ex: não pagava horas extras e exigia trabalho aos sábados"
+- Botão: "Ver meu pedido →"
+
+**Tela 5 — Preview + Redirect:**
+- Header: indicador de progresso (step 5/5 - completo)
+- Card com borda dourada: "Seu pedido otimizado para o Jus IA"
+- Conteúdo: resumo do pedido em linguagem jurídica
+- Badges dourados: [art. 59 CLT] [Súmula 85 TST] [art. 71 CLT]
+- Botão primário: "Gerar no Jus IA →"
+- Link secundário: "Copiar pedido" (sempre disponível)
+- Microcopy: "Seus dados não são armazenados"
+
+### Jornada 2: Dr. Rafael — Acesso Direto
+
+```mermaid
+flowchart TD
+    A[Post Jusbrasil / Anúncio] --> B[Abre link genérico]
+    B --> C[Tela 1: Tipo + Área]
+    C --> D[Tela 2: Subtipo - Rescisão Indireta]
+    D --> E[Tela 3: Dados do caso]
+    E --> F[Tela 4: Refinamento IA]
+    F --> G[Preview: art. 483 CLT + alíneas]
+    G --> H[Rafael: 'O problema era o pedido!']
+    H --> I[Redirect Jus IA]
+    I --> J[Resultado melhor que ChatGPT]
+    J --> K[Compartilha link com colegas]
+```
+
+### Jornada 3: Overflow de URL (Edge Case)
+
+```mermaid
+flowchart TD
+    A[Caso complexo - muitos dados] --> B[Fluxo normal até Preview]
+    B --> C{Sistema verifica tamanho URL}
+    C -->|>2000 chars| D[Fallback UI]
+    D --> E[Exibe pedido completo]
+    E --> F[Botão: Copiar pedido]
+    E --> G[Link: Abrir Jus IA]
+    F --> H[Advogado cola no Jus IA]
+    G --> H
+    H --> I[Resultado completo - sem truncamento]
+```
+
+### Jornada 4: Dr. Marcos — Deep Links como Governança
+
+```mermaid
+flowchart TD
+    A[Marcos descobre Start Kit] --> B[Testa fluxo cível]
+    B --> C[Gosta: fluxo guiado = governança]
+    C --> D[Copia deep links por área]
+    D --> E[WhatsApp escritório: links por especialidade]
+    E --> F[Júnior trabalhista: /trabalhista/...]
+    E --> G[Júnior cível: /civel/...]
+    F --> H[Equipe usa Start Kit → Jus IA]
+    G --> H
+    H --> I[Shadow AI eliminado]
+```
+
+### Journey Patterns
+
+**Padrão de navegação linear:** Todas as jornadas seguem fluxo linear (forward-only com opção de back). Sem branches, sem side-navigation. Simplicidade é feature.
+
+**Padrão de entrada flexível:** Deep link pula telas de seleção já respondidas na URL. Link genérico começa do início. Ambos convergem para o mesmo fluxo de perguntas.
+
+**Padrão de entrega dual:** URL parametrizada como default, copy-paste como fallback. Ambos levam ao mesmo resultado. Transparente para o advogado.
+
+### Flow Optimization Principles
+
+1. **Menor caminho para valor:** Deep links reduzem de 5 telas para 3 (skip tipo + área + subtipo)
+2. **Não perguntar o que já sabemos:** Se veio por `/trabalhista/horas-extras`, não perguntar tipo, área ou subtipo
+3. **Estado preservado no back:** O advogado pode voltar e mudar respostas sem perder progresso
+4. **Loading honesto:** Refinamento IA tem latência real — melhor mostrar skeleton com microcopy do que fingir instantaneidade
+5. **Fallback invisível:** O advogado não precisa saber que houve overflow de URL — a UI se adapta silenciosamente
+
+---
+
+## Component Strategy
+
+### Design System Components (Tailwind base)
+
+Componentes padrão disponíveis via HTML + Tailwind classes:
+
+| Componente | Uso no Start Kit | Customização |
+|------------|-----------------|--------------|
+| Button | CTAs primários e secundários | Cores do token, full-width mobile, 48px height |
+| Input text | Campos de texto livre (exceção) | Placeholder contextual, border focus com primary |
+| Radio/Checkbox | Seleções básicas | Estilizado como chip (custom) |
+| Progress bar | Indicador de etapas | Stepper segmentado (custom) |
+
+### Custom Components
+
+**1. ChipSelector**
+- **Purpose:** Seleção de opções tocáveis (tipo tarefa, área, subtipo, respostas)
+- **Anatomy:** Container com chips em grid/wrap. Cada chip: texto + optional icon + estado selecionado
+- **States:** Default (outline azul), Hover (background azul claro), Selected (fill azul, check icon), Disabled (cinza, opacity 50%)
+- **Variants:** Single-select (radio behavior) | Multi-select (checkbox behavior)
+- **Touch target:** Mínimo 44px height, padding 12px 16px
+- **Accessibility:** `role="radiogroup"` ou `role="group"` + `aria-checked` por chip. Navegação por teclado (arrows)
+
+**2. StepperProgress**
+- **Purpose:** Indicador de progresso linear no topo de cada tela (4-5 etapas)
+- **Anatomy:** Barra horizontal com segmentos. Segmento preenchido = completo, atual = highlight, futuro = outline
+- **States:** Completed (fill + check), Active (fill + pulse sutil), Upcoming (outline)
+- **Compact:** Apenas barra visual, sem labels de step — mobile não tem espaço
+- **Accessibility:** `role="progressbar"` + `aria-valuenow` + `aria-valuemax`
+
+**3. PreviewCard**
+- **Purpose:** Exibição do pedido montado na tela de preview (momento aha)
+- **Anatomy:** Card com borda dourada | Título do pedido | Resumo em linguagem jurídica | Badges de fundamentação | CTAs
+- **States:** Default | Loading (skeleton) | Overflow (com fallback copy-paste visível)
+- **Special:** Borda dourada (`accent`) diferencia visualmente das telas de pergunta
+- **Accessibility:** `<article>` semântico + heading para o título
+
+**4. LegalBadge**
+- **Purpose:** Badge visual para artigos de lei, súmulas e jurisprudência no preview
+- **Anatomy:** Pill shape com ícone de balança/livro + texto (ex: "art. 59 CLT")
+- **Visual:** Background dourado/âmbar claro, texto escuro, border-radius full
+- **States:** Default (static display — não interativo no MVP)
+- **Accessibility:** `role="status"` — informação complementar, não ação
+
+**5. LoadingState**
+- **Purpose:** Indicador de loading durante chamada LLM (refinamento IA)
+- **Anatomy:** Skeleton da próxima tela (shimmer) + microcopy contextual
+- **Microcopy:** "Analisando seu caso..." (nunca "Carregando..." ou "Processando...")
+- **Duração esperada:** 2-5 segundos
+- **Accessibility:** `aria-busy="true"` + `aria-live="polite"` para anunciar quando carregou
+
+**6. CopyFallback**
+- **Purpose:** Fallback quando URL excede limite — botão copiar + link
+- **Anatomy:** Textarea read-only com pedido completo | Botão "Copiar pedido" | Link "Abrir Jus IA"
+- **States:** Default | Copied (check icon + "Copiado!" por 2s)
+- **Accessibility:** `aria-label="Copiar pedido para a área de transferência"`
+
+### Component Implementation Strategy
+
+**Phase 1 — MVP Core (todas as jornadas):**
+- ChipSelector, StepperProgress, LoadingState, PreviewCard, LegalBadge, CopyFallback
+- Todos os 6 componentes custom são necessários para o fluxo mínimo
+
+**Não há Phase 2/3** — o MVP é lean. Novos componentes só quando houver novas features.
+
+---
+
+## UX Consistency Patterns
+
+### Button Hierarchy
+
+| Nível | Visual | Uso | Exemplo |
+|-------|--------|-----|---------|
+| **Primary** | Fill azul escuro, texto branco, full-width mobile | Ação principal por tela (uma única) | "Continuar →", "Gerar no Jus IA →" |
+| **Secondary** | Outline azul, texto azul | Ação complementar | "Copiar pedido", "Voltar" |
+| **Text** | Sem borda, texto azul, underline | Link contextual | "Seus dados não são armazenados" |
+
+**Regras:**
+- Máximo 1 botão primary por tela
+- Primary sempre no bottom da tela (thumb-friendly em mobile)
+- Secondary + Text empilhados abaixo do primary quando necessário
+
+### Feedback Patterns
+
+| Tipo | Visual | Microcopy | Duração |
+|------|--------|-----------|---------|
+| **Seleção** | Chip muda de outline para fill + check | — | Instantâneo |
+| **Validação inline** | Borda vermelha + texto erro abaixo | "Selecione uma opção para continuar" | Persistente até corrigir |
+| **Loading IA** | Skeleton shimmer + texto | "Analisando seu caso..." | Até resposta do LLM |
+| **Success (copy)** | Check icon verde + texto | "Copiado!" | 2 segundos |
+| **Progresso** | Stepper segmento preenchido | — | Instantâneo ao avançar |
+
+### Form Patterns
+
+**Princípio central:** Minimizar inputs de texto. Máximo de seleções, mínimo de digitação.
+
+| Tipo de input | Quando usar | Implementação |
+|---------------|-------------|---------------|
+| **Chip single-select** | Perguntas com 2-6 opções definidas | ChipSelector variant="single" |
+| **Chip multi-select** | Perguntas onde múltiplas opções são válidas | ChipSelector variant="multi" |
+| **Text input** | Dados específicos sem opcões pré-definidas | Input com placeholder contextual |
+| **Date picker** | Período do contrato, datas | Input type="date" nativo (mobile-friendly) |
+
+**Validação:**
+- Inline: erro aparece abaixo do campo ao tentar avançar
+- Nenhum campo obrigatório sem indicação visual clara
+- Botão "Continuar" desabilitado até campos obrigatórios preenchidos
+
+### Navigation Patterns
+
+**Fluxo linear:**
+- Forward: botão "Continuar →" (primary, bottom da tela)
+- Back: botão "← Voltar" (secondary, top-left) + browser back funcional
+- Estado preservado: ao voltar, respostas anteriores mantidas
+
+**Sem navegação global:**
+- Sem header menu, sem sidebar, sem footer links durante o fluxo
+- O fluxo é uma experiência focada — o único destino é avançar ou voltar
+
+**Deep link entry:**
+- URL determina ponto de entrada no fluxo
+- Telas já respondidas pela URL são puladas
+- Stepper reflete corretamente o ponto de partida
+
+### Empty States & Edge Cases
+
+| Situação | Tratamento |
+|----------|-----------|
+| **Subtipo não disponível** | Mensagem: "Este tipo ainda não está disponível. Veja os fluxos disponíveis:" + chips dos fluxos existentes |
+| **Erro de rede durante IA** | Retry automático 1x. Se falhar: "Não conseguimos analisar seu caso agora. Tente novamente." + botão retry |
+| **URL overflow** | Transição silenciosa para CopyFallback — sem mensagem de erro |
+| **JavaScript desabilitado** | Fluxo funciona 100% via MPA (form submit + page load). Progressive enhancement é opcional |
+
+---
+
+## Responsive Design & Accessibility
+
+### Responsive Strategy
+
+**Filosofia: Mobile-only com adaptação desktop.** O produto é projetado para celular entre audiências. Desktop é bônus, não prioridade.
+
+**Mobile (320px - 767px) — Experiência primária:**
+- Single column, full-width com padding 16px
+- Chips em grid de 2 colunas ou stack vertical (depende do tamanho do texto)
+- Botão primary full-width, fixo no bottom quando necessário
+- StepperProgress compact no topo
+
+**Tablet (768px - 1023px):**
+- Mesma experiência do mobile, com max-width 640px centralizado
+- Chips podem ser 3 colunas se espaço permitir
+- Sem mudanças estruturais — o fluxo é linear e funciona igual
+
+**Desktop (1024px+):**
+- Max-width 640px centralizado com background cinza
+- Card de conteúdo em white sobre background — visual de "formulário focado"
+- Botão primary não é full-width — max-width 320px centralizado
+- Preview card pode ter layout horizontal para badges se espaço permitir
+
+### Breakpoint Strategy
+
+| Breakpoint | Value | Abordagem |
+|------------|-------|-----------|
+| **Base** | 0px+ | Mobile-first — todos os estilos base |
+| **sm** | 640px | Chips em grid 2-col |
+| **md** | 768px | Max-width container ativado |
+| **lg** | 1024px | Desktop refinements (padding, card shadows) |
+
+**Não há breakpoint `xl`** — o produto não precisa de layout wide. 640px max-width é suficiente para fluxo linear.
+
+### Accessibility Strategy
+
+**Nível alvo: WCAG 2.1 AA** — não é prioridade formal do PRD para MVP, mas seguir AA como guideline garante boa UX para todos e evita retrabalho.
+
+**Checklist por componente:**
+
+| Componente | Requisito |
+|------------|-----------|
+| ChipSelector | `role="radiogroup"`, `aria-checked`, keyboard arrows |
+| StepperProgress | `role="progressbar"`, `aria-valuenow/max` |
+| PreviewCard | `<article>` + `<h2>` semântico |
+| LegalBadge | Text content sufficient (no icon-only) |
+| LoadingState | `aria-busy`, `aria-live="polite"` |
+| CopyFallback | `aria-label` no botão copiar |
+| Buttons | `<button>` nativo (não `<div>` com onClick) |
+| Forms | `<label>` + `<fieldset>` + `<legend>` corretos |
+
+**Color contrast:**
+- Texto primary (#1A1A2E) sobre white: 16:1 (AAA)
+- Primary button (#1E3A5F) texto white: 8.2:1 (AAA)
+- LegalBadge text sobre accent background: verificar ≥4.5:1
+
+**Keyboard navigation:**
+- Tab order lógico (top-to-bottom)
+- Focus visible em todos os interativos
+- Enter/Space para ativar chips e botões
+- Arrow keys para navegar entre chips no mesmo grupo
+
+### Testing Strategy
+
+**Responsive testing:**
+- iPhone SE (375px), iPhone 14 (390px), Pixel 7 (412px) — variação mobile
+- iPad (768px) — tablet
+- Desktop Chrome/Firefox/Safari (1280px+)
+- Throttle 3G para simular "entre audiências"
+
+**Accessibility testing:**
+- Lighthouse accessibility audit (meta: >90)
+- Tab-through manual em cada tela
+- VoiceOver (iOS) para testar screen reader no mobile
+- Color blindness simulation (protanopia, deuteranopia)
+
+### Implementation Guidelines
+
+**HTML:**
+- Semantic HTML5 (`<main>`, `<form>`, `<fieldset>`, `<article>`, `<nav>`)
+- Labels associados a todos os inputs
+- Lang attribute: `<html lang="pt-BR">`
+
+**CSS (Tailwind):**
+- Mobile-first: base styles sem media query = mobile
+- `@screen sm/md/lg` para overrides progressivos
+- Relative units: `rem` para font-size, `%` para width
+- `min-h-[44px]` para todos os touch targets
+
+**Progressive enhancement:**
+- Base: HTML forms com submit (funciona sem JS)
+- Enhanced: JS para transições suaves, validação inline, copy-to-clipboard
+- Graceful degradation: se JS falha, MPA form submit funciona normalmente