design-systemyazan Alireza Rezvani

Design System Skill.

Claude Code ve Codex için marka ve tasarım sistemi skill'i: sonraki dokümanlar ve sunumlar için marka kimliğini 10 soruluk bir sihirbaz aracılığıyla yakalar.

Brand & Design Systems
Tasarım sistemi

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

alirezarezvani/claude-skills · markdown-html/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast against WCAG 2.2 AA, derives 12 CSS custom properties in HSL space, and stores the result for every markdown-html … --- ## When to invoke ## Onboarding question set (10 questions) ## Hard rules ## Derived 12-token palette ## Forcing-question library (Matt Pocock grill-with-docs pattern) ## Customization in use (worked example)

Başlık bilgileri ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okunmuştur · tam hali 11.234 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

design-system skill'i, markdown-html eklentisinin ortak marka sahibidir. Marka kimliğini 10 soruluk bir onboarding sihirbazı aracılığıyla bir kez yakalar — birincil ve vurgu HEX değerleri, başlık ve gövde Google Fonts, bir tasarım stili (editoryal, teknik, minimal veya oyunbaz), varsayılan çıktı dizini, kod teması, TOC davranışı ve isteğe bağlı bir şirket adı ve logo — ardından gövde metni ve bağlantı kontrastını WCAG 2.2 AA'ya karşı doğrular ve HSL uzayında 12 CSS özel özelliği türetir.

Yalnızca stdlib kullanan üç Python aracı; onboarding, config yükleme ve palet doğrulamasını yönetir. Öncelik sırası: proje > global > yerleşik varsayılanlar. Her dönüştürücü (md-document, md-review, md-slides) kaydedilmiş config'i okur; bu nedenle bir token'ı değiştirmek, oluşturulan her belgeyi değiştirir.

Neler üretir

Markayı ve türetilmiş paleti tutan, global olarak veya projeye yazılan bir config dosyası.
Her dönüştürücünün stil bloğuna satır içi olarak eklenen on iki CSS özel özelliği; --md-surface, --md-border, --md-link ve --md-warn gibi.
Doğrulama için varlık olarak sunulan, config için bir JSON şeması.

Örnek istemi görün ↗

Nasıl Çalışır

01
Onboarding'i Bir Kez Çalıştırın
Bu skill, markdown-html eklentisi için ortak marka sahibidir: md-document, md-review ve md-slides, yazdığı config'i kullanır; dolayısıyla tek bir çalıştırma her dönüştürmeyi markalar.
02
On Soruyu Yanıtlayın
Sihirbaz default_output_dir, birincil ve vurgu HEX renklerini, başlık ve gövde fontlarını, design_style, code_theme, toc.behavior ile isteğe bağlı company_name ve logo_url değerlerini kaydeder.
03
Doğrulamanın Kaydı Kapıdan Geçirmesine İzin Verin
brand_palette_validator.validate() her değişiklikten sonra çalışır; bu nedenle çift, yalnızca sihirbazın sonunda değil, her alan düzenlemesinde yeniden kontrol edilir.
04
On İki Token'ı Türetin
derive_palette(), --md-surface gibi token'ları bg artı veya eksi %4-6 parlaklık olarak ve --md-text-muted'i rgba(text, 0.68) olarak hesaplar; ve bunları aynı config dosyasındaki derived_palette altında saklar.
05
Config'i Önceliğe Göre Çözümleyin
config_loader.py, her dönüştürücünün render öncesinde çağırdığı içe aktarılabilir yükleyicidir; proje, ardından global, ardından yerleşik varsayılanları birleştirir ve bypass ortam değişkenine uyar.
06
Etkileşimsiz Olarak Geçersiz Kılın veya Sıfırlayın
Sihirbazın ötesinde, onboard.py --defaults, --set key=value, --scope project, --show ve --reset alır; böylece marka alanları on soruyu yeniden yanıtlamadan değiştirilebilir veya silinebilir.

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

Birinin markdown'ı HTML'ye ilk kez dönüştürmek istediği, dolayısıyla onboarding'in henüz çalışmadığı bir çalışma alanı.
Çalışmanızın kalanından farklı bir marka gerektiren ve global config'i devralmaması gereken tek bir repo.
On etkileşimli soru yerine sıfır dokunuşlu varsayımlara ihtiyaç duyan CI veya geçici bir oturum.
HTML dönüştürmelerinde tutarlı biçimde uygulanmasını istediğiniz en az bir marka HEX renginiz zaten var.
Aday bir birincil ve vurgu rengini config'e işlemeden önce WCAG'a karşı test etmek istiyorsunuz.

