Quem decide
Dono ou gestor de PME
“Isso dá retorno? Em quanto tempo? Quanto custa?”
Precisa de prazo, de prova e de um próximo passo claro.
MaviDev, do ruído ao sinal.
O redesign do site de uma consultoria de IA de São Paulo, da auditoria ao código, feito com IA e sem Figma. Aprovado pelo dono e a caminho do ar.
Ruído na primeira tela 5
Role para limpar a primeira tela
- Cliente
- MaviDev, consultoria que implementa sistemas de IA para PMEs
- Vínculo
- Freelance, LF Design
- Meu papel
- Product e Tech Designer, ponta a ponta: estratégia, UX, UI, motion e front-end
- Entrega
- Site em Next.js com 18 páginas, tema claro e escuro e 134 testes automatizados
- Ferramentas
- Claude Code, Impeccable, Claude Design e Playwright. Sem Figma
Uma empresa técnica, num site que falava como anúncio.
A MaviDev implementa sistemas de IA para pequenas e médias empresas e publica o próprio código: o Agent Orchestrator está em produção com licença aberta e o PoupaGrana está em beta. Esse é o diferencial. No site, ele disputava espaço com faixa de oferta, contagem de vagas e nove jeitos diferentes de pedir contato.
Quem avalia
CTO ou desenvolvedor
“Isso é real? Cadê o código? Qual é a stack?”
Precisa ver o sistema rodando, o repositório e a tecnologia.
Antes de qualquer tela, um diagnóstico escrito.
Comecei lendo o site no ar e escrevendo um plano: o que estava errado, o conceito, as fases e os riscos. Abaixo, o documento resumido. Os trechos marcados mostram no que cada ponto virou.
Plano de modernização do site MaviDev
19/10/2026 · diagnóstico do site no ar
Diagnóstico
- : o banner e os botões falavam de vagas para um mês que já tinha passado.
- : três blocos diziam quase a mesma coisa.
- : os cases eram produtos próprios, mostrados só com texto.
- : só âncoras na home.
- : o Agent Orchestrator, com dois modelos de IA trabalhando juntos, é visual por natureza.
Conceito
: uma rede que começa desorganizada, como o trabalho manual, e se organiza conforme o visitante desce a página.
Seis fases
- Descoberta e conteúdo
- Design system e UI
- Protótipo de motion
- Build
- Conversão e SEO
- QA e deploy
Cuidados
, movimento sem propósito e quem desativa animações.
Ferramentas previstas
, Claude Design para protótipos e Claude Code para construir.
- 1Toda a urgência saiu: faixa de oferta, contagem de vagas e botão flutuante.
- 2A home caiu de 12.298 para 10.802 px: o método entrou no palco e os blocos repetidos viraram um.
- 3Os dois produtos viraram demos que rodam na página, marcadas como ilustrativas.
- 4A rota de cases ganhou página própria, com os dois produtos.
- 5O Orchestrator virou a demo principal e a linha viva da primeira tela.
- 6O conceito ficou. A forma mudou três vezes: rede 3D, escritório de robôs e pilha de vidro.
- 7O 3D saiu do projeto; animação contínua só roda à vista e tudo tem versão sem movimento.
- 8O Figma não chegou a entrar: o protótipo foi o próprio código, testado no navegador.
Cinco segundos para entender o que a empresa faz.
É o teste mais simples de primeira impressão: olhar a tela por cinco segundos e dizer o que a empresa faz. Faça com a primeira tela antiga e depois com a nova.
Demonstração interativa, não é uma pesquisa com usuários.
Na tela antiga, a primeira leitura é a oferta: faixa laranja, “3 vagas” e o banner de cookies disputam com o título.
Na nova, a primeira leitura é o que a empresa faz e para quem, com dois caminhos: conversar ou ver o código.
Antes de desenhar, li o site como o visitante lê.
Percorri a página inteira no computador e no celular e anotei cada ponto em que a mensagem tropeçava. Não é questão de gosto: são trechos que estavam no ar. O dono autorizou mostrar esta leitura.
10 achados em três grupos
O texto se contradiz
A urgência abafa a mensagem
O primeiro contato tropeça
Cada bloco antigo ganhou um destino.
Listei os doze blocos da página antiga e decidi o que acontecia com cada um: ficar, ser reescrito, se juntar a outro, mudar de página ou sair. Escolha um bloco para ver o caminho.
Página antiga · 12 blocos
Site novo · home e páginas
- Primeira tela com o orbe
- Faixa de tecnologias
- Manifesto
- Palco do método, 30/60/90
- Calculadora com a conta à vista
- Serviços, cada um com página
- Cases com as duas demos
- Comparativo
- Perguntas frequentes
- Chamada final
- Página Sobre (fora da home)
Escolha um bloco da página antiga.
O que fui buscar fora, e o que deixei lá.
Referência serve para decidir mais rápido, não para copiar. Três tipos entraram no projeto, cada um num momento diferente. Escolha um para ver onde ele chegou no site novo.
Rodada 1, depois de “o site ficou muito genérico”
Produtos de software para desenvolvedores e criadores
- Ficou
- Base escura e técnica, menu em cápsula, linhas finas no lugar de caixas e a ideia de deixar o visitante usar o produto na própria página.
- Deixei
- Rótulos em caixa-alta acima dos títulos e texto em degradê.
Rodada 7, depois de duas cenas que não chegaram lá
Um site de IA, em vídeo, analisado quadro a quadro
- Ficou
- Preto com luz violeta, vidro fosco, título leve, orbe com pílulas em órbita, uma pilha isométrica ao lado de um cartão e o horizonte violeta.
- Deixei
- As pílulas-rótulo acima dos títulos.
Rodada 10, para o acabamento do movimento
Uma landing animada com GSAP, desmontada no código
- Ficou
- Título revelado letra a letra, traço que se desenha com a rolagem e cartões que sobem, refeitos sem GSAP.
- Deixei
- Tela de carga, vídeo de fundo, modelo 3D e rolagem horizontal presa, pelo desempenho no celular.
Onde cada referência chegou no site novo
menu em cápsula e base escuraorbe, título leve e horizonte
título letra a letra e traço
pilha isométrica e cartãolinhas finas
usar o produto na página
cartões que sobembrilho que segue o cursor
horizonte violetatítulo letra a letra
Se a promessa é “sem promessas vazias”, o site tem de mostrar, não prometer.
O problema não era a cor nem a fonte. Era confiança: cada contradição custava credibilidade justamente para quem vende rigor técnico. O trabalho inteiro passou a responder a uma pergunta só.
Como poderíamos fazer um gestor de PME confiar na MaviDev em poucos segundos, sem perder o desenvolvedor que quer ver o código?
“IA que funciona, visível”
O conceito do diagnóstico guiou tudo o que veio depois: o trabalho manual em desordem que se organiza com a IA. Ele sobreviveu a três formas diferentes até achar a que comunica.
Quatro princípios, tirados do que a empresa já fazia
-
Mostrar o sistema funcionando
Demonstrações que rodam no próprio site, em vez de promessas sobre o que a IA faz.
-
Código aberto como prova
O GitHub a um clique desde a primeira tela, para quem avalia tecnicamente.
-
Resultado em etapas curtas
A promessa de 30, 60 e 90 dias vira o fio que conduz o método.
-
Duas audiências, uma página
Falar com quem decide e com quem avalia sem diluir nenhum dos dois.
O que não mudava
O nome MAVIDev, o roxo da marca, a promessa de 30, 60 e 90 dias, os dois produtos próprios e os números que a empresa afirma sobre si, que decidi manter como afirmação dela, sem transformar em resultado.
Divergir rápido, decidir devagar.
Nada saiu de um prompt só. A IA gerava uma versão em minutos; o trabalho era olhar, criticar e decidir o que ficava. Cada rodada abaixo é um commit real: o que estava na tela, a minha crítica e o que fiz a partir dela.
13 rodadas11 críticas minhas4 viradas de direção2 cenas descartadas
-
Rodada 1 · a2eb80b
O conteúdo antigo, numa casa nova
O texto do site antigo levado para Next.js, com uma rede de agentes em 3D que reagia à rolagem.
Minha crítica: Sem ponto de vista. A página repetia o molde de qualquer consultoria de IA; nada nela vinha do que a MaviDev tem de único.
O que fiz: Parei de gerar e fui pesquisar: estudei a fundo quatro produtos de tecnologia, não agências. Daí saiu a base do projeto: dois públicos e uma direção escura e técnica.
Virada 1 -
Rodada 2 · 60a5d54
Escuro e técnico
Menu em cápsula, terminal no topo, cena 3D presa à rolagem e linhas finas no lugar de caixas. Saíram os rótulos acima dos títulos e o texto em degradê.
Minha crítica: Direção certa, página parada. A home informava, mas não conduzia: nada dava ritmo à leitura nem convidava a interagir.
O que fiz: Pedi movimento, interação e narrativa, com um critério: cada efeito precisava conduzir a leitura, não enfeitar a página.
Ficou em parte -
Rodada 3 · af02479
Movimento que conta a história
Título que entra palavra por palavra, manifesto que acende com a rolagem, linha do tempo dos 90 dias e botões magnéticos.
Minha crítica: Acabamento desigual. A home tinha ganhado movimento, mas as páginas internas só tinham trocado de tema, e nada fora conferido no celular.
O que fiz: Cobrei a revisão de qualidade de ponta a ponta, em todas as páginas: as internas subiram ao nível da home, com atalho para o conteúdo e menos movimento para quem pede.
Ficou -
Rodada 4 · 62918bf
Deixar o visitante usar
A ideia de produtos que se usam na própria página virou duas demos, prototipadas no Claude Design e levadas ao código, marcadas como ilustrativas.
Minha crítica: Ilustração sem leitura. A rede de pontos em 3D era o maior elemento da seção do método e não representava nada reconhecível.
O que fiz: Troquei a abstração por uma metáfora concreta: comparei três (esteiras, fios emaranhados e um escritório de robôs), escolhi o escritório e prototipei no Claude Design.
Ficou -
Rodada 5 · 2eca0f2
Uma metáfora no lugar da rede
O escritório de robôs, versão 1, em três atos: a papelada solta, três robôs com uma tarefa cada e um maestro com as métricas.
Minha crítica: A metáfora funcionava; o desenho, não. O traço era simples demais para sustentar a cena principal do método.
O que fiz: Pedi uma versão mais lúdica e detalhada, de novo prototipada no Claude Design antes do código: o caos de hoje, a transição e a operação em ordem.
Virada 2 -
Rodada 6 · 9768237
Mais detalhe não salvou o desenho
Versão 2, mais lúdica e detalhada: funcionário estressado, post-its, cabos embolados e um maestro de cartola regendo os robôs.
Minha crítica: Detalhe não substitui qualidade de traço. Sem referência visual, a IA desenhava o SVG à mão, e a cena ficava abaixo do resto do site.
O que fiz: Reverti só a cena e preservei o que já funcionava: as demos, o acabamento e as correções. Em vez de insistir no desenho, fui buscar uma referência de verdade.
Descartado · virada 3 -
Rodada 7 · b7fe675
A referência certa
Um site de IA em vídeo, analisado quadro a quadro: preto com luz violeta, vidro, título leve, orbe em órbita e uma pilha isométrica. Deixei de fora as pílulas-rótulo acima dos títulos.
O que fiz: Testei a direção num branch separado, sem arriscar o que já estava aprovado. A pilha de vidro substituiu a rede, e as bibliotecas de 3D saíram do projeto: tudo virou SVG e CSS.
Virada 4 -
Rodada 8 · a13f3ad
A crítica que doeu
Uma crítica completa do Impeccable, em revisores independentes: especificidade 6 de 10 e heurísticas 26 de 40. O palco e as demos eram autorais; a casca, genérica.
Minha crítica: Dois números para a mesma economia. O FAQ trazia o valor real; a calculadora, uma simulação sem base. Lado a lado, um enfraquecia o outro.
O que fiz: Separei o técnico do que era decisão. Corrigi na hora o que travava o uso: estouro em 320 e 375 px, 21 de 49 alvos de toque pequenos e 27 animações fora da tela.
Ficou -
Rodada 9 · 15c2813
Decisões de produto
Respondi às pendências uma a uma. A home encolheu de 12.298 para 10.802 px, o método entrou no palco e a calculadora foi recalibrada com fontes públicas.
Minha crítica: Estrutura resolvida, superfície tímida. Os cartões de serviço pediam mais presença, e o FAQ, preso a meia largura, ficava apertado.
O que fiz: Fui buscar técnica numa landing de referência e filtrei com critério: só entrou o que ajuda a ler, sem dependência nova e sem mexer no que já estava aprovado.
Ficou -
Rodada 10 · 8fce793
Técnica de referência, refeita
Desmontei uma landing animada em GSAP e refiz o movimento sem GSAP: título letra a letra, traço que se desenha com a rolagem e cartões que sobem.
Minha crítica: Composição quebrando nas bordas. Em janelas baixas o palco cortava os objetos, e o bloco de código invadia a órbita do topo.
O que fiz: Mandei os prints e corrigi o enquadramento. Para o terminal, pedi a recomendação ao Impeccable: dois focos competiam, e movê-lo só mudaria a duplicação de lugar.
Ficou -
Rodada 11 · 1f15a21
Um foco só na primeira tela
Um foco por tela: o terminal saiu do topo e deu lugar a uma linha viva com link para a demo. A logo ganhou a palavra clara, com contraste de 16,8:1.
Minha crítica: Depois de tantas rodadas visuais, o risco era a mensagem. Eu precisava provar que nada importante tinha se perdido no caminho.
O que fiz: Pedi uma auditoria de mensagem, página por página: o que tinha sumido, o que ficou confuso e o que faltava dizer.
Ficou -
Rodada 12 · 0b0b8e1
A mensagem antes do pixel
A auditoria achou uma regressão: a promessa de 30, 60 e 90 dias tinha sumido ao juntar o palco e o método. Ela voltou, e o topo passou a nomear as PMEs.
Minha crítica: Funcionar no caminho feliz não é estar pronto. Faltava saber o que acontece sem JavaScript, com erro e nas telas extremas.
O que fiz: Pedi a varredura dos casos extremos e testes automatizados contra o build de produção, não contra o ambiente de desenvolvimento.
Ficou -
Rodada 13 · a0bd44f
O que pode dar errado
A varredura achou 286 elementos invisíveis sem JavaScript, um formulário que punha os dados na URL e nenhuma página de erro. Tudo corrigido, com 134 testes.
O que fiz: Deixei os testes rodando contra o build de produção. Eles pegaram um erro real de hidratação do React com movimento reduzido, que nenhuma revisão visual teria encontrado.
Ficou
Uma sala escura com luz de piso.
A identidade nova parte de uma ideia física: a página é uma sala escura e a luz vem de baixo, dos sistemas que a empresa constrói. O roxo deixou de ser fundo e virou luz. Desenhei os dois temas, e o site abre no que o aparelho do visitante prefere.
- Títulos
- Plus Jakarta Sans, peso 300
- Texto
- Geist, 15 px
- Dados e código
- Geist Mono, 12 px
- Fundo
#030305 - Texto
#ECECF1 · 17,6:1 - Apoio
#9A9AA6 · 7,4:1 - Luz
#8B5CF6 - Ênfase
#B79BFF
As regras que escrevi para o sistema
- Luz, não tinta
- O violeta aparece como halo, borda que acende ou uma palavra de ênfase. O fundo continua preto.
- Ênfase por cor
- Destaque é uma troca de cor. Texto em degradê, que o site antigo usava, ficou proibido.
- Peso leve
- Títulos em 300; o peso 500 só em botões e abas. O brilho carrega a ênfase.
- Sem rótulo acima do título
- O contexto vai no próprio título ou num chip de estado ao lado do conteúdo.
- Brilho por baixo
- Sombras coloridas ficam abaixo e difusas, como luz de piso. Nunca sombra dura deslocada.
- Só anima o que está à vista
- Animação contínua roda apenas com a cena na tela, e tudo respeita quem pede menos movimento.
- Cor de cena fica na cena
- Âmbar, ciano e verde existem só dentro das ilustrações, para distinguir peças. Nunca na interface.
Cinco peças que mostram em vez de prometer.
Cada uma responde a uma pergunta de quem decide ou de quem avalia. Gravei do site novo, sem edição.
Orbe e órbitas
Um visual só no topo, com as etapas e os modelos girando em volta. As órbitas param quando saem da tela.
Responde: “o que essa empresa faz?”
Palco em três atos
Hoje, semanas 1 a 8, semanas 9 a 12: a promessa de 30, 60 e 90 dias contada pela rolagem, com processos, agentes e orquestrador.
Responde: “em quanto tempo?”
Calculadora com a conta à vista
Encargo de 1,6 vez o salário e 40% das tarefas automatizáveis, com as fontes abertas. A simulação não promete o que o diagnóstico ainda não mediu.
Responde: “quanto eu economizo?”
Cases que rodam
O Agent Orchestrator planeja, escreve e revisa na frente do visitante. Marcado como demonstração ilustrativa, com link para o código.
Responde: “isso é real?”
Serviços com página própria
Cinco serviços, cada um com cor, ilustração, para quem é, sinais de que você precisa e passos.
Responde: “isso serve para mim?”
O mesmo conteúdo, outra conversa.
Arraste a divisória para comparar. As duas versões estão na mesma largura de tela.
Primeira tela no computador, em 1440 × 900.
O que escolhi e do que abri mão.
Seis das dezesseis decisões registradas no projeto, com o motivo de cada uma.
Escuro, com o violeta como luz
- Escolhi
- Preto quase puro, vidro e luz violeta, a partir de um site de IA em vídeo que analisei quadro a quadro.
- Abri mão de
- O fundo roxo em degradê e o título rosa do site antigo.
- Por quê
- Combina com “sistema funcionando” e com o público técnico; o roxo continua sendo a marca, agora como luz.
Um visual só na primeira tela
- Escolhi
- O orbe com órbitas e, abaixo do título, uma linha viva de demonstração com link para o case.
- Abri mão de
- O terminal ao lado do orbe, que eu mesmo tinha construído.
- Por quê
- Os dois disputavam o olhar e o terminal repetia a demo do Orchestrator que aparece mais abaixo.
Vidro em camadas no lugar do 3D
- Escolhi
- Uma pilha isométrica de placas de vidro, desenhada em SVG: processos, agentes e orquestrador.
- Abri mão de
- A rede de pontos em 3D e as bibliotecas three.js, react-three e GSAP, removidas do projeto.
- Por quê
- A rede era bonita mas não dizia do que se tratava. As camadas explicam o método e o site ficou mais leve.
Uma calculadora que mostra a conta
- Escolhi
- Fórmula e fontes públicas à vista: encargo de 1,6 vez o salário e 40% das tarefas automatizáveis.
- Abri mão de
- Um número grande e chamativo logo de saída.
- Por quê
- A simulação não deve prometer o que o diagnóstico ainda não mediu. Para quem vende rigor, a conta aberta convence mais.
Um caminho principal para conversar
- Escolhi
- “Agendar conversa” como ação principal, repetida com o mesmo nome, e o GitHub como segunda via.
- Abri mão de
- A faixa de oferta, a contagem de vagas, o botão flutuante e os nove rótulos diferentes.
- Por quê
- Urgência repetida corrói confiança, e cada rótulo novo faz o visitante parar para entender se é outra coisa.
Demonstração com etiqueta
- Escolhi
- Toda demo, cena e exemplo de saída marcado como “demonstração ilustrativa”.
- Abri mão de
- Deixar a demo passar por produto real em uso.
- Por quê
- O site promete transparência. A etiqueta custa pouco e evita a primeira dúvida de quem avalia.
O lado de engenharia do design.
Design que vai para produção precisa aguentar o mundo real. Escrevi os testes junto com a interface e rodei contra o build de produção, nas larguras e temas em que o site vai ser visto.
Running 134 tests using 4 workers
110 passed routes.spec.ts 18 rotas, larguras e temas
10 passed a11y-viewports teclado, 280 px, zoom 200%
5 passed contact.spec.ts vazio, inválido, longo
4 passed theme.spec.ts sistema, botão, sem storage
3 passed demos.spec.ts cliques repetidos
2 passed nojs.spec.ts tudo visível sem JS
134 passed- Sem JavaScriptTodo o conteúdo animado aparece; o formulário avisa e envia por e-mail.
- Um bloco quebra, a página nãoCada ilustração e demo fica isolada; se falhar, o resto segue.
- Menos movimentoRolagem suave, cursor, órbitas e títulos animados desligam; o método vira uma versão plana.
- Telas extremas280 px, zoom de 200%, celular deitado e monitor de 2560 px sem rolagem lateral.
- TemaSegue o sistema, sincroniza entre abas, funciona com o armazenamento bloqueado e não pisca.
- Impressão e alto contrastePapel claro com o conteúdo inteiro; bordas e foco nas cores do sistema.
A IA gerava. A decisão era minha.
Não abri o Figma. O protótipo foi o próprio produto, testado no navegador em tamanho real, no computador e no celular. A IA acelerou a construção; o critério de o que fica continuou sendo trabalho de designer.
- IntençãoEu escrevo o que a seção precisa provar e para quem.
- ConstruçãoO Claude Code gera a versão no código, já navegável.
- CríticaO Impeccable critica, audita contraste, toque e excessos.
- DecisãoEu vejo no aparelho e escolho: fica, ajusta ou sai.
- ProvaTeste automatizado e commit. A próxima volta parte daí.
- perguntar
- 8 rodadas de perguntas antes de construir
- planejar
- 5 planos aprovados antes de executar
- criticar
- 11 críticas minhas e 1 crítica completa do Impeccable
- revisar
- 3 revisores independentes: crítica, auditoria e documentação
- descartar
- 2 cenas inteiras e 1 terminal
- provar
- 134 testes no build de produção
- figma
- 0 telas
O que não deleguei
- A direção. Qual referência seguir e o que rejeitar dela.
- Quando parar. Reverter a cena do escritório depois de duas versões.
- O que a página promete. Manter os números como afirmação da empresa e pôr a conta da calculadora à vista.
- O que fica de fora. Cada corte da home, do terminal às pílulas-rótulo.
- O que é pronto. As larguras, os temas e os casos extremos que o site precisa aguentar.
Medido, não prometido.
O site novo ainda não está no ar, então não há conversão para mostrar. O que dá para medir hoje, eu medi: a mesma página inicial, antes e depois, na mesma máquina.
Velocidade no celular Lighthouse, perfil celular
- Nota de desempenho
6784 - Primeiro conteúdo na tela
4,0 s2,0 s - Tela visualmente pronta
5,3 s2,0 s - Maior elemento na tela
5,6 s4,3 s - Peso da página
683 KB497 KB - Requisições
3424
Acesso e mensagem
- Acessibilidade (Lighthouse)
9096 - Botão de ação na primeira tela do celular
nenhumdois - Contradições no texto
40 - Avisos de escassez
50 - Rótulos para “falar com a gente”
94 - Temas
12
Como medi: Lighthouse 12 no perfil de celular, três medições de cada lado e a mediana, em 29/10/2026. O antigo, no ar em mavidev.com.br; o novo, no build de produção rodando nesta máquina, que ainda não está publicado. Scripts injetados pelo antivírus foram bloqueados nos dois lados. O maior elemento ainda leva 4,3 s no celular: é o primeiro ajuste da fila depois do lançamento.
Aprovado pelo dono da MaviDev para ir ao ar. Depois do lançamento, vou acompanhar conversas agendadas, cliques em “Ver código no GitHub” e quanto da página é lido no celular. Essas são metas, não resultados.
O que fica deste projeto.
-
A maior melhoria foi de texto, não de tela.
Tirar as contradições e a urgência repetida mudou mais a confiança do que qualquer efeito. Auditar a mensagem é trabalho de design.
-
Com IA, construir ficou barato; escolher ficou caro.
Construí versões inteiras que não foram ao ar. O valor estava em saber por que cada uma saía, e em deixar isso registrado.
-
Teste também é design.
Aprovar fica mais fácil quando o dono vê o site funcionando a 280 px, sem JavaScript e nos dois temas, e não só numa tela bonita.
Seu site promete mais do que mostra?
Eu desenho e entrego, da estratégia ao código, com IA e sem perder o critério. Vamos conversar.
Recrutando? design.lferreira@gmail.com
Ver os outros cases