Kullanım kılavuzuna geç
Color Systemyazan Owl-Listener

Color System Skill.

Bir marka rengini, kullanılabilir bir arayüz rolleri ve ön plan-arka plan kombinasyonları setine dönüştürün.

  • Renk Tasarımı
  • Tasarım Rehberi
Kaynak İncelemesi · Color SystemSKILL.md
Görev UX Çıktılar • Marka ve nötr ton ölçekleri • Anlamsal ön plan, arka plan, kenarlık ve simge rolleri • Bir kontrast ve kullanım matrisi Başlamadan Önce Marka renklerini, arayüz rollerini ve erişilebilirlik hedeflerini sağlayın. Önerilen renk kombinasyonlarını değerlendirmek için gerçek bileşen durumlarını ve bir kontrast denetim aracını kullanın.
Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Color System: Anlamsal Ürün Rengi Oluşturma

Ürün palet katmanları, ton ölçekleri, anlamsal renk eşlemesi ve kontrast odaklı kullanım rehberliği.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

Color System, bir ürün paletini oluşturmak veya yeniden oluşturmak içindir. Marka ölçeklerini, nötrleri, anlamsal durum renklerini ve genişletilmiş kullanımları birbirinden ayırır. Sonuç, birkaç çekici renk örneğinden fazlasıdır: her rengin bir rolü ve komşu yüzeylerle kullanılabilir ilişkileri olmalıdır.

Kaynak, ton ölçeklerini kontrast kontrolleriyle birleştirir ve yalnızca renge dayalı iletişime karşı uyarır. Ayrıca karanlık mod eşlemelerini erken aşamada ister. Üretilen bir palet, gerçek metinleri, bileşenleri ve durum kombinasyonları kontrol edilene kadar bir tasarım önerisidir.

Beklenen Çıktılar

  • Marka ve nötr ton ölçekleri
  • Anlamsal ön plan, arka plan, kenarlık ve simge rolleri
  • Bir kontrast ve kullanım matrisi
Örnek Brife Göz At

Brifden İncelemeye

  1. 01
    Palet Katmanlarını Tanımlayın

    Marka yönünden başlayın ve ürünün gerçekten kullandığı nötrleri ve durum rollerini türetin.

  2. 02
    Gerçek Eşleşmeleri Belirleyin

    Renkleri etiketsiz örnekler olarak bırakmak yerine metne, yüzeylere, kenarlıklara ve durumlara atayın.

  3. 03
    Erişilebilirliği Kontrol Edin

    Amaçlanan kombinasyonları test edin ve durumun anlaşılması gereken yerlerde renk dışı işaretler ekleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır

Marka renklerini, arayüz rollerini ve erişilebilirlik hedeflerini sağlayın. Önerilen renk kombinasyonlarını değerlendirmek için gerçek bileşen durumlarını ve bir kontrast denetim aracını kullanın.

Uygun Kullanım

  • Yeni Bir Ürün PaletiRol tabanlı renkler henüz yoksa bir temel oluşturun.
  • Tutarsız Durum RenkleriBileşenler arasında çelişen başarı, uyarı ve hata uygulamalarını çözün.

Kontrol Edilecek Sınırlar

  • Tek Başına Karanlık Mod Uyarlaması DeğildirMevcut bir açık paletin karanlık moda çevrilmesi ayrı bir karanlık mod görevidir.
  • Otomatik Uyumluluk YokturGerçek bileşen ve metin kombinasyonlarının yine de ölçülmesi ve gözden geçirilmesi gerekir.

Bu Girdileri Getirin

  • Marka YönüMevcut marka renklerini ve kısıtlamaları sağlayın.
  • Arayüz RolleriYüzeyleri, metin düzeylerini, eylemleri ve durumları listeleyin.
  • Erişilebilirlik Hedefiİlgili kontrast ve renk dışı iletişim gereksinimlerini belirtin.

03 Önemli Kararlar

Önemli Kararlar

  1. Örnekler Yerine Roller

    Anlamsal eşleme, paletin bileşenler arasında kullanılabilir olmasını sağlar.

  2. Test Birimi Çiftlerdir

    Bir rengin, arka planı ve kullanımı olmadan anlamlı bir metin kontrastı sonucu yoktur.

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 kurulum komutu belirtmez.

Üst Kaynak Dosyası
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/color-system/SKILL.md

Marka renklerini, arayüz rollerini ve erişilebilirlik hedeflerini sağlayın. Önerilen renk kombinasyonlarını değerlendirmek için gerçek bileşen durumlarını ve bir kontrast denetim aracını kullanın.

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

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

Örnek Brif
Sağlanan marka mavisinden bu planlama ürünü için bir palet oluşturmak üzere color-system kullanın. Ton ve nötr ölçekleri, anlamsal başarı/uyarı/hata rollerini ve gerçek yüzey üzerindeki metin kombinasyonlarından oluşan bir matris tanımlayın. Uyumluluk iddia etmek yerine doğrulanmamış kontrast değerlerini işaretleyin.

Sonucu İnceleyin

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

  • Önerilen her rolün kullanım rehberi vardır.
  • Önemli eşleşmelerin kontrastı ölçülmüştür.
  • Durum yalnızca renk tonuyla aktarılmaz.

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

05 Kaynak ve Lisans

Kaynak ve Lisans

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

Kaynak Sahibi
Owl-Listener
Lisans
MIT
İncelenen Sürüm
2026-10-07 · 9a6930cf84a8
Editoryal Kaynak Özeti
Ürün palet katmanları, ton ölçekleri, anlamsal renk eşlemesi ve kontrast odaklı kullanım rehberliği.

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ını veya bir kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorulacaklar

Bu yalnızca bir marka paleti midir?

Hayır. Nötrleri, anlamsal durumları ve kullanım ilişkilerini içerir.

Karanlık mod şimdi düşünülmeli mi?

Kaynak, eşlemelerin erken planlanmasını önerir; ayrıntılı uyarlama ayrıca ele alınır.

Renk körlüğüne uygun bir palet her şeyi çözer mi?

Hayır. Kaynak, anlamın önemli olduğu yerlerde etiketler, şekiller veya başka işaretler de ister.

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 skill'in kendi kurulumunu kontrol edin.

Üst Kaynak Dosyası
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/color-system/SKILL.md