Design Extractor Chrome Uzantısı
Design Extractor'ın Chrome uzantısı, açık sekmendeki web sitesini bir DESIGN.md dosyasına dönüştürür: sitenin renklerini, tipografisini, boşluklarını, şekillerini ve bileşen kurallarını içeren, Claude Code, Cursor ve Copilot gibi kodlama ajanları için yazılmış bir tasarım sistemi dosyası. Araç çubuğunda tek tık, yapıştırılacak URL yok.
Kurulumu ücretsiz. Her çıkarma, ön ödemeli bakiyenden sitedekiyle aynı fiyata kredi harcar.
Ne yapar
Açık olan sekmeden bir DESIGN.md
Sekmendeki sayfayı çıkarır
Tek tıkla, bulunduğun sekmenin adresi ana sayfadaki formla aynı çıkarma işleminden geçer. Pro ayrıca sitenin önemli sayfalarını da örnekler; böylece sonuç tek bir ekranı değil, siteyi yansıtır.
Eksiksiz bir tasarım sistemi yazar
Renkler, tipografi, boşluklar ve şekiller için YAML token'ları ve DESIGN.md formatının sekiz bölümü: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components ve Do's and Don'ts.
Her bileşen için bir tarif
Sayfadan seçtiği bileşenler (header, butonlar, giriş alanları ve kartlar gibi) damıtılmış HTML ve CSS olarak gelir; her biri canlı siteyle karşılaştırılarak doğrulanır ya da nedeniyle birlikte işaretlenir.
Aynı hesap, aynı krediler
Uzantı, design-extractor.com'daki oturumunu kullanır. İkinci bir giriş gerekmez ve açılır pencere kredi bakiyeni gösterir.
Nasıl çalışır
Sekmeden DESIGN.md'ye üç adım
Chrome'a ekle ve sabitle
Chrome Web Store'dan yükle ve yapboz simgesinden sabitle. Yalnızca design-extractor.com'a ve etkin sekmeye erişim ister, başka hiçbir şeye değil. Sitede bir kez giriş yap; açılır pencere o oturumu kullanır.
Herkese açık bir sayfa aç ve Extract this page düğmesine tıkla
Açılır pencerede bir seviye seç ve çıkarmayı başlat. Çıkarma sürerken ilerleme açılır pencerede görünür, sen de gezinmeye devam edebilirsin.
DESIGN.md'yi aç
Open result seni sitedeki DESIGN.md'ye götürür. Dosya ayrıca Çıkarmalarım sayfasına kaydedilir; repona koymadan önce orada kopyalayabilir, indirebilir ya da düzenleyebilirsin.
Kurulum ayrıntıları, giriş, krediler ve güncel sınırlar uzantı kurulum rehberinde. URL yapıştırmayı mı tercih edersin? Aynı çıkarma ana sayfadan da çalışır.
Karşılaştırma
TypeUI'ın DESIGN.md Style Extractor'ına kıyasla neler ekliyor
TypeUI'ın DESIGN.md Style Extractor'ı, TypeUI'ın kendi şablonunu sekmendeki sayfanın stilleriyle dolduran ücretsiz, açık kaynaklı bir uzantıdır. Design Extractor'ın uzantısı şunları ekler:
Google'ın spesifikasyonuna uyan bir DESIGN.md
Token'lar YAML frontmatter'da, standart bölümler spesifikasyondaki sırayla. Her dosyayı ücretsiz DESIGN.md doğrulayıcı ile kontrol edebilirsin.
Seçtiği her bileşen için bir tarif
Header, butonlar, giriş alanları, kartlar ve daha fazlası için damıtılmış HTML ve CSS; her biri canlı siteyle yapısal eşleşme ve piksel karşılaştırmasıyla doğrulanır ya da nedeniyle birlikte işaretlenir.
Bölge kısıtlamalı siteler
Bir site bazı ülkelerden gelen ziyaretçileri engellediğinde çıkarma başka bir ülkedeki bir tarayıcı üzerinden yapılabilir. Ülke seçimli çıkarma, Pro fiyatına ek olarak 6 kredilik bir ek ücrete mal olur (toplam 16 kredi).
Siteyle aynı hesap ve krediler
Her çıkarma Çıkarmalarım sayfasına kaydedilir; orada düzenler, kopyalar ya da indirirsin, ajanın da MCP üzerinden okuyabilir.
tarihinde, uzantının 0.4.0 sürümü, README ve kaynak kodu ve Chrome Web Store sayfası üzerinden kontrol edildi.
| Özellik | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| Siteyi nasıl okur | Sunucularımız sayfanın adresini bir tarayıcıda açar ve render edilen sayfayı analiz eder. Pro ayrıca sitenin önemli sayfalarını da örnekler. | Sekmende açık olan sayfadaki en fazla 280 görünür öğenin hesaplanmış stillerini, tarayıcının içinde okur. |
| Çıktı neye uyar | Google'ın DESIGN.md spesifikasyonuna: token'lar YAML frontmatter'da, standart bölümler spesifikasyondaki sırayla. | TypeUI'ın kendi DESIGN.md şablonuna (Mission, Brand, Style Foundations, Rules ve diğerleri), YAML frontmatter olmadan, ya da bir SKILL.md'ye. |
| Bileşenler | Sayfadan seçtiği her bileşen için damıtılmış HTML ve CSS'ten oluşan bir tarif; canlı siteyle yapısal eşleşme ve piksel karşılaştırmasıyla doğrulanır ya da nedeniyle birlikte işaretlenir. | Genel bileşen yönergeleri altında bileşen türü başına bir sayı. Çıktı, render edilen sayfayla karşılaştırılmaz. |
| Sonuç nereye gider | Sitedeki Çıkarmalarım sayfasına kaydedilir; orada düzenleyebilir, kopyalayabilir ya da indirebilirsin. | Açılır pencerede gösterilir; oradan kopyalar ya da dosya olarak indirirsin. |
| Okuyabildiği sayfalar | Yalnızca herkese açık sayfalar. Giriş gerektiren sayfalar, localhost'taki ya da özel bir ağdaki sayfalar henüz desteklenmiyor. | Sekmende açık olan sayfa; o sayfayı doğrudan okuduğu için giriş yaptığın sayfalar da dahil. |
| Fiyat | Kurulumu ücretsiz. Çıkarmalar ön ödemeli kredi harcar. | Ücretsiz ve açık kaynak (MIT). |
Google'ın spesifikasyonuna uyan, her bileşeni için canlı siteyle karşılaştırılarak doğrulanmış bir tarif içeren ve hesabına kaydedilen bir DESIGN.md'ye ihtiyacın varsa Design Extractor'ın uzantısını seç. Karşılaştırmanın tamamı TypeUI ile Design Extractor karşılaştırması sayfasında.
SSS
Chrome uzantısı hakkında sorular
Uzantıyı kurma, neyi gönderdiği ve ne kadar tuttuğu hakkında kısa yanıtlar.
Kurulumu ücretsiz. Her çıkarma, ön ödemeli bakiyenden sitedekiyle aynı fiyata kredi harcar. Paketler 50 kredi için $5 fiyatından başlar, abonelik yoktur ve kredilerin süresi dolmaz. Bir çıkarma bizim tarafımızda başarısız olursa krediler iade edilir.
Extract this page düğmesine tıkladığında yalnızca geçerli sekmenin adresini ve seçtiğin seviyeyi. Sayfanın içeriğini asla okumaz, ziyaret ettiğin sayfalarda arka planda çalışmaz ve hiçbir analiz aracı içermez.
Henüz değil. Sunucularımız sayfayı adresinden yakalar, bu yüzden sayfanın herkese açık olması gerekir. Giriş gerektiren sayfalar, localhost'taki ya da özel bir ağdaki sayfalar desteklenmez. Uzantı yalnızca Chrome için kullanılabilir.
Hayır. Açılır pencere, design-extractor.com'da giriş yaptığın oturumu kullanır. Çıkış yapmışsan siteyi açan bir Sign in düğmesi gösterir. Açılır pencereden çıkış yaptığında siteden de çıkış yapmış olursun.
Repondaki dosyaları okuyan her ajan. DESIGN.md'yi kodunun yanına kaydet ve yeni arayüzler için stil referansı olarak Claude Code, Cursor, GitHub Copilot, Codex, Windsurf veya Google Stitch'i ona yönlendir.
TypeUI'ın DESIGN.md Style Extractor'ı gibi uzantılar, hesaplanmış stilleri tarayıcında okur ve değerlerle kendi şablonlarını doldurur. Design Extractor ise Google'ın spesifikasyonuna uyan bir DESIGN.md yazar; sayfadan seçtiği her bileşen için canlı siteyle karşılaştırılarak doğrulanmış ya da nedeniyle birlikte işaretlenmiş bir HTML ve CSS tarifi ekler ve dosyayı hesabına kaydeder.
Açık olan sekmeden bir DESIGN.md al
Kurulumu ücretsiz. Her çıkarma, ön ödemeli bakiyenden sitedekiyle aynı fiyata kredi harcar.