106.9K+İndir
Kullanım kılavuzuna geç
Design Tokensyazan julianoczkowski

Design Tokens Skill'i.

Seçilmiş tasarım yönünü yeniden kullanılabilir tema değerlerine dönüştürün.

  • Token’lar
  • Tailwind
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · design-tokensSKILL.md
Görev Seçilmiş tasarım yönünü yeniden kullanılabilir tema değerlerine dönüştürün. Çıktılar Projenin kullandığı biçimde token dosyası veya tema uzantısı. Başlamadan önce Kaynak, ajanı mevcut sistemi üzerine yazarak değiştirmek yerine genişletmeye yönlendirir.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Seçilmiş tasarım yönünü yeniden kullanılabilir tema değerlerine dönüştürün

Mevcut tasarım brifinden renk, boşluk, tipografi, düzen ve hareket için CSS, Tailwind veya tema token’ları üretin ya da genişletin.

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

Çalışma Yaklaşımı

Design Tokens, yeni bileşenlerin başvuracağı değerleri belirler. Önce mevcut CSS değişkenlerini, tema sağlayıcılarını, token dosyalarını ve framework bağımlılıklarını inceler; ardından özelliğin tasarım brifini okur. Bir sistem zaten varsa onu değiştirmek yerine eksiklerini tamamlar.

Çıktı projenin teknoloji yığınına uyar: CSS özel özellikleri, Tailwind yapılandırması veya tema modülü. Belgelenen iş akışında açık ve koyu paletlerin yanı sıra boşluk, tipografi, düzen, hareket ve duyarlı değerler bulunur. Ajan, seçilen görsel yönü ve bu yönden ayrılan kararları açıklar.

Beklenen Çıktılar

  • Projenin kullandığı biçimde token dosyası veya tema uzantısı.
  • Anlamsal rollere sahip, bilinçli tasarlanmış açık ve koyu paletler.
  • Tasarım yönü ve uygulama seçimlerinin kısa açıklaması.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Mevcut temelleri inceleyin

    CSS değişkenlerini, Tailwind yapılandırmasını, tema sağlayıcılarını ve token dışa aktarımlarını arayın. Herhangi bir şey üretmeden önce eksik koyu mod veya hareket değerleri gibi açıkları belirleyin.

  2. 02
    Brifi teknoloji yığınına bağlayın

    Etkin özelliğin brifini ve estetik yönünü okuyun. Uygulamaya uygun token biçimini seçin; yığın belirsizse varsayılan olarak CSS özel özelliklerini kullanın.

  3. 03
    İlişkili ölçekleri tanımlayın

    Anlamsal renkler ile tutarlı boşluk, tipografi ve düzen değerleri oluşturun. Bileşenlerin başvurabileceği hareket ve kırılma noktası kategorilerini ekleyin.

  4. 04
    Her iki tema modunu oluşturun

    Koyu değerleri bilinçli tasarlayın ve kaynağın sistem tercihi ile manuel tema kalıplarını destekleyin. Yeni değerlerin mevcut sistemi nasıl genişlettiğini açıklayın.

02 Kullanım Alanları

Ne zaman kullanılır

Kaynak, ajanı mevcut sistemi üzerine yazarak değiştirmek yerine genişletmeye yönlendirir.

İyi Bir Uyum

  • Bileşenler oluşturulmadan önceYeni özelliğin görsel parçaları yapılmadan önce tutarlı değerlere ihtiyacı vardır.
  • Eksik temellerMevcut tema bazı kategorilerden veya bilinçli koyu mod değerlerinden yoksundur.

Kontrol Edilecek Sınırlar

  • Mevcut token’ları koruyunKaynak, ajanı mevcut sistemi üzerine yazarak değiştirmek yerine genişletmeye yönlendirir.
  • Tasarım yönü gerekirBrif yoksa amaçlanan yönü belirleyin. Adlandırılmış estetik yaklaşım, parametrelerini tamamlayıcı frontend-design skill’inden alır.
  • Değerler uygulamada kontrol edilmelidirÜretilen palet, gerçek bileşenlerde hâlâ kontrast ve render doğrulaması gerektirir.

Bu Girdileri Getirin

  • Özellik brifiKabul edilen görsel yönü ve ilgili tasarım kararlarını sağlayın.
  • Tema kaynağıMevcut değişkenleri, yapılandırma dosyalarını ve token dışa aktarımlarını sağlayın.
  • Uygulama yığınıCSS, Tailwind veya tema sağlayıcısı uygulamasını belirtin.

03 Önemli Kararlar

Önemli kararlar

  1. Anlamsal yeniden kullanım

    Bileşenler keyfî değerler yerine metin, yüzey ve odak gibi rollere başvurabilir.

  2. Bilinçli modlar

    Koyu mod, açık modla birlikte tasarlanır.

  3. Yığına uyum

    Token’lar mevcut uygulamanın kullanabileceği yere teslim edilir.

04 Örnek Görev Tanımı

Odaklı bir brief deneyin

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

Kaynağı ve kurulumu inceleyin

Kabul edilen görsel yönü ve ilgili tasarım kararlarını sağlayın.

Üst Kaynak Dosyası
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md

Aşağıdaki referans, özgün talimatları açar. Kullanmadan önce depo kurulumunu inceleyin; bu bir kurulum komutu değildir.

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
Yeni raporlama özelliğimizin temasını genişletmek için design-tokens kullan. Önce onaylı tasarım brifini oku; mevcut CSS değişkenlerini, Tailwind ayarlarını ve tema sağlayıcılarını incele. Mevcut token adlarını koru ve yalnızca belgelenmiş eksikleri doldur. Açık ve koyu modda çalışan anlamsal grafik yüzeylerine, durum renklerine, boşluk ve tipografi değerlerine ihtiyacımız var. Projenin mevcut biçimini kullan ve manuel tema seçiminin sistem tercihiyle nasıl etkileştiğini açıkla. Yeni değerleri amaçlanan rollere eşleştir ve render edilmiş kontrast kontrolü hâlâ gereken palet birleşimlerini işaretle.

Sonucu inceleyin

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

  • Bir değişiklik açıkça gerekçelendirilmedikçe mevcut token tanımları korunur.
  • Her iki tema amaçlanan anlamsal rolleri kapsar.
  • Yeni bileşenler çıktıyı projenin gerçek stil sisteminde kullanabilir.

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

OpenDesign İndirHı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. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
julianoczkowski
Depo
julianoczkowski/designer-skills
Skill Dosyası
SKILL.md
Lisans
Apache-2.0
İncelenen Sürüm
2026-11-02 · c259656c76d9
Editoryal Kaynak Özeti
Seçilmiş tasarım yönünü yeniden kullanılabilir tema değerlerine dönüştürün.

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

06 Başlamadan Önce Sorular

Başlamadan önce sorular

Her zaman yeni bir tokens.css dosyası mı oluşturur?

Hayır. Kaynak, yığına göre CSS değişkenlerini, Tailwind yapılandırmasını veya tema modülünü seçer.

Koyu mod nasıl türetilmeli?

Kaynak, açık renklerin basitçe ters çevrilmesi yerine bilinçli palet seçimleri ister.

Mevcut sistemle çalışabilir mi?

Evet. Mevcut token’ları bulup eksiklerini tamamlayarak başlar.

OpenDesign

Brief'inizi ve tasarım çalışmanızı bir arada tutun.

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 İndirTasarım Skill'lerine Göz At
Üst Kaynak Dosyası
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md