🤔 Por que Gerar Imagem Antes de Código
A pergunta certa antes de qualquer projeto frontend não é "que stack vou usar?" É "qual versão do que estou construindo é a certa?" — e essa pergunta se responde em pixels, não em código.
⏱️ Custo de Iteração por Estágio
Trocar uma imagem custa segundos. Refatorar código de produção custa horas. Faça as decisões caras no estágio barato.
💡 O princípio do "barato falha, caro acerta"
Em qualquer pipeline criativo, você quer falhar muito no estágio barato e errar pouco no estágio caro. Imagem é o estágio mais barato que existe — gere 5, escolha 1, ainda gastou menos tempo do que escrever a primeira linha de JSX. Isso não é processo de design, é gestão de risco.
📝 Prompt Template para 5 Direções
Pedir "5 opções de UI" sem especificar produz 5 quase-clones. A diversidade tem que ser forçada por eixo — hierarquia, paleta, densidade — pra você ter um espaço de decisão real.
📋 Template autoral — copia e usa
Gere 5 mockups de UI para um {tipo de produto} chamado {nome}.
Funcionalidade central: {descrição em 1 frase}.
Cada mockup deve ser RADICALMENTE DIFERENTE nos seguintes eixos:
1. DENSO & PROFISSIONAL
- Hierarquia: 4 níveis tipográficos
- Paleta: dark mode, neutros + 1 accent saturado
- Densidade: alta — operador power-user
2. LIMPO & ARSEAL
- Hierarquia: 2 níveis, muito espaço em branco
- Paleta: light mode, beges quentes + accent terroso
- Densidade: baixa — foco em uma ação por tela
3. PLAYFUL & FRIENDLY
- Hierarquia: bordas arredondadas, ilustrações
- Paleta: pastéis suaves, accent vibrante
- Densidade: média, com micro-animações sugeridas
4. ENTERPRISE & SÓBRIO
- Hierarquia: tabelas, dropdowns, breadcrumbs
- Paleta: azul corporativo, cinzas
- Densidade: alta, sem decoração
5. MOBILE-FIRST & TÁTIL
- Hierarquia: bottom nav, cards grandes
- Paleta: vibrante, fundo escuro
- Densidade: baixa, touch targets 44px+
Para cada um, descreva também:
- Sensação ao primeiro olhar (1 frase)
- Que tipo de cliente assina embaixo🎯 Por que esse template funciona
Ele força a IA a explorar o espaço de design real em vez de variar superficialmente. As 5 direções não são "bonitas vs feias" — são cenários de produto distintos, e geralmente pelo menos 2 te surpreendem com algo que você não consideraria sozinho.
🎯 Critérios de Avaliação
Sem critério, escolher entre 5 mockups vira "qual é mais bonito". Com critério, vira decisão técnica defensável que sobrevive ao primeiro contato com o cliente.
| Critério | Pergunta-teste | Peso |
|---|---|---|
| Densidade de info | Operador atende 200 conv/dia consegue trabalhar? | Alto |
| Hierarquia visual | Em 1 segundo eu sei o que olhar primeiro? | Alto |
| Consistência interna | Os 3 botões parecem da mesma família? | Médio |
| Clareza de CTA | Qual a próxima ação está óbvia? | Alto |
| Escalabilidade dark | Inverte cores e ainda funciona? | Médio |
| Mobile readiness | Quebra em 375px sem virar lixo? | Médio |
✅ Checklist rápido — 30 segundos por mockup
🌐 Referências Visuais para Inbox
Você não inventa do zero. Copia o que funciona, mistura, adapta. Saber quais referências valem o estudo poupa semanas de tentativa e erro.
Intercom
densidade altaPadrão-ouro de inbox profissional. Lateral esquerda super densa, thread central, painel direito com tudo do contato.
Crisp
limpezaVisual mais leve, menos info por tela. Bom pra quem atende menos volume mas com cuidado maior por conversa.
Drift
CTA agressivoPensado pra venda — botões grandes, atalhos de resposta rápida, integrações de calendário em destaque.
HelpScout
foco humanoEstética email-like, parece carta. Bom pra suporte de produto onde tom calmo e respostas longas dominam.
🔍 Como estudar referência sem virar cópia
Abra cada uma, faça screenshot anotado, marque "isso funciona porque..." em 5–10 elementos. Você não está copiando UI — está construindo intuição. InboxAI vai pegar densidade do Intercom, balões do Crisp, quick replies do Drift. O remix é sua autoria.
💻 Da Imagem ao Código
A tradução imagem→código é onde mais se perde fidelidade. Prompt bem feito mantém 90% da intenção visual; mal feito, joga 50% fora e você passa o dia ajustando padding.
🛠️ Prompt de transformação imagem→código
Anexei a UI escolhida (Direção 1: densa & profissional).
Construa o frontend correspondente em:
- Next.js 15 App Router + TypeScript
- Tailwind v4 + shadcn/ui
- Estrutura: app/inbox/page.tsx + components/inbox/*
Decompose em componentes:
1. <ConversationList /> — coluna esquerda
2. <ConversationItem /> — cada linha da lista
3. <MessageThread /> — coluna central
4. <MessageBubble /> — cada balão
5. <ContactPanel /> — coluna direita
Regras:
- Sem dependências externas além das listadas
- Tipos explícitos em todas as props
- Mock data em lib/mock-conversations.ts
- Dark mode pronto (usa apenas classes Tailwind semânticas)
- Mobile: lista vira full-width, thread esconde
Não implemente lógica de envio ainda — só estrutura visual + props.
Termine listando o que ficou faltando vs a imagem.❌ Prompt fraco
"Faz esse design em React com Tailwind"
Resultado: 1 arquivo gigante, props genéricas, sem tipos, sem mobile. 4h ajustando.
✅ Prompt forte
Stack + decomposição + regras + critério de "faltou" no final.
Resultado: 5 componentes tipados, mock data isolado, mobile pensado. 30min de polish.
💡 O segredo do "termine listando o que faltou"
Esse final do prompt é ouro. Em vez de você descobrir o que faltou rodando o app, o agente já lista — geralmente acerta 80% do gap. Você lê a lista, decide o que vale agora e o que vai pra Trilha 4.
🌗 Iterando: Dark Mode, Mobile, Paleta
Mudar paleta no código é fácil; mudar layout não. Saber o que tentar na imagem e o que já está bom pra implementar evita iteração infinita e cliente pedindo "mais uma versãozinha".
🔀 O que iterar onde
- ✓ Layout (3 colunas vs 2)
- ✓ Hierarquia (qual elemento domina)
- ✓ Densidade (info por tela)
- ✓ Vibe geral (sério vs playful)
- ✓ Sidebar à esquerda vs à direita
- ✓ Paleta exata (#7c3aed → #8b5cf6)
- ✓ Border radius (4px → 8px)
- ✓ Espaçamentos finos
- ✓ Dark mode toggle
- ✓ Microcopy
🧪 Mockup ASCII — quando iterar volta pra imagem
┌─────────┬──────────────────┬─────────┐ │ Conv │ Thread │ Contato │ │ │ │ │ │ ◉ Ana │ ┌──────────┐ │ Avatar │ │ ○ Joao │ │ Mensagem │ │ Nome │ │ ○ Maria │ └──────────┘ │ Email │ │ │ ┌────────┐ │ Tags │ │ │ │ Resp. │ │ │ │ │ └────────┘ │ Notas │ │ │ [ Digitar... ] │ │ └─────────┴──────────────────┴─────────┘ 1 fr 2 fr 1 fr
Se você consegue desenhar assim em ASCII, está pronto pra código. Se ainda está duvidando da estrutura, volta pra imagem.
🎯 Regra do white-label
InboxAI vai ter clientes querendo a marca deles na cara. Estruture a paleta como design tokens (--color-accent, --color-bg-1) já no primeiro componente. Trocar marca depois = trocar 2 arquivos. Não estruturar = trocar 80.
✅ O que Aprendemos
Próximo Módulo:
3.2 — Construindo o Inbox Unificado: três colunas, componentes React, estado com Zustand/Convex, real-time mockado, multi-canal e atalhos de teclado.