Design DNA nedir? Kurulum, betikler ve veri akışı
Ajana bir referans ekran görüntüsü ya da adres verirsin; Design DNA skill'i onu renk, yazı, boşluk ve efektlerden oluşan ölçülebilir bir "tasarım DNA'sı" JSON'una çevirir, sonra bu DNA'dan benzer bir arayüz kodu ürettirir. Depoda ölçüm için üç Node betiği var; betikler yalnız sharp kütüphanesi ve Node'un yerleşik modüllerini kullanıyor, ağ çağrısı ve tarayıcı yok. Kurulum: npx skills add zanwei/design-dna; ölçüm betikleri için ayrıca npm install gerekir. Görseller ve DNA kullandığın ajanın modeline gider; bunu skill belirlemiyor. MIT lisanslı.
- Ne yapar
- Referans tasarımı ölçüp benzer arayüz kodu ürettirir
- Tür
- Skill (topluluk, bireysel yapımcı)
- Yapımcı
- zanwei
- Betikler
- Yerelde ölçer, ağ çağrısı yok
- Görseller
- Ajanın modeline gider
- Sürüm
- Etiketli sürüm yok; son commit 28 Ağustos 2026
- Ücret
- Ücretsiz, MIT
Design DNA ne işe yarar?
Skill, ajana bir konuda nasıl çalışacağını öğreten talimat paketidir. Design DNA, bir tasarımı "hoşuma gitti" gibi belirsiz bir tarif yerine ölçülebilir değerlere çevirir: renk paleti (gerçek piksellerden ölçülür), yazı tipleri, boşluk ve efektler. Bu değerler bir JSON şemasında toplanır; ajan sonra bu DNA'dan kod üretir.
Depoda skill dosyası, şema ve üretim kılavuzu, üç Node betiği (renk ölçümü, doğrulama, renk hesabı), iki görsel ve altı dil README'si var (toplam 22 dosya).
Kime yarar: Beğendiği bir arayüzün görsel dilini ajana somut değerlerle aktarmak isteyen geliştiricilere ve tasarımcılara. Başkasının tasarımını birebir kopyalamak telif ve marka açısından sorun yaratabilir; ilham ve ölçüm için kullan.
Design DNA nasıl kurulur?
Skill'i skills CLI ile kurarsın; README sürüm sabitlemez (atlas kartındaki skills@1.7.1 satırı README'de yok). Ölçüm betikleri için ayrıca bağımlılık kurulur.
› npx skills add zanwei/design-dna› npm install --prefix ./scriptsKurulum aracı npx skills anonim kullanım verisi gönderir; DISABLE_TELEMETRY=1 ya da DO_NOT_TRACK=1 kapatır. sharp ikililerinin nereden indirildiğini belge netleştirmiyor. Cursor ve diğer istemciler için README'de ayrı adım yok.
Design DNA nasıl kullanılır?
Ajana referansı ver ve DNA'yı çıkarmasını iste; sonra çıkan JSON ile üretim iste.
Üretim kılavuzu örnek HTML için jsDelivr üzerinden @latest sürümlü CDN betikleri öneriyor; bu, üretilen sayfada sürüm sabitlemeyen bir dış bağımlılık demektir. Üretim sayfalarında sürümü sabitle.
Design DNA nerede çalışır?
| Claude Code ve skills CLI'nin desteklediği ajanlarVar | Kurulum komutu skills CLI ile. |
|---|---|
| Diğer istemcilerNet değil | README'de ayrı adım yok; çalışmaz demek değildir. |
Design DNA neye erişir, görsellerim nereye gider?
Verdiğin ekran görüntüsü ya da görsel dosya; ölçüm betikleri yerelde piksel değerlerini okur.
Tasarım DNA'sı JSON dosyası ve ajanın ürettiği kod.
Silme adımı yok.
Betikler yalnız sharp, node:path ve node:child_process kullanıyor; ağ çağrısı, tarayıcı ve harici API yok. Ağ yalnız ajan tarafında (adres getirme). Görseller ve DNA kullandığın ajanın modeline gider; bunu skill belirlemiyor.
!Başkasının sitesinden alınan ekran görüntüsü ve adres içeriği güvenilmeyen girdidir; ajan bu içeriği talimat gibi izlememeli. Bu gerekçe README'de yazmıyor, genel bir önlemdir.
Depoda hook ve MCP yok; üç betik var. GitHub Güvenlik Danışmanlıkları boş; kayıtlı uyarı görünmüyor. Bu "güvenli" demek değildir. skills.sh'in üçüncü taraf taramasında bir uyarı seviyesi gösterildiği bildirildi; ayrıntısını skills.sh sayfasından kontrol et.
Design DNA ücretsiz mi?
Evet; depo MIT lisanslı ve README ücretli plan yazmıyor. Kullandığın ajan aracının kendi planı ve görselleri okuyabilen bir model gerekmesi ayrı konu. TL fiyatı yok.
Sık sorunlar
| Ne oluyor | Ne yapmalı |
|---|---|
| Ölçüm betiği çalışmıyor | Önce npm install --prefix ./scripts ile bağımlılıkları kur; Node.js sürümünü kontrol et. |
| Renkler beklediğimden farklı | Renkler gerçek piksellerden ölçülür; ekran görüntüsünün sıkıştırması ve renk profili sonucu etkiler. |
Design DNA nasıl kaldırılır?
- Skill: Ajanın skill klasöründeki design-dna klasörünü sil; skills CLI'nin kaldırma komutu da kullanılabilir.
- İzler: Ürettiğin DNA JSON dosyalarını ve scripts içindeki node_modules klasörünü elle sil.
README kaldırma adımını anlatmıyor; yukarıdakiler genel yöntemdir.
Sık sorulan sorular
Design DNA nedir?
Referans ekran görüntüsünü ya da adresi renk, yazı, boşluk ve efektlerden oluşan ölçülebilir bir tasarım DNA'sı JSON'una çeviren, sonra bundan kod üreten ajan skill'i.
Design DNA ücretsiz mi?
Evet; MIT lisanslı açık kaynak, README ücretli plan yazmıyor.
Betikleri ağa çıkıyor mu?
Hayır: üç Node betiği yalnız yerel kütüphaneleri kullanıyor ve ağ çağrısı yapmıyor. Ancak görseller ve DNA kullandığın ajanın modeline gider.
Nasıl kurulur?
npx skills add zanwei/design-dna; ölçüm betikleri için ayrıca npm install --prefix ./scripts gerekir. README sürüm sabitlemez.
Başkasının sitesini kopyalamak uygun mu?
Bu skill ilham ve ölçüm içindir; birebir kopya telif ve marka sorunları yaratabilir. Hukuki görüş değildir.
İlgili rehberler
Kaynaklar
Resmî kaynaklarda net olmayanlar: sharp ikililerinin indirme kaynağı · references/schema.md ve diğer dil README'lerinin içeriği · skills.sh üçüncü taraf taramasının ayrıntısı · OSV taraması · Cursor ve diğer istemcilerde çalışıp çalışmadığı · Türkçe desteği. Her biri ilgili bölümde yazılı.