Prompt para responsive design em Frontend
Prompt gerado automaticamente para Responsive design em Frontend
"Assuma o papel de um arquiteto de software sênior. Você precisa projetar uma solução escalável para um problema comum enfrentado por desenvolvedores front-end ao criar layouts responsivos complexos.
**O Problema:** Desenvolvedores frequentemente se veem na necessidade de testar e depurar a responsividade de componentes e layouts em uma vasta gama de dispositivos e tamanhos de tela (smartphones, tablets, desktops, laptops, monitores ultrawide), muitas vezes com variações sutis que escapam a testes manuais básicos. Isso consome tempo, é propenso a erros e pode levar a bugs em produção.
**Sua Tarefa:** Crie uma proposta detalhada para um 'Gerador e Validador de Cenários de Responsividade'. Esteja atento aos seguintes pontos:
1. **Nome da Ferramenta/Solução:** Um nome criativo e descritivo em português.
2. **Objetivo Principal:** Claramente definido.
3. **Funcionalidades Essenciais:**
* **Geração Inteligente de Viewports:** Como a ferramenta pode gerar automaticamente uma lista otimizada de larguras e alturas de viewports para simulação, baseada em dados de mercado (dispositivos populares, resoluções comuns) e/ou configurável pelo usuário (min/max, incrementos, breakpoints específicos).
* **Simulação Concorrente/Paralela:** Como simular a renderização do mesmo componente/layout em múltiplos viewports simultaneamente, para uma comparação visual rápida.
* **Captura de Telas e Comparação Visual:** Capacidade de tirar screenshots em cada viewport simulado e, opcionalmente, comparar visualmente (ex: side-by-side, overlay com diferenças destacadas) com um "estado ideal" ou uma versão anterior.
* **Análise de Layout e Quebras:** Identificação automática de "quebras" de layout (elementos sobrepostos, overflow, espaçamentos inconsistentes) em diferentes viewports, com sugestões de potenciais causas (ex: `flex-wrap` ausente, `min-width` inadequado).
* **Integração com Ferramentas Existentes:** Como poderia se integrar com navegadores (devtools), frameworks de teste (Playwright, Cypress), ou pipelines de CI/CD.
Tags relacionadas
Como Usar este Prompt
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
Cole o prompt e substitua as variáveis (se houver) com suas informações.
Outros prompts de Frontend
Continue explorando prompts nesta categoria.
Melhores práticas de debugging e troubleshooting para Frontend
Prompt gerado automaticamente para Debugging e troubleshooting em Frontend
Melhores práticas de debugging e troubleshooting para Frontend
Prompt gerado automaticamente para Debugging e troubleshooting em Frontend
Melhores práticas de debugging e troubleshooting para Frontend
Prompt gerado automaticamente para Debugging e troubleshooting em Frontend