TypeUI vs Design Extractor
TypeUI'ın DESIGN.md Style Extractor'ı, sekmendeki sayfanın stillerini okuyup TypeUI'ın kendi DESIGN.md şablonunu dolduran ücretsiz bir Chrome uzantısıdır. Design Extractor'ın dosyası Google'ın DESIGN.md spesifikasyonuna uyar ve sayfadan seçtiği her bileşeni, kodlama ajanının yeniden oluşturabileceği bir HTML ve CSS tarifi olarak sunar. Her tarif canlı siteye göre kontrol edilir ya da nedeniyle birlikte işaretlenir. Yalnızca belirli ülkelerden gelen ziyaretçilere yanıt veren sitelerde de çalışır.
Bu formatı ilk kez mi duyuyorsun? Önce DESIGN.md nedir yazısını oku.
tarihinde şu kaynaklara göre kontrol edildi: uzantının README dosyası ve kaynak kodu, Chrome Web Store sayfası ve TypeUI'ın README dosyası. Teklifler ve fiyatlar değişir, bu yüzden karar vermeden önce onların sitesine bak.
Neden Design Extractor
Google'ın DESIGN.md spesifikasyonuna uyar
YAML frontmatter yalnızca spesifikasyonun tanımladığı özellikleri kullanır, özel üst düzey anahtar içermez. Overview ile başlayıp Do's and Don'ts ile biten standart bölümler, spesifikasyondaki sırayla gelir. Frontmatter'daki bileşen girdileri yalnızca spesifikasyonun sekiz özelliğini, sabit değerlerle kullanır. Herhangi bir dosyayı ücretsiz DESIGN.md doğrulayıcı ile kontrol et.
Sayfadan seçtiği her bileşen için bir tarif
Sayfadan seçilen header, footer, butonlar, giriş alanları, kartlar ve diğer bileşenlerin her biri bir tarif olarak gelir: DESIGN.md'nin Components bölümünde, sabit değerlerle damıtılmış HTML ve CSS. Her tarif, parçalarını ve sitede görülen hover ve focus durumlarını listeler; böylece kodlama ajanın bileşeni tahmin etmek yerine yeniden oluşturabilir.
Canlı siteye göre doğrulanır
Her tarif tek başına render edilir ve canlı siteye göre kontrol edilir: render edilen parçaların sayfada ölçülenlerle yapısal olarak eşleştirilmesi ve gerçek öğenin yeni alınmış bir görüntüsüyle piksel karşılaştırması. Başarısız olan bir tarif yeniden oluşturulur ve tekrar kontrol edilir. Yine de geçemeyen tarif nedeniyle birlikte işaretlenir, asla doğrulanmış olarak sunulmaz. Sonuç sayfası, bileşenlerin ne kadar yakın eşleştiğini ve sitenin renk ve metin stillerinin ne kadarının kapsandığını gösterir: galerideki Stripe örneğine bak.
Bölge kısıtlamalı sitelerde çalışır
Bazı siteler yalnızca belirli ülkelerden gelen ziyaretçilere yanıt verir. Bir çıkarma bu yüzden başarısız olduğunda sonuç sayfası bir ülke seçici sunar (sayfanın yüklendiği tespit edilen ülkeler en üstte) ve aynı çıkarmayı seçtiğin ülkedeki bir tarayıcı üzerinden çalıştırır. Ülke seçimli çıkarma, Pro fiyatının üzerine 6 kredilik ek ücretle toplam 16 kredi tutar. Çıkarma başarısız olursa kredilerini iade ederiz.
Yan yana
| TypeUI | Design Extractor | |
|---|---|---|
| Spesifikasyon uyumu | Sunulmuyor | Google'ın DESIGN.md spesifikasyonuna uyar: yalnızca spesifikasyonun özelliklerini içeren ve özel üst düzey anahtar barındırmayan frontmatter, spesifikasyondaki sırayla standart bölümler ve spesifikasyonun sekiz özelliğiyle, sabit değerlerle sınırlı bileşen girdileri. |
| Bileşen tarifleri | Bileşenler, genel bileşen yönergelerinin altında tür başına bir sayı olarak görünür (butonlar, bağlantılar, giriş alanları, kartlar, navigasyon, listeler, tablolar). | Sayfadan seçtiği header, footer, butonlar, giriş alanları ve kartlar gibi her bileşen bir tarif olarak gelir: Components bölümünde damıtılmış HTML ve CSS; böylece kodlama ajanın onu yeniden oluşturabilir. |
| Canlı siteye göre doğrulama | Sunulmuyor | Evet. Her tarif tek başına render edilir ve canlı siteye göre kontrol edilir: parçalarının yapısal eşleştirmesi ve piksel karşılaştırması. Geçemeyen bir bileşen nedeniyle birlikte işaretlenir, asla doğrulanmış olarak sunulmaz. |
| Bölge kısıtlamalı siteler | Sunulmuyor | Evet. Bir site bazı ülkelerden gelen ziyaretçileri engellediğinde, başarısız çıkarma bir ülke seçici sunar (sayfanın yüklendiği ülkeler en üstte) ve aynı çıkarmayı o ülkedeki bir tarayıcı üzerinden çalıştırır. Ülke seçimli çıkarma, Pro fiyatının üzerine 6 kredilik ek ücretle toplam 16 kredi tutar. |
| Nedir | TypeUI'ın yapımcısı Bergside SRL'in ücretsiz Chrome uzantısı DESIGN.md Style Extractor. Sürüm 0.4.0, Chrome Web Store'da yaklaşık 40.000 kullanıcı, MIT lisansıyla açık kaynak. | Bir oluşturucu: sitede, MCP üzerinden ya da Chrome uzantısından herkese açık bir URL ver, o sitenin DESIGN.md dosyasını al. |
| Çıktının uyduğu yapı | TypeUI'ın kendi DESIGN.md şablonu: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules ve daha fazlası, YAML frontmatter olmadan. Ayrıca bir SKILL.md de yazabilir. | Google'ın DESIGN.md spesifikasyonu: token'lar YAML frontmatter'da, standart bölümler spesifikasyondaki sırayla. |
| Siteyi nasıl okur | Sekmendeki sayfada görünen en fazla 280 öğenin hesaplanmış stillerini, tarayıcının içinde ve hiçbir ağ isteği yapmadan okur. | Sunucularımız URL'yi bir tarayıcıda açar ve render edilen sayfayı analiz eder. Pro ayrıca sitenin önemli sayfalarından örnek alır. |
| Okuyabildiği sayfalar | Sekmende açık olan sayfa, giriş yaptığın sayfalar dahil. | Yalnızca herkese açık sayfalar. Giriş gerektiren, localhost üzerindeki veya özel bir ağdaki sayfalar henüz desteklenmiyor. |
| Sonuç nereye gider | Açılır pencerede gösterilir, oradan kopyalar ya da indirirsin. Quick install düğmesi SKILL.md dosyasını, seçtiğin bir projenin Claude Code, Codex veya Cursor skills klasörüne yazar. | Hesabındaki Çıkarmalarım sayfasına kaydedilir; orada düzenler, kopyalar ya da indirirsin. Ajanın onu MCP üzerinden okuyabilir. |
| Fiyat | Ücretsiz. Hesap veya ödeme yok. | Ön ödemeli kredi, abonelik yok. Paketler 50 kredi $5 fiyatından başlar; bir Pro çıkarma 10 kredi tutar. Galeri ve ücretsiz araçlar hiçbir ücret gerektirmez. |
| Ajan erişimi | Uzantı kendi açılır penceresinden çalışır. TypeUI'ın ayrı CLI'ı ve barındırılan MCP sunucusu, seçkin tasarım skill'lerini ve UI prompt'larını sunar. | Extract aracı herhangi bir URL alan uzak bir MCP sunucusu; Claude Code, claude.ai, ChatGPT, Codex, Cursor ve diğer istemcilerden kullanılır. |
TypeUI neler sunuyor
- Chrome Web Store'da yaklaşık 40.000 kullanıcısı olan, hesap veya ödeme gerektirmeyen ücretsiz ve açık kaynak (MIT) bir Chrome uzantısı.
- Tamamen tarayıcında, sekmendeki sayfada çalışır; giriş yaptığın sayfalar dahil.
- Tipografi, renk, boşluk, radius, gölge ve hareket değerleri; TypeUI'ın kendi formatında bir DESIGN.md ya da bir SKILL.md içinde.
- Dosyayı açılır pencereden kopyala ya da indir veya SKILL.md'yi Quick install ile bir Claude Code, Codex ya da Cursor projesine kur.
- TypeUI uzantının ötesinde seçkin tasarım skill'leri, UI prompt'ları, açık kaynak bir CLI ve barındırılan bir MCP sunucusu sunar; ayrıca gelişmiş tasarım skill dosyaları, düzenler için UI prompt'ları ve özel bir Discord topluluğu içeren bir Pro sürümü vardır.
Nerede ayrılıyorlar
TypeUI'ın uzantısı bir sayfada bulduğu stil değerlerini özetler ve şablonundan genel yönergeler ekler. Design Extractor siteyi render eder, bileşenlerini seçer ve her biri için bir tarif yazar, ardından her tarifi canlı siteye göre kontrol eder; böylece ajanın hangi bileşenleri yazıldığı gibi yeniden oluşturabileceğini ve hangilerinin nedeniyle birlikte işaretlendiğini bilir. Galerideki Stripe örneğinde gör.
Bulunduğun sekmeden başlamayı mı tercih edersin? Design Extractor Chrome uzantısı onu aynı hesap ve kredilerle aynı çıkarma sürecinden geçirir. Ajanın da MCP sunucusu üzerinden bir çıkarma başlatıp sonucu okuyabilir. Daha fazla tamamlanmış dosyayı galeride gör.
TypeUI'dan geçiş nasıl yapılır
- Sitenin URL'sini Design Extractor ana sayfasına yapıştır ya da Chrome uzantısında Extract this page düğmesine tıkla ve bir Pro çıkarma çalıştır.
- Sonucu deponun kök dizinine DESIGN.md olarak kaydet ve eski dosyanın yerine koy. AGENTS.md veya CLAUDE.md içindeki yönlendirmen çalışmaya devam eder.
- Quick install kullandıysan, TypeUI'ın yazdığı design-system skill klasörünü sil ve DESIGN.md yönlendirmeni koru.
- Ajanının çıkarmaları kendisinin çalıştırması için MCP sunucusunu bağla.
Sonuç
Google'ın spesifikasyonuna uyan, sayfadan seçtiği her bileşen için bir tarif içeren, her tarifi canlı siteye göre kontrol edilmiş ya da nedeniyle birlikte işaretlenmiş ve hesabına kaydedilen bir DESIGN.md'ye ihtiyacın varsa Design Extractor'ı seç. Bölge kısıtlamalı sitelere de erişir. Ajanın onu MCP üzerinden çalıştırabilir. Tablonun gösterdiği gibi TypeUI'ın uzantısı ücretsizdir ve giriş yaptığın sayfaları okur.
Diğer karşılaştırmalar
getdesign.md vs Design Extractor
Hazır DESIGN.md dosyalarından oluşan seçkin bir koleksiyon, her URL'den üretilen, spesifikasyona uygun ve bileşen tarifleri canlı siteye göre kontrol edilen bir DESIGN.md ile karşılaştırılıyor.
designmd.me vs Design Extractor
URL'den DESIGN.md üreten iki araç; spesifikasyon uyumu, bileşen tarifleri, canlı siteye göre kontroller ve fiyat açısından karşılaştırılıyor.
Refero Styles vs Design Extractor
Web sitesi stillerinden oluşan büyük ve ücretsiz bir kütüphane, her URL'den üretilen, spesifikasyona uygun ve bileşen tarifleri canlı siteye göre kontrol edilen bir DESIGN.md ile karşılaştırılıyor.
SSS
TypeUI vs Design Extractor: sorular
TypeUI ve Design Extractor hakkında kısa yanıtlar, 2026-10-20 tarihinde kontrol edildi.
Evet. 2026-10-20 tarihinde uzantı ücretsizdi ve MIT lisansıyla açık kaynaktı; hesap veya ödeme gerekmiyordu. Design Extractor ücretsiz değildir: çıkarmalar ön ödemeli kredi harcar, paketler 50 kredi $5 fiyatından başlar ve bir Pro çıkarma 10 kredi tutar. Galeri ve ücretsiz araçlar hiçbir ücret gerektirmez.
Hayır. Dosya, Mission, Brand, Style Foundations ve Rules gibi bölümler içeren açık kaynak TypeUI DESIGN.md formatına uyar ve 0.4.0 sürümü YAML frontmatter yazmaz; bu yüzden Google'ın DESIGN.md spesifikasyonuna uymaz. Design Extractor Google'ın spesifikasyonuna uyar ve ücretsiz DESIGN.md doğrulayıcı herhangi bir dosyayı ona göre kontrol eder.
Google'ın spesifikasyonuna uyan bir DESIGN.md: token'lar frontmatter'da, sayfadan seçtiği header, footer, butonlar, giriş alanları ve kartlar gibi her bileşen ise damıtılmış HTML ve CSS'ten oluşan bir tarif olarak yer alır. Her tarif canlı siteye göre yapısal eşleştirme ve piksel karşılaştırmasıyla kontrol edilir; geçemeyen tarif nedeniyle birlikte işaretlenir.
Evet. Sekmendeki sayfayı tarayıcının içinde okur, bu yüzden giriş yaptığın sayfalarda çalışır. Design Extractor yalnızca herkese açık sayfaları okur: giriş gerektiren, localhost üzerindeki veya özel bir ağdaki sayfalar henüz desteklenmiyor.
Design Extractor çıkarmayı başka bir ülkeden çalıştırabilir. Bir çıkarma bu yüzden başarısız olduktan sonra sonuç sayfası bir ülke seçici sunar (sayfanın yüklendiği ülkeler en üstte) ve aynı çıkarmayı o ülkedeki bir tarayıcı üzerinden çalıştırır. Ülke seçimli çıkarma, Pro fiyatının üzerine 6 kredilik ek ücretle toplam 16 kredi tutar. Çıkarma başarısız olursa kredilerini iade ederiz.
Evet. İkisi de deponda duran bir DESIGN.md üretir, bu yüzden ajan kurulumun aynı kalır. Siteyi sitede ya da Chrome uzantısıyla Design Extractor üzerinden çıkar ve dosyayı değiştir. Quick install kullandıysan, TypeUI'ın yazdığı design-system skill klasörünü sil ve DESIGN.md yönlendirmeni koru.
İhtiyacın olan site için bir DESIGN.md al
Herkese açık herhangi bir URL'yi yapıştır. Pro, sitenin önemli sayfalarından örnek alır ve bileşen tarifleri canlı siteye göre kontrol edilmiş, spesifikasyona uygun bir DESIGN.md döndürür.