🎨
ChatGPT intermediate

Prompt para responsive design em Frontend

Prompt gerado automaticamente para Responsive design em Frontend

4 usos Frontend

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