Figma tasarım sistemlerini WCAG kontrolleri, bileşen puanlaması ve isteğe bağlı kod senkronizasyonu ile denetleyen ve oluşturan bir Claude becerisi.
work-with-design-systems, kurulum öncesi dokümantasyonu kontrol edilmesi gereken ve güven sinyalleri güçlü bir araç. En iyi sonuç için uyumlu agent ve kullanım senaryosu eşleşmesini kontrol et.
Repository başlangıç yönlendirmesi
npx skills add natdexterra/work-with-design-systemsKomutu terminalde çalıştır.
Skill dosyalarının agent çalışma alanına eklendiğini kontrol et.
Kullanacağın agent içinde skill'i çağırmadan önce README'deki gereksinimleri doğrula.
Bu araç, Figma tasarım sistemleriyle iki şekilde çalışmanızı sağlar. İlk olarak, mevcut tasarımları erişilebilirlik sorunları, adlandırma problemleri ve eksik durumlar açısından denetleyebilirsiniz. İkinci olarak, bileşenler oluşturabilir veya düzeltebilir, slotlar ekleyebilir ve isteğe bağlı olarak her şeyi CSS tokenları ve AI kuralları olarak kod tabanınıza aktarabilirsiniz. Claude Code, Cursor ve Codex ile çalışır.
work-with-design-systems, Figma tasarım sistemlerini yaşam döngüleri boyunca yönetmek için kapsamlı bir Claude becerisidir. İki ana mod sunar: denetleme (salt okunur) ve oluşturma (yazma). Denetleme modunda, token uyumluluğu, etkileşim durumları, WCAG erişilebilirliği, ayrılmış örnekler, adlandırma kalitesi ve bileşen açıklamalarını kapsayan altı denetim modülü çalıştırır. Her bileşene 0-100 arasında ağırlıklı bir hazırlık puanı verilir. Denetlemeden sonra, herhangi bir değişiklik yapmadan önce kararınızı bekler. Oluşturma modunda, bileşenler oluşturmak veya düzeltmek, değişken bağlamaları ve slotlar eklemek ve yapılandırılmış açıklamalar oluşturmak için altı aşamalı bir iş akışı (6. Aşama isteğe bağlı) izler. 6. Aşama, isteğe bağlı olarak, üç katmanlı dolaylı tokens.css, Claude Code/Cursor/Codex için bir AI kuralları dosyası ve CI hazır bir denetim betiği üreterek koda senkronize eder. Beceri, üç dışa aktarma biçimini destekler: markdown, JSON ve kod oluşturma için AI istemi. Ayrıca, Figma'da kompozisyonu belgelemek için bir desen kılavuzu ve Storybook mevcut olduğunda isteğe bağlı hikaye-varyant eşlik kontrolü içerir. Tasarım mühendisleri, ön uç geliştiriciler ve tasarım sistemi bakımcıları için tasarlanmıştır.
Güven sinyalleri güçlü; yine de production kullanımından önce README ve izinleri kontrol et.
Son commit yaklaşık 61 gün önce.
45 GitHub yıldızı topluluk ilgisini gösteriyor.
0 açık issue bakım yükü hakkında sinyal verir.
MIT lisansı görünüyor.
Bir Figma tasarım sistemini teslimattan önce WCAG erişilebilirliği ve bileşen hazırlığı açısından denetleme.
Uygun değişken bağlamaları, slotlar ve yapılandırılmış açıklamalarla yeni bileşenler oluşturma.
Tasarım tokenlarını Figma'dan CSS değişkenlerine ve tutarlı kod üretimi için AI kurallarına senkronize etme.
Bir kütüphanedeki tüm bileşenlerde eksik etkileşim durumlarını (ör. üzerine gelme, basılı) düzeltme.
Geliştiriciler için markdown veya JSON formatında teslimat belgeleri oluşturma.
Oluşturma modu Figma dosyalarına yazar; önce yedek alın veya bir test dosyası kullanın.
6. Aşama kod tabanınızda dosyalar oluşturur; oluşturulan tokenları ve kuralları göndermeden önce inceleyin.
Beceri Figma API tokenlarını kullanır; bunları güvende tutun ve paylaşmayın.
45
Yıldız
4
Fork
0
Açık Sorun
MIT
Lisans
Herhangi bir web sitesinin tüm tasarım sistemini tek komutla çıkarın.
Argos, ekiplerin kaliteyi korumasına yardımcı olan, istenmeyen UI değişikliklerini tespit eden açık kaynaklı bir görsel test platformudur.
UI bileşenleriniz için tasarım sistemi dokümantasyonunu doğrudan AI ajanınızdan oluşturun, Figma veya taşınabilir .md dosyalarına dönüştürün.
Figma tasarım sistemlerini WCAG kontrolleri, bileşen puanlaması ve isteğe bağlı kod senkronizasyonu ile denetleyen ve oluşturan bir Claude becerisi.
Figma ve kod arasında köprü kuran tasarım mühendisleri, Tasarım sistemlerini tüketen ön uç geliştiriciler, Tutarlılığı sağlayan tasarım sistemi bakımcıları
Kurulum bölümü repository düzeyinde başlangıç yönlendirmesi sunar; bağımsız bir kurulum testi garantisi değildir. Resmi README ve sürüm notlarını kontrol edin.
Oluşturma modu Figma dosyalarına yazar; önce yedek alın veya bir test dosyası kullanın. 6. Aşama kod tabanınızda dosyalar oluşturur; oluşturulan tokenları ve kuralları göndermeden önce inceleyin.
Değerlendirilebilecek benzer veya tamamlayıcı araçlar: design-extract, Argos, uSpec.
7 Haz 2026
3 güvenlik/güven notu kayıtlı.
Kurulum zorluğu 3/5.