Dark Mode Designpor Owl-Listener

Dark Mode Design Skill.

Traduce la jerarquía de la interfaz a superficies oscuras en lugar de invertir sus colores.

Diseño del color
Guía de diseño

Revisión de la fuente · Dark Mode DesignSKILL.md

Tarea UX Produce • Una jerarquía de superficies oscuras y elevación • Colores asignados para texto, bordes, acciones y estados • Guía sobre el comportamiento del tema y la adaptación de medios Antes de empezar Parte de una paleta existente en modo claro, ejemplos de componentes y recursos multimedia. Usa una interfaz renderizada para comprobar el contraste en modo oscuro, el cambio de tema y el tratamiento de las imágenes.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Dark Mode Design: Adaptar una paleta existente

Adaptación de paletas oscuras con elevación, contraste, tratamiento de medios y comportamiento de selección de tema.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Dark Mode Design parte de una paleta clara existente. Usa superficies oscuras progresivamente más claras para expresar la elevación y ajusta los colores vivos, el texto, los bordes y los tratamientos de estado al nuevo fondo.

La fuente también incluye imágenes, ilustraciones, logotipos, preferencias de esquema de color del sistema y un interruptor manual. Sus ejemplos numéricos de color son puntos de referencia, no valores universales. El diseño debe comprobarse con componentes reales y en las condiciones en que lo verán los usuarios.

Entregables esperados

Una jerarquía de superficies oscuras y elevación
Colores asignados para texto, bordes, acciones y estados
Guía sobre el comportamiento del tema y la adaptación de medios

Ver el brief de ejemplo

Del brief a la revisión

01
Leer los roles de la paleta clara
Identifica los colores semánticos y las jerarquías de componentes existentes.
02
Reasignar las superficies
Usa pasos de luminancia deliberados y acentos ajustados en lugar de una inversión directa.
03
Revisar toda la interfaz
Comprueba el contraste de los componentes, los logotipos, las imágenes, las preferencias automáticas y una elección manual de tema.

02 Cuándo usarlo

Cuándo usarla

Parte de una paleta existente en modo claro, ejemplos de componentes y recursos multimedia. Usa una interfaz renderizada para comprobar el contraste en modo oscuro, el cambio de tema y el tratamiento de las imágenes.

Buen encaje

Un producto claro existenteÚsala cuando el sistema de color base ya está definido.
Pantallas oscuras desigualesResuelve tarjetas, superposiciones y medios que compiten por la atención en modo oscuro.

Límites que conviene comprobar

No crea paletasCrear la paleta original del producto corresponde a la tarea color-system.
Los ejemplos requieren mediciónLos colores sugeridos y los rangos de desaturación no pueden establecer por sí solos la accesibilidad.

Aporta estos datos

Paleta actualProporciona los roles semánticos del modo claro.
Inventario de componentesMuestra superficies elevadas, estados y superposiciones.
Medios y preferenciasIdentifica las imágenes de marca y el comportamiento esperado de selección de tema.

03 Decisiones importantes

Decisiones clave

Elevación sin sombras pesadas
La luminancia de la superficie puede comunicar capas allí donde las sombras oscuras dejan de ser eficaces.
Los medios forman parte del tema
Una imagen muy brillante o un logotipo inadecuado pueden debilitar una interfaz oscura por lo demás coherente.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisar la configuración

Carga el SKILL.md de esta tarea desde el repositorio designer-skills en la ubicación de skills compatible con tu agente. El archivo de entrada no establece ningún comando de instalación universal.

Archivo fuente original

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

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa dark-mode-design para adaptar este panel claro existente. Asigna superficies y texto de forma semántica, revisa los colores de advertencia y las imágenes de los gráficos, y define la preferencia del sistema junto con la selección manual. Mide pares de contraste reales y señala los recursos que necesiten variantes oscuras.

Inspeccionar el resultado

Comprueba el resultado real con estos criterios observables.

Los niveles de superficie siguen siendo distinguibles.
Se comprueba el contraste del texto y de los estados.
Se revisan las imágenes, los logotipos y los controles de tema.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill esté incluida ni que sus herramientas externas, credenciales y dependencias de software estén incluidas.

Descargar OpenDesign Leer la guía rápida

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada a continuación. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: ui-design/skills/dark-mode-design/SKILL.md
Licencia: MIT
Instantánea revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Adaptación de paletas oscuras con elevación, contraste, tratamiento de medios y comportamiento de selección de tema.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no una medida de uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puedo simplemente invertir la paleta?

La fuente recomienda explícitamente rediseñar las relaciones entre superficies en lugar de invertir.

¿Crea la paleta de marca original?

No. Da por supuesta una paleta base que adaptar.

¿Debe el modo automático sustituir a un interruptor?

La fuente recomienda respetar la preferencia del sistema y ofrecer también una opción manual.

OpenDesign

Haz espacio para la siguiente iteración de diseño.

Mantén tu brief, el material de origen y el trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño