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
Usar no 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.

Compartilhe

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