Acelere o desenvolvimento de interfaces, resolva bugs e crie designs modernos com comandos especializados para Devs e Designers.
Crie um layout em CSS Grid que seja responsivo para um site de [TIPO DE SITE]. Preciso de um cabeçalho, uma barra lateral esquerda, área de conteúdo principal e um rodapé. O layout deve se transformar em uma única coluna em telas menores que 768px.
Escreva o HTML e o CSS para um card de produto elegante. O card deve ter uma imagem no topo, título, preço e um botão de compra. Ao passar o mouse (hover), o card deve ter um leve efeito de elevação (shadow) e o botão deve mudar de cor.
Crie um menu de navegação fixo (sticky) no topo usando o efeito Glassmorphism (vidro fosco). O fundo deve ser translúcido com desfoque (backdrop-filter: blur). Inclua links para: [LINK 1, LINK 2, LINK 3].
Sugira uma paleta de 5 cores modernas para um site de [NOME DO NICHO]. Certifique-se de que as cores tenham contraste suficiente para passar nos testes de acessibilidade WCAG e forneça os códigos HEX.
Crie um formulário de contato minimalista em HTML/CSS. Adicione um script em JavaScript que valide se o campo de e-mail contém um "@" e se o campo de mensagem não está vazio antes de permitir o envio.
Forneça o código CSS e JavaScript necessário para implementar um efeito de rolagem suave (smooth scroll) quando o usuário clicar nos links internos (âncoras) do menu de navegação.
Escreva o código para uma seção 'Hero' (topo do site). Deve conter um título H1 grande, um subtítulo e dois botões (CTA). O fundo deve ter um gradiente linear moderno entre as cores [COR 1] e [COR 2].
Crie um carrossel de imagens simples usando apenas HTML, CSS e JavaScript puro (sem bibliotecas). O slider deve ter setas de 'Próximo' e 'Anterior' e transições suaves.
Recomende duas fontes do Google Fonts que combinem bem para um site de [TIPO DE SITE]. Uma fonte deve ser para títulos (Display/Serif) e outra para o corpo do texto (Sans-serif) focada em leitura fluida.
Crie o código para uma página de erro 404 personalizada. Deve ter uma mensagem amigável, uma ilustração centralizada (use um placeholder de imagem) e um botão para voltar para a página inicial.
Atue como um desenvolvedor sênior. Analise o seguinte código em [LINGUAGEM] e sugira formas de torná-lo mais eficiente e limpo: [COLE O SEU CÓDIGO].
Estou recebendo o erro "[NOME DO ERRO]" no meu console ao tentar [AÇÃO]. O que pode estar causando isso em um ambiente [NOME DA PLATAFORMA/FRAMEWORK] e como posso corrigir?
Crie uma expressão regular (Regex) para validar [O QUE VOCÊ QUER VALIDAR: Ex: Telefone no formato BR, CPF, Data]. Explique brevemente o que cada parte da expressão faz.
Escreva um script em JavaScript que receba um array de objetos JSON como este: [COLE O JSON] e renderize os dados automaticamente dentro de uma tabela HTML no meu documento.
Mostre como criar um endpoint de API básico usando [Node.js/PHP/Python] que retorne uma lista de [PRODUTOS/CLIENTES] em formato JSON quando solicitado via método GET.
Escreva uma query SQL para selecionar todos os registros da tabela "[NOME DA TABELA]" onde o status seja "[STATUS]" e a data de criação seja maior que [DATA], ordenando pelos mais recentes.
Adicione comentários explicativos e documentação no estilo JSDoc (ou equivalente para minha linguagem) para o seguinte código, explicando a função de cada variável e parâmetro: [COLE O CÓDIGO].
Gere uma lista fictícia em formato JSON com 10 entradas para testes de desenvolvimento. Cada entrada deve conter: [Nome completo, E-mail, Telefone, Cidade e Empresa].
Converta a lógica deste script escrito em [LINGUAGEM 1] para a linguagem [LINGUAGEM 2]. Garanta que as funções e bibliotecas equivalentes sejam utilizadas corretamente: [COLE O CÓDIGO].
Crie uma lista de verificação de segurança para o lançamento de um novo site. Inclua tópicos como SQL Injection, XSS, proteção de cabeçalhos HTTP e políticas de CORS.
Atue como um designer de interface. Analise a descrição desta página [DESCREVA A PÁGINA] e sugira como posso melhorar a hierarquia visual para que o usuário clique primeiro no botão [NOME DO BOTÃO].
Sugira 3 micro-interações interessantes (animações sutis) que posso adicionar ao meu botão de "[NOME DO BOTÃO]" ou campo de "[NOME DO CAMPO]" para tornar a experiência do usuário mais prazerosa.
Qual é a melhor maneira de exibir uma tabela com muitas colunas (como um dashboard) em dispositivos móveis? Forneça um exemplo de código CSS para esconder colunas menos importantes ou transformá-las em blocos.
Forneça uma lista de comandos Git para criar uma nova branch, adicionar alterações, fazer o commit com uma mensagem descritiva e enviar para o repositório remoto (push).
Crie uma lista de elementos essenciais que não podem faltar em um painel de controle (Dashboard) para um sistema de [TIPO DE SISTEMA: Ex: Vendas, Clínicas].
Reescreva as seguintes mensagens de erro para que sejam mais úteis e menos frustrantes para o usuário: "[ERRO 1]", "[ERRO 2]". Use um tom amigável e instrutivo.
Como posso implementar um alternador de modo escuro (Dark Mode toggle) usando variáveis CSS (--cores) e uma pequena função em JavaScript que salve a preferência no localStorage do navegador?
Explique a diferença entre os atributos 'async' e 'defer' ao carregar arquivos JavaScript externos. Qual é o mais recomendado para manter a página rápida e por quê?
Sugira estilos de CSS para representar os 4 estados principais de um botão: Normal, Hover, Active (clique) e Disabled (desativado). Use uma paleta de azul profissional.
Crie a estrutura de um arquivo README.md profissional para o meu projeto de [NOME DO PROJETO]. Inclua seções para Descrição, Pré-requisitos, Como Instalar, Como Usar e Tecnologias Utilizadas.