83.3K+İndir
Kullanım kılavuzuna geç
color-expertyazan David Aerne

Color Expert Skill.

Marka ve tasarım sistemi çalışmaları için Claude Code ve Codex skill: renk adlandırma, teori, uzaylar, paletler, rampalar, geçişler, dönüşümler ve kontrast.

  • Brand & Design Systems
OpenDesign İndirKullanım kılavuzunu görüntüle
meodai/skill.color-expert · SKILL.mdSKILL.md
--- name: color-expert description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do … --- ## How to Use This Skill ## Color Spaces — What to Use When ## Implementation Guidance — Code and CSS ## CSS Color 4/5 — Syntax Cheat Sheet ## Accessibility — Key Numbers ## Color Harmony — What Actually Works
Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okunmuştur · tam hali 31.055 karakter

01 Ne yapar

color-expert Skill'inin Claude Code ve Codex İçinde Yaptıkları

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

color-expert, isimlendirme, teori, renk uzayları, paletler, tonlar, gradyanlar, dönüşümler, erişilebilirlik ve pigment karışımıyla ilgilenen tasarımcılar ve geliştiriciler için bir renk bilgi tabanıdır. Bir isteği beş moddan birine yönlendirir — somut tasarım veya sanat projesi, tasarım sistemi tonları ve tema token'ları, üretken sanat, genel renk sorusu veya palet üretici oluşturma — ve o kayıtta yanıt verir.

Görev-uzay tablosu taşır (algısal çalışmalar için OKLCH, baskı için CIELAB D50, ortamlar arası eşleştirme için CAM16, pigment için Kubelka-Munk), 281 trilyon hex çifti üzerinde APCA ve WCAG geçiş oranı sayıları, gamut eşleme kılavuzu, bir CSS Color 4/5 hile sayfası ve seçilmiş bir araç listesi barındırır; 140'tan fazla referans dosyası references/INDEX.md arkasında indekslenmiştir.

Neler üretir

  • Genel teoriler yerine belirtilen kısıtlamalarla eşleştirilmiş belirli araç ve palet önerileri.
  • Surface, on-surface, accent, success, warning ve danger gibi anlamsal rollere besleme yapan referans token'lı bir token grafiği.
  • sRGB ve Display-P3 için, yapı itibarıyla gamut içinde üretilen ardışık ve ıraksak veri görselleştirme tonları.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    İsteği Beş Moddan Birine Yönlendirme

    Dosya beş yaygın modu adlandırır ve ajana, her renk sorusunu aynı şekilde yanıtlamak yerine yanıtını kullanıcının açık isteği ile bağlamdan gelen örtük kısıtlamalara göre eşleştirmesini söyler.

  2. 02
    Genel Soruları Doğrudan Dosyadan Yanıtlama

    OKLCH'nin ne olduğu veya bir gradyanın neden griye döndüğü gibi sorular için, doğrudan skill dosyasından veya referans indeksinden yanıtlayın ve ilgili referansı belirtin; kullanıcı bir şeyin nasıl yapılacağını sormadıkça araçlara girmeyin.

  3. 03
    Ölçekleri Önce OKLCH'de Oluşturma

    Tasarım sistemleri, tonlar ve tema token'ları için öncelik sıralaması OKLCH ile başlar; böylece parlaklık tüm ton çeşitlerinde tutarlı kalır ve orta tonlar bulanıklaşmaz.

  4. 04
    UI Kullanımından Önce Bir Anlamsal Katman Ekleme

    Bir programda veya stil sayfasında kullanılan renkler, somut değerleri taşıyan referans token'ları ve bunlara anlam eşleyen anlamsal token'larla bir anlamsal katmanın arkasında yer almalıdır.

  5. 05
    Daraltmadan Önce Birden Fazla Palet Yaklaşımı Sunun

    Paletler oluştururken veya karşılaştırırken, skill önce birden fazla yaklaşımı artılarıyla eksileriyle göstermelidir; çünkü çapa tabanlı, tonu döndürme, kosinüs, uyum tabanlı, sahne aydınlatmalı ve çıkarım tabanlı yaklaşımlar farklı problemlere uyar.

02 Uyumunuzu bulun

color-expert Skill Ne Zaman Kullanılır

