create-design-mdyazan Julien Thibeaut

Create Design MD Skill.

Marka ve tasarım sistemi çalışmaları için Claude Code ve Codex skill: mevcut bir ürün deposundan veya genel web sitesinden DESIGN.md oluşturur veya günceller.

Brand & Design Systems
DESIGN.md

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

ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md

--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okunmuştur · tam hali 16.176 karakter

01 Ne yapar

create-design-md 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

Mevcut bir ürünü yazılı bir tasarım sözleşmesine dönüştürür. Depo (repository) modunda, yerel bir ürünün token'larını, temalarını, paylaşılan ilkellerini ve render edilen route'larını denetler ve DESIGN.md'yi o ürünün köküne yazar; URL modunda, masaüstü ve mobil genişliklerde DOM, hesaplanmış stiller ve yüklenen stil sayfalarından bir taslak yeniden oluşturur.

Her iki mod da tek bir kanıt hattını paylaşır — rol, değer, kaynak, kapsam, tekrarlanma, güven düzeyi — ve css-tailwind, json-tailwind veya dtcg dışa aktarma hedefleriyle tek bir düz token şemasını paylaşır. Değerler yalnızca yönetici bir kaynak onları adlandırırsa veya üç kanıtlı bir eşikten geçerlerse hayatta kalır; belge, lint ve export başarılı olana kadar yayınlanmaz. DESIGN.md dışında hiçbir şeyi değiştirmez.

Neler üretir

URL modunda geçerli çalışma alanına yazılan, taslak olarak etiketlenmiş yeniden oluşturulmuş bir DESIGN.md taslağı.
Modu ve denetlenen ürünü veya URL'yi, kullanılan yönetici kaynakları ve belgeden çıkarılan çatışmaları veya desteklenmeyen alanları listeleyen bir rapor.
Belge geri verilmeden önce her ikisinin de başarılı olması gereken son lint ve export sonuçları.

Örnek istemi görün ↗

Nasıl Çalışır

01
Modu Seçin
Yerel bir ürün deposu mevcut olduğunda depo modu, DESIGN.md'yi o ürünün köküne yazar; yalnızca genel bir URL verildiğinde URL modu, geçerli çalışma alanında yeniden oluşturulmuş bir taslak üretir.
02
Kanıt Toplayın ve Kaynağı Kaydedin
Her aday, herhangi bir şey normalleştirilmeden önce kaynağı, kapsamı ve tekrarlanmasıyla kaydedilir, böylece her iki mod da aynı kayıt hattını besler.
03
DESIGN.md Şemasına Normalleştirin
Belirsiz olan, sözleşmesi olmadan yerel olan veya uygulamayla ilgisi olmayan adaylar elenir; kalanlar kanonik düz token şemasına eşlenir.
04
Taslağı Doğrulamanın Ardına Kilitleyin
Markdown, ayrıştırılmış frontmatter şekil kontrollerinden geçtikten sonra yazılır; böylece düz metin önce taslak haline getirilip sonra YAML'a uydurulmaz.
05
Lint ve Export
Önce yapısal lint çalışır, ardından seçilen hedefte tek bir uyumluluk export'u yapılır ve doldurulan her kategori çıktıda görünmelidir.
06
Modu, Kaynakları ve Boşlukları Raporlayın
Rapor; modu ve denetlenen ürünü veya URL'yi, kullanılan yönetici kaynakları, desteklenmediği için çıkarılan her şeyi ve lint ile export sonuçlarını adlandırır.

02 Uyumunuzu bulun

create-design-md Skill Ne Zaman Kullanılır

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

İyi Uyum

Bir arayüzün tasarım dilini belgelemek ve kod tabanındaki mevcut kanıtlardan görsel sistemini yeniden oluşturmak.
Kodlama ajanlarına, her görevde tasarım kararlarını tekrarlamak yerine kalıcı UI bağlamı vermek.
Kaynağı bulunmayan genel bir site; DOM, hesaplanmış stiller ve yüklenen CSS'den yeniden oluşturulmuş bir taslağın kabul edilebilir olduğu durum.

Sınırları Bilin

Belgelenen tasarıma uydurmak için ürün kaynağını, bağımlılıkları veya yapılandırmayı düzenlemek — kapsamda yalnızca DESIGN.md dosyası vardır.
Canlı bir web sitesinden dahili token adlarını, bileşen sahipliğini veya belgelenmemiş niyeti okumak: URL kanıtı bunları belirleyemez.
Render edilmiş tarayıcı incelemesi olmadan çalışmak; metinden veya HTML'den çıkarım yapmak yerine ekran görüntüleri veya kaynak dosyaları talep edilmelidir.
Bulunan her token veya bileşeni dökmek — eksiksiz envanterler açıkça kapsam dışıdır.

Ne Sağlamalısınız

Repo birden fazla ürün barındırıyorsa hangi ürünKullanıcı belgelenecek dağıtılabilir ürünü belirtmelidir; sahiplik belirsizse skill yazmadan önce sorar.
Genel bir URL ile render edilmiş tarayıcı erişimiURL modu, DOM'u, hesaplanmış stilleri ve masaüstü ve mobil genişliklerde genel olarak yüklenen stil sayfalarını inceler; yalnızca ekran görüntüleri kesin değerleri belirlemek için yeterli değildir.
Varsa varsayılan dışı bir dışa aktarma hedefiKullanıcı başka bir hedef belirtmedikçe URL çıkışı varsayılan olarak css-tailwind'dir, çünkü token adları bu hedef için geçerli kalmalıdır.

03 Skill'in içinde

create-design-md Skill'in 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ı.

Sadece Belgeye Dokun
Repository modu ürün kaynağını, bağımlılıkları, yapılandırmayı veya oluşturulan dosyaları değiştirmemeli ve kazara ortaya çıkan uygulama kalıplarını tasarım kararlarına dönüştürmemelidir.
Repository Kanıtını Öncelikli Tut
Kaynak mevcut olduğunda repository modu seçilir; sağlanan bir URL render edilmiş sunumu doğrulayabilir ama repository kanıtının yerini asla almaz.
Tek Şema, Sadece Mapping Şekilleri
Token grupları her zaman mapping'dir, asla sequence değildir ve her iki mod da ikinci bir şema getirmeden aynı düz token adlarını kullanmalıdır.
Yazmadan Önce Dışa Aktarma Hedefini Seç
Tailwind v4 için css-tailwind, Tailwind v3 için json-tailwind ve diğer durumlarda dtcg; token adları seçilen hedef için geçerli olmalıdır.
URL İddiaları için Üç Kanıt
Bir URL modu iddiası gözlem, dayanak ve sonuç gerektirir; herhangi bir kanıt eksikse iddia tahmin edilmek yerine atlanır.
Sadece regex Açısından Geçerli Token Adları Üret
Üretilen her token adı ^[a-zA-Z0-9][a-zA-Z0-9-]*$ ile eşleşmelidir; bu kurala uymayan her anahtar reddedilir ve yeniden yazılır.
Tek Bir group-level Token'ı Normalize Et
--radius gibi tek bir kaynak token, rounded.base haline gelir; sm, md, lg ve xl asla utility sınıflarından veya tekrarlanan değerlerden türetilmez.
Başarısız Doğrulamada Yayın Yapılmaz
Lint veya export başarısız olduğunda belge asla döndürülmez ve export'ta eksik olan doldurulmuş bir kategori şema hatası olarak değerlendirilir.

04 İşe koyun

Claude Code veya Codex içine create-design-md kurun

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

Claude Code, Codex veya Ajanınıza create-design-md Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

skills/create-design-md/SKILL.md için genel skills CLI biçimi; repository 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

Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

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:

