Pedro Mantovani · Portfólio · 2026 · São Paulo, BR

A IA que eu uso no design,
eu construí.

Product & Brand Designer · Fundador da FluxAI
ex-Coordenador de Design & Criação · agentes próprios em produção
⌘K
me mostra o trabalho da Uber
◉ voz reconhecida · abrindo o trabalho · Uber
Clique no microfone para falar · reconhecimento do navegador
Trabalhe comigo
A minha IAE¹
o agente que eu construí
o agente · em produção
reconhecimento do navegador · pt-BR
preto fosco · luz de estúdio · render svg
CursandoMBA · AI-Driven Innovation & UX
Em produçãoSkills próprias · públicas no GitHub
Fluência diáriaClaude · Anthropic
explorar
01 · A basequinze anos, da direção de arte à IA aplicada

15 anos ligando design a resultado de negócio.

120+projetos entregues
5anos em banco e fintech
14marcas no repertório
Porto Uber Itaú GE Algar Tech Visa Greenpeace Digio Banco Safra Nestlé Neon Remessa Online

Direção de arte me deu o critério.
Eu fiz dele uma ferramenta.

01 Do território de marca à interface

Marca, direção criativa e a peça que entra em produção. Liderei o rebranding de marca de um banco, do institucional à tela do aplicativo.

02 Produto onde a decisão custa caro

Cinco anos em serviço financeiro regulado, onde formato errado não gera confusão, gera prejuízo. Respondi pela consistência criativa de quatro unidades de negócio, e pela operação de design dentro do time.

03 IA, agentes e automação

Ser AI-first virou o básico. O que separa agora é o critério, e critério não vem junto com a licença. O trabalho mudou de lugar: não é desenhar a tela, é escrever a regra que decide a tela.

o que eu entrego
Direção de arte

Conceito, estética e narrativa com intenção.

01

Do briefing ao sistema de identidade que o time aplica sozinho.

Marca

Sistemas de identidade que sustentam o uso real.

02

Produto, CRM e canais sob a mesma linguagem.

Produto

UX, UI e design systems em escala.

03

Do discovery ao delivery, em ambiente regulado de alto volume.

IA aplicada

Agentes e automação no fluxo inteiro de trabalho.

04

Agentes e skills próprias, construídas por mim.

Cases de produto Cases de marca e campanha
02 · Como eu decido

A decisão fica escrita
antes da primeira tela.

O caso abaixo é uma página de produto de e-commerce.

os três contratos que eu assino com a engenharia
a prova
e-commerce de grande volume · página de produto

A mesma caixa de compra, para um catálogo inteiro.

Cada categoria chega com uma dúvida diferente na hora da compra, e desenhar uma página por categoria não escala: o custo aparece no prazo, nunca no arquivo. A caixa se adapta à intenção de quem compra.

294

categorias de catálogo viraram arquétipos de página

Vinte e nove desenhos separados significam vinte e nove manutenções. Quatro arquétipos significam quatro.

lido na API de catálogoantes do Figma
os artefatos

Eu não desenhei quatro telas. Desenhei os quatro padrões que toda página de produto repete.

O arquivo do cliente está sob confidencialidade.

A página inteira cabe em quatro blocos.

E a ordem deles é a ordem da decisão: primeiro resolver a compra, depois tirar o risco, depois explicar, por último provar. O que não cabe em nenhum dos quatro não entra na página.

resolve a compra
01Comprar

O que resolve a compra, reunido em um bloco só.

imagens · preço · estoque · frete · CTA

tira o risco
02Proteger

O que tira o risco de um produto caro, antes da dúvida virar desistência.

garantia · seguro · instalação

explica
03Entender

Para quem ainda compara, não para quem já decidiu.

descrição · atributos · comparativos · vídeos

prova
04Confiar

A palavra de quem já comprou, que é a única que não é minha.

avaliações · reviews · perguntas

as interações que saíram daqui

O estado conta a história, não a legenda.

