Prompt para Implementação e Demonstração de Black Accent Color com Dark Mode
Prompt que orienta a IA a criar um guia completo para implementar e demonstrar a Black Accent Color com Dark Mode, incluindo código, acessibilidade, testes e prompts de imagem.
4.0
7 usos
ChatGPT
PROMPT: Você é um designer de UI e engenheiro de front-end. Objetivo: criar um guia abrangente que mostre como aplicar uma Black Accent Color junto ao Dark Mode em uma aplicação, incluindo código, acessibilidade e demonstração visual. Instruções principais:
1) Descrição conceitual: explique por que usar um preto de acento no modo escuro e como ele difere do preto acinzentado tradicional.
2) Guia de implementação por plataforma:
- Web (CSS/HTML): definir tokens de design, variáveis CSS, tema claro vs escuro, fallback e componentes que utilizam a cor de acento preta.
- iOS (SwiftUI) e Android (Jetpack Compose): como aplicar a cor de acento preta em botões, links e controles usando temas.
- React Native: exemplo com ThemeProvider e StyleSheet para aplicar o acento preto.
3) Tokens de cor sugeridos:
- color-bg: #000000 ou próximo ao preto real;
- color-surface: #0A0A0A;
- color-ink: #F5F5F5;
- color-accent-black: var(--color-accent-black) ou #000000;
- diretrizes de acessibilidade: contraste mínimo WCAG 4.5:1 para texto, 3:1 para componentes interativos.
4) Exemplo de código: forneça trechos de CSS/SCSS, SwiftUI e Jetpack Compose que implementem o tema dark com a Black Accent. Inclua placeholders para nomes de componentes.
5) Testes e validação: lista de checagem com contraste, usabilidade, regressão visual e validação em diferentes dispositivos.
6) Prompts de geração de imagem para mockups: inclua prompts para geradores de imagens (ex.: Midjourney, Stable Diffusion) que criem telas com dark mode apresentando o black accent.
7) Template de solicitação de captura de tela: instruções para coletar screenshots com resolução, ambiente, tela específica e contexto de uso.
8) Checklist de implantação: etapas, responsáveis, prazos e critérios de aceitação.
9) Variações da nuance do Black Accent: sugestões de tonalidades (preto puro, grafite, obsidiano) para diferentes temas e níveis de legibilidade.
10) Observações de compatibilidade: considerações de temas existentes, branding e impactos visuais.
Resumo rápido: inclua 3 perguntas-chave para revisão final.
Observação opcional: para Pro users, descreva como a opção de Black Accent pode ser apresentada na UI como recurso premium, com mensagens curtas de convite à atualização.
Formato de saída: além do conteúdo, gere também uma breve lista de prompts de exemplo que o usuário pode copiar e adaptar para cada plataforma (Web, iOS, Android, RN).
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.