🎨 Design e Frontend com IA

Em vez de pedir "construa o frontend" direto, você pede 5 mockups visuais primeiro. Avalia, escolhe a direção, e só então transforma em código.

UI errada vira refactor de 4 horas. Imagem errada vira regenerar em 30 segundos. Iterar barato no estágio onde ainda dá pra trocar é a regra de ouro do design com IA.

Custo de iteração, decisão visual antecipada, low-fidelity to high-fidelity, princípio "barato falha, caro acerta".

Template autoral de prompt que pede ao Image Gen 5 variações com hierarquia visual, paleta e densidade de informação radicalmente diferentes — não 5 versões da mesma coisa.

Pedir "5 opções" sem instrução produz 5 quase-clones. O template força diversidade real, e é dela que sai a melhor escolha.

Diversidade forçada, exploração de espaço de design, instrução por eixo, prompt template reutilizável.

Checklist objetivo: densidade de informação, hierarquia visual, consistência interna, clareza de CTA, escalabilidade pra dark mode e mobile.

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.

Heurísticas de UI, hierarquia visual, lei de Hick, contraste, escalabilidade de tema, mobile-first.

Tour pelas referências do mercado: Intercom (densidade alta), Crisp (limpeza), Drift (CTAs agressivos), HelpScout (foco no humano). Cada uma tem uma decisão a inspirar.

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.

Benchmark visual, anatomia comparada, padrões consagrados, remix de UI, inspiração ética.

Prompt estruturado que entrega a imagem escolhida ao Codex e pede frontend Next.js + Tailwind correspondente, com componentes nomeados e estrutura de pastas.

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.

Image-to-code, fidelidade visual, decomposição em componentes, naming, file structure prompt.

Variações sobre a UI escolhida: dark mode, mobile responsivo, paleta alternativa para white-label. Sempre na imagem antes de mexer no código.

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.

Dark mode, mobile breakpoints, paleta semântica, variações de tema, white-label, design tokens.

Layout consagrado de inbox profissional: lista de conversas à esquerda, thread ativa no centro, painel do contato à direita. Wireframe e proporções.

Esse padrão existe porque funciona — Slack, Linear, Intercom usam variações dele. Reinventar a roda aqui custa caro e o cliente estranha.

Three-column layout, proporções 1:2:1, conversation list, thread view, context panel, breakpoints.

Decomposição em componentes React reutilizáveis e estrutura de pastas. ConversationItem (lista), MessageBubble (cada balão), ContactPanel (lateral direita).

Componentização clara é o que destrava reuso, testes e iteração rápida. Sem ela, mudar o estilo de uma mensagem vira mudar 12 arquivos.

Atomic design, props tipadas, componente apresentacional vs container, estrutura de pastas Next.js.

Modelagem do estado: lista de conversas, mensagens dentro de cada conversa, status (lida, não-lida, atribuída). Comparação Zustand (simples) vs Convex (real-time).

Estado mal modelado é a origem da maioria dos bugs em frontend complexo. Decidir certo aqui evita reescrita de 60% do projeto na Trilha 4.

State shape, Zustand store, Convex query, normalização, optimistic update, status enum.

Simulação de chegada de mensagens com setInterval injetando dados fake no estado. Visual já parece real-time, sem precisar do backend ainda.

Mockar o real-time desde o início destrava UX (animação de chegada, badge de unread, scroll automático) sem bloquear no backend.

Mock-first development, setInterval, fake data factory, animação de entrada, decoupling frontend/backend.

Cada conversa traz um badge identificando o canal de origem. WhatsApp verde, Instagram rosa, email azul, web chat roxo. Visual claro e instantâneo.

Multi-canal é o diferencial do InboxAI. Sem badge claro, o operador responde "oi" no WhatsApp como se fosse email — e perde o tom.

Channel badge, semantic color, ícone identificador, omnichannel UX, contexto por canal.

Padrão Linear/Slack/Superhuman: atalhos de teclado para operador power-user. j/k navega lista, r responde, a atribui, e arquiva.

Operador profissional atende 200+ conversas/dia. Cada clique a menos é minutos por dia. Atalhos transformam o produto de "ok" em "indispensável".

Keyboard-first UX, hotkeys, command palette, mnemônica, listener global, foco visual.

Modelagem dos estados do funil: Lead, Qualificado, Proposta enviada, Negociação, Fechado/Perdido. Variações por nicho (clínica, imobiliária, SaaS).

Pipeline genérico não serve ninguém. Adaptar os estados ao nicho do cliente é o que faz o CRM virar ferramenta usada, não tela parada.

Funil de vendas, estados terminais, transição entre estágios, customização por vertical.

Implementação de arrastar e soltar cards entre colunas usando @hello-pangea/dnd (fork mantido do react-beautiful-dnd). Animação suave, acessível.

DnD próprio dá mais trabalho que vale; biblioteca testada economiza dias e tem acessibilidade já resolvida. Saber qual escolher é mais valioso que saber implementar.

@hello-pangea/dnd, DragDropContext, Droppable, Draggable, onDragEnd, optimistic UI.

Anatomia do card: nome do contato, valor estimado, probabilidade %, dias parado no estágio (alerta após 7 dias), tags. Hierarquia visual clara.

Cards bem desenhados são lidos em 2 segundos. Mal desenhados, o vendedor abre cada um pra entender — e aí o kanban deixa de ter graça.

Hierarquia tipográfica, sinal de risco visual, density vs clarity, decay temporal, tags coloridas.

Quatro métricas que importam de verdade: tempo médio de primeira resposta, taxa de conversão por estágio, valor total no pipeline, custo de aquisição por canal.

Dashboard com 30 métricas é dashboard que ninguém olha. Foco em 4 que conectam com receita é o que faz dono de negócio abrir todo dia.

North star metric, vanity vs actionable, SLA de resposta, conversion funnel, CAC, MRR pipeline.

Snippets de configuração para os 3 charts mais usados em dashboard de vendas: LineChart (tendência), BarChart (comparação), Donut (proporção por canal).

Recharts é a biblioteca de fato pra Next.js. Saber configurar bem cada chart (cores, tooltip, eixos) diferencia dashboard amador de profissional.

Recharts API, ResponsiveContainer, Tooltip customizado, paleta consistente, animação on-mount.

UX de filtros que aparecem quando precisam, somem quando não precisam. Filtro por canal, atendente, faixa de valor, tag. Salvos como views.

Filtro mal feito ocupa metade da tela e ninguém usa. Filtro bem feito (tipo Linear) destrava produtividade sem custo visual.

Filter UX, saved views, popover progressivo, query params, multi-select, clear all.

Browser nativo dentro da janela do Codex App, lado a lado com o código. O agente vê o que você vê — clique, scroll, formulário, console.

Esse recurso não existe no Claude Code nem no Cursor. É o que torna iteração visual viável sem trocar de janela e perder contexto.

Browser embutido, dev tools acoplado, side-by-side workflow, contexto compartilhado código+UI.

Modo de anotação que permite clicar em qualquer elemento da página e adicionar comentário. O Codex recebe anotação + screenshot + DOM e aplica o fix.

Descrever um bug visual em texto leva 5 frases. Apontar e dizer "esse botão tá grande demais" leva 2 segundos. É o "select to fix" do design.

Visual annotation, screenshot + DOM context, point-and-fix, redução de ambiguidade verbal.

Loop apertado: anota, agente edita, hot-reload, você confere visual. Tempo de feedback cai de 2 minutos (alt-tab + reload + olhar) para 10 segundos.

Compressão de tempo de feedback é multiplicador direto de qualidade. 12 iterações em 1 hora batem 3 iterações em 1 hora — sempre.

Tight feedback loop, hot module reload, iteration velocity, polishing pass, perception of speed.

Botões de viewport dentro do browser embutido: mobile (375px), tablet (768px), desktop (1280px). Trocar e ver o ajuste em tempo real.

Responsivo testado depois é responsivo quebrado. Testar viewport durante a construção pega 80% dos bugs antes deles existirem.

Viewport switching, breakpoints Tailwind, mobile-first iteration, touch targets, safe areas.

Captura de screenshot direto do browser embutido, com setas, círculos e textos sobrepostos. Salvo no projeto e exportável pra Slack/Linear.

Bug descrito em texto vira ping-pong de 6 mensagens. Bug descrito em screenshot anotado é fechado na primeira resposta. Vale ouro com cliente.

Screenshot anotado, comunicação assíncrona, repro visual, bug report, async-first team.

Sinais claros: 3 fixes seguidos no mesmo arquivo, escopo do problema mudando, refatoração emergindo. Hora de pausar e voltar pro plan mode.

Iteração visual é poderosa pra polir; péssima pra arquitetar. Saber a hora de parar e replanejar evita acumular 15 fixes em código que precisava de reescrita.

Polish vs refactor, sinais de descontrole, custo afundado, plan mode reentry, escopo emergente.