Kullanım kılavuzuna geç
design-systemyazan Anthropic

Design System Skill.

Marka ve tasarım sistemi çalışmaları için bir Claude Code ve Codex skill'i: mevcut bir tasarım sistemini denetler, belgeler veya genişletir.

  • Brand & Design Systems
  • Tasarım sistemi
anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md
--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document
Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 5.552 karakter

01 Ne yapar

design-system Skill Claude Code ve Codex'te 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

Mevcut bir tasarım sistemi üzerinde üç modda çalışmaya yönelik bir slash-command skill'i: audit, document veya extend. Audit geçişi adlandırma tutarlılığını, token kapsamını ve bileşen bütünlüğünü raporlar ve sistemi 100 üzerinden puanlar. Document modu; açıklama, varyantlar, props, durumlar, erişilebilirlik ve yapılması/yapılmaması gerekenler içeren bir bileşen spesifikasyonu üretir.

Extend modu, sistemin mevcut bileşenlerine kıyasla yeni bir bileşen veya desen önerir, kullanacağı tokenları ve gündeme getirdiği açık soruları listeler. Tasarım tokenlarını, bileşenleri ve desenleri kapsar ve bağlıysa bir tasarım aracına veya bilgi tabanına erişebilir. Okuyucular, bir sistemi tutarlı tutan tasarımcılar ve geliştiricilerdir.

Neler üretir

  • Öncelikli eylemlerin sıralandığı bir tasarım sistemi audit raporuyla sona erer
  • Özellik, tip, varsayılan değer ve açıklama içeren bir props tablosuyla bileşen dokümantasyonu
  • Çözdüğü problemle açılan yeni bir bileşen önerisi
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Modu Argümandan Seçin

    Komut, bir mod ve bir hedef alır: tüm sistemi audit edin veya tek bir bileşeni ya da deseni document veya extend üzerinden çalıştırın.

  2. 02
    Audit'i Üç Eksende Çalıştırın

    Audit; adlandırma tutarlılığını, sabit kodlanmış değerlere karşı sayılan token kapsamını ve her bileşenin ne kadar tam olduğunu kontrol eder, ardından öncelikli eylemleri belirtir.

  3. 03
    Bileşen Spesifikasyonunu Yazın

    Document modu; açıklama, varyantlar, tipler ve varsayılanlarla props, durumlar, erişilebilirlik ve bir Yapılması/Yapılmaması Gerekenler tablosundan oluşan bir şablonu doldurur.

  4. 04
    Genişletmeyi Mevcut Olana Göre Önerin

    Extend modu, yeni fikri ilgili bileşenlerle karşılaştırır, ardından bir API, varyantlar, durumlar ve bileşenin kullanacağı tam tokenları önerir.

  5. 05
    Bağlı Araçlar Varsa Onlardan Veri Çekin

    Bir tasarım aracı bağlıyken skill, dokümantasyon için bileşen özelliklerini ve katman yapısını çekebilir; Figma'da adlandırmayı, varyantları ve token kullanımını kontrol edebilir.

02 Uyumunuzu bulun

design-system Skill Ne Zaman Kullanılır

Bu tür marka ve tasarım sistemi işlerinde design-system 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

  • Bileşenlerinize adlandırma tutarsızlıklarının veya sabit kodlanmış değerlerin sızdığından şüpheleniyorsunuz.
  • Bir bileşen için varyantlarını, durumlarını ve erişilebilirlik notlarını kapsayan dokümantasyona ihtiyacınız var.
  • Yeni bir bileşen veya desen tasarlıyorsunuz ve bunun mevcut sisteminize uymasını istiyorsunuz.
  • Bağlı bir bilgi tabanı kullanarak, daha fazla yazmadan önce skill'in zaten belgelenmiş olanı kontrol etmesini istersiniz.

Sınırları Bilin

  • Sistemin zaten sağladığını tekrarlayan tek seferlik bileşenler, sisteme sahip olmanın amacını ortadan kaldırır.
  • Bir genişletme önerisi zor kararları çözmez: hâlâ tasarım incelemesi gerektiren kararlarla sonuçlanabilir.
  • Bileşenleri doğrudan Figma'dan okumak, yalnızca bir tasarım aracı bağlayıcısı mevcut olduğunda gerçekleşir.

Ne Sağlamalısınız

  • Mod ve hedefiKomuta bir mod ve uygulandığı bileşeni, deseni veya sistemi verin, böylece skill hangi şablonu dolduracağını bilir.
  • Karşılaştırma için mevcut bileşenlerinizBir genişletme önerisi, ilgili bileşenleri neyi paylaştıkları ve bunun neden yeterli olmadığı konusunda karşılaştırır, bu nedenle bu benzer bileşenlerin bilinmesi gerekir.

03 Skill'in içinde

Tasarım sistemi 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ı.

  1. Bir Standarda Karşı Adlandırma Kaymasını Raporlayın

    Adlandırma tutarsızlıkları sadece işaretlenmez: her satır ilgili bileşenleri ve benimsenecek standardı belirtir.

  2. Sabit Kodlanmış Değerleri Gözle Kontrol Etmeyin, Sayın

    Token kapsamı, tanımlanmış bir sayıyı bulunan örnek sayısıyla karşılaştırır; örneğin sabit kodlanmış hex değerleri, rastgele boşluk değerleri veya özel yazı tipleri ve boyutları.

  3. Her Şeyi Belgeleyin

    Bir bileşen, varyant veya kural yazılı değilse, skill onu var olmayan olarak kabul eder.

  4. Kısıtlamalar İçinde Esnek Kalın

    Bileşenler katı olmak yerine birleştirilebilir olmalıdır, böylece desen seti terk edilmeden bükülür.

  5. Kırıcı Değişiklikleri Sürümleyin

    Herhangi bir kırıcı değişiklik, sadece bir değiştirme bileşeniyle değil, bir geçiş yoluyla birlikte gelmelidir.

  6. Bir Denetimle Başlayın

    Varsayılan giriş noktası, herhangi bir şeyi belgelemeden veya genişletmeden önce sistemin nerede durduğuna ilişkin bir denetimdir.

  7. Kapsam Mükemmelliğe Üstün Gelir

    Bileşenlerin yüzde sekseninin belgelenmesi, 10 bileşeni kusursuz şekilde yapmaktan daha iyi kabul edilir.

04 İşe koyun

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

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

design-system'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/anthropics/knowledge-work-plugins --skill design-system

design/skills/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
Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

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:

  • Denetim özetini okuyun: incelenen bileşenler, bulunan sorunlar ve 100 üzerinden bir puan.
  • Bileşen başına eksiksizlik tablosunu kontrol edin, çünkü durumlar, varyantlar ve belgeler ayrı ayrı işaretlenir ve puanlanır.
  • Belgelenen bileşen için erişilebilirlik bloğunun doldurulduğunu onaylayın.
  • Bir uzantıda, incelemeye gitmeden önce durumlar tablosunun varsayılan, hover ve devre dışı davranışları kapsadığını doğrulayın.

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

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
Anthropic
Skill dosyası
design/skills/design-system/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 8f877b6
License
Apache-2.0 LICENSE dosyasından.
Repository yıldızları
24.012 GitHub anlık görüntüsü, bu katalogda 7 skill içeren anthropics/knowledge-work-plugins deposunun tamamı için 2026-09-14 tarihinde alındı. 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

  1. KullanımÜç çağırma biçimi: sistemi denetleyin, bir bileşeni belgeleyin, bir deseni genişletin.
  2. Bir Tasarım Sisteminin BileşenleriAlt parçaları, durumları ve ARIA konularıyla birlikte tasarım token'larını, bileşenleri ve desenleri tanımlar.
  3. İlkelerYaratıcılık yerine tutarlılık, kısıtlar içinde esneklik, her şeyi belgeleyin, sürümleyin ve göç edin.
  4. Çıktı — DenetimDenetim şablonu: özet puan, adlandırma tutarlılığı, token kapsamı, eksiksizlik, öncelikli eylemler.
  5. Çıktı — BelgelemeBileşen şablonu: açıklama, varyantlar, prop'lar, durumlar, erişilebilirlik, yapılması ve yapılmaması gerekenler, kod örneği.
  6. Çıktı — GenişletmeYeni bileşen şablonu: sorun, ilgili desenler, API, varyantlar, durumlar, token'lar, açık sorular.
  7. Bağlayıcılar VarsaDenetleme, belgeleme ve yayınlama için isteğe bağlı tasarım aracı ve bilgi tabanı adımları.
  8. İpuçlarıBir denetimle başlayın, geliştirirken belgeleyin, mükemmellik yerine kapsamı tercih edin.
Skill'in Kendi Açıklaması
"Tasarım sisteminizi denetleyin, belgeleyin veya genişletin. Bileşenler arasında adlandırma tutarsızlıkları veya sabit kodlanmış değerleri kontrol ederken, bir bileşenin varyantları, durumları ve erişilebilirlik notları için dokümantasyon yazarken veya mevcut sisteme uyan yeni bir desen tasarlarken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 5.552 karakterdir. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

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.

Belgeleme gerçekte nereye ulaşıyor?

Çalışma, konuşma içinde markdown şablonları olarak geri döner. Bir bilgi tabanı bağlıysa, skill güncellenen belgeleri wiki'nize de yayınlayabilir.

Bunu tamamen yeni bir şey tasarlamak için kullanabilir miyim?

Extend modu, zaten sahip olduğunuz sisteme uyan yeni bir bileşen veya desen içindir. Soruna ve mevcut desenlerdeki boşluğa odaklanarak başlar, API, varyantlar, durumlar ve token'lar önerir ve hâlâ tasarım incelemesi gerektiren kararlar ve uç durumlarla sona erer.

Farklı modları nasıl çağırırım?

Slash komutunu bir mod ve bir hedefle yazın. Audit tüm sistem üzerinde çalışırken, document ve extend belirli bir bileşen veya deseni alır; örneğin eklemek istediğiniz bir desen için extend formu.

Design System

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

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

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için