Duo AI — Redesign do Consumidor
Cliente
Projeto Pessoal
Ano
2026
Serviços
Product Design
UI
Frontend
Design System
Claude Code
Contexto e Desafio
O Duo AI é uma plataforma onde creators constroem e vendem agentes de IA (DUOs) para suas audiências. A visão do creator (Studio) já tinha recebido bastante investimento de design — mas a visão do consumidor, que é onde o aluno passa 90% do tempo, estava defasada: padrões inconsistentes, hierarquia confusa, light mode quebrado em vários pontos e uma sensação geral de "produto interno" em vez de "produto pronto pro mercado".
Antes do lançamento público, decidimos elevar o craft dessa camada inteira.
Meu Papel
Product Designer responsável pelo redesign end-to-end das superfícies de consumo: decisões de UX, design no Figma e implementação direta no código (Next.js + Tailwind) usando Claude Code.
Escopo: sign-in (split-screen no desktop, progressive disclosure no mobile), Agents page (cards redesenhados, paginação no desktop, scroll horizontal no mobile), header (AppPageLayout com avatar centralizado), sidebar (três seções: Meus DUOs, Salas, Conversas) e migração completa do light mode para tokens semânticos. Pendentes próximas: chat, signup, forgot-password, variantes Trial/Expired do AgentCard e variante "Chat" do header.
Processo
**Figma como fonte da verdade.** Estruturei o file no Figma como referência única. Toda decisão de UI tinha que existir lá antes de virar código — isso evitou retrabalho e me deu um lugar pra discutir trade-offs visuais sem ruído de implementação.
**Implementação com Claude Code.** Como UX Designer com nível iniciante em código, normalmente esse tipo de redesign exigiria handoff pra um time de engenharia e seria spread em várias sprints. Com Claude Code, eu mesmo levei tudo do Figma ao PR. O fluxo virou: apresento a tela do Figma e o contexto → Claude pesquisa o codebase e devolve um plano de mudanças → eu aprovo (ou ajusto) o plano → implementação acontece em ciclos curtos, com verificação visual minha entre cada fase. Não é "vibe coding". É design com loop fechado entre intenção, decisão e execução — sem perder controle do produto.
**Design system como guard-rail.** Um aprendizado caro do projeto: na primeira passada da sidebar e dos AgentCards, usamos cores fixas (stone-85, stone-98). Funcionou no dark mode, quebrou no light. Tivemos que refazer trocando tudo por tokens semânticos (background-tint-02, text-text-01, border-border-01). Esse erro virou regra: nada de cor fixa em componente — sempre token semântico que adapta entre temas.
**O que aprendi trabalhando com Claude Code como Product Designer.** A pesquisa de código vem antes da implementação — forcei Claude a sempre ler arquivos completos e mapear o que existe antes de propor mudança, o que eliminou 80% das soluções genéricas. Plano antes de PR — toda task grande começa com um documento em .docs/Spec.md, que eu reviso e aprovo antes da implementação. Memória é alavanca — feedbacks recorrentes (como o de tokens semânticos) ficam numa camada persistente, e próximos projetos começam com esse contexto carregado. Eu continuo sendo o Product Designer; Claude implementa, mas as decisões de hierarquia, tom, fluxo e prioridade são minhas. A ferramenta amplifica — não substitui — o julgamento de design.
Decisões-chave
Sign-in mobile com progressive disclosure
no mobile, o formulário de e-mail/senha fica oculto por trás de um CTA secundário ("ou entre com e-mail"). O Google OAuth recebe o destaque primário. A hipótese: a maioria dos usuários da audiência dos creators já está logada no Google, e mostrar 4 campos de uma vez aumenta fricção sem aumentar conversão.
Sidebar reorganizada em três planos mentais
em vez de listar tudo plano, separei em "Meus DUOs" (o que eu comprei), "Salas" (onde eu participo) e "Conversas" (histórico). Espelha como o usuário pensa, não como o backend modela.
Header centralizado com avatar como âncora
o avatar do DUO atual fica no centro do header, não no canto. É a peça mais importante da tela em qualquer momento — onde o usuário está conversando, com quem, em qual contexto. Tirar isso da periferia mudou a sensação do produto.
Tokens semânticos como contrato do design system
depois do incidente das cores fixas, qualquer cor em componente passou a ser obrigatoriamente token semântico. Isso virou parte da memória do projeto, não um "a gente tenta lembrar" — o que destravou o light mode de toda a experiência sem precisar refazer a cada nova tela.
Resultados
Cinco superfícies de consumo redesenhadas e implementadas em produção (sign-in, agents, header, sidebar, light mode)
Light mode funcional em toda a experiência via tokens semânticos
Design system consistente, com padrões prontos pra serem replicados nas próximas telas (chat, signup, variantes do AgentCard)
Provou que um Product Designer com nível técnico iniciante consegue, com o setup certo, levar um redesign completo do Figma ao código mantendo qualidade de craft e velocidade de iteração