Sınırları Bilin

Style Dictionary veya Theo gibi tam bir tasarım token sistemi değildir; yüz değil, on iki token sunar.
Özel fontları barındırmaz — CDN üzerinden Google Fonts, tek tipografi kaynağıdır.
Bir erişilebilirlik denetim paketi değildir; bunu axe-core veya pa11y kapsar, bu skill yalnızca kontrastı zorunlu kılar.
Mevcut CSS'i dönüştürmez — türetilen palet yalnızca yeni oluşturulan HTML'ye enjekte edilir.

Ne Sağlamalısınız

Varsayılan çıkış diziniYazılabilir olması gereken bir yol; varsayılan değer ./markdown-html-out/ olup yazılamayan veya boş bir değer kaydetmeyi engeller.
Marka birincil HEX^#?[0-9a-fA-F]{6}$ ile doğrulanır; varsayılan #0A1628. Zorlayıcı-soru kütüphanesi, hazır bir mavi değil, zaten kullandığınız bir HEX önerir.
Vurgu HEX veya boşTüretimin eşlik eden bir renk üretmesine izin vermek için ilk çalıştırmada boş bırakın; yalnızca bir marka kiti belirli bir renk belirtiyorsa açıkça ayarlayın.
Başlık ve gövde yazı tipi adlarıHer iki rol için varsayılan olarak Inter ile 12 güvenli varsayılan arasından seçilen Google Font adları.
Opsiyonel şirket adı ve logo URL'siHer ikisi de varsayılan olarak boş dizedir; logo URL'si boş olabilir ve render sırasında base64 olarak gömülür.

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ı.

Kontrast Geçmeli, Aksi Halde Hiçbir Şey Kaydedilmez
Arka plan üzerindeki gövde metni ve arka plan üzerindeki bağlantılar, WCAG 2.2 §1.4.3'e göre 4.5:1'e ulaşmalıdır.
Çıkış Dizini Yazılabilir Olmalıdır
Sihirbaz mevcut bir üst dizine kadar çıkar ve os.access(parent, os.W_OK) kontrolü yapar; boş veya yazılamayan bir yol kod 3 ile çıkar ve output_path_resolver.py her dönüştürme için aynı kuralı uygular.
Özelleştirme Çıkışı Değiştirmelidir
Yalnızca dekoratif alanlar tasarım disiplininde başarısız olur: design_style, brand.primary, code_theme veya toc.behavior değiştiğinde her tüketicinin yapılandırmayı okuyup farklı render etmesi gerekir.
Öncelik Sabittir
Proje yapılandırması genel yapılandırmayı, genel yapılandırma da yerleşik varsayılanları geçersiz kılar; derin birleştirme iç içe geçmiş anahtarları korur, dolayısıyla bir projede brand.primary'yi geçersiz kılmak genel yapılandırmadaki typography.heading_font'u düşürmez.
Atlama Yalnızca Başsız (Headless) Çalıştırmalar İçindir
MARKDOWN_HTML_NO_CONFIG=1, CI, geçici test kapsayıcıları ve değerlendirici döngüleri için hizmet verir; token'larının nereye gittiğini merak edecek etkileşimli bir kullanıcı için bunu sessizce ayarlamayın.
Canlı Bir Birincil Rengi Asla Arka Plan Olarak Kullanmayın
Doygun bir marka birincil renginin doğrudan brand.bg olarak kullanılması düşük metin kontrastı üretir; bunun yerine vurgu yuvasına ait olmalıdır.
12 Token Taksonomisinin İçinde Kalın
Marka semantiği bu on iki token'ın dışında derived_palette içinde kodlanmaz; bir tane eklemek kasıtlı bir ad, amaç ve türetme kuralı gerektirir.

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/alirezarezvani/claude-skills --skill design-system

markdown-html/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

Set up the brand for this repo: primary #FF6B35, Inter for headings and body, editorial style, sticky-sidebar TOC, and save it per-project. Point the default output at [output directory] and then convert [document.md] with md-document so it comes out branded.

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:

