Dark Mode Designyazan Owl-Listener

Dark Mode Design Skill.

Arayüz hiyerarşisini renkleri tersine çevirmek yerine karanlık yüzeylere aktarın.

Renk Tasarımı
Tasarım Rehberi

OpenDesign İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · Dark Mode DesignSKILL.md

Görev UX Ürettikleri • Karanlık yüzey ve yükseklik hiyerarşisi • Eşlenmiş metin, kenarlık, eylem ve durum renkleri • Tema davranışı ve medya uyarlama rehberi Başlamadan Önce Mevcut bir açık mod paleti, bileşen örnekleri ve medya varlıklarıyla başlayın. Karanlık mod kontrastını, tema geçişini ve görsel işlemeyi kontrol etmek için işlenmiş bir arayüz kullanın.

Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Dark Mode Design: Mevcut Bir Paleti Uyarlama

Yükseklik, kontrast, medya işleme ve tema seçimi davranışıyla karanlık palet uyarlaması.

Kaynağa dayalı iş akışıYürütme kıyaslaması değildir

Çalışma Yaklaşımı

Dark Mode Design mevcut bir açık paletle başlar. Yüksekliği ifade etmek için giderek açılan karanlık yüzeyler kullanır; parlak renkleri, metni, kenarlıkları ve durum görünümlerini yeni arka plana göre ayarlar.

Kaynak ayrıca görselleri, illüstrasyonları, logoları, sistem renk şeması tercihlerini ve manuel bir anahtarı da kapsar. Sayısal renk örnekleri referans noktalarıdır, evrensel değerler değildir. Tasarım, gerçek bileşenlerde ve kullanıcıların onu göreceği koşullarda kontrol edilmelidir.

Beklenen Çıktılar

Karanlık yüzey ve yükseklik hiyerarşisi
Eşlenmiş metin, kenarlık, eylem ve durum renkleri
Tema davranışı ve medya uyarlama rehberi

Örnek Brifi Gör

Brifden İncelemeye

01
Açık Tema Rollerini Okuyun
Mevcut anlamsal renkleri ve bileşen hiyerarşilerini belirleyin.
02
Yüzeyleri Yeniden Eşleyin
Doğrudan tersine çevirme yerine bilinçli aydınlık adımları ve ayarlanmış vurgu renkleri kullanın.
03
Arayüzün Tamamını İnceleyin
Bileşen kontrastını, logoları, görselleri, otomatik tercihleri ve manuel tema seçimini kontrol edin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Mevcut bir açık mod paleti, bileşen örnekleri ve medya varlıklarıyla başlayın. Karanlık mod kontrastını, tema geçişini ve görsel işlemeyi kontrol etmek için işlenmiş bir arayüz kullanın.

İyi Bir Uyum

Mevcut Bir Açık Temalı ÜrünTemel renk sistemi zaten tanımlandığında kullanın.
Tutarsız Karanlık EkranlarKaranlık modda dikkat için yarışan kartları, katmanları ve medyayı çözün.

Kontrol Edilecek Sınırlar

Palet Oluşturma DeğildirÖzgün ürün paletini oluşturmak color-system görevine aittir.
Örnekler Ölçüm GerektirirÖnerilen renkler ve doygunluk azaltma aralıkları tek başına erişilebilirliği kanıtlayamaz.

Bu Girdileri Getirin

Güncel PaletAnlamsal açık mod rollerini sağlayın.
Bileşen EnvanteriYükseltilmiş yüzeyleri, durumları ve katmanları gösterin.
Medya ve TercihlerMarka görsellerini ve beklenen tema seçimi davranışını belirleyin.

03 Önemli Kararlar

Önemli Kararlar

Ağır Gölgeler Olmadan Yükseklik
Koyu gölgelerin etkisiz kaldığı yerlerde yüzey aydınlığı katmanları anlatabilir.
Medya Temanın Parçasıdır
Parlak bir görsel veya uygun olmayan bir logo, aksi halde tutarlı olan karanlık arayüzü zayıflatabilir.

04 Örnek Görev Tanımı

Odaklı Bir Brif Deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kurulumu İnceleyin

Bu görevin SKILL.md dosyasını designer-skills deposundan, ajanınızın desteklediği skill konumuna yükleyin. Giriş dosyası evrensel bir yükleyici komutu belirlemez.

Kaynak Skill Dosyası

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

Tek Bir Çıktıyla Başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif

Mevcut bu açık renkli panoyu uyarlamak için dark-mode-design kullan. Yüzeyleri ve metni anlamsal olarak eşle, uyarı renklerini ve grafik görsellerini incele, sistem tercihini ve manuel seçimi tanımla. Gerçek kontrast çiftlerini ölç ve karanlık varyant gerektiren varlıkları işaretle.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

Yüzey seviyeleri birbirinden ayırt edilebilir kalır.
Metin ve durum kontrastı kontrol edilir.
Görseller, logolar ve tema kontrolleri incelenir.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu liste, skill'in pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Kaynaktaki davranış ve gereksinimler değişebilir.

Kaynak Sahibi: Owl-Listener
Depo: Owl-Listener/designer-skills
Skill Dosyası: ui-design/skills/dark-mode-design/SKILL.md
Lisans: MIT
İncelenen Sürüm: 2026-10-07 · 9a6930cf84a8

Editoryal Kaynak Özeti

Yükseklik, kontrast, medya işleme ve tema seçimi davranışıyla karanlık palet uyarlaması.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımı veya kalite puanı değildir.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorulacaklar

Paleti basitçe tersine çevirebilir miyim?

Kaynak, tersine çevirme yerine yüzey ilişkilerinin yeniden tasarlanmasını açıkça önerir.

Özgün marka paletini oluşturur mu?

Hayır. Uyarlanacak bir temel palet olduğunu varsayar.

Otomatik mod bir anahtarın yerini almalı mı?

Kaynak, sistem tercihine saygı gösterilmesini ve ayrıca manuel bir seçenek sunulmasını önerir.

OpenDesign

Sonraki Tasarım Yinelemesine Yer Açın.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndir Tasarım Skill'lerine Göz At