Design Tokenyazan Owl-Listener

Design Token Skill.

Görsel kararlara, bileşenlerin yeniden kullanabileceği adlar ve ilişkiler verin.

Tasarım Sistemleri
Teknik Özellikler

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

Kaynak İncelemesi · Design TokenSKILL.md

Görev Tasarım Sistemleri Çıktılar • Bir token kategorisi ve adlandırma düzeni • Global, takma ad (alias) ve bileşen token'ları arasındaki ilişkiler • Kullanım ve sürümleme rehberi Başlamadan Önce Mevcut görsel değerleri, bileşen örneklerini ve adlandırma kısıtlarını sağlayın. Skill, token adlarını ve ilişkilerini tanımlar; dışa aktarma araçları ve framework entegrasyonu ayrı bir kurulum gerektirir.

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

01 İşlevler

Design Token: Anlamsal Bir Temel Tanımlayın

Tasarım token'ı kategorileri, üç katmanlı ilişkiler, adlandırma, kullanım ve sürümleme rehberi.

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

Çalışma Yaklaşımı

Design Token, bir tasarım sisteminin altındaki temeli tanımlar. Renk, boşluk, tipografi, yükseklik, kenarlıklar ve hareketi kapsar; ham değerleri anlamsal anlama bağlayan adlandırma ve kullanım kuralları içerir.

Üç katmanlı yapı; global değerleri, anlamsal takma adları ve bileşene özgü token'ları birbirinden ayırır. Bu ayrım, bir ekibin değeri kullanım gerekçesini kaybetmeden değiştirmesine yardımcı olur. Mevcut kullanımın denetimi ve çok markalı eşleme açıkça ayrı görevlerdir.

Beklenen Çıktılar

Bir token kategorisi ve adlandırma düzeni
Global, takma ad (alias) ve bileşen token'ları arasındaki ilişkiler
Kullanım ve sürümleme rehberi

Örnek Brief'i Gör

Brief'ten İncelemeye

01
Temelleri Envanterleyin
Ürünün renk, yerleşim, yazı tipi, yükseklik ve hareket için ihtiyaç duyduğu değerleri listeleyin.
02
Katmanları Tanımlayın
Ham ölçekleri anlamsal rollerden ayırın ve bileşene özgü adları yalnızca yararlı olduğu yerde ekleyin.
03
Kullanımı Belgeleyin
Takma adların nerede uygulandığını ve bileşenlerin sabit kodlanmış değerler yerine bunlara nasıl başvurması gerektiğini açıklayın.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Mevcut görsel değerleri, bileşen örneklerini ve adlandırma kısıtlarını sağlayın. Skill, token adlarını ve ilişkilerini tanımlar; dışa aktarma araçları ve framework entegrasyonu ayrı bir kurulum gerektirir.

Uygun Olduğu Durumlar

Yeni Bir Token KatmanıGörsel değerler var ama ortak adları ve rolleri yoksa kullanın.
Tutarsız TemellerTekrarlanan boşluk veya renk kararlarına ortak bir kelime dağarcığı kazandırın.

Kontrol Edilecek Sınırlar

Otomatik Denetim Aracı DeğildirKaynak, mevcut kullanımın denetimini başka bir skill'e yönlendirir.
Derleme Hattı DeğildirToken mimarisini anlatır; garantili bir dışa aktarma veya framework entegrasyonu sunmaz.

Bu Girdileri Getirin

Mevcut DeğerlerPalet, tipografi, boşluk ve yükseklik kararlarını sağlayın.
Bileşen İhtiyaçlarıTemsili kullanımları ve durumları gösterin.
Adlandırma KısıtlarıPlatform kurallarını ve sürümleme beklentilerini belirtin.

03 Önemli Kararlar

Önemli Kararlar

Adlar Niyeti Korur
Anlamsal takma adlar, ham değerler değiştiğinde niyeti korur.
Katmanlar Karışıklığı Önler
Global bir renk ile bir düğme durumu rengi birbirinin yerine kullanılabilecek adlar olarak ele alınmamalıdır.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

Aşağıdaki örnek brief 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 desteklenen skill konumuna yükleyin. Giriş dosyası evrensel bir kurulum komutu belirtmez.

Üst Akış Kaynak Dosyası

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

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

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

Örnek Brief

Bu küçük ürün sistemi için bir token katmanı tanımlamak üzere design-token kullanın. Ham ölçekleri, anlamsal takma adları ve gerekli bileşen token'larını ayırın. Sağlanan düğme ve kart örneklerini eşleyin, adlandırma kurallarını belgeleyin ve uygulamadığımız bir dışa aktarma hattı olduğunu iddia etmekten kaçının.

Sonucu İnceleyin

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

Takma adlar tanımlı değerlere çözülür.
Adlar, rastlantısal görünüm yerine kullanımı anlatır.
Bileşenler amaçlanan token katmanına başvurur.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'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ı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

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

Kaynak Sahibi: Owl-Listener
Depo: Owl-Listener/designer-skills
Skill Dosyası: design-systems/skills/design-token/SKILL.md
Lisans: MIT
İncelenen Anlık Görüntü: 2026-10-07 · 9a6930cf84a8

Editoryal Kaynak Özeti

Tasarım token'ı kategorileri, üç katmanlı ilişkiler, adlandırma, kullanım ve sürümleme rehberi.

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 Sorulanlar

Token'lar yalnızca renkten mi ibaret?

Hayır. Kaynak; boşluk, tipografi, yükseklik, kenarlıklar ve hareketi de içerir.

Her bileşen ham değerleri mi kullanmalı?

Kaynak, doğrudan ham değerler yerine anlamsal başvuruları önerir.

Birden fazla markayı ele alır mı?

Giriş, temel token mimarisini ayrı bir theming-system görevinden ayırır.

OpenDesign

Bir Sonraki Tasarım Yinelemesine Yer Açın.

Brief'inizi, 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ın