Problema
Checkout fragmentado, sem identidade visual consistente com a marca, taxas confusas e erros genéricos barravam a conversão. Usuários B2C repetiam dados a cada consulta; B2B não tinham ferramenta para controlar débitos em lote, como débitos de frota.
Solução
Liderança completa da reconstrução do Checkout e a criação da Área Logada B2B/B2C, end-to-end, com uso de IA (Figma MCP + Cursor) para handoff design-to-code em React/Tailwind.
Impacto
Conformidade com a LGPD 100% implementada. Stakeholders validaram a nova interface como materialização exata da visão de negócio, além de aumento de 27% das taxas de conversão. Ponte entre Design e Engenharia eliminada via IA, resultando em código mais fiel ao protótipo e componentes integrados ao Design System.
Confidencialidade: Este case foi desenvolvido sob acordo de confidencialidade (NDA) com a empresa. Por isso, não exibo telas reais, código-fonte, prompts completos ou dados internos do produto — as imagens e exemplos aqui são ilustrativos. O que documento é o meu processo de trabalho: como estruturei o problema, as decisões que tomei, como usei IA em cada etapa e os aprendizados que levo do projeto.
Reconstruí o Checkout do Parcela Tudo e criei a Área Logada B2B/B2C, conduzindo o projeto de ponta a ponta: discovery, pesquisa, arquitetura, Design System, prototipação, validação e implementação assistida por IA. Antes do desenvolvimento oficial, usei v0 para criar uma POC funcional e validar rapidamente a jornada, a clareza das taxas, os estados de erro e os requisitos de LGPD. Depois, utilizei Claude, Cursor e o MCP do Figma para conectar o contexto visual do Figma ao código em React, Tailwind CSS e Vue. O novo fluxo aumentou a conversão do Checkout em 27%, reduziu divergências entre Design e Engenharia e transformou a IA em uma ferramenta prática para validar e implementar decisões de produto.
IA e desenvolvimento — função de cada ferramenta
- v0: criação da POC inicial e validação do fluxo com stakeholders.
- Claude: análise de contexto, geração de componentes, documentação, testes e refinamento.
- Cursor: implementação e iteração diretamente no repositório.
- MCP do Figma: leitura do contexto visual e transposição de componentes para código.
- RACE: estruturação do contexto, objetivo, regras e critérios de saída de cada prompt.
O produto era funcional, mas tinha baixa retenção. No B2C os dados do usuário não eram persistidos, gerando fricção ao preenchê-los em cada consulta. No B2B, faltava uma ferramenta para centralizar o controle dos débitos de veículos em lote, uma ferramenta que facilitasse o pagamento, mas também monitorasse a existência de novos débitos. Já o Checkout sofria com identidade visual defasada — o produto não acompanhou o reposicionamento de marca da Empresa, o que levava os clientes a não compreenderem que se tratava da mesma Empresa —, além da falta de clareza sobre taxas e erros genéricos que barravam a conversão.
Via mapas de calor (Hotjar), análise de comportamento e entrevistas com usuários, identifiquei que os principais pontos de fricção eram a inconsistência visual entre landing page e checkout, gerando desconfiança no momento crítico de conversão, políticas LGPD inacessíveis, feedback de erro genérico que bloqueava o usuário sem orientação, e ausência de histórico de transações no B2C. Fui responsável por toda a jornada: discovery, arquitetura, design system, prototipagem de alta fidelidade e implementação front-end em React/Tailwind.
Pontos críticos identificados
- Inconsistência visual entre landing e checkout
- Políticas LGPD inacessíveis
- Feedback de erro genérico
- Ausência de histórico de transações
Antes de iniciar a implementação oficial, construí uma Prova de Conceito (POC) funcional do novo Checkout na v0. O objetivo era testar rapidamente a arquitetura da jornada, a clareza das taxas, os estados de erro, a apresentação das informações de LGPD e os principais fluxos de pagamento antes de investir no desenvolvimento definitivo. Para orientar a IA, estruturei o contexto do projeto com o framework RACE, incluindo objetivo, regras de negócio, restrições de interface, documentação do Design System e critérios de validação. No fluxo de design-to-code, utilizei o MCP do Figma para fornecer o contexto das telas e componentes ao Claude e ao Cursor. A IA apoiou a geração de componentes em TypeScript, React, Tailwind CSS e Vue, além de estados de loading, erro e vazio, responsividade, interações, documentação e testes. Eu conduzi a direção de Design, revisei as saídas, comparei o código com o Figma e refinei as regras por meio de prompts adicionais. Menos de 10% dos ajustes precisaram ser feitos manualmente. O resultado foi um fluxo de validação mais curto e uma ponte mais direta entre Design e Engenharia. A POC serviu para validar a solução com stakeholders antes do desenvolvimento oficial, enquanto os componentes gerados foram utilizados pelos desenvolvedores como base para refinamento e integração com backend.
Discovery
- Problema de negócio
- Contexto RACE + regras de negócio
Prototipação
- POC na v0
- Validação com stakeholders
Design-to-code com IA
- Figma + Design System
- MCP do Figma
- Claude + Cursor
- React / Tailwind / Vue
Entrega
- Revisão visual e UX QA
- Refinamento com Engenharia
- Produto implementado
Descoberta
Benchmarking de mercado, análise de heatmaps e fluxogramas de decisão para garantir que a solução fosse estratégica, não apenas visual.
Arquitetura & Design System
Análise dos átomos da marca Botpag e criação de componentes novos no Figma, alimentando a biblioteca tanto no design quanto no código.
Design-to-code assistido por IA
Utilizei o MCP do Figma conectado ao Cursor para transformar componentes e telas do Figma em uma base funcional em React e Tailwind CSS. A implementação foi revisada visualmente, refinada por prompts e ajustada às regras do Design System antes do handoff para Engenharia. Esse processo funcionou como um handoff invertido: o código passou a ser criado a partir do contexto visual e estrutural do Design, em vez de depender apenas de uma especificação textual.
Validação & Rollout
Teste com stakeholders, implementação de feedback de erro humanizado e conformidade LGPD, com métricas sendo coletadas em rollout progressivo.
O que a IA fez
- Gerou uma primeira versão funcional da POC.
- Transformou componentes e telas em código.
- Criou variações de estrutura e layout.
- Sugeriu estados de erro, loading e vazio.
- Apoiou a geração de documentação e testes.
- Acelerou a criação de componentes repetitivos.
- Permitiu testar interações antes da implementação oficial.
O que eu fiz
- Defini o problema e os objetivos de negócio.
- Estruturei o contexto e as restrições.
- Decidi quais hipóteses deveriam ser testadas.
- Defini a arquitetura da experiência.
- Criei e validei o Design System.
- Avaliei criticamente os resultados gerados.
- Corrigi regras de negócio e inconsistências visuais.
- Conduzi a validação com stakeholders.
- Fiz o alinhamento com Engenharia.
- Garanti conformidade com LGPD e qualidade da experiência.
Para cada tarefa, eu estruturava o contexto antes de solicitar a implementação. O prompt incluía o papel esperado da IA, o objetivo da tela, as regras de negócio, os componentes disponíveis, as restrições técnicas, os estados que deveriam ser contemplados e os critérios de sucesso. Usei o framework RACE como estrutura para reduzir ambiguidades e tornar as respostas reutilizáveis.
Contexto: Checkout de regularização de débitos veiculares, com necessidade de transparência de taxas e conformidade com LGPD. Tarefa: Implementar o componente de resumo do pagamento em React e Tailwind. Restrições: Usar tokens existentes, contemplar loading, erro e sucesso, manter responsividade e não alterar a hierarquia definida no Figma. Critérios de aceite: O usuário deve entender o valor principal, as taxas e o total antes de avançar para o pagamento.
O fluxo assistido por IA criou uma ponte mais direta entre Design e Engenharia. A POC permitiu validar a solução antes da implementação oficial, e os componentes gerados a partir do contexto do Figma foram utilizados pelos desenvolvedores como base de refinamento e integração com backend. No processo de geração e refinamento, menos de 10% dos ajustes precisaram ser realizados manualmente. O uso de IA também reduziu a dependência de pessoas para validar hipóteses iniciais e permitiu testar mais rapidamente fluxos, estados e alternativas de interface. No produto, o novo Checkout apresentou aumento de 27% na conversão em comparação com o fluxo anterior, acompanhado por teste A/B e análise de métricas de comportamento.
Utilizar a IA como ferramenta no handoff foi uma excelente sacada para entregar alta fidelidade do protótipo e qualidade.
Humanizar erros é estratégia de negócio: Mensagens orientadoras, não bloqueadoras, ajudam a transformar fricção em percepção de segurança, sem deixar o usuário no escuro. Isso com certeza impactou diretamente na conversão.
Design System é importante e um grande ativo de negócio: componentes reutilizáveis garantem consistência em B2C e B2B, reduzindo tempo de desenvolvimento de novas features.
Limitações e aprendizados sobre IA
A geração de código não substituiu a tomada de decisão de Design nem a validação técnica. As principais limitações apareceram quando as regras de negócio não estavam explícitas no contexto ou quando a IA precisava interpretar comportamentos relacionados ao backend. Nesses casos, refinei os prompts, consultei o repositório e alinhei o comportamento com os desenvolvedores.
Aprendi que a qualidade da saída depende diretamente da qualidade do contexto fornecido. Documentação do Design System, critérios de aceite, estados de interface e regras de negócio foram tão importantes quanto a escolha do modelo.
