Começar um projetoComeçar um projetoCliente
Case de estudo IA
Categoria
Claude Code
Ano
2026
Tags
Este projeto foi desenvolvido como um estudo de caso independente, criado para explorar como inteligência artificial, direção de arte, UX/UI e desenvolvimento front-end podem ser integrados em um processo completo de construção digital.
A proposta partiu da análise do posicionamento da Wellhub como uma plataforma de bem-estar corporativo que conecta empresas e colaboradores a academias, estúdios, aplicativos, serviços de saúde, mindfulness, nutrição e qualidade do sono.
O objetivo foi reinterpretar a experiência digital da marca, criando um hero mais visual, editorial e orientado à conversão, sem perder a clareza comercial necessária para atender públicos distintos.
A Wellhub possui uma oferta ampla, que envolve diferentes perfis de usuários, categorias de bem-estar e jornadas de conversão.
O principal desafio foi organizar todas essas informações dentro de uma interface capaz de comunicar, simultaneamente:
Além disso, o novo conceito precisava evitar uma estrutura convencional de landing page, criando uma apresentação mais contemporânea, dinâmica e coerente com uma plataforma global de tecnologia e saúde.
O processo começou com a estruturação de um briefing técnico e visual.
Foram analisados o site atual, a arquitetura de informação, os principais pontos de conversão, a linguagem institucional, os componentes recorrentes e a forma como a plataforma apresenta suas soluções para empresas e colaboradores.
A partir dessa análise, foram definidos os principais objetivos da interface:
O briefing também definiu requisitos de composição, hierarquia, responsividade, comportamento dos componentes, áreas de conversão e direção de arte.
A etapa seguinte foi dedicada à curadoria de referências.
Foram pesquisadas interfaces de plataformas de saúde, fitness, benefícios corporativos, produtos SaaS, aplicativos de bem-estar e experiências digitais com forte apelo editorial.
As referências não foram utilizadas como modelos para reprodução. Elas serviram para identificar padrões de:
Com base nessa pesquisa, foi definida uma linguagem visual mais sofisticada, com tons neutros, contrastes tipográficos fortes, elementos arredondados, imagens relacionadas a movimento e saúde e componentes capazes de transmitir tecnologia sem afastar o caráter humano da marca.
A direção de arte foi construída para representar o bem-estar como um ecossistema conectado.
Em vez de destacar apenas academia ou atividade física, a composição apresenta diferentes dimensões da jornada do usuário:
A imagem principal foi desenvolvida para funcionar como ponto central da narrativa, conectando diferentes atividades por meio de elementos gráficos, ícones e relações visuais.
O layout foi organizado em três áreas principais:
Área dedicada à captação comercial, com campo de contato, chamada para orçamento e apresentação dos principais planos.
Espaço responsável pelo posicionamento, narrativa visual, prova social, indicadores de resultado e apresentação do ecossistema Wellhub.
Área voltada à descoberta de academias, aplicativos, modalidades, números da rede e acesso aos planos disponíveis.
Essa divisão permitiu apresentar diferentes objetivos de negócio sem fragmentar a experiência.
Após a definição do conceito, o desenvolvimento foi realizado com apoio do Claude Code, utilizando inteligência artificial como parte ativa do fluxo de implementação.
A IA foi aplicada na interpretação do briefing, planejamento da estrutura técnica, criação dos componentes, organização dos estilos, implementação da responsividade e refinamento do código.
O processo não consistiu apenas em solicitar uma página pronta.
O desenvolvimento foi conduzido por ciclos de instrução, validação e ajuste.
O briefing visual foi transformado em uma lista objetiva de componentes, comportamentos e prioridades.
Foram definidos:
Antes da implementação, a estrutura da página foi decomposta em blocos reutilizáveis.
Essa etapa permitiu orientar o Claude Code a desenvolver uma base mais organizada, reduzindo repetições e facilitando futuras alterações.
A primeira implementação foi utilizada como protótipo funcional.
Nessa etapa, o foco estava em validar:
A partir da primeira versão, foram realizados diversos ciclos de correção.
Os prompts passaram a trabalhar problemas específicos, como:
Cada nova instrução foi direcionada a uma necessidade concreta, evitando alterações genéricas que pudessem comprometer o resultado já validado.
A versão mobile não foi tratada apenas como uma redução do desktop.
A estrutura foi reorganizada para priorizar leitura, conversão e navegação em telas menores.
Foram ajustados:
Após a consolidação visual, o código foi revisado para identificar inconsistências, componentes redundantes e possíveis melhorias de desempenho.
A IA também foi utilizada para apoiar:
A inteligência artificial atuou como uma ferramenta de aceleração e apoio técnico, mas o resultado dependeu diretamente da qualidade das decisões tomadas durante o processo.
O Claude Code foi responsável por interpretar comandos, sugerir estruturas e executar partes do desenvolvimento.
A direção do projeto permaneceu baseada em:
O uso de IA reduziu o tempo entre conceito e protótipo funcional, permitindo testar diferentes soluções com maior velocidade.
Ao mesmo tempo, o processo demonstrou que resultados consistentes dependem de briefing detalhado, comandos objetivos e acompanhamento contínuo.
O resultado é uma proposta de hero e interface institucional com abordagem mais visual, estratégica e orientada à conversão.
A nova composição apresenta:
A interface utiliza uma estética contemporânea, com forte contraste tipográfico, imagens humanas, componentes modulares e conteúdo organizado para apoiar diferentes decisões dentro da mesma experiência.
Quer resultado assim?
Vamos conversar sobre seu projeto.
