Lovable • Ajustes de Responsividade Desktop e Mobile
Adapta o protótipo para desktop/mobile com regras claras de layout e usabilidade.
Design
Dev
lovable
desktop
mobile
responsivo
intermediario
Preencha as variáveis
0/6 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{produto}{telas}{layout_atual}{problemas_responsivos}{componentes}{prioridade_dispositivo}Prompt (prévia ao vivo)
Atue como Product Designer com foco em responsividade. Gere instruções para o Lovable ajustar um protótipo para desktop, tablet e mobile sem perder clareza.
Dados:
- Produto: {produto}
- Telas a ajustar: {telas}
- Layout atual: {layout_atual}
- Problemas mobile/desktop: {problemas_responsivos}
- Componentes críticos: {componentes}
- Prioridade de dispositivo: {prioridade_dispositivo}
Entregue:
1) Diagnóstico de responsividade
2) Regras de adaptação por breakpoint
3) Ajustes em componentes críticos
4) Recomendações de UX mobile
5) Prompt final para Lovable aplicar responsividade
Seja bem prático e visual.Exemplos
Entrada
Produto: Harvory Telas a ajustar: Home, Busca, Pricing, Checkout Layout atual: Desktop-first com cards em grid 4 colunas Problemas mobile/desktop: Cards espremidos, filtros mal posicionados, checkout longo no mobile Componentes críticos: SearchBar, FilterChips, ContentCard, PricingCard, CheckoutSummary Prioridade de dispositivo: Desktop e mobile
Saída esperada
📱 Diagnóstico: Layout desktop funciona, mas no mobile há densidade alta e perda de foco em CTAs. 📏 Regras por breakpoint: - Desktop: grid 4 colunas - Tablet: grid 2 colunas - Mobile: lista/1 coluna - Header simplificado no mobile 🧩 Ajustes: - FilterChips em carrossel horizontal no mobile - CheckoutSummary recolhível no mobile - PricingCards empilhados ✅ UX mobile: CTA sticky em checkout, inputs maiores, menos texto por bloco. 🎯 Prompt Lovable: Ajuste o protótipo para responsividade desktop/tablet/mobile, com grids adaptativos, filtros horizontais no mobile, cards empilhados e checkout com CTA sticky. Preserve clareza e foco nos fluxos principais.