Product
Designer

Desenho interfaces e conecto design e código por meio de design systems. Entusiasta de IA, exploro como agentes podem transformar a criação de produtos digitais.

Ver meus trabalhos ↘Vamos conversar ↗

O olhar por trás
dos projetos.

Em breve · PDF em português e inglês

Atuo há alguns anos como Product Designer, acompanhando a criação de produtos de ponta a ponta, do discovery ao delivery.

Acredito que o design começa por entender as pessoas e os problemas que elas enfrentam. Por isso, busco conhecer o contexto e os dados disponíveis antes de propor uma solução. Uma boa interface precisa fazer sentido para quem a usa, além de ser visualmente bem resolvida.

No meu processo, uso IA como apoio à criação de design systems e à construção de fluxos de usuário. Ela me ajuda a explorar possibilidades e agilizar a execução, enquanto mantenho o olhar crítico sobre as decisões de design.

RESUMO PROFISSIONAL

Product Design · Discovery · Delivery

ESPECIALIDADES

Interface · Design System

Portfolio

Aprova Total — Design System

Design de sistemas · IA · 2026

Aprova Total — Banco de Questões

Product Design · Experiência de estudo

Vamos dar forma
ao seu próximo projeto?

Tem uma ideia, um desafio de produto ou uma oportunidade? Vamos conversar.

Aprova Total · Design System Agêntico

Um design system que a IA consegue usar

Plataforma de estudos para o ENEM e vestibulares · setembro e outubro de 2026

Ferramentas: Claude, Figma, HTML/CSS e shadcn/ui

Explorar a vitrine ↗

O ponto de partida

Com a chegada da IA ao processo de criação de telas, um problema ficou evidente: as interfaces geradas se afastavam dos padrões da Aprova Total. Mesmo com os componentes do Figma como referência, o resultado ainda exigia muitos ajustes.

Decidi transformar o design system que já existia no Figma em uma base documentada para a IA consultar. O DESIGN.md passou a ser a porta de entrada: reúne as orientações e aponta para as regras que os agentes devem seguir ao criar uma tela.

Meu papel

Sou Product Designer na Aprova Total, onde o uso de IA já era uma demanda presente no time. Parti de um design system robusto, construído no Figma, e organizei sua tradução para uma documentação que pudesse orientar pessoas e agentes.

A IA me ajudou a estruturar a documentação e a implementação. As decisões de design continuaram comigo: a hierarquia dos botões, o comportamento dos componentes, os fluxos e a aprovação de novos padrões.

Como funciona

Tokens que explicam onde cada valor deve ser usado.

O sistema já tinha nomes definidos para fundos, textos, botões, campos e outros usos. Esses valores compartilhados são os tokens de design. A documentação os organiza em três camadas: valores básicos, funções de uso e aplicações nos componentes.

Por exemplo, o token do fundo da ação principal mantém a mesma função nos temas claro e escuro, mas recebe uma cor adequada a cada tema. Assim, o agente consulta uma regra existente para aplicar a cor, em vez de escolher um valor a cada nova tela.

Interface de Disciplinas no celular com cards de Redação, Química e História

Componentes explicados para quem decide.

Criei uma vitrine para tornar essa documentação fácil de consultar. Ela reúne os componentes, suas variantes e hierarquias, exemplos interativos e orientações de faça e não faça. Quem desenvolve pode consultar o código disponível e usá-lo na implementação; os agentes também podem recorrer à mesma base para orientar suas escolhas.

Aprova TotalDesign System
COMPONENTES / BOTÃO

Botão

Uma hierarquia clara para cada ação.

Experimente o botão principal para ver o estado de carregamento.

Exemplo demonstrativo, sem envio de dados.

Primary · ação principal   Secondary · ação de apoio   Ghost · baixa ênfase

Para quem programa
Consulte o exemplo, confira as regras e copie o código para o projeto.

Para o agente
As skills consultam a documentação e os tokens para escolher variantes, estados e propriedades.

Ver documentação completa ↗

Agentes com uma função cada.

Organizei oito papéis no fluxo, com responsabilidades que vão do briefing à revisão e ao relatório diário. As skills orientam o trabalho dos agentes; a coordenação identifica quais são necessárias para cada pedido, e as decisões que precisam de aprovação voltam para mim.

COMO AS SKILLS COLABORAM

Papéis de uma equipe, traduzidos em skills

Cada skill assume uma responsabilidade específica. A comparação ajuda a entender o trabalho; as decisões de design e a aprovação continuam humanas.

Briefing → Coordenação → Criação e conteúdo → Revisão

Transforma um pedido simples em um briefing com contexto, requisitos e critérios de entrega. O texto melhorado volta para aprovação de quem fez o pedido antes de orientar a execução.