Projeyi genelin, genel yapılandırmayı da varsayılanların üzerinde çözümleyen config_loader.py --show ile geçerli yapılandırmayı inceleyin.
Yapılandırma dosyasının var olduğunu ve setup_completed_at'in ayarlandığını doğrulayın; eksik veya null ise dönüştürücü işlemi reddeder ve bunun yerine katılım (onboarding) sürecini gösterir.
Bir markaya karar vermeden önce brand_palette_validator.py --primary ve --accent ile aday bir çift için kontrastı hızlıca denetleyin.
Yalnızca DEFAULTS döndüren MARKDOWN_HTML_NO_CONFIG=1 ile çalıştırarak bypass'ın belgelendiği gibi davrandığı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.

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ı: markdown-html/skills/design-system/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 19392f7
License: MIT LICENSE dosyasından; SKILL.md "MIT" belirtiyor.
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ınmıştır; bu depoda bu katalogdaki 5 skill bulunur. 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 çağrılırBelirti-eylem tablosu: onboard, dönüştürmeyi reddetme, proje kapsamı, tek alan kümesi, sıfırlama, varsayılanlar, bypass.
Onboarding soru kümesi (10 soru)Çıkış dizininden logo URL'sine kadar on anahtarın, doğrulayıcıların ve varsayılanların tablosu.
Kesin kurallarBeş numaralı kural: WCAG AA eşiği, yazılabilir dizin, gerçek özelleştirme, sabit öncelik, bilinçli bypass.
Türetilmiş 12 token'lı paletHer CSS custom property'yi amacına ve HSL türetme kuralına eşleyen tablo.
Zorlayıcı soru kitaplığı (Matt Pocock grill-with-docs deseni)Önerilen yanıtlar ve kanon alıntılarıyla birlikte tur başına bir soru olan beş soru.
Kullanımda özelleştirme (işlenmiş örnek)Onboarding, varsayılanlar, ayarlama, proje kapsamı, sıfırlama, gösterme ve bypass'ı gösteren Bash bloğu.
VarsayımlarDört ön koşul: bir marka HEX'i, bir-iki dakikalık kurulum, Google Fonts, WCAG AA eşiği.
Hedef olmayanlarNe olmadığı: token sistemi, font barındırma, karanlık mod anahtarı, denetim paketi, CSS dönüştürücü.
Şundan ayrıBu doğrulayıcı ve onboarding betiğini, landing ve klinik araştırma sürümleriyle karşılaştırır.
Çıkış ürünüGlobal ve proje JSON yollarını ve şema varlığını adlandırır.
Anti-pattern'ler (yapmayın)Kaçınılması gereken dört hata: onboarding'i atlama, canlı renkli arka plan, sessiz bypass, taksonomi dışı token'lar.
ReferanslarWCAG maddeleri, tipografi ve renk kitapları, TOC rehberliği, kardeş betikler.

Skill'in Kendi Açıklaması

"Kullanıcının marka kimliğini 10 soruluk bir başlangıç sihirbazı aracılığıyla bir kez yakalar (birincil/vurgu HEX + başlık + gövde Google Fonts + tasarım stili editorial/technical/minimal/playful + varsayılan çıktı dizini + sözdizimi teması + İçindekiler davranışı + isteğe bağlı logo/şirket), gövde metni ve bağlantı kontrastını WCAG 2.2 AA'ya göre doğrular, HSL uzayında 12 CSS özel özelliği türetir ve sonucu her markdown-html dönüştürücüsünün kullanması için saklar. Herhangi bir markdown-html dönüşümünden önce kullanın. İlk çalıştırma başlangıcında ("markayı kur", "markdown-html'i yapılandır", "başlangıcı çalıştır"), açık sıfırlamada ("tasarım sistemini sıfırla", "yeniden başlat") tetiklenir ve render etmeden önce her dönüştürücü tarafından config_loader.py aracılığıyla kontrol edilir. Gövde metni kontrastı AA 4.5:1'i geçmezse veya çıktı dizini yazılabilir değilse kaydetmeyi reddeder. Öncelik proje (./.markdown-html/) > global (~/.config/markdown-html/) > yerleşik varsayılanlar; MARKDOWN_HTML_NO_CONFIG=1 atlar."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 11.234 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.

Herhangi bir şeyi dönüştürmeden önce onboarding'i bitirmem gerekiyor mu?

Dönüştürücüler config_loader.py üzerinden yapılandırmayı kontrol eder ve eksikse veya setup_completed_at null ise dönüştürme reddedilir ve onboarding devreye girer. Kurulumu tamamlayana kadar çıktı, yer tutucu varsayılanlarla oluşturulur: teknik olarak işlevsel ama markasız.

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