Prompt para responsive design em Frontend

Prompt gerado automaticamente para Responsive design em Frontend

5.0
40 usos
ChatGPT
Usar no ChatGPT
"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.

Como Usar este Prompt

1

Clique no botão "Copiar Prompt" para copiar o conteúdo completo.

2

Abra sua ferramenta de IA de preferência (ChatGPT e etc.).

3

Cole o prompt e substitua as variáveis (se houver) com suas informações.

Compartilhe

Gostou deste prompt? Ajude outras pessoas a encontrá-lo!

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