at-melhorar-prompt

Atua como uma coordenação de projeto: organiza o pedido aprovado, identifica as skills necessárias e conduz o trabalho até a revisão.

at-gerenciar-projeto

Compõe telas com os tokens, componentes e padrões documentados a partir do DESIGN.md. Usa o Figma como referência para o conteúdo, o fluxo e as decisões de design.

at-criar-tela

Quando o sistema não atende a uma necessidade, verifica as opções existentes e documenta uma proposta de componente ou padrão. A inclusão depende da minha aprovação.

at-criar-componente

Escreve e revisa os textos da interface com base nas orientações de voz e tom da Aprova Total que incorporei à documentação.

at-escrever-texto-ui

Confere a aderência das telas ao design system, identifica desvios nos componentes, tokens e estados e aponta o que precisa ser corrigido.

at-revisar-tela

Verifica contraste, navegação por teclado, foco e áreas de toque nas versões disponíveis. Também registra o que não pode ser avaliado com o material recebido.

at-auditoria-acessibilidade

Reúne as alterações, entregas e pendências do dia em um relatório automático. Esse resumo me ajuda a acompanhar o trabalho e dar visibilidade aos gestores.

Conferência automática.

As automações apoiam a conferência das entregas e o acompanhamento do trabalho. Ao final do dia, recebo um resumo do que foi alterado, entregue e do que ainda precisa de aprovação. As revisões de interface e acessibilidade ajudam a encontrar problemas antes da entrega.

O Figma como referência, a vitrine como acesso.

O Figma continua sendo o guardião do design: é onde valido conteúdo, fluxos e propostas visuais. A documentação traduz essas decisões em orientações para implementação, e a vitrine facilita a consulta a cores, componentes, padrões e código.

Quando surge uma dúvida, o agente deve consultar essa base e trazer a decisão para revisão. Um novo padrão precisa ser validado antes de passar a orientar as próximas telas.

Próximo passo: ampliar o banco de imagens.

A vitrine já apresenta regras para imagens e banners. Quero ampliar essa base com um acervo próprio da Aprova Total, para que os agentes possam usar imagens aprovadas ao compor novas telas.

Resultados

  • 67 componentes documentados na vitrine
  • 8 papéis de agentes, do briefing ao relatório diário
  • 3 automações para apoiar a rotina de trabalho
  • Orientações para temas claro e escuro e telas em desktop, tablet e mobile

Na minha rotina, entregas que antes levavam cerca de uma semana passaram a levar aproximadamente um dia e meio. Essa é a percepção a partir do meu trabalho com o sistema: menos tempo corrigindo desvios e mais tempo para avaliar as decisões de design.

O que aprendi

A IA ainda não entrega tudo pronto e sem ajustes. O ganho foi reduzir o retrabalho, dar critérios mais claros para a execução e tornar a revisão parte do processo.

O Figma define o conteúdo e o fluxo; o design system orienta a linguagem visual e os padrões de implementação. Os agentes ajudam a executar essa base, e eu continuo responsável por validar as decisões e a qualidade da entrega.

SimuladãoClaro
Modal de inscrição do Simuladão no tema claroEstudante sorrindo, com pintura de comemoração no rosto e camiseta preta Aprova Total
04dias20horas11min00seg
Mesmo componente · tema claro · contagem demonstrativa
SimuladãoEscuro
Modal de inscrição do Simuladão no tema escuroEstudante sorrindo, com pintura de comemoração no rosto e camiseta preta Aprova Total
04dias20horas11min00seg
Mesmo componente · tema escuro · contagem demonstrativa

Aprova Total · Banco de Questões

Banco de Questões

Resolução de questões, acompanhamento de desempenho e histórico de estudos na Aprova Total.

Banco de Questões no desktop, com resumo de desempenho e filtros preenchidos
Banco de Questões completo no celular, em tema claro
Desktop e mobile · visão geral do banco de questões

O ponto de partida

A plataforma já oferecia videoaulas, exercícios e simulados. Mesmo assim, observávamos usuários entrando, permanecendo pouco tempo e saindo. A oportunidade era tornar a prática de questões mais acessível e flexível dentro dessa experiência.

Para resolver exercícios, o aluno precisava entrar em uma disciplina e encontrar o conteúdo de uma videoaula, ou criar um simulado. Esse caminho nem sempre atendia a quem queria estudar por alguns minutos e continuar depois.

Nos simulados, interromper a atividade podia deixar um registro de abandono e uma nota baixa. Isso criava o risco de transformar uma pausa na rotina em uma experiência desmotivadora.

Meu papel

Atuei no desenho do Banco de Questões, organizando todo o processo com o Double Diamond: entender o problema, definir o foco, explorar soluções e estruturar a entrega. Nesse projeto, já utilizei o agente do Design System da Aprova Total como apoio à criação das interfaces.

O desafio de produto

Queríamos permitir sessões de estudo mais livres, com histórico e retomada, sem reduzir a plataforma a um lugar para responder questões. A preocupação era que o novo produto substituísse o uso dos simulados em vez de complementar a preparação.

Do problema à entrega

01

Descobrir · entender a interrupção

O ponto de partida foi a curta permanência na plataforma. Olhei para os caminhos disponíveis para praticar e para o que acontecia quando o aluno precisava parar no meio de uma atividade.

02

Definir · dar autonomia para praticar

O foco passou a ser uma experiência em que o aluno pudesse montar uma lista, praticar no próprio ritmo e retomar depois. O desempenho deveria orientar o estudo, sem tratar cada sessão como uma prova.

03

Desenvolver · organizar escolhas e feedback

Estruturei a criação da lista em etapas, com filtros liberados conforme as escolhas anteriores. Na página inicial, priorizei a retomada e os indicadores que ajudam o aluno a entender sua prática.

04

Entregar · conectar prática, histórico e evolução

A experiência reuniu criação de listas, resolução de questões, histórico e acompanhamento de desempenho. O design system e a IA apoiaram a construção das telas, mantendo uma base comum com o restante da plataforma.

Uma entrada que mostra o próximo passo

Antes dos filtros, a página apresenta a porcentagem de acertos, as questões respondidas, o total de respostas corretas e as listas realizadas. O destaque “Continue de onde parou” permite retomar uma atividade sem reconstruir as escolhas anteriores.

Da disciplina à lista de questões

A criação começa por uma disciplina. Essa escolha libera os módulos: o aluno pode selecionar até cinco. Depois, pode manter todos os assuntos desses módulos ou refinar a lista com até cinco assuntos específicos.

  • Banca: selecionar uma opção, como ENEM, FUVEST ou Unicamp, ou usar todas.
  • Tipo: múltipla escolha, dissertativa ou somatória.
  • Status: todas, respondidas, não respondidas, corretas ou incorretas.
  • Dificuldade: fácil, média ou difícil.

Com a seleção pronta, o aluno inicia a prática. A sequência organiza a quantidade de opções e evita apresentar todos os filtros de uma vez.

Criação da lista
Filtros de Matemática, Porcentagem, Aumentos e descontos e banca Enem
Captura do protótipo · dados demonstrativos
RESOLUÇÃO DE QUESTÕES

Da resposta à explicação.

Alternativas, correção e resolução comentada na mesma experiência.

01 · Pergunta
Questão antes de responder
02 · Acerto
Alternativa correta e explicação
03 · Erro
Alternativa incorreta e resposta correta
Pergunta, acerto e erro · tema claro

Pausar faz parte de estudar

O aluno pode sair e voltar quando quiser. No histórico, as listas em andamento oferecem a ação “Continuar”; as finalizadas oferecem “Revisar”. Assim, uma pausa preserva o trabalho já feito e deixa claro como retomar.

Histórico de estudos
Histórico com listas finalizadas para revisar e listas em andamento para continuar
Captura do protótipo · dados demonstrativos

Desempenho para orientar, não só avaliar

Em vez de resumir cada sessão a uma nota, o banco apresenta acertos, erros e evolução. A intenção é ajudar o aluno a reconhecer onde está avançando e o que merece mais atenção nos estudos.

O gráfico de evolução mostra os últimos 30 dias por padrão, com opções de sete dias, três meses, todo o período ou um intervalo personalizado. Um segundo gráfico apresenta o desempenho por banca, com filtros para comparar o total ou uma banca específica.

Resultados e efeitos da mudança

Após a introdução do Banco de Questões, observamos um aumento no tempo de uso da plataforma. O resultado apontou para uma experiência de prática que favorecia a permanência dos alunos.

A preocupação com os simulados também se confirmou em parte: houve uma queda na criação de simulados pelos próprios usuários. Ao mesmo tempo, aumentou a participação nos simulados oferecidos pela Aprova Total, como o Simulado ENEM.

Esses movimentos precisavam ser lidos em conjunto. A mudança trouxe mais uso do banco e dos simulados propostos pela plataforma, mas também alterou a forma como os alunos organizavam a própria prática.

O que aprendi

Flexibilidade também é uma decisão de experiência: permitir parar, voltar e revisar torna o estudo mais compatível com a rotina do aluno. E avaliar um produto novo exige olhar para seus efeitos sobre o restante da plataforma, não apenas para o uso da nova funcionalidade.