Projetar layout responsivo
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Style Instrução para IA
CSS — MDN
Cascata, especificidade, box model, Flexbox, Grid, responsividade, tokens, estados, motion e arquitetura de estilos.
Como usar
Anexe o arquivo à conversa com a IA e declare que ele é o contrato técnico da tarefa. Em seguida, forneça contexto, requisito, restrições e critérios de aceite.
Pronto para anexarFluxo recomendado
Como utilizar este .md em um projeto
1. Declare o ambienteBrowser, servidor, build, versão, dispositivos, compatibilidade e dependências.
2. Defina o objetivo do usuárioNão comece por uma classe/API; comece pelo comportamento que precisa existir.
3. Peça seleção de conceitosA IA deve citar as partes do guia aplicáveis e ignorar o restante.
4. ImplementeGere código somente depois da decisão e preserve a arquitetura existente.
5. ValideChecklist, edge cases, acessibilidade, segurança, responsividade/performance conforme o caso.
Aplicações
Quando anexar este guia
Criar design tokens e temas
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Resolver conflitos de cascata corretamente
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Reduzir overrides e z-index arbitrário
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Mapa do arquivo
Principais blocos de conhecimento
1. Contrato de execução para a IA
Seção coberta pelo guia Markdown.
2. Fundamentos da cascata
Seção coberta pelo guia Markdown.
3. Layout
Seção coberta pelo guia Markdown.
4. Responsividade
Seção coberta pelo guia Markdown.
5. Design system e aparência
Seção coberta pelo guia Markdown.
6. Interação e movimento
Seção coberta pelo guia Markdown.
7. Arquitetura de CSS
Seção coberta pelo guia Markdown.
Checklist de aceite
Seção coberta pelo guia Markdown.
Prompt-base para IA
Seção coberta pelo guia Markdown.
Fontes primárias
Seção coberta pelo guia Markdown.
Prompt
Prompt-base para copiar
Use o guia “CSS — MDN” anexado como contrato técnico para esta tarefa. 1. Diagnostique o requisito e o ambiente. 2. Aponte as seções do guia que serão usadas. 3. Escolha a solução mais simples que preserve semântica, acessibilidade, segurança e manutenção. 4. Não invente APIs/classes. 5. Implemente e revise pelo checklist do guia. Contexto: [DESCREVA o sistema, stack, estado atual e cenário da mudança] Objetivo: [DESCREVA o resultado observável que deve existir ao final] Restrições: [DESCREVA o que não pode mudar, compatibilidade, segurança e limites técnicos]
Exemplo preenchido — o que o usuário pode descrever
Use o modelo acima com dados concretos do projeto. O exemplo abaixo mostra o nível de detalhe esperado.
Contexto: Dashboard com cards e tabela larga que precisa funcionar em desktop e celular e oferecer tema claro/escuro. Objetivo: Tornar o layout responsivo e centralizar cores, espaçamento e estados visuais em tokens reutilizáveis. Restrições: Sem !important como solução padrão; evitar z-index arbitrário; preservar impressão e foco visível.
ContextoStack, versões, arquitetura, página/módulo afetado, estado atual e comportamento existente.
ObjetivoResultado observável para o usuário ou para o sistema; diga o que deve funcionar ao final.
RestriçõesO que não pode mudar, compatibilidade, segurança, acessibilidade, performance, prazo e limites de escopo.