Bu tür marka ve tasarım sistemi işlerinde color-expert skill'ini Claude Code veya Codex'te kullanın. Aşağıdaki uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Logo, poster, illüstrasyon veya uygulama gibi somut bir brief için renk seçimi; önce ortam ve ruh hali sorulur.
  • Tasarım sistemi skalaları ve tema token'ları oluşturma: 9 adımlı bir vurgu skalası, açık ve koyu mod paleti, Tailwind veya Radix stili skalalar veya bir markaya uyarlanmış gri skala.
  • Kodun kendisinin sanat eseri olduğu üretken sanat ve yaratıcı kodlama; kullanıcı taklit edilecek belirli bir sanatçının stilini değil, birleştirilecek teknikleri istiyor.
  • OKLCH'nin ne olduğu, bir gradyanın ortada neden griye döndüğü veya APCA'nın WCAG'den üstün olup olmadığı gibi genel renk sorularını doğrudan ele alma.
  • Bir palet üretici oluşturma veya bir OKLCH skala fonksiyonu isteme; yanıt kullanıcının kendi yığınında çalışan kod olmalıdır.

Sınırları Bilin

  • coolors.co'yu bir üretici olarak ele alma; dosyada, aracın JS paketine sabit kodlanmış paletler arasından rastgele seçim yaptığı belirtiliyor.
  • Renklerin elle yapılan tek kanallı sıralaması; sadece tona veya sadece parlaklığa göre sıralamalar öngörülebilir şekilde başarısız olur ve paketlenmiş RGB/HSL sıralamaları düzensiz sıçramalar verir.
  • Tamamlayıcı, üçlü veya dörtlü ton aralıklarını tek başına bir uyum kuralı olarak kullanma — dosya bunları tek başlarına zayıf öngörücüler olarak tanımlıyor.
  • Üç veya daha fazla grafik dolgusunun birbirine karşı 3:1 oranını korumasını bekleme; dosya bunun yerine bir kenarlık kısıtlaması kullanılmasını söylüyor.

Ne Sağlamalısınız

  • Ortam ve kısıtlamalarBir tasarım veya sanat projesi için ortamı (baskı, ekran, boya, karma), marka veya ruh halini, hedef kitleyi, erişilebilirlik gereksinimlerini ve uyum sağlanacak mevcut renkleri belirtin.
  • Gerçek hedef gamutÇıktının sRGB veya P3 içinde kalması gerektiğini belirtin, çünkü P3'te geçerli bir renk sRGB'de kesilebilir ve kontrol farklıdır.
  • Sizin yığınınızKod örnekleri kullanıcının kendi yığınında yazılır ve renk uzayı skill'in görev tablosuna göre seçilir.
  • Uyum sağlanacak mevcut bir sistemZaten bir palet sisteminiz varsa, onun algısal yapısı çıkarılıp kendi tonunuza yeniden uygulanabilir.

03 Skill'in içinde

color-expert Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. coolors.co'yu Asla Önermeyin

    Skill, coolors.co'yu bir palet üretici olarak açıkça yasaklıyor; çünkü herhangi bir şey üretmek yerine, sabit 7.821 hazır paletten seçim yapıyor.

  2. Gamut Dışı OKLCH'yi Parlaklık veya Ton Yerine Kroma Çekerek Düzeltin

    R/G/B kırpma tonu kaydırır; bu nedenle kanalları kırpmak yerine kromayı gamut sınırına doğru azaltarak kimliği koruyun.

  3. Ham Renk Değerlerini Bileşenlerin Dışında Tutun

    Literal hex veya renk değerleri normalde yalnızca palet/referans tanımlarında, dönüşümlerde, diagnostiklerde veya bilerek tek seferlik örneklerde görünmelidir.

  4. JS Kütüphanesinden Önce Yerel CSS'yi Tercih Edin

    Modern CSS algısal rengi yerel olarak ele alır; bu nedenle ajan, bir JavaScript renk kütüphanesi eklemeden önce bu özelliklere başvurmalıdır.

  5. El Yapımı Çözümler Yerine Mevcut Bir Kütüphaneyi Varsayılan Olarak Kullanın

    Kullanıcı bir üretici veya palet algoritması istediğinde, varsayılan olarak Culori, Poline, RampenSau veya Spectral.js gibi mevcut bir kütüphane önerilmelidir.

  6. İstenmedikçe İç İşleyiş Hakkında Ders Vermeyin

    Somut bir tasarım veya sanat projesinde, ajan kullanıcı sormadıkça CIE 1931 veya OKLCH iç işleyişini açıklamak yerine öneri sunmalı ve tavsiyede bulunmalıdır.

  7. Kontrastı Her İki Temada da Doğrulayın

    Her metin ve arka plan çifti, hem açık hem koyu modda APCA veya WCAG'a göre kontrol edilmelidir.

  8. Sabit Değerler Yerine Türetimleri Kodlayın

    Bir kararın kısıtlamalardan türetilebildiği durumlarda — okunabilir ön plan rengi, OKLCH'de temel token'dan hover rengi, en yakın adlandırılmış ton — sistem tek bir manuel seçim yerine kuralı üretmelidir.

04 İşe koyun

color-expert'i Claude Code veya Codex'e kurun

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

color-expert'i Claude Code, Codex veya Ajanınıza ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert

SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk Marka ve Tasarım Sistemi İş Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Build a 9-step accent ramp for [brand name] around [brand hex] in OKLCH, and keep every step in gamut by construction. Wire it into semantic tokens for surface, text, accent, success, warning and danger, with light and dark values. Verify every text/background pair against APCA 75, and hand me the reference-to-semantic token graph as CSS custom properties plus W3 design tokens.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Kontrastı WCAG veya APCA ile doğrulayın ve metin boyutu, kalınlığı, polaritesi ve CVD'yi hesaba katın; gri tonlama geçişi sadece bir sağlık kontrolüdür.
  • Sıralı bir rampa için ardışık örnekler arasındaki algısal adım büyüklüğünü çizin ve hem renkli hem gri tonlamada düz bir çizgi gerektirin.
  • Gri tonlamayı sadece hızlı bir parlaklık ayrımı kontrolü olarak kullanın, erişilebilirlik kanıtı olarak değil.
  • Gamut dışı renkleri, saf RGB kısıtlaması yerine L ve H'yi koruyan chroma kısıtlamasıyla eşleyin.
  • Color Buddy ile üretilmiş bir paleti WCAG, CVD, ayırt edilebilirlik, adalet ve duygu kurallarına göre denetleyin.
  • Simüle edilmiş renk körlüğü altında mevcut bir paleti JND çakışmaları için denetleyin.

OpenDesign'da color-expert dahil gelir: Plugins → Skills, üst çubukta seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
David Aerne
Repository
github.com/meodai/skill.color-expert Dal main
Skill dosyası
SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 6514810
License
CC-BY-4.0 LICENSE'dan.
Repository yıldızları
575 Tüm meodai/skill.color-expert deposu için 2026-09-14 tarihinde GitHub anlık görüntüsü alındı. color-expert için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Bu Skill Nasıl KullanılırBeş yanıt modu: tasarım projesi, tasarım sistemi, üretken sanat, genel soru, üretici oluşturma.
  2. Renk Uzayları — Ne Zaman Ne KullanılırGöreve göre uzay tablosu: algı için OKLCH, baskı için CIELAB D50, ortamlar arası için CAM16, J
Skill'in Kendi Açıklaması
"Renk adlandırma, renk teorisi, renk uzayları, renk tanımları veya renk bilgisi içeren herhangi bir görevle çalışırken kullanın - paletler, renkler dizisi, gradyanlar, dönüşümler, erişilebilirlik, algısal eşleştirme, pigment karıştırma, baskı-ekran rengi, CSS renk sözdizimi veya tarihsel renk terminolojisi. Kullanıcı renkleri seçerken, karşılaştırırken, oluştururken, adlandırırken, dönüştürürken veya açıklarken, açıkça "renk teorisi" istemeseler bile bu beceriyi kullanın."

SKILL.md'den ön madde açıklaması. Dosyanın tamamı yaklaşık 31.055 karakterdir. GitHub'da dosyanın tamamını okuyun.

Color Expert

color-expert'i gerçek bir marka ve design-system çalışma görevinde çalıştırın.

color-expert skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'de skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert