ui-design-systemyazan Alireza Rezvani

UI Design System Skill.

Marka ve tasarım sistemi çalışmaları için bir Claude Code ve Codex skill: tasarım token'ları, bileşen dokümantasyonu, duyarlı hesaplamalar ve geliştirici teslimi.

Brand & Design Systems
Tasarım sistemi

OpenDesign İndir Kullanım kılavuzunu görüntüle

alirezarezvani/claude-skills · product-team/skills/ui-design-system/SKILL.mdSKILL.md

--- name: ui-design-system description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff. --- ## Trigger Terms ## Workflows ## Quick Reference Tables ## Knowledge Base ## Validation Checklist

Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · Tam metin 10.759 karakter

01 Ne yapar

Claude Code ve Codex içinde ui-design-system Skill'i Ne Yapar

Ö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

Bir marka rengini tam bir token setine dönüştüren bir tasarım sistemi araç seti. design_token_generator.py bir hex renk ile modern, klasik veya oyuncu bir ön ayarı alır ve renkleri, tipografiyi, 8pt aralığı, boyutlandırmayı, kenarlıkları, gölgeleri, animasyonu, kırılma noktalarını ve z-index katmanlarını json, css, scss veya bir özet olarak döndürür.

Dört iş akışı ardından atomlardan şablonlara kadar bileşen mimarisini, clamp() akışkan tipografisiyle duyarlı kırılma noktalarını, WCAG kontrast doğrulamasını ve React CSS değişkenlerine, Tailwind yapılandırmasına veya styled-components'e geliştirici teslimini, ayrıca Tokens Studio üzerinden Figma senkronizasyonunu kapsar. Bir yapım ekibi için token ve bileşenleri belgelemesi gereken kıdemli UI tasarımcılarına yöneliktir.

Neler üretir

Props, varyant seçenekleri, durumlar ve erişilebilirlik gereksinimlerini kapsayan bileşen API dokümantasyonu.
CSS değişkenleriyle React, bir Tailwind tema yapılandırması ve styled-components için entegrasyon kod parçacıkları.
Kendi kontrast renklerini taşıyan anlamsal renk token'ları.

Örnek istemi görün ↗

Nasıl Çalışır

01
Marka Rengini Belirleyin
İş akışı, marka birincil rengini belirlemekle başlar; dosya bu rengin hex formatında olmasını gerektirir, çünkü üretilen her kategori bundan türetilir.
02
Token Üreticisini Çalıştırın
Bir betik çağrısı tüm sistemi üretir: renk, stil ön ayarı ve çıkış biçimi kabul ettiği üç bağımsız değişkendir.
03
Token'ları Bir Bileşen Hiyerarşisine Eşleyin
Bileşenler atom, molekül, organizma ve şablon olarak düzenlenir, ardından her biri tükettiği token gruplarına bağlanır.
04
Kesme Noktalarını ve Akışkan Tipografiyi Ayarlayın
Altı kesme noktası xs'den 2xl'ye kadar uzanır ve akışkan tipografi, minimum ile maksimum boyut arasında bir clamp formülüyle ifade edilir.
05
Token'ları Kod Tabanına Bağlayın
Teslim iş akışı; doğrudan içe aktarılan token dosyasını, JSON'dan oluşturulan bir Tailwind temasını ve token anahtarlarını okuyan bir styled-components temasını gösterir.
06
Figma'yı Senkronize Edin ve Onaylayın
Token'lar, Tokens Studio eklentisi aracılığıyla Figma'ya aktarılır ve teslim kontrol listesi; ardışık düzenin, bileşen kütüphanesinin ve dokümantasyonun tamamlandığını onaylar.

02 Uyumunuzu bulun

ui-design-system Skill ne zaman kullanılır

Claude Code veya Codex'te marka ve tasarım sistemi işi bu türden olduğunda ui-design-system skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Tek bir marka renginiz var ve ondan türetilmiş eksiksiz bir token sistemine gereksiniminiz var.
Bir bileşen kütüphanesini yapılandırıyorsunuz ve token'ların atomlar, moleküller, organizmalar ve şablonlar üzerine eşlenmesini istiyorsunuz.
Sizin için hesaplanmış kesme noktalarına, akışkan tipografi ölçeklerine veya duyarlı boşluk değerlerine gereksiniminiz var.
Tamamlanmış bir token setini geliştirme ekibine teslim etmeye hazırlanıyorsunuz.

Sınırları Bilin

Stil ön ayarları derin bir yeniden kaplama değildir: tema seçimi büyük ölçüde yazı tipi ailelerini, varsayılan köşe yarıçapını ve gölge karakterini değiştirir, örneğin modern temada 8px yuvarlak köşelere karşı klasikte 4px.

Ne Sağlamalısınız

Bir stil ön ayarıÜç yönden birini seçin, modern, klasik veya oyuncu, çünkü ön ayar oluşturulan set boyunca yazı tipi ailelerini, köşe yarıçapını ve gölge işlemesini değiştirir.
Çıkış biçimiAlıcı projenin hangi biçimi kullandığını belirtin: json, css, scss veya özet görünümü, çünkü bu, teslimin ne üreteceğini belirler.

03 Skill'in içinde

ui-design-system Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

Varsayılan Marka Rengi
Hiçbir renk verilmediğinde üretici, birincil marka rengi olarak #0066CC'ye geri döner, böylece çıkış bir hex bağımsız değişkeni olmadan da oluşturulabilir.
Boşluk 8pt'lik Bir Izgaradır
Boşluk token'ları, 0'dan 64'e kadar uzanan 8pt ızgara tabanlı bir ölçeği takip eder; sayısal adımların üzerine anlamsal takma adlar eklenir.
Sabit Kodlanmış Değer Yok
Bileşen uygulamaları yalnızca tasarım token'larına referans vermelidir; bileşenlerdeki sabit piksel veya hex değerleri başarısız bir kontrol olarak değerlendirilir.
Her Varyant Gönderilir
Bileşenlerin, bir alt kümeyi değil primary, secondary ve ghost dahil tam varyant setini uygulaması beklenir.
Boyut Varyantlarının Sabit Ölçüleri Vardır
Small boyutu 32px yükseklik, 12px yatay dolgu ve 14px yazı boyutu olarak tanımlanır; md ve lg buradan ölçeklenir.
Kontrast WCAG AA Eşiğini Geçmelidir
Oluşturulan renkler, normal metin için 4.5:1 ve büyük metin için 3:1 olarak doğrulanır; semantik renklerin kontrast değerleri tanımlaması gerekir.
Dokunma Hedefleri Yeterince Büyük Kalır
Erişilebilirlik kontrol listesinde etkileşimli öğelerin en az 44 x 44 piksellik bir dokunma hedefine ulaşması gerekir.

04 İşe koyun

Claude Code veya Codex'e ui-design-system kurun

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

Claude Code, Codex veya Ajanınıza ui-design-system ekleyin

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

Terminal

npx skills add https://github.com/alirezarezvani/claude-skills --skill ui-design-system

product-team/skills/ui-design-system/SKILL.md için genel skills CLI biçimi; 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

We have settled on [#0066CC] as the brand primary and I need a complete token set for our SCSS codebase, exported as variables we can import. Please generate the tokens in the classic style, document the Button, Input and Card component APIs with their variants and states, and check that the semantic colors clear WCAG AA before we hand off to the developers.

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:

Kısmi bir küme değil, her token kategorisinin oluşturulduğunu doğrulayın.
Hover, active, focus ve disabled durumlarının her bileşende gerçekten çalıştığını doğrulayın.
Odak göstergelerinin görünür olduğunu ve semantik HTML öğelerinin kullanıldığını kontrol edin.
Teslim tamamlandı denmeden önce tasarım aracının senkronize edildiğinden emin olun.
Dışa aktarılan token'ların koda ulaşması için bir build pipeline'ının yapılandırıldığını doğrulayın.

OpenDesign'da ui-design-system'i SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hı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: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Dal main
Skill dosyası: product-team/skills/ui-design-system/SKILL.md Doğrulama sırasında içerik sağlama değeri kaydedildi; commit 19392f7
License: MIT LICENSE dosyasından.
Repository yıldızları: 25.934 GitHub anlık görüntüsü 2026-09-14 tarihinde alirezarezvani/claude-skills deposunun tamamı için alındı; bu depoda bu katalogda yer alan 5 skill bulunuyor. ui-design-system için bir derecelendirme 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 dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Tetikleyici Terimlergenerate design tokens gibi tırnak içi ifadeler, bir isteği bu skill'e yönlendirmelidir.
İş AkışlarıNumaralandırılmış dört iş akışı: token oluşturma, bileşen sistemi, duyarlı tasarım, geliştirici teslimi.
Araç Referansıdesign_token_generator.py için argümanlar, varsayılanlar ve çıktı kategorileri, örnek çağrılarla birlikte.
Hızlı Referans TablolarıRenk skalası adımları, 1.25 tipografi skalası, WCAG seviyeleri ve stil ön ayarı farkları.
Bilgi TabanıDört referans kılavuz: token-generation, component-architecture, responsive-calculations, developer-handoff.
Doğrulama Kontrol ListesiToken oluşturma, bileşen sistemi, erişilebilirlik ve geliştirici teslimi için işaretleme listeleri.

Skill'in Kendi Açıklaması

"Tasarım token üretimi, bileşen dokümantasyonu, duyarlı tasarım hesaplamaları ve geliştirici teslim araçlarını içeren Kıdemli UI Tasarımcı için UI tasarım sistemi araç seti. Tasarım sistemleri oluştururken, tasarım tokenları üretirken, görsel tutarlılığı korurken veya tasarım-geliştirme işbirliği ve geliştirici teslimini kolaylaştırırken kullanın."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 10.759 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

ui-design-system Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Üreticiyi çalıştırmak için neye ihtiyacım var?

Bir hex marka rengi ve bir stil seçimi, çıktı biçimiyle birlikte doğrudan komut satırında geçirilir. Dosya, CSS çıktısıyla klasik bir palet gibi çağrılar gösterir, dolayısıyla önceden başka bir şeyin yapılandırılmasına gerek yoktur.

Hangi çıktı biçimlerini alabilirim?

JSON varsayılan biçimdir ve aynı script CSS özel özelliklerini, SCSS değişkenlerini veya bir özet görünümü de yazabilir. Örnekler, doğrudan içe aktarılabilmesi için SCSS çıktısını bir partial dosyaya yönlendirir.

Figma senkronizasyonu nasıl çalışır?

Tokens Studio eklentisini kurar ve oluşturulan JSON'u içe aktarırsınız; bunun sonrasında token'lar Figma stilleriyle otomatik olarak senkronize olur. Aynı teslim iş akışı React, Tailwind ve styled-components entegrasyonunu da kapsar.

Hangi kontrast seviyesine göre çalışır?

Referans tablo hem AA hem de AAA'yı tanımlar: AAA, normal metin için 7:1 ve büyük metin için 4.5:1 gerektirirken, AA daha hafif olan 4.5:1 ve 3:1 hedefine sahiptir. Büyük metin, en az 18pt normal veya 14pt kalın anlamına gelir.

UI Design System

Gerçek bir Marka ve design-system Çalışma Görevi üzerinde ui-design-system çalıştırın.

OpenDesign'ı indirin, ui-design-system'ı SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın