design-system-patternsyazan Seth Hobson

Design System Patterns Skill.

Marka ve tasarım sistemi çalışmaları için bir Claude Code ve Codex skill'i: ölçeklenebilir tasarım sistemleri: token'lar, tema altyapısı, bileşen mimarisi.

Brand & Design Systems
Tasarım sistemi

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

wshobson/agents · plugins/ui-design/skills/design-system-patterns/SKILL.mdSKILL.md

--- name: design-system-patterns description: Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations. --- ## When to Use This Skill ## Core Capabilities ## Quick Start ## Detailed patterns and worked examples ## Best Practices

Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okundu · tam hali 4.003 karakter

01 Ne yapar

design-system-patterns Skill'in Claude Code ve Codex'te Yaptığı

Ö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

Bu skill, tasarım token'ları, tema altyapısı ve bileşen mimarisi kalıplarıyla ölçeklenebilir tasarım sistemleri oluşturur. Ham değerler için primitif token'lar, bağlamsal anlam için semantik token'lar ve belirli kullanım için bileşen token'ları olmak üzere üç katmanlı token hiyerarşileri oluşturur; ardından CSS özel özellikleri ve React context provider'larıyla tema değiştirmeyi uygular.

Skill; CSS, iOS ve Android için çok platformlu token üretimini ele alır, Style Dictionary ile Figma-to-code iş akışları kurar ve bileşik bileşenler, polimorfik bileşenler, varyantlar, slot'lar ve headless UI kalıpları kullanarak bileşen kütüphaneleri tasarlar. prefers-color-scheme ve azaltılmış hareket modları gibi sistem tercihlerini algılar.

Neler üretir

CSS, iOS ve Android için üretilmiş çok platformlu token dosyaları
Varyant ve boyut sistemli bileşen kütüphaneleri
Tasarım sistemi dokümantasyonu ve kılavuzları

Örnek istemi görün ↗

Nasıl Çalışır

01
Primitif Token'ları Tanımlayın
Temel katmanı oluşturan renkler, boyutlar ve fontlar için ham değer token'ları oluşturun. Bunlar hex kodları ve piksel ölçüleri gibi literal değerlerdir.
02
Semantik Token Katmanını Oluşturun
Görsel açıklamadan çok anlam taşıyan text-primary, surface-elevated ve border-default gibi bağlamsal token'lar oluşturmak için primitif token'lara referans verin.
03
Bileşene Özgü Token'lar Oluşturun
Semantik token'lara referans veren button-bg ve card-border gibi belirli bileşen kullanımları için token'lar tanımlayın.

02 Uyumunuzu bulun

design-system-patterns Skill Ne Zaman Kullanılır

Bu tür marka ve tasarım sistemi işlerinde Claude Code veya Codex'te design-system-patterns skill'ini kullanın. Uygunluk ve sınırlamalar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Renkler, tipografi, aralık ve gölgeler için design token'ları oluşturma
CSS özel özellikleriyle açık/koyu tema değişimini uygulama
Çok markalı temalama sistemleri oluşturma
Tutarlı API'lerle bileşen kütüphaneleri tasarlama
Figma token'ları ile tasarımdan koda iş akışları kurma

Sınırları Bilin

Token'ların web için var olup mobil için (veya tersi) olmadığı platform boşlukları

03 Skill'in içinde

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

1 ajan için SKILL.md'nin belirlediği somut talimatlar, varsayılanlar ve sınırlar — sonucu değiştiren kısım budur.

Token'ları Semver ile Sürümleyin
Token değişikliklerini API değişiklikleri gibi ele alın ve semantic versioning kullanın. Token değişiklikleri, tüketen uygulamaları API değişiklikleriyle aynı şekilde etkiler.

04 İşe koyun

Claude Code veya Codex'e design-system-patterns yükleyin

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

design-system-patterns'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/wshobson/agents --skill design-system-patterns

plugins/ui-design/skills/design-system-patterns/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

Build a design token system for [our SaaS dashboard] with light and dark themes. Create the three-tier token hierarchy (primitive, semantic, component) for colors, typography, and spacing. Implement CSS custom properties and a React theme context provider with system preference detection and persistent storage. Generate tokens for both web and React Native using Style Dictionary, and set up the compound component pattern for our Button and Card components with size and variant props.

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

İlk Sonucu Kontrol Edin

Çıktıyı kabul etmeden önce, transkript ve dosyalarda bunları arayın:

Sonuç, bu skill için katalogda listelendiği gibi Tasarım sistemi olarak teslim edilir.
Ajan, sonucu üretmeden önce planında veya transkriptinde design-system-patterns skill'ini adlandırır.
Kendi içeriğiniz, isimleriniz ve numaralarınız çıktıda değişmeden görünür.

OpenDesign'da design-system-patterns'ı 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: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill dosyası: plugins/ui-design/skills/design-system-patterns/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm wshobson/agents deposu için alınmıştır; bu depoda katalogda yer alan 18 skill bulunmaktadır. design-system-patterns 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 dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Bu Skill Ne Zaman KullanılırTasarım token'ları, temalandırma, çoklu marka sistemleri, bileşen kütüphaneleri ve Figma iş akışları için senaryoları listeler
Temel YeteneklerTasarım token'ları, temalandırma altyapısı, bileşen mimarisi ve token pipeline yeteneklerini ayrıntılandırır
Tasarım Token'larıİsimlendirme kuralları ve çoklu platform üretimiyle birlikte ilkel, semantik ve bileşen token katmanlarını tanımlar
Temalandırma AltyapısıCSS custom properties, React context, dinamik geçiş, sistem tercihleri ve erişilebilirlik modlarını kapsar
Bileşen MimarisiBileşik bileşenleri, polimorfik desenleri, varyantları, slot'ları, headless UI'yi ve style prop'larını açıklar
Token PipelineFigma senkronizasyonunu, Style Dictionary yapılandırmasını, dönüşümleri ve CI/CD entegrasyonunu açıklar
Hızlı BaşlangıçCSS custom properties ile ilkel ve semantik token yapısına dair TypeScript örneği sunar
En İyi UygulamalarYedi kuralı listeler: semantik isimlendirme, hiyerarşi, dokümantasyon, sürümleme, test, otomasyon, geçiş
Sık Görülen SorunlarToken dağınıklığına, isimlendirme tutarsızlığına, eksik karanlık moda, sabit kodlanmış değerlere, döngüsel referanslara ve platform boşluklarına karşı uyarır

Skill'in Kendi Açıklaması

"Design token'ları, temalama altyapısı ve bileşen mimari desenleri ile ölçeklenebilir tasarım sistemleri oluşturun. Design token'ları oluştururken, tema değiştirmeyi uygularken, bileşen kütüphaneleri oluştururken veya tasarım sistemi temelleri kurarken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 4.003 karakterdir. Dosyanın tamamını GitHub'da okuyun.

Tasarım Sistemi Kalıpları

Gerçek Bir Marka ve Tasarım Sistemi Çalışması Görevinde design-system-patterns'ı Çalıştırın.

OpenDesign'ı indirin, design-system-patterns'ı 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