seletor que não sai da página
drawer que abre ao lado
swatch que troca de página
os templates

Seis modelos cobrem toda a página de produto.

Um modelo por situação, montado com os mesmos tokens e componentes. Quem implementa escolhe o modelo, não redesenha a página.

PDP · Tudo inline

todas as seções abertas na página

01

Sobre o produto, características, informações técnicas e avaliações, tudo visível sem clique.

PDP · Com drawers

a mesma estrutura, em painel lateral

02

As seções abrem em um painel clicável, cada uma com o seu estado desenhado.

Buy box

a dobra que resolve a compra

03

Galeria, variantes, proteção, cupom, preço, clube, cashback, frete e a chamada.

Drawer lateral

quatro painéis, clicáveis no protótipo

04

Do sobre o produto às avaliações, cada um com o seu estado desenhado.

Estado · Indisponível

para reter em vez de perder

05

Selo de falta, avise-me, falar com vendedor e galeria de similares.

Primeira dobra por eixo

uma dobra por eixo de variação

06

Voltagem, cor e tamanho, capacidade, polegada, e o caso sem variação nenhuma.

a régua

Do discovery à medição.

Não paro no layout: a decisão se sustenta porque nasce de premissa documentada e volta como número, e é esse arco que eu levo para qualquer projeto. Aqui ele durou onze semanas, e a última fase não tem data de fim. O que está publicado é o racional, não o arquivo.

  • Benchmark
  • Clarity
  • Analytics
  • Mapeamento de negócio
  • Restrições da plataforma
  • KPIs
03 · Trabalhoíndice · abre no Behance

Produto, marca e campanha, sob o mesmo padrão.

A¹ Itaú UniclassComunicações in-app, e-mails e componentes mobile do segmento premium, com diretrizes e sistema visual que sustentam a demanda contínua. Digital · Premium A² PortoPeças de campanha de financiamento de veículos e consórcio, construídas com IA generativa dentro da marca Porto. Direção de Criação A³ Uber / DigioDireção de arte da promoção Acelera esse Cartão, do cartão Uber Conta com o Banco Digio. Produto Financeiro A⁴ Banco InterA home do banco, refeita. Estudo conceitual. Estudo de Caso · Produto A⁵ SplitDivisão de contas entre amigos. Projeto final de curso. UX/UI · Produto A⁶ GE · Consciência NegraCampanha de Consciência Negra de 2018, criada com um time de quatro pessoas. Direção de Arte · Social A⁷ Guaraná / ImagineEstudo autoral de identidade do Guaraná Antártica na Amazônia, com paleta construída a partir da floresta. Autoral · IA Generativa A⁸ E.T. O Extraterrestre / ImagineDireção criativa autoral em Midjourney: um extraterrestre no espaço, com acabamento de animação. Autoral · Direção Criativa A⁹ Adidas / ImagineDireção criativa autoral em Midjourney e Photoshop: um mergulho em primeira pessoa do espaço até a Terra. Autoral · Marca
por dentro

Dois estudos abertos, do problema à tela.

Role as peças para o lado. Cada estudo abre com o arco da decisão e fecha com a regra que ficou.

Produto · app2025

Split

Um app para dividir a conta pela foto da nota fiscal. Projeto final do curso Base de Design de Produtos Digitais, na Aprender Design, feito em equipe e com orientação: da estratégia e da pesquisa ao Design System e ao protótipo navegável.

caso completo no Behance
o problema

Seis pessoas, uma nota só, e a divisão feita de cabeça no fim da refeição. Quem pediu menos paga igual, e ninguém confere.

a aposta

Se a nota fiscal já tem os itens, ninguém precisa digitar valor. Basta fotografar e dizer quem comeu o quê.

o que mudou

Oito telas, e a divisão deixou de ser conta para virar leitura.

Split · a mesa cheia e a nota de papel no fim
01O problema: a mesa, a nota de papel e a conta feita de cabeça por quem tem menos paciência.
Split · a marca do aplicativo
02A marca: a barra que divide a conta mora dentro do próprio nome.
Split · o userflow do caminho feliz e os wireframes
03O caminho feliz e os wireframes, antes de qualquer cor.
Split · o fluxo de possibilidades com as hipóteses
04Cada bilhete é uma hipótese que o desenho teve que responder.
Split · o arquivo com o guia de estilo e os seis quadros de estudo
05O arquivo por dentro: um guia de estilo e seis quadros de estudo até a forma fechar.
Split · o fluxo final, do ícone ao pagamento
06O caminho que ficou: oito telas, e a pré-nota no meio decide tudo.
Split · as telas do fluxo com as seções nomeadas
07As oito telas desenhadas, na ordem em que a pessoa passa por elas.
Split · as seis pessoas do grupo, uma forma e uma cor para cada
08Uma forma por pessoa, cada uma com a sua cor e o seu contorno.
Split · as seis formas e as seis cores desenhadas uma a uma
09As seis formas, desenhadas uma a uma. Nenhuma se repete.
Split · a paleta fechada, com o valor de cada cor
10Seis cores e dois neutros, com o valor escrito ao lado de cada campo.
Split · a tipografia do sistema
11Uma família, dois pesos. A hierarquia vem do tamanho, nunca de uma segunda fonte.
Split · a folha de componentes com a escala, os botões e os estados
12A folha de componentes: a escala de oito e os estados de cada botão.
Split · pedaços do produto: perfil, teclado, nota e valores
13As peças do produto: o perfil, a nota fotografada e o valor que cai em cada forma.
Split · uma tela por pessoa, cada uma com a sua cor
14Uma tela por pessoa: a cor identifica o consumo sem ler o nome.
15O protótipo rodando, da premissa à divisão.
Split · o app aberto na mão, em tamanho real
16Na mão, em tamanho real: a forma maior é quem consumiu mais.
Split · a tela principal do app fotografada como produto
17A peça fechada: a tela principal fotografada como produto.
Split · o resumo de consumo e a lista do grupo
18O resumo do grupo, com o valor já atribuído a cada pessoa.
Split · todas as telas do aplicativo na mesma prancha
19O arquivo fechado, com todas as telas na mesma prancha. É o que o time recebe.
as decisões, em ordem
Objetivo

tirar a divisão da conta da cabeça de quem está na mesa

01

A foto da nota resolve, e ninguém paga a mais.

As ações

seis, e nesta ordem

02

Calcular de forma justa, pagar, cobrar, histórico, achar amigo, compartilhar conta.

As páginas

as seis ações viram cinco páginas

03

Convite, cálculo, histórico, busca e perfil. Nada além delas.

A regra

o tamanho na tela segue a importância

04

A atividade mais importante ocupa a maior parte da tela.

Case de estudoProduto · página2026

Banco Inter

A home do banco reconstruída como sistema de blocos, com a hierarquia definida uma vez e aplicada em toda campanha.

caso completo no Behance
o problema

Cada seção tinha a própria lógica de layout. A página crescia por acréscimo, e nenhuma regra definia o que vinha antes.

a aposta

Com um sistema de blocos e uma ordem definida, a página aceita conteúdo novo sem redesenho.

o que mudou

A hierarquia virou decisão do sistema, não de cada campanha.

Inter · a home refeita, vista como peça
01A primeira dobra refeita, no laranja da marca.
Inter · quatro versões da mesma página lado a lado
02Quatro versões da mesma página, para a decisão sair da comparação.
Inter · a dobra do cartão
03A dobra do produto, em bloco reaproveitável.
Inter · as duas dobras
04As duas dobras na mesma gramática.
Inter · três famílias tipográficas testadas na mesma frase
05A mesma frase em três famílias, para a escolha sair da leitura.
Inter · a escala tipográfica do sistema, com tamanho, peso e entrelinha
06A escala que saiu dela: display, heading e body, com tamanho, peso e entrelinha escritos em cada degrau.
Inter · a escala de cor do sistema, com o contraste medido em cada degrau
07O sistema de cor, com o contraste medido em cada degrau: AAA e AA escritos no próprio campo.
Inter · a folha de componentes gerais, com botões, links e o rodapé
08Os componentes padrão: o botão em todos os estados, o link, e o rodapé montado com eles.
Inter · os assets de marca usados na montagem da página
09Os assets de marca que alimentam a página: peça pronta para montar qualquer dobra, sem pedir imagem nova.
Inter · a home em tela cheia
10A home inteira em uma vista, com os blocos na ordem em que a pessoa desce.
as decisões, em ordem
Objetivo

comunicar valor na primeira dobra

01

E manter essa leitura quando a página crescer.

O diagnóstico

arquitetura, não aparência

02

Refazer o visual deixaria intacto o que fazia a página crescer sem ordem.

A estratégia

quatro princípios

03

Valor primeiro, arquitetura modular, fluxo narrativo e ritmo visual.

A regra

campanha entra dentro de um bloco existente

04

Publicar deixou de exigir uma decisão de layout.

o handoff de produto
A entrega vai com a lista de conferência. Quem implementa não precisa adivinhar.

Ela cobre o que o arquivo não mostra sozinho: o estado vazio, o erro, o menu na rolagem e a imagem que aparece quando alguém compartilha o link. Em marca e campanha a lista é outra, montada pelo que aquela entrega exige.

01Responsividade
  • Desktop widescreen
  • Desktop
  • Tablet
  • Celular
02Protótipo e jornada
  • Fluxograma
  • Protótipo navegável
  • Protótipo inspecionável
03Estados
  • Caminho feliz
  • Estado vazio
  • Carregamento
  • Erro
04Design system
  • Estados de componente: hover, foco, desabilitado
  • Usar os componentes que já existem
  • Texto e conteúdo
05Acessibilidade
  • Contraste de cor
  • Texto alternativo
  • Navegação por teclado
  • Retorno claro de ação
  • Affordance
06Conferência visual
  • Tokens
  • Espaçamento
  • Frames renomeados
  • Camadas renomeadas
07Microinterações
  • Menu ao rolar a página
  • Indicador da página ativa
  • Abertura do menu suspenso
08Compartilhamento
  • Favicon
  • Imagem de compartilhamento
28 itens8 gruposa lista deste projeto
04 · Como eu operoo que fica com o time

O critério fica escrito,
e a operação roda sem mim na sala.

A documentação nasce do componente real, nunca de um screenshot.

Tokens em três camadas, componentes com código e estados especificados, e um alternador de tema que troca só a camada semântica. Eu construo e mantenho o sistema com Claude Code, então a documentação sai do componente que está no ar. O alvo é adoção: um sistema serve quando o time usa e evolui ele entre squads, não quando existe como biblioteca parada.

TokensComponentesEstadosAcessibilidadeLight / DarkClaude Code
Abrir a documentação
preview ao vivo
botão primário · os quatro estados especificados
repouso
hover
foco
desabilitado
superfície--dp-surface
tinta--dp-text
acento--dp-acc
Toque no Light / Dark: só a camada semântica troca.
a iniciativa

Agentes que trabalham comigo, não por mim.

O trabalho de design tem duas metades: a que segue regra fixa, e a que depende de contexto e julgamento. A primeira consome o dia de qualquer time. Eu mapeei qual era qual, escrevi a regra, e passei a primeira metade para agentes. Régua escrita um time herda. Disciplina pessoal, não.

por que construir, e não comprar

Ferramenta pronta resolve a tarefa média. O que me trava não é a média: é a exceção da minha operação, que nenhuma ferramenta conhece.

A régua é o produto, o agente é só quem executa ela. Por isso tudo que eu construo fica escrito em arquivo.

O caminho, do problema ao agente

O método virou skill, e a skill roda sozinha.

Na prática, cada método virou uma skill que roda sozinha. Os repositórios são públicos no GitHub.

Varredura heurística

os fluxos contra as dez heurísticas

01

Uma skill própria devolve as fricções com severidade e lugar exato, no mesmo formato toda vez. Quem revisa deixa de depender de quem é o revisor.

Síntese de research

as entrevistas cruzadas de uma vez

02

Em vez de ler transcrição por transcrição, o agente agrupa padrões e devolve os temas. O time inteiro chega na síntese junto, não um de cada vez.

Critique de fluxo

a crítica antes de levar para o time

03

A tela chega na reunião com produto e engenharia já criticada, e com a pergunta certa junto.

discovery no manual
2 a 3 dias
leitura, planilha, varredura tela a tela
discovery com Claude Code
~4 h
mesma profundidade, medido em três projetos de 2026

E o ganho não para na velocidade. Com o operacional no automático, o meu tempo vai para o julgamento e o craft, que é o que a IA sozinha não entrega.

· E compõe · conhecimento que vira patrimônio
Onde decisão de produto, design e marca não evaporam.

Toda operação criativa paga uma conta que nunca aparece na planilha: a pesquisa que já foi feita e ninguém acha. A entrevista que respondeu aquela pergunta foi feita em março, e em agosto alguém refaz, porque não sabia que existia.

Os agentes que eu uso leem esse acervo inteiro, cruzam arte, marca, produto e negócio, e devolvem a síntese com o caminho até ela. O token registra o que foi decidido. O que some primeiro é o porquê, e é ele que faz quem chega em janeiro entender a escolha de março sem convocar reunião.

É assim que o conhecimento deixa de ser memória de uma pessoa e vira patrimônio que fica com o time.

o acervo

Novecentas e vinte e seis notas,
trinta réguas.

O meu vault tem novecentas e vinte e seis notas: as dezessete disciplinas do MBA, os cursos de automação, os projetos e as decisões de reunião. Destilei esse acervo em trinta réguas agrupadas por função, nunca por ferramenta, e em seis agentes que as aplicam.

Skill não é prompt salvo, é contexto que se instala: a instrução, os arquivos de apoio, os exemplos e a lista do que não fazer. Um processo que acontece toda semana do mesmo jeito não deveria depender de quem pegou a tarefa. E ferramenta antes de método não organiza nada, só acelera a bagunça.

a operação

A operação inteira roda assim: eu escrevo a régua, e os agentes executam. Duas varreduras por dia trazem o que mudou em IA direto para o meu celular. O calendário editorial entra na agenda pela mesma rotina. E nada vai ao ar sem uma conferência que roda antes de mim, contra a régua que eu escrevi.

Antes de colocar um agente para rodar eu respondo três perguntas, e elas vêm antes do que ele faz: onde ele age sozinho, onde ele precisa de um sim, e quem dá esse sim. É a mesma pergunta que eu levo para a operação de um cliente. Quando a geração fica barata, o gargalo deixa de ser produzir e passa a ser julgar, e julgar continua sendo meu.

É arquitetura, não disciplina pessoal, e por isso funciona no dia em que eu estou ruim, e continuaria funcionando com outra pessoa no comando.

clique e arraste
· E roda em · a stack de todo dia
Trinta e sete ferramentas, agrupadas pelo que resolvem.
IA + Modelos

Claude Code · Claude Cowork · Claude Sonnet · Claude Skills · Claude Agents · MCP · Lovable · Cursor · Manus IA · Perplexity · NotebookLM

Automação + Workflows

n8n · Make · ZAIA · GPT Maker · ManyChat · API WhatsApp Business

Design

Figma · Figma Make · Framer · Adobe Suite · After Effects · Krea · Midjourney · HeyGen · Runway

Conhecimento + Gestão

Obsidian · Notion AI · Discord · Antigravity · Google Workspace · Vercel · GitHub

Growth + Dados

Facebook Business · Google Analytics · Google Tag Manager · Tag Assistant

Manifestocritério escrito · ia aplicada

Eu não descrevo a decisão.
Eu escrevo o critério.

continuar
05 · FluxAIestúdio de design e ia

A FluxAI constrói a operação
que o time não tem tempo de montar.

Quando o volume cresce e o processo não, o time refaz na mão o que já existe. Eu desenho o modelo, implanto com quem já opera e aplico IA no que se repete. Fica consistência, governança e capacidade de entrega que escala.

premium · implantação que termina no arC¹

O Premium.

Quando a frente já está nomeada e o que falta é executar.

escopo fechado no diagnóstico90 dias de acompanhamento
as cinco implantações
01Modelo Operacional de Designa estrutura que sustenta quem produz em volume 02IA aplicada a processosda concepção ao monitoramento em produção 03SEO e GEOaparecer na busca e dentro da resposta da IA 04Tráfegoa conta reestruturada e a medição instalada 05Kit Sociala social inteira montada e entregue rodando
Ver o Premium fluxai.dev.br/premium
sob medida · do briefing ao arC²

Os Serviços.

Agentes, landings e automações sob medida, do briefing ao ar.

alguns exemplos
S¹Agentesatendem, qualificam e agendam sozinhos
S²CRM e calendárioos dados entram sem ninguém digitar
S³Landing pagesdesenhadas para converter
+E maistodo processo que se repete na sua operação
Ver todos os serviços fluxai.dev.br/agentes
assinatura, com item novo toda semanaC³

A Biblioteca.

Nem toda tarefa precisa esperar um projeto.

39 itens publicados34 na assinatura
o que vem dentro
B¹O comandocom o critério escrito dentro dele
B²O padrãoa entrega sai igual, seja quem for que pegou
B³O mesmo acervoque eu uso dentro dos projetos, empacotado
Assinar a Biblioteca fluxai.dev.br/planos
06 · Fora do projetoformação contínua · instagram

O que eu estudo entra no projeto,
e o critério sai em público.

em formação
MBA
AI-Driven Innovation & User Experience
Estratégia de produto com IA, automação e sistemas inteligentes.
Em imersão
Escola de Automação e I.A.
Bootcamp de sistemas de IA aplicados à operação real.
29 trilhas
o que eu publico

Publico no @mantovani_opedro o que um case não mostra: o critério que eu usei, o que eu descartei e por quê. Quem acompanha vê o método antes do resultado.

IA Automação Design Bastidores
seguir no Instagram
P¹A tela ficou acesa sem mimCraft P²Os 5 níveis para usar o ClaudeMental model P³Usar IA virou o básico. O critério não.Opinião P⁴O que é um agente, sem jargãoGlossário P⁵Como plugar sua 1ª skill no ClaudeTutorial P⁶Onde as skills moram: ~/.claude/skillsBastidor
07 · Contatosão paulo · remoto ou híbrido

Formas de trabalhar comigo.

D¹
full-time · clt · disponível

Trabalhar no seu time

Product & Brand Designer para o seu time: design, direção de arte e criação, produto e IA aplicada.

Enviar email LinkedIn
D²
freelance · projeto

Freelance / projeto

Escopo por projeto, com entrega combinada e prazo fechado.

Enviar email Ver o trabalho
D³
estúdio · fluxai

FluxAI

Aqui quem entra é a empresa, não eu sozinho.

Conhecer a FluxAI Serviços sob medida
D⁴
mentoria · 90 min · online · 1:1

Mentoria 1:1

O que está travando no que você está construindo agora.

noventa minutos, uma peça sua na mesaN¹

Como funciona, em três passos.

Ver horários cal.com/pedromantovani
canaisD⁴
emailomantovani.pedro@gmail.com linkedin/in/pedro-de-oliveira-mantovani github/pedromantovanidesign behance/pedro_mantovani instagram@mantovani_opedro fluxaifluxai.dev.br