Ekstensi Chrome Design Extractor
Ekstensi Chrome Design Extractor mengubah website di tab yang sedang Anda buka menjadi DESIGN.md: file sistem desain berisi aturan warna, tipografi, spacing, bentuk, dan komponen situs tersebut, ditulis untuk agen coding seperti Claude Code, Cursor, dan Copilot. Satu klik di toolbar, tanpa perlu menempelkan URL.
Gratis dipasang. Setiap ekstraksi memakai kredit dari saldo prabayar Anda, dengan harga yang sama seperti di situs.
Fungsinya
DESIGN.md dari tab yang sedang Anda buka
Mengekstrak halaman di tab Anda
Satu klik mengirim alamat tab yang sedang Anda buka ke ekstraksi yang sama seperti formulir di beranda. Pro juga mengambil sampel halaman-halaman utama situs, sehingga hasilnya mencerminkan situs itu, bukan hanya satu layar.
Menulis sistem desain lengkap
Token YAML untuk warna, tipografi, spacing, dan bentuk, ditambah delapan bagian format DESIGN.md: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, dan Do's and Don'ts.
Resep untuk setiap komponen
Komponen yang dipilihnya dari halaman, seperti header, tombol, input, dan kartu, masing-masing dikirim sebagai HTML dan CSS yang disaring, dicek terhadap situs live atau ditandai beserta alasannya.
Akun yang sama, kredit yang sama
Ekstensi memakai ulang sesi Anda di design-extractor.com. Tidak perlu login kedua, dan popup menampilkan saldo kredit Anda.
Cara kerja
Tiga langkah dari tab ke DESIGN.md
Tambahkan ke Chrome dan sematkan
Pasang dari Chrome Web Store dan sematkan lewat ikon puzzle. Ekstensi ini meminta akses ke design-extractor.com dan tab aktif, tidak lebih. Masuk di situs sekali; popup memakai sesi tersebut.
Buka halaman publik dan klik Extract this page
Pilih tier di popup dan mulai ekstraksi. Progresnya tampil di popup selama berjalan, dan Anda bisa terus browsing.
Buka DESIGN.md
Open result membawa Anda ke DESIGN.md di situs. File itu juga tersimpan di Ekstraksi saya, tempat Anda menyalin, mengunduh, atau mengeditnya sebelum menaruhnya di repo.
Detail pemasangan, cara masuk, kredit, dan batasan saat ini ada di panduan setup ekstensi. Lebih suka menempelkan URL? Ekstraksi yang sama berjalan dari beranda.
Perbandingan
Apa yang ditambahkannya dibanding DESIGN.md Style Extractor dari TypeUI
DESIGN.md Style Extractor dari TypeUI adalah ekstensi gratis dan open source yang mengisi template milik TypeUI sendiri dengan style dari halaman di tab Anda. Ekstensi Design Extractor menambahkan:
DESIGN.md yang mengikuti spesifikasi Google
Token di front matter YAML dan bagian-bagian kanonis sesuai urutan spesifikasi. Cek file apa pun dengan Validator DESIGN.md gratis.
Resep untuk setiap komponen yang dipilihnya
HTML dan CSS yang disaring untuk header, tombol, input, kartu, dan lainnya, masing-masing dicek terhadap situs live dengan pencocokan struktur dan perbandingan piksel, atau ditandai beserta alasannya.
Situs yang dibatasi wilayah
Jika sebuah situs memblokir pengunjung dari beberapa negara, ekstraksi bisa dijalankan lewat browser di negara lain. Ekstraksi dari negara lain memakai harga Pro ditambah biaya tambahan 6 kredit (16 kredit).
Akun dan kredit yang sama seperti di situs
Setiap ekstraksi tersimpan di Ekstraksi saya, tempat Anda mengedit, menyalin, atau mengunduhnya, dan agen Anda bisa membacanya lewat MCP.
Dicek pada terhadap versi 0.4.0, README dan kode sumbernya, serta listing Chrome Web Store-nya.
| Aspek | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| Cara membaca situs | Server kami membuka alamat halaman di browser dan menganalisis halaman yang sudah dirender. Pro juga mengambil sampel halaman-halaman utama situs. | Membaca computed style dari hingga 280 elemen yang terlihat di halaman yang terbuka di tab Anda, di dalam browser Anda. |
| Acuan hasilnya | Spesifikasi DESIGN.md dari Google: token di front matter YAML dan bagian-bagian kanonis sesuai urutan spesifikasi. | Template DESIGN.md milik TypeUI sendiri (Mission, Brand, Style Foundations, Rules, dan lainnya), tanpa front matter YAML, atau sebuah SKILL.md. |
| Komponen | Resep berupa HTML dan CSS yang disaring untuk setiap komponen yang dipilihnya dari halaman, dicek terhadap situs live dengan pencocokan struktur dan perbandingan piksel, atau ditandai beserta alasannya. | Jumlah per jenis komponen di bawah panduan komponen umum. Hasilnya tidak dibandingkan dengan halaman yang dirender. |
| Ke mana hasilnya | Tersimpan di Ekstraksi saya di situs, tempat Anda bisa mengedit, menyalin, atau mengunduhnya. | Ditampilkan di popup, tempat Anda menyalinnya atau mengunduhnya sebagai file. |
| Halaman yang bisa dibaca | Hanya halaman publik. Halaman di balik login, di localhost, atau di jaringan privat belum didukung. | Halaman yang terbuka di tab Anda, termasuk halaman tempat Anda sedang login, karena ekstensi itu membaca halaman tersebut secara langsung. |
| Harga | Gratis dipasang. Ekstraksi memakai kredit prabayar. | Gratis dan open source (MIT). |
Pilih ekstensi Design Extractor jika Anda butuh DESIGN.md yang mengikuti spesifikasi Google, dengan resep untuk setiap komponen yang dicek terhadap situs live, dan tersimpan di akun Anda. Perbandingan lengkapnya ada di TypeUI vs Design Extractor.
FAQ
Pertanyaan tentang ekstensi Chrome
Jawaban singkat tentang cara memasang ekstensi, apa yang dikirimnya, dan berapa biayanya.
Memasangnya gratis. Setiap ekstraksi memakai kredit dari saldo prabayar Anda dengan harga yang sama seperti di situs. Paket mulai dari US$5 untuk 50 kredit, tanpa langganan, dan kredit tidak pernah kedaluwarsa. Jika ekstraksi gagal karena kendala di sisi kami, kreditnya dikembalikan.
Hanya alamat tab aktif dan tier yang Anda pilih, saat Anda mengklik Extract this page. Ekstensi ini tidak pernah membaca isi halaman, tidak berjalan di latar belakang pada halaman yang Anda kunjungi, dan tidak berisi analitik.
Belum. Server kami mengambil halaman dari alamatnya, jadi halamannya harus publik. Halaman di balik login, di localhost, atau di jaringan privat tidak didukung. Ekstensi ini hanya tersedia untuk Chrome.
Tidak. Popup memakai ulang sesi yang Anda gunakan saat masuk di design-extractor.com. Jika Anda belum masuk, popup menampilkan tombol Sign in yang membuka situs. Keluar dari akun di popup juga akan mengeluarkan Anda dari situs.
Agen apa pun yang membaca file dari repo Anda. Simpan DESIGN.md di samping kode Anda, lalu arahkan Claude Code, Cursor, GitHub Copilot, Codex, Windsurf, atau Google Stitch ke file itu sebagai acuan gaya untuk UI baru.
Ekstensi seperti DESIGN.md Style Extractor dari TypeUI membaca computed style di browser Anda dan mengisi template mereka sendiri dengan nilai-nilai itu. Design Extractor menulis DESIGN.md yang mengikuti spesifikasi Google, dengan resep HTML dan CSS untuk setiap komponen yang dipilihnya dari halaman, dicek terhadap situs live atau ditandai beserta alasannya, lalu menyimpannya ke akun Anda.
Dapatkan DESIGN.md dari tab yang sedang Anda buka
Gratis dipasang. Setiap ekstraksi memakai kredit dari saldo prabayar Anda, dengan harga yang sama seperti di situs.