Refero Styles vs Design Extractor
Design Extractor, verdiğin herkese açık her URL'den bir DESIGN.md oluşturur. Dosya 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.
Refero Styles, web sitesi stillerinden oluşan büyük ve ücretsiz bir kütüphanedir; her stil renkleri, tipografisi, boşlukları ve bileşenleriyle birden fazla formatta sunulur. Bu formatı ilk kez mi duyuyorsun? DESIGN.md nedir yazısını oku.
tarihinde şu kaynaklara göre kontrol edildi: styles.refero.design, stil sayfalarından biri ve stil site haritası. 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
| Refero Styles | 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 | Her bileşen, HTML olmadan, rolü ve ölçüleriyle düz metinle anlatılır. | 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 | refero.design adresindeki UI referans ürünü Refero'dan, beta aşamasında, ücretsiz bir web sitesi stilleri kütüphanesi. | Bir oluşturucu: herkese açık bir URL verirsin, o sitenin DESIGN.md dosyasını döndürür. |
| İstendiğinde her web sitesi | Sunulmuyor | Evet. Herkese açık herhangi bir URL'yi yapıştırırsın ve çıkarma hemen başlar. |
| Kapsam | Stil site haritasında listelendiği haliyle 1.342 stil sayfası. | Herkese açık her web sitesi, ayrıca önceden çıkarılmış markalardan oluşan bir galeri. |
| Stil başına formatlar | DESIGN.md (kompakt ve genişletilmiş), Tailwind v4, CSS değişkenleri ve tasarım token'ları. | Tek bir DESIGN.md: token'lar frontmatter'da, bileşen tarifleri HTML ve CSS olarak. |
| Fiyat | Göz atmak ve kopyalamak ücretsiz. | Ön ödemeli kredi, abonelik yok. Paketler 50 kredi $5 fiyatından başlar; bir Pro çıkarma 10 kredi tutar. |
| Güncellik | Anlık görüntüler. Apple stili 2026-09-20 tarihinde çıkarılmış. | Çalıştırdığın anda canlı siteden hazırlanır. |
| Ajan erişimi | Her stil sayfası Claude, ChatGPT, Cursor, Codex ve daha fazlası için Refero'nun MCP'sine bağlantı verir. | Extract aracı herhangi bir URL alan uzak bir MCP sunucusu; Claude Code, claude.ai, ChatGPT, Codex, Cursor ve diğer istemcilerden kullanılır. |
| Tarayıcı uzantısı | Sunulmuyor | Bulunduğun sekmeyi çıkaran bir Chrome uzantısı. |
Refero Styles neler sunuyor
- Karanlık mod SaaS ya da editoryal düzenler gibi havaya göre göz atılabilen ücretsiz bir web sitesi stilleri kütüphanesi.
- Stil başına birden fazla format: DESIGN.md (kompakt ve genişletilmiş), Tailwind v4, CSS değişkenleri ve tasarım token'ları.
- Claude, ChatGPT, Cursor, Codex ve daha fazlası için Refero'nun MCP'sine bağlantılar.
Bir kütüphane ile istendiğinde her URL
Bir kütüphane, birinin daha önce eklediği siteleri kapsar. Design Extractor ise adını verdiğin canlı siteyi okur; böylece kendi ürününü, bir müşteriyi, bir rakibi ya da niş bir markayı bugünkü haliyle kapsar.
URL'yi ana sayfaya yapıştır ya da bu işi MCP sunucusu üzerinden ajanına bırak. Tarifleri ve kontrol sonuçlarıyla birlikte tamamlanmış dosyaları galeride gör.
Refero Styles'tan geçiş nasıl yapılır
- Sitenin URL'sini Design Extractor ana sayfasına yapıştır ve bir Pro çıkarma çalıştır.
- Sonucu deponun kök dizinine DESIGN.md olarak kaydet ve AGENTS.md veya CLAUDE.md içindeki yönlendirmeyi koru. Elle yaptığın düzenlemeleri ücretsiz DESIGN.md doğrulayıcı ile kontrol et.
- Ya da bu işi ajanına bırak: MCP sunucusunu bağla ve ondan siteyi çıkarmasını iste.
Sonuç
Yalnızca bir kütüphanedeki siteler için değil, herkese açık her site için bileşen tarifleri canlı siteye göre kontrol edilmiş bir DESIGN.md'ye ihtiyacın varsa Design Extractor'ı seç. Siteyi şu anki haliyle okur ve Google'ın spesifikasyonuna uyar; sayfadan seçtiği her bileşen için bir tarif sunar, geçemeyen tarif nedeniyle birlikte işaretlenir. Bölge kısıtlamalı sitelere de erişir. Ajanın onu MCP üzerinden çalıştırabilir.
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.
TypeUI vs Design Extractor
Sekmendeki stillerden kendi şablonunu dolduran ücretsiz TypeUI Chrome uzantısı, spesifikasyona uygun ve bileşen tarifleri canlı siteye göre kontrol edilen bir DESIGN.md ile karşılaştırılıyor.
SSS
Refero Styles vs Design Extractor: sorular
Refero Styles ve Design Extractor hakkında kısa yanıtlar, 2026-10-20 tarihinde kontrol edildi.
Evet. 2026-10-20 tarihinde styles.refero.design üzerinde stillere göz atmak ve onları kopyalamak ücretsizdi. Sayfaları, refero.design üzerindeki Refero MCP'sine bağlantı verir.
Hayır. Refero Styles'ta kendi URL'ni gönderme yolu yok: kütüphanesinden seçim yaparsın. Design Extractor ise çalıştırdığında herkese açık her URL'den bir DESIGN.md hazırlar.
Hayır. Design Extractor tek bir dosya üretir: Google'ın spesifikasyonuna uyan, token'ları frontmatter'da tutan ve sayfadan seçtiği her bileşeni damıtılmış HTML ve CSS'ten oluşan bir tarif olarak içeren bir DESIGN.md. Kodlama ajanın onu okur ve projenin kullandığı stilleri yazar.
Her bileşen tarifi tek başına render edilir ve canlı siteyle karşılaştırılır: parçalarını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ı. Geçemeyen bir tarif nedeniyle birlikte işaretlenir, asla doğrulanmış olarak sunulmaz.
Stil site haritası 2026-10-20 tarihinde 1.342 stil sayfası listeliyordu.
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.
İ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.