Dark Mode Designvon Owl-Listener

Dark Mode Design Skill.

Übertragen Sie die Hierarchie des Interfaces auf dunkle Oberflächen, statt seine Farben einfach zu invertieren.

Farbgestaltung
Gestaltungsleitfaden

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Dark Mode DesignSKILL.md

Aufgabe UX Ergebnis • Eine Hierarchie dunkler Oberflächen und Elevationsstufen • Zugeordnete Farben für Text, Rahmen, Aktionen und Status • Hinweise zum Theme-Verhalten und zur Anpassung von Medien Bevor Sie beginnen Beginnen Sie mit einer bestehenden Palette für den hellen Modus, Komponentenbeispielen und Medien-Assets. Prüfen Sie Kontrast im Dark Mode, Theme-Wechsel und Bildbehandlung an einem gerenderten Interface.

Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Dark Mode Design: Eine bestehende Palette anpassen

Anpassung dunkler Paletten mit Elevation, Kontrast, Medienbehandlung und Verhalten bei der Theme-Auswahl.

Quellenbasierter AblaufKein Ausführungs-Benchmark

Die Arbeitsweise

Dark Mode Design beginnt mit einer bestehenden hellen Palette. Es nutzt zunehmend hellere dunkle Oberflächen, um Elevation auszudrücken, und passt leuchtende Farben, Text, Rahmen und Statusdarstellungen an den neuen Hintergrund an.

Die Quelle behandelt außerdem Bilder, Illustrationen, Logos, System-Farbschema-Einstellungen und einen manuellen Schalter. Ihre numerischen Farbbeispiele sind Anhaltspunkte, keine allgemeingültigen Werte. Das Design muss an echten Komponenten und unter den Bedingungen geprüft werden, unter denen Nutzende es sehen.

Erwartete Ergebnisse

Eine Hierarchie dunkler Oberflächen und Elevationsstufen
Zugeordnete Farben für Text, Rahmen, Aktionen und Status
Hinweise zum Theme-Verhalten und zur Anpassung von Medien

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Helle Rollen lesen
Bestehende semantische Farben und Komponentenhierarchien identifizieren.
02
Oberflächen neu zuordnen
Gezielte Helligkeitsstufen und angepasste Akzente statt einer direkten Invertierung verwenden.
03
Das gesamte Interface prüfen
Komponentenkontrast, Logos, Bilder, automatische Einstellungen und eine manuelle Theme-Wahl prüfen.

02 Einsatzbereiche

Wann der Einsatz sinnvoll ist

Beginnen Sie mit einer bestehenden Palette für den hellen Modus, Komponentenbeispielen und Medien-Assets. Prüfen Sie Kontrast im Dark Mode, Theme-Wechsel und Bildbehandlung an einem gerenderten Interface.

Gut geeignet

Ein bestehendes helles ProduktEinsetzen, wenn das Basis-Farbsystem bereits definiert ist.
Uneinheitliche dunkle ScreensKarten, Overlays und Medien klären, die im Dark Mode um Aufmerksamkeit konkurrieren.

Zu prüfende Grenzen

Keine PalettenerstellungDie Erstellung der ursprünglichen Produktpalette gehört zur Aufgabe color-system.
Beispiele erfordern MessungVorgeschlagene Farben und Entsättigungsbereiche können Barrierefreiheit nicht allein belegen.

Diese Eingaben mitbringen

Aktuelle PaletteSemantische Rollen des hellen Modus bereitstellen.
KomponenteninventarErhöhte Oberflächen, Zustände und Overlays zeigen.
Medien und EinstellungenMarkenbilder und das erwartete Verhalten bei der Theme-Auswahl benennen.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

Elevation ohne schwere Schatten
Die Helligkeit von Oberflächen kann Ebenen vermitteln, wo dunkle Schatten wirkungslos werden.
Medien sind Teil des Themes
Ein helles Bild oder ein ungeeignetes Logo kann ein sonst stimmiges dunkles Interface untergraben.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Laden Sie das SKILL.md dieser Aufgabe aus dem designer-skills-Repository an dem von Ihrem Agenten unterstützten Skill-Speicherort. Die Eintragsdatei legt keinen universellen Installationsbefehl fest.

Upstream-Quelldatei

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

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen dieses Briefings an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Verwende dark-mode-design, um dieses bestehende helle Dashboard anzupassen. Ordne Oberflächen und Text semantisch zu, prüfe Warnfarben und Diagrammbilder und definiere Systemeinstellung sowie manuelle Auswahl. Miss reale Kontrastpaare und markiere Assets, die dunkle Varianten brauchen.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Oberflächenstufen bleiben unterscheidbar.
Text- und Statuskontrast sind geprüft.
Bilder, Logos und Theme-Steuerung sind geprüft.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Inhaber: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: ui-design/skills/dark-mode-design/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 9a6930cf84a8

Redaktionelle Quellenzusammenfassung

Anpassung dunkler Paletten mit Elevation, Kontrast, Medienbehandlung und Verhalten bei der Theme-Auswahl.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Kann ich die Palette einfach invertieren?

Die Quelle empfiehlt ausdrücklich, die Beziehungen der Oberflächen neu zu gestalten, statt zu invertieren.

Erstellt es die ursprüngliche Markenpalette?

Nein. Es setzt eine Basispalette voraus, die angepasst wird.

Sollte der automatische Modus einen Umschalter ersetzen?

Die Quelle empfiehlt, die Systemeinstellung zu respektieren und zusätzlich eine manuelle Auswahl anzubieten.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Workspace zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen