Prompt completo
"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
Frontend
Responsive design
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de Frontend
ChatGPT
Melhores práticas de debugging e troubleshooting para Frontend
Prompt gerado automaticamente para Debugging e troubleshooting em Frontend
5 usos
ChatGPT
Melhores práticas de debugging e troubleshooting para Frontend
Prompt gerado automaticamente para Debugging e troubleshooting em Frontend
3 usos
ChatGPT
Melhores práticas de componentização e reutilização para Frontend
Prompt gerado automaticamente para Componentização e reutilização em Frontend
1 usos