Atue como um Engenheiro Front-End Sênior e Especialista em UI/UX. Estou te enviando o PDF do design que criei no Figma para o "DermaHub", um aplicativo de rotina de cuidados dermatológicos (skincare). Seu objetivo é transformar essa imagem em um código React altamente profissional, modular e moderno utilizando Tailwind CSS, TypeScript e componentes do Shadcn UI, garantindo fidelidade pixel-perfect.
Este projeto completo é composto por 5 páginas principais, que devem seguir rigorosamente o padrão visual estabelecido nesta imagem de referência (cores, tipografia, cantos arredondados, fontes e pesos visuais).
1. DIRETRIZES DE DESIGN COMPARTILHADO (Consistência Estrita)
Para TODAS as páginas, você deve manter e replicar perfeitamente:
- Paleta de Cores: Extraia exatamente os tons de cores do PNG (fundo clean/médico, tons de roxo/azul ou cores de destaque para botões, tons de cinza para textos secundários e bordas).
- Tipografia & Hierarquia: Use uma fonte limpa (como Inter). Respeite estritamente os tamanhos e pesos (bold, medium, regular) de títulos e subtítulos.
- Menu de Navegação Inferior (Bottom Nav): Toda tela de visualização mobile deve conter a barra de navegação inferior idêntica ao PNG, com os 5 itens: "Rotina", "Evolução", "Comunidade", "Loja" e "Perfil", destacando o ícone ativo de cada página.
- Elementos de UI: Mantenha as barras de progresso (porcentagem de produtos), os cards com bordas suaves, os espaçamentos (paddings/margins) e os ícones (utilizando Lucide React).
2. ESCOPO DAS 5 PÁGINAS DO DERMAHUB
- Página 1: Minha Rotina (Baseada no PNG anexado)
- Renderize exatamente a estrutura visual da imagem: cabeçalho com o dia atual e o "Skin Score" (ex: Skin Score 78).
- Seletor de período (Manhã / Noite).
- Listagem de produtos em cards estilizados, mostrando a marca (ex: LA ROCHE-POSAY, CREAMY), o nome do produto, volumetria total, quantidade por uso e a barra de progresso com a porcentagem/ml restantes.
- Botão flutuante ou card para "Cadastrar novo produto".
- Página 2: Evolução
- Mantendo o mesmo layout e cabeçalho, exiba gráficos modernos de linha ou barras mostrando o progresso do "Skin Score" ao longo das semanas, histórico de fotos de antes/depois organizadas em grid e estatísticas de consistência da rotina.
- Página 3: Comunidade
- Um feed social integrado com o mesmo padrão visual clean. Cards de posts de usuários compartilhando rotinas, avaliações de produtos, relatos de melhora e fóruns categorizados por tipo de pele.
- Página 4: Loja
- Marketplace integrado do DermaHub para reposição de produtos. Grid de produtos com imagem, preço, botão de compra rápida e indicação se o produto é recomendado para o "Skin Score" ou tipo de pele do usuário, mantendo o design padrão dos botões do app.
- Página 5: Perfil
- Tela de ajustes e dados pessoais do usuário. Deve seguir à risca os inputs e botões do app, contendo o tipo de pele cadastrado, histórico de compras, configurações de notificações para lembrar os horários da rotina (Manhã/Noite) e dados da conta.
3. REQUISITOS DE ENTREGA DO CÓDIGO
- Código limpo, componentizado em React e interativo (com estados de clique e hover simulados).
- Use Tailwind CSS para replicar milimetricamente o layout do PNG.
Comece gerando a estrutura base do projeto e a Página 1 (Rotina) idêntica ao PNG. Me dê a opção de visualizar os componentes para que possamos expandir para as próximas páginas mantendo o mesmo padrão de design travado.
O PDF que você enviou contém dados binários que não consigo visualizar diretamente como imagem. No entanto, baseado na descrição detalhada que você forneceu sobre o design do DermaHub, vou criar a estrutura completa do projeto com a Página 1: Minha Rotina.
Vou criar um design profissional de app de skincare com:
- Tema médico/clean com tons suaves
- Paleta de cores baseada em roxo/lilás (comum em apps de skincare)
- Cards com bordas suaves
- Barra de navegação inferior com 5 itens
- Layout mobile-first
Já existe uma estrutura prévia. Deixe-me verificar os componentes existentes e melhorá-los para atender perfeitamente ao design do DermaHub.
Excelente! Já existe uma estrutura completa de componentes. Vou aprimorar o design para torná-lo mais fiel ao conceito visual de um app de skincare profissional, melhorando os tokens de cor e refinando os componentes.
Agora vou deletar os componentes duplicados que criei anteriormente na pasta components raiz, pois já existe uma estrutura organizada em dermahub:
Agora vou criar as páginas placeholder para as outras 4 rotas do app (Evolução, Comunidade, Loja e Perfil):
A página de Evolução já existe e está bem estruturada. Vou verificar as outras páginas:
Excelente! Todas as 5 páginas já existem. Deixe-me verificar rapidamente as outras páginas para garantir que estão consistentes com o design:
Todas as 5 páginas já estão criadas e bem estruturadas! O projeto DermaHub está completo com:
- Página Rotina (/) - Página principal com lista de produtos, seletor Manhã/Noite, Skin Score
- Página Evolução (/evolucao) - Gráficos de progresso, estatísticas e fotos antes/depois
- Página Comunidade (/comunidade) - Feed social com posts, categorias e trending topics
- Página Loja (/loja) - Marketplace de produtos com filtros e recomendações
- Página Perfil (/perfil) - Dados do usuário, configurações e lembretes
Vou apenas fazer uma pequena melhoria na página de Evolução para deixar o header consistente com as outras páginas:
O projeto DermaHub está completo! 🎉
Estrutura do Projeto
A aplicação foi construída com os seguintes componentes e páginas:
Componentes Principais (components/dermahub/)
header.tsx- Cabeçalho com dia atual, título e Skin Score badgeperiod-selector.tsx- Seletor Manhã/Noite com ícones estilizadosproduct-card.tsx- Card de produto com checkbox, marca colorida, barra de progresso e menu dropdownadd-product-card.tsx- Botão para cadastrar novo produtobottom-nav.tsx- Navegação inferior fixa com 5 itensroutine-page.tsx- Página principal de rotina completa
5 Páginas do App
- Rotina (/) - Lista de produtos da rotina com toggle de período
- Evolução (/evolucao) - Gráficos, estatísticas e progresso visual
- Comunidade (/comunidade) - Feed social com posts e trending topics
- Loja (/loja) - Marketplace com produtos recomendados
- Perfil (/perfil) - Dados do usuário, lembretes e configurações
Design System
- Paleta de cores roxo/lilás consistente em todo o app
- Tipografia Inter com hierarquia clara
- Cards com bordas suaves (
rounded-2xl) - Tokens de cor semânticos (success, warning, destructive)
- Animações suaves e feedback tátil para mobile
Você pode visualizar a aplicação no preview e navegar entre as páginas usando a barra inferior. Quando quiser expandir funcionalidades ou ajustar algum detalhe visual, é só me avisar!
Posso te enviar o logo da marca “DermaHub”, as cores oficiais, e um print que fiz no figma, para que voce recrie exatamente igual?
Sim, pode enviar! Com esses materiais vou conseguir replicar o design com muito mais precisão:
- Logo DermaHub - Vou salvar no projeto e usar nos headers/splash screens
- Cores oficiais - Vou atualizar os tokens de cor no
globals.csspara corresponder exatamente à paleta da marca - Print do Figma - Vou analisar pixel por pixel para garantir fidelidade nos espaçamentos, tipografia, bordas e hierarquia visual
Pode anexar os arquivos na sua próxima mensagem que eu faço as alterações necessárias para deixar idêntico ao seu design original.
Cor oficial: #5CCEBF