Daha önce seçilen hedefte tam olarak bir uyumluluk export'u çalıştırın ve çıktıyı inceleyin.
css-tailwind için, colors'ın --color-'a, family'nin --font-'a, size'ın --text-'a, rounded'ın --radius-'a ve spacing'in --spacing-'a eşlendiğini doğrulayın; doldurulmuş bir typography bloğunun ne --font- ne de --text-* üretmemesi, belgenin yeniden yazılması gerektiği anlamına gelir.
Kaydetmeden önce ayrıştırılmış frontmatter'ı geri okuyun ve skaler typography alt öğelerini veya yönetici kaynakta bulunmayan rounded anahtarlarını kendiniz reddedin.
Mevcut bir belgeyi güncellerken, orijinal içeriği geçici olarak koruyun ve yeni dosyayla karşılaştırarak kaldırılmış olan kabul edilmiş kararları geri getirin.
Tema modlarını kodlamadan önce kurulu spesifikasyonu kontrol edin ve modlar desteklenmiyorsa yalnızca bir Themes tablosuna geri dönün.

OpenDesign'da create-design-md'yi 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: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Skill dosyası: skills/create-design-md/SKILL.md Doğrulama sırasında içerik sağlaması kaydedildi; commit 79081ab
License: MIT LICENSE dosyasından.
Repository yıldızları: 8.402 GitHub anlık görüntüsü 2026-09-14'te, bu katalogda 5 skill içeren tüm ibelick/ui-skills repository'si için alınmıştır. create-design-md 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

SınırlarSadece DESIGN.md değişiklikleri; rakip şema yok, keşfedilen her token'ın dökümü yok.
1. Modu seçinRepository moduna karşı URL modu, her birinin neyi kanıtlayabileceği ve önce ne zaman sorulacağı.
Ortak kanıt hattıHer iki modun da uyması gereken altı adımlı kayıt hattı ve atlama kapıları.
2. Kanıtı takip edinRepolar için inceleme sırası; URL'ler için örnekleme listesi, kanıtlar ve kanıt defteri.
3. Neyin ait olduğuna karar verinŞema şekillendirme, export hedefi seçimi, tema yönetimi ve metinde neyin iddia edilebileceği.
4. Belgeyi yazınMinimal frontmatter, izin verilen bölüm sırası ve kaydetmeden önce silinecekler.
5. DoğrulayınLint, bir export, kategori kontrolleri ve güncellenmiş bir belgeyi karşılaştırma.
6. RaporlayınNe döndürülmeli: mod, denetlenen hedef, kaynaklar, atlamalar, doğrulama sonuçları.

Skill'in Kendi Açıklaması

"Mevcut bir ürün deposundan veya halka açık web sitesinden bir DESIGN.md oluşturun veya güncelleyin. Bir arayüzün tasarım dilini belgelemek, görsel sistemini yeniden yapılandırmak, mevcut kanıtlardan tasarım token'ları ve rehberlik çıkarmak veya kodlama ajanlarına kalıcı UI bağlamı vermek istendiğinde kullanın. Ürün kaynağını değiştirmeyin veya kazara uygulama desenlerini tasarım kararlarına yükseltmeyin."

SKILL.md'den ön bilgi açıklaması. Dosyanın tamamı yaklaşık 16.176 karakter. Dosyanın tamamını GitHub'da okuyun.

Create Design MD

create-design-md'yi gerçek bir marka ve design-system iş görevi üzerinde çalıştırın.

OpenDesign'ı indirin, SKILL.md linkinden create-design-md'yi 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/ibelick/ui-skills --skill create-design-md

create-design-md Skill'in Claude Code ve Codex'te Yaptığı İş

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

create-design-md Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

create-design-md Skill'in Claude Code ve Codex'e Verdiği Kurallar

Sadece Belgeye Dokun

Repository Kanıtını Öncelikli Tut

Tek Şema, Sadece Mapping Şekilleri

Yazmadan Önce Dışa Aktarma Hedefini Seç

URL İddiaları için Üç Kanıt

Sadece regex Açısından Geçerli Token Adları Üret

Tek Bir group-level Token'ı Normalize Et

Başarısız Doğrulamada Yayın Yapılmaz