Ekstrak token desain visual ke dalam file DESIGN.md yang siap AI
Extrator de DESIGN.md, dibuat oleh Vitor M. M. bekerja sama dengan ibe.IA, adalah ekstensi Chrome yang mengubah identitas visual situs menjadi referensi DESIGN.md yang distandarisasi untuk kode UI yang dibantu AI. Ini memeriksa halaman dan menangkap warna, tipografi, spasi, dan aturan tokenisasi lainnya untuk membentuk dokumen yang dapat dibaca mesin. Ekstensi ini menggunakan panel samping yang ringkas untuk ekstraksi cepat dan menargetkan pengembang frontend, desainer UI/UX, dan insinyur prompt yang membutuhkan panduan visual yang konsisten untuk antarmuka yang didorong oleh LLM.
Ini mengubah gaya halaman menjadi file token desain yang terstruktur
Ekstensi ini mengekstrak data gaya konkret dari tab aktif mana pun dan menuliskannya ke file DESIGN.md. Ekstraktor mengidentifikasi warna, skala tipografi, unit spasi, gaya batas, dan bayangan serta memformatnya sebagai referensi token. Output mengikuti spesifikasi W3C Design Tokens Community Group (DTCG) sehingga tim menerima model token yang distandarisasi daripada daftar warna ad-hoc. Ini membantu alat hulu untuk menginterpretasikan token dengan andal.
Ini terintegrasi ke dalam penjelajahan tanpa meninggalkan halaman
Ekstraksi berjalan dari panel samping yang dibangun di atas API Panel Samping Chrome, memungkinkan pengguna memulai pengambilan dengan satu klik saat melihat situs langsung. Desain panel menjaga alur kerja tetap ringkas dan tidak mengganggu, sehingga desainer dapat memeriksa komponen dan memicu ekstraksi tanpa membuka jendela terpisah. Pengambilan multi-halaman mengkonsolidasikan token di seluruh halaman yang dinavigasi menjadi satu file referensi untuk konsistensi tingkat proyek.
Ini menjaga pemrosesan lokal di browser untuk privasi
Semua analisis terjadi di browser pengguna; ekstensi mendokumentasikan bahwa ia tidak mengirimkan atau menyimpan data secara eksternal dan tidak memerlukan akun. Pemrosesan yang hanya lokal ini cocok untuk lingkungan profesional dengan aturan privasi yang ketat, karena token yang diekstrak dan DESIGN.md yang dihasilkan tetap berada di lingkungan klien dan dapat diekspor langsung untuk penggunaan internal.
Ini menyiapkan file token untuk editor AI dan penggunaan programatik
Alat ini menghasilkan artefak siap AI termasuk Prompt Konsolidasi AI dan file Markdown yang dapat diekspor dengan frontmatter YAML yang cocok untuk pencernaan programatik. Prompt ini disajikan untuk membantu LLM seperti Claude dan Cursor menerapkan set token, sementara output Markdown diformat untuk integrasi ke dalam saluran pengembang. Ekstensi ini berjalan di Chrome dan browser berbasis Chromium lainnya karena ketergantungan API-nya.
Terbaik untuk tim yang menginginkan panduan desain yang dapat direproduksi untuk kode yang dibantu AI
Ekstensi ini adalah opsi praktis untuk tim frontend dan insinyur prompt yang membutuhkan referensi desain yang dapat diulang dan dapat dibaca mesin untuk mengurangi penyimpangan visual dalam UI yang dihasilkan LLM. Salah satu pertimbangannya adalah bahwa mengadopsinya memerlukan sedikit perubahan alur kerja untuk mengimpor dan memversioning file token di dalam proses build atau review yang ada. Untuk proyek yang menegakkan kesetiaan desain, ekstensi ini memberikan cara yang terfokus dan sadar privasi untuk mengkodifikasi aturan visual.
