Theming Systemyazan Owl-Listener

Theming System Skill.

Tek bir bileşen kütüphanesinin yapısını çoğaltmadan görünümünü değiştirmesini sağlayın.

Tasarım Sistemleri
Temalandırma

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

Kaynak İncelemesi · Theming SystemSKILL.md

Görev Tasarım Sistemleri Ürettikleri • Geçersiz kılma kurallarına sahip üç katmanlı bir token mimarisi. • Gereken renk, marka veya yoğunluk modlarını kapsayan bir tema matrisi. • Bileşen kapsamı ile sabit ve temalandırılabilir token rehberliği. Başlamadan Önce Uygulama, projenin token sistemini veya platform karşılıklarını kullanır; çalışma zamanında geçiş ayrıca geliştirilmeli ve test edilmelidir.

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

01 İşlevler

Token'lar Aracılığıyla Birden Fazla Temayı Destekleyin

Markalar, renk modları ve yoğunluk varyantları arasında paylaşılan bileşenler için katmanlı bir temalandırma mimarisi.

Kaynağa dayalı iş akışıYürütme performans testi değildir

Çalışma Yaklaşımı

Theming System, tema farklarını katmanlı bir token mimarisine yerleştirir. Ham palet değerleri anlamsal rolleri besler, onlar da bileşen kapsamlı token'ları besler. Tema geçersiz kılmaları öncelikle anlamsal katmanı değiştirir; böylece aynı bileşenler farklı markalara veya renk modlarına hizmet edebilir.

Kaynak, temaları renkleri basitçe tersine çevirmekten ayırır. Koyu yüzeyler, yükselti, doygunluk ve görsel varyantları bilinçli biçimde ele almayı gerektirir. Ayrıca yoğunluğu bir tema boyutu olarak listeler; bu da spesifikasyonu yalnızca renkle sınırlı olmaktan çıkarır.

Beklenen Çıktılar

Geçersiz kılma kurallarına sahip üç katmanlı bir token mimarisi.
Gereken renk, marka veya yoğunluk modlarını kapsayan bir tema matrisi.
Bileşen kapsamı ile sabit ve temalandırılabilir token rehberliği.

Örnek Brife Bak

Brifden İncelemeye

01
Token Katmanlarını Ayırın
Ham ilkelleri, amaca dayalı takma adları ve bileşen düzeyindeki referansları belirleyin.
02
Tema Geçersiz Kılmalarını Eşleyin
Bileşen sözleşmesini koruyarak istenen her tema için anlamsal rolleri değiştirin.
03
Tüm Kütüphaneyi Kontrol Edin
Desteklenen her temada her bileşeni; görseller ve işletim sistemi tercih davranışı dahil olmak üzere inceleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Uygulama, projenin token sistemini veya platform karşılıklarını kullanır; çalışma zamanında geçiş ayrıca geliştirilmeli ve test edilmelidir.

Uygun Kullanım

Çok Markalı ÜrünlerWhite-label veya alt marka arayüzlerinin bir bileşen kütüphanesini paylaşması gerektiğinde yararlıdır.
Açık ve Koyudan FazlasıYüksek kontrastlı veya yoğunluk varyantları için de bir yapı sunar.

Kontrol Edilecek Sınırlar

Tek Palet Çalışması DeğildirTek bir renk setini seçmek, sürdürülebilir bir temalandırma mimarisi oluşturmaz.
Otomatik Kontrast Sertifikası YokGerçekte kullanılan her metin, yüzey ve durum kombinasyonunun yine de test edilmesi gerekir.

Bu Girdileri Hazırlayın

Desteklenen TemalarMarkaları, renk modlarını, kontrast modlarını ve yoğunluk gereksinimlerini listeleyin.
Mevcut Token'larPalet, anlamsal takma adlar ve bileşen referanslarını sağlayın.
Sabit Marka ÖğeleriTemalar arasında değişmemesi gereken varlıkları veya değerleri belirleyin.

03 Önemli Kararlar

Önemli Kararlar

Doğru Katmanda Geçersiz Kılın
Anlamsal takma adlar, markaya özgü renklerin bileşen uygulamalarına dağılmasını önler.
Varlıklar Temanın Parçasıdır
Görseller ve illüstrasyonlar için varyantlar gerekebilir; yalnızca CSS değişkenlerini değiştirmek koyu modu tutarlı hale getirmeyebilir.

04 Örnek Görev Tanımı

Odaklı Bir Brif Deneyin

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

Kurulumu İnceleyin

Deponun belgelenmiş kurulum yolunu kullanın ve atıf yapılan tüm yardımcı dosyaları saklayın. Bu kayıt, çalıştırılabilir bir uygulamayı değil, odaklı bir tasarım yöntemini tanımlar.

Yukarı Akış Kaynak Dosyası

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md

Uygulama, projenin token sistemini veya platform karşılıklarını kullanır; çalışma zamanında geçiş ayrıca geliştirilmeli ve test edilmelidir.

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

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

Örnek Brif

İki markanın açık ve koyu modlarda paylaştığı bir bileşen kütüphanesi için theming-system kullanın. İlkel, anlamsal ve bileşen katmanlarını tanımlayın, sabit token'ları belirleyin ve tema geçersiz kılmalarının nasıl çalıştığını gösterin. Renk tersine çevirmenin yeterli olduğunu varsaymadan görsel varyantlarını ve bileşen-tema bazlı bir QA matrisini ekleyin.

Sonucu İnceleyin

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

Bileşen token'ları belgelenmiş anlamsal roller üzerinden çözümlenir.
Temalandırılabilir ve sabit değerler birbirinden ayrılır.
Test matrisi desteklenen her temayı içerir.

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

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

05 Kaynak ve Lisans

Kaynak ve Lisans

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

Kaynak Sahibi: Owl-Listener
Depo: Owl-Listener/designer-skills
Yetenek Dosyası: design-systems/skills/theming-system/SKILL.md
Lisans: MIT
İncelenen Sürüm: 2026-10-07 · 9a6930cf84a8

Editoryal Kaynak Özeti

Markalar, renk modları ve yoğunluk varyantları arasında paylaşılan bileşenler için katmanlı bir temalandırma mimarisi.

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

06 Başlamadan Önce Sorular

Başlamadan Önce Sorulacak Sorular

Temalar token'ları nerede geçersiz kılmalı?

Kaynak, ana geçersiz kılmaları ham değerler ile bileşene özgü token'lar arasındaki anlamsal katmana yerleştirir.

Yoğunluk bir tema olabilir mi?

Evet. Kaynak, renk ve marka modlarının yanında rahat, kompakt ve ferah yoğunluğu da içerir.

Tek bir uygulama aracı mı öneriyor?

Tek bir yığını zorunlu kılmak yerine CSS özel özelliklerini, token dosyalarını, Figma değişken modlarını ve çalışma zamanında geçişi listeler.

OpenDesign

Bir 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 yeteneğin kendi kurulumunu kontrol edin.

OpenDesign İndir Tasarım Yeteneklerine Göz Atın