design-systemyazan nextlevelbuilder

Design System Skill.

Claude Code ve Codex için marka ve tasarım sistemi skill'i: üç katmanlı tasarım token'ları, bileşen spesifikasyonları ve slayt üretimi.

Brand & Design Systems
Tasarım sistemi

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

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations. --- ## When to Use ## Token Architecture ## Script Paths ## Quick Start ## Component Spec Pattern ## Scripts

Üst bilgi ve bölüm başlıkları 2026-09-14 tarihinde üst akış dosyasından okundu · tam halde 7.414 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

Üç katmanlı tasarım token mimarileri (primitive → semantic → component), bileşen spesifikasyonları ve marka uyumlu sunum slaytları üretir. Primitive token'lar --color-blue-600 gibi ham değerleri tanımlar. Semantic token'lar bunları amaca göre takma adlandırır (--color-primary). Component token'lar bileşen başına kullanımı belirtir (--button-bg).

Skill, CSS değişkenleri, Tailwind tema entegrasyonu ve 15 deck yapısı, 25 layout ve Duarte sparkline duygu yayları üzerinde BM25 araması kullanan bağlamsal bir slayt sistemi için üretim ve doğrulama betikleri sağlar. Tüm slaytlar design-tokens.css dosyasını içe aktarmalı ve yalnızca CSS değişkenlerini kullanmalıdır. Veri görselleştirmesi için Chart.js gereklidir. Pexels ve Unsplash görsel getirmeyi destekler.

Neler üretir

Kaynak kodda token'lara referans vermesi gereken sabit kodlanmış değerleri tespit eden token doğrulama raporu

Örnek istemi görün ↗

Nasıl Çalışır

01
Token Mimarisi Referansını Yükle
Skill, token'ları oluşturmadan veya doğrulamadan önce üç katmanlı token yapısını belirlemek için references/token-architecture.md dosyasını yükler.
02
JSON Yapılandırmasından CSS Oluştur
Üç katmanlı token yapısını CSS değişkenleri olarak içeren bir CSS dosyası çıkarmak için generate-tokens.cjs betiğini bir JSON yapılandırma dosyasıyla çalıştırın.
03
Slayt Stratejilerini Hedefe Göre Ara
slide-strategies.csv dosyasından eşleşen deste yapılarını, duygu eğrilerini ve sparkline vuruşlarını bulmak için search-slides.py aracılığıyla BM25 arama kullanın; isteğe bağlı olarak alana (copy veya chart) ve bağlamsal konuma göre filtreleyin.
04
Bağlamsal Karar Akışını Uygulayın
Hedefi ayrıştırın; düzen ve break_pattern bayrağı için slide-layout-logic.csv'yi, tip ölçeği için slide-typography.csv'yi, renk uygulaması için slide-color-logic.csv'yi ve görsel kategorisi için slide-backgrounds.csv'yi sorgulayın.
05
Tasarım Token'larıyla HTML Oluşturun
assets/design-tokens.css'yi içe aktaran, tüm stiller için var() kullanan, grafikler için Chart.js içeren ve slide-animations.css'ten gezinme ile animasyon sınıfları ekleyen slayt HTML'i oluşturun.
06
Token Uyumluluğunu Doğrulayın
Oluşturulan slayt HTML'inin yalnızca CSS değişkenleri kullandığını ve sabit kodlanmış renk, font veya boşluk değeri içermediğini kontrol etmek için slide-token-validator.py'yi çalıştırın.

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

Tema değiştirme ve bileşen özelleştirme için üç katmanlı mimariye sahip tasarım token sistemleri oluşturma
Hover, active ve disabled varyantlarıyla bileşen durum spesifikasyonlarını tanımlama
Bağlamsal düzen seçimi ve duygu eğrisi planlamasıyla marka uyumlu sunum slaytları oluşturma
Bileşen token'larını kullanarak tasarım spesifikasyonlarını Tailwind tema yapılandırmasına dönüştürme
Sistematik boşluk ve tipografi ölçekleriyle tasarımdan koda teslim

Sınırları Bilin

Sabit kodlanmış renk, font veya boşluk değerlerine izin verilmez; tüm stiller design-tokens.css'ten CSS değişkenleri kullanmalıdır

Ne Sağlamalısınız

Marka kuralları belgesidocs/brand-guidelines.md, ilkel token çıkarımını bilgilendiren marka kimliği, ses tonu ve renk tanımlarını sağlar.
Doğrulama için kaynak dizinvalidate-tokens.cjs'nin token kullanması gereken sabit kodlanmış değerleri taramak için tarayacağı proje dizin yolu.

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 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Bileşenlerde Ham Hex Kullanmayın
Bileşenler her zaman CSS değişkenleri aracılığıyla token'lara başvurmalı, renk değerlerini asla doğrudan sabit kodlamamalıdır.
Tüm Slaytlar design-tokens.css'yi İçe Aktarmalıdır
Her slayt HTML dosyası, tek gerçek kaynak olarak assets/design-tokens.css'yi içe aktarmalı ve tüm stil özellikleri için var() kullanmalıdır.
Veri Görselleştirmesi İçin Chart.js Kullanın
Grafikler, sadece CSS tabanlı çubuklar veya başka yaklaşımlarla değil, Chart.js (sürüm 4.4.1 veya sonrası) ile oluşturulmalıdır.
Betik Yolları SKILL.md Dizinine Göre Bağıntılıdır
scripts/generate-tokens.cjs gibi betik yolları, proje köküne göre değil, SKILL.md'yi içeren dizine göre bağıntılıdır.
Opaklık Kontrolü için HSL Formatı Kullanın
Token değerleri, token tanımlarını çoğaltmadan opaklık ayarlarını mümkün kılmak için HSL renk formatını kullanmalıdır.
1/3 ve 2/3 Konumlarında Desen Kırılmaları
Premium sunumlar, Duarte sparkline yöntemini takip ederek deste konumunun 1/3 ve 2/3'ünde hesaplanan desen kırılmalarıyla 'What Is' (hayal kırıklığı) ve 'What Could Be' (umut) duyguları arasında geçiş yapar.
Slaytlar İkna Odaklı Olmalıdır
Oluşturulan tüm slaytlar gezinme (klavye ok tuşları, tıklama, ilerleme çubuğu) içermeli, içeriği ortaya hizalamalı ve ikna veya dönüşüm hedeflerine odaklanmalıdır.
Her Token'ın Amacını Belgeleyin
Her token tanımı, sistemdeki amaçlanan amacını açıklayan belgeleri içermelidir.

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/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

.claude/skills/design-system/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk Marka ve Tasarım Sistemi İş Görevini Verin

Bu isteği kendi içeriğiniz ve kısıtlamalarınızla uyarlayın, ardından Claude Code veya Codex'te çalıştırın.

Example prompt

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Kaynak: SKILL.md örneği (birebir).

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Chart.js script etiketinin mevcut olduğunu ve grafiklerin yalnızca CSS render'ı değil Chart.js kurucusunu kullandığını doğrulayın
Bileşen özelliklerinin varsayılan, üzerine gelme, aktif ve devre dışı sütunlarıyla durum tablosu desenini takip ettiğini kontrol edin
Özellik eksiksizliği için assets/designs/slides/claudekit-pitch-251223.html adresindeki referans uygulamayı inceleyin

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.

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: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill dosyası: .claude/skills/design-system/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 7f69fed
License: MIT LICENSE dosyasından; SKILL.md "MIT" diyor.
Repository yıldızları: 127.450 GitHub anlık görüntüsü 2026-09-14 tarihinde, 7 skill içeren nextlevelbuilder/ui-ux-pro-max-skill deposunun tamamı için alınmıştır. design-system 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

Ne Zaman KullanılırTasarım token'ları, bileşen özellikleri, CSS değişkenleri, aralık ölçekleri, tasarımdan koda teslim, Tailwind yapılandırması, slayt oluşturma
Token MimarisiÜç katmanlı yapı: ilkel ham değerler, anlamsal amaç takma adları, CSS değişken örnekleriyle bileşene özgü token'lar
Script YollarıScript yolları SKILL.md dizinine göredir; dosya erişimi için çalışma dizini proje köküdür
Hızlı BaşlangıçJSON yapılandırmasından token oluşturmak ve kaynak dizinlerinde token kullanımını doğrulamak için komutlar
ReferanslarMimari, ilkel/anlamsal/bileşen token'ları, özellikler, durumlar, varyantlar, Tailwind entegrasyonunu kapsayan yedi referans dosyası
Bileşen Özellik DeseniBileşen özelliklerini varsayılan, üzerine gelme, aktif, devre dışı durumlarında tanımlamak için tablo yapısı
Script'lerBeş script: token oluşturma, doğrulama, BM25 slayt arama, slayt token doğrulama, görsel getirme
ŞablonlarÜç katmanlı token yapısına sahip başlangıç JSON şablonu
EntegrasyonMarka ilkelerini çıkarır, bileşen token'larını Tailwind'e besler; brand ve ui-styling skill'lerine bağlıdır
Slayt SistemiTasarım token'ları, Chart.js, bağlamsal karar CSV'leri, BM25 arama kullanan marka uyumlu sunumlar
Tek Doğruluk KaynağıMarka kılavuzları, design-tokens.json ile .css ve slide-animations.css tüm slayt stilini tanımlar
Slayt Arama (BM25)Alan filtreleri ve bağlamsal parametrelerle (konum, toplam, önceki duygu) hedefe göre slayt şablonlarını arayın

Skill'in Kendi Açıklaması

"Token mimarisi, bileşen spesifikasyonları ve slayt oluşturma. Üç katmanlı tokenlar (ilkel→anlamsal→bileşen), CSS değişkenleri, boşluk/tipografi ölçekleri, bileşen spesifikasyonları, stratejik slayt oluşturma. Tasarım tokenları, sistematik tasarım, marka uyumlu sunumlar için kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 7.414 karakterdir. Dosyanın tamamını 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.

Bu skill'i hangi ajanlar kullanmalı?

Skill, birincil ajanlar olarak ui-ux-designer ve frontend-developer'ı belirtir. Marka renklerinden ve tipografisinden primitifleri çıkarmak için brand skill ile ve bileşen token'larını Tailwind config'e beslemek için ui-styling skill ile entegre çalışır.

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.

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

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

design-system Skill Claude Code ve Codex'te Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

design-system Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

Tasarım sistemi Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Bileşenlerde Ham Hex Kullanmayın

Tüm Slaytlar design-tokens.css'yi İçe Aktarmalıdır

Veri Görselleştirmesi İçin Chart.js Kullanın

Betik Yolları SKILL.md Dizinine Göre Bağıntılıdır

Opaklık Kontrolü için HSL Formatı Kullanın

1/3 ve 2/3 Konumlarında Desen Kırılmaları

Slaytlar İkna Odaklı Olmalıdır

Her Token'ın Amacını Belgeleyin