Dark Mode Designpor Owl-Listener

Dark Mode Design Skill.

Traduza a hierarquia da interface para superfícies escuras em vez de inverter as cores.

Design de cor
Orientação de design

Revisão da fonte · Dark Mode DesignSKILL.md

Tarefa UX Produz • Uma hierarquia de superfícies escuras e de elevação • Cores mapeadas de texto, borda, ação e status • Orientação sobre comportamento de tema e adaptação de mídia Antes de começar Comece com uma paleta existente do modo claro, exemplos de componentes e ativos de mídia. Use uma interface renderizada para verificar o contraste no modo escuro, a troca de tema e o tratamento de imagens.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Dark Mode Design: Adaptar uma paleta existente

Adaptação de paleta escura com elevação, contraste, tratamento de mídia e comportamento de seleção de tema.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Dark Mode Design parte de uma paleta clara existente. Usa superfícies escuras progressivamente mais claras para expressar elevação e ajusta cores vivas, texto, bordas e tratamentos de status ao novo fundo.

A fonte também abrange imagens, ilustrações, logotipos, preferências de esquema de cores do sistema e um seletor manual. Seus exemplos numéricos de cor são pontos de referência, não valores universais. O design deve ser verificado em componentes reais e nas condições em que os usuários o verão.

Entregas esperadas

Uma hierarquia de superfícies escuras e de elevação
Cores mapeadas de texto, borda, ação e status
Orientação sobre comportamento de tema e adaptação de mídia

Ver o briefing de exemplo

Do briefing à revisão

01
Leia os papéis no modo claro
Identifique as cores semânticas e as hierarquias de componentes existentes.
02
Remapeie as superfícies
Use degraus de luminância deliberados e destaques ajustados, em vez de uma inversão direta.
03
Revise a interface inteira
Verifique o contraste dos componentes, logotipos, imagens, preferências automáticas e uma escolha manual de tema.

02 Quando usar

Quando usar

Comece com uma paleta existente do modo claro, exemplos de componentes e ativos de mídia. Use uma interface renderizada para verificar o contraste no modo escuro, a troca de tema e o tratamento de imagens.

Quando é uma boa opção

Um produto claro já existenteUse quando o sistema de cores base já estiver definido.
Telas escuras irregularesResolva cartões, sobreposições e mídias que competem por atenção no modo escuro.

Limites a verificar

Não cria paletasA criação da paleta original do produto pertence à tarefa color-system.
Os exemplos precisam de mediçãoCores sugeridas e faixas de dessaturação não bastam, por si só, para estabelecer acessibilidade.

Traga estes insumos

Paleta atualForneça os papéis semânticos do modo claro.
Inventário de componentesMostre superfícies elevadas, estados e sobreposições.
Mídia e preferênciasIdentifique imagens da marca e o comportamento esperado de seleção de tema.

03 Decisões importantes

Decisões que importam

Elevação sem sombras pesadas
A luminância da superfície pode comunicar camadas onde sombras escuras deixam de ser eficazes.
A mídia faz parte do tema
Uma imagem clara demais ou um logotipo inadequado pode prejudicar uma interface escura que seria coerente.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível do seu agente. O arquivo de entrada não estabelece nenhum comando de instalação universal.

Arquivo de origem upstream

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use dark-mode-design para adaptar este painel claro existente. Mapeie superfícies e texto de forma semântica, revise as cores de alerta e as imagens dos gráficos, e defina a preferência do sistema e a seleção manual. Meça pares de contraste reais e sinalize os ativos que precisam de variantes escuras.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Os níveis de superfície continuam distinguíveis.
O contraste de texto e status é verificado.
Imagens, logotipos e controles de tema são revisados.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixa da fonte indicada abaixo. O comportamento e os requisitos upstream podem mudar.

Proprietário da fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: ui-design/skills/dark-mode-design/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Adaptação de paleta escura com elevação, contraste, tratamento de mídia e comportamento de seleção de tema.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Posso simplesmente inverter a paleta?

A fonte recomenda explicitamente redesenhar as relações entre superfícies em vez de inverter.

Ela cria a paleta original da marca?

Não. Ela pressupõe uma paleta base para adaptar.

O modo automático deve substituir um alternador?

A fonte recomenda respeitar a preferência do sistema e também oferecer uma escolha manual.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design