Rizky A.
Frontend Developer"Biasanya saya inspect element satu-satu buat nyari warna. Sekarang tinggal tempel URL, DESIGN.md-nya langsung rapi."
DesignSF Discover
Website → Design system
Extract the design system behind any website.
From any website — a structured DESIGN.md, a live HTML preview, and a full CSS source audit.
Try
Real computed CSS DESIGN.md + HTML export No card to start
Kompatibel dengan
Claude
Claude Code
OpenAI
Gemini
AI Studio
Vercel
TanStack Start
Claude
Claude Code
OpenAI
Gemini
AI Studio
Vercel
TanStack Start
DesignSF: ubah situs apa pun jadi design system
DesignSF adalah alat gratis yang berjalan sepenuhnya di browser, tanpa instalasi, tanpa API key, dan tanpa baris perintah. Tempel URL apa pun dan DesignSF akan membaca CSS yang benar-benar dimuat halaman itu, lalu mengembalikan satu laporan berisi warna, tipografi, radius, preview HTML, dan file DESIGN.md yang siap dipakai.
Cocok untuk riset kompetitor, membangun ulang gaya visual sebuah produk, atau memberi konteks desain ke asisten AI. Semua nilai diambil dari sumber aslinya — bukan hasil tebakan — dan setiap sumber CSS dilaporkan lengkap dengan skor akurasi.
Ekstraksi CSS asli
DesignSF membaca CSS yang benar-benar dimuat halaman — stylesheet eksternal, tag <style>, sampai atribut style — bukan menebak lewat AI.
Token warna otomatis
Semua warna dihitung frekuensinya lalu dipisah menjadi warna utama dan netral, lengkap dengan nilai hex yang siap dipakai.
Skala tipografi & radius
Font family, ukuran, weight, line-height per elemen, plus daftar border-radius yang dipakai di seluruh halaman.
Audit & skor akurasi
Setiap sumber CSS dilaporkan: ukuran, jumlah rule, dan skor akurasi warna serta tipografi supaya hasilnya bisa dipercaya.
Cara kerjanya
Empat langkah, tanpa akun dan tanpa konfigurasi — langkah token AI sifatnya opsional.
01
Tempel URL
Masukkan alamat situs apa pun, aktifkan multi-page bila ingin memindai beberapa halaman sekaligus.
02
DesignSF memindai
Halaman diambil, seluruh CSS diurai, lalu warna, font, dan radius dikumpulkan jadi token.
03
Opsional: pasang token AI
Tekan ikon kunci atau menu titik tiga → Pengaturan AI, tempel API key OpenAI / Gemini / Claude, tes koneksi, lalu simpan. Key hanya disimpan di browser Anda.
04
Ambil hasilnya
Salin DESIGN.md, README hasil AI, atau preview HTML-nya, langsung tempel ke proyek atau ke asisten AI Anda.
Token AI: apa & cara ambilnya
Token AI (API key) adalah kunci pribadi dari penyedia model seperti OpenAI, Google Gemini, atau Anthropic Claude. DesignSF memakainya hanya saat Anda menekan tombol generate README/DESIGN.md berbasis AI. Tanpa token, semua fitur ekstraksi CSS tetap berjalan normal.
Token disimpan hanya di browser Anda (localStorage), dikirim langsung ke provider yang Anda pilih, dan tidak pernah menyentuh server kami. Anda bisa menghapusnya kapan saja lewat tombol Clear di dialog Pengaturan AI.
OpenAI
sk-...- 1Buka platform.openai.com lalu login.
- 2Masuk ke menu API keys → Create new secret key.
- 3Salin key (hanya tampil sekali) dan pastikan billing/kredit aktif.
Google Gemini / AI Studio
AIza...- 1Buka aistudio.google.com dan login dengan akun Google.
- 2Klik Get API key → Create API key, pilih project.
- 3Salin key-nya; tier gratis Gemini sudah cukup untuk DesignSF.
Anthropic Claude
sk-ant-...- 1Buka console.anthropic.com lalu login.
- 2Settings → API keys → Create Key.
- 3Salin key dan isi kredit di halaman Billing bila masih kosong.
Setelah token tersimpan, tekan Test connection di dialog Pengaturan AI untuk memastikan key dan model valid. Jika kuota model habis (error 429), aktifkan Auto-switch model agar DesignSF otomatis mencoba model lain dari provider yang sama.
Apa kata pengguna
Sinta W.
Product Designer"Skala tipografinya akurat banget. Buat riset kompetitor ini jauh lebih cepat daripada bikin moodboard manual."
Bagas P.
Freelancer"Fitur audit sumber CSS-nya bikin saya percaya sama hasilnya, jelas kelihatan datanya diambil dari mana."
Nadia K.
UI Engineer"Saya copy DESIGN.md-nya lalu kasih ke AI buat bikin komponen. Hasilnya konsisten sama brand aslinya."
Fajar H.
Web Developer"Multi-page scan-nya berguna waktu klien minta gaya yang sama untuk beberapa halaman. Hemat waktu banget."
Ayu L.
Design Lead"Ringan, tanpa daftar akun, dan langsung jalan di HP. Simpel tapi hasilnya serius."
Rizky A.
Frontend Developer"Biasanya saya inspect element satu-satu buat nyari warna. Sekarang tinggal tempel URL, DESIGN.md-nya langsung rapi."
Sinta W.
Product Designer"Skala tipografinya akurat banget. Buat riset kompetitor ini jauh lebih cepat daripada bikin moodboard manual."
Bagas P.
Freelancer"Fitur audit sumber CSS-nya bikin saya percaya sama hasilnya, jelas kelihatan datanya diambil dari mana."
Nadia K.
UI Engineer"Saya copy DESIGN.md-nya lalu kasih ke AI buat bikin komponen. Hasilnya konsisten sama brand aslinya."
Fajar H.
Web Developer"Multi-page scan-nya berguna waktu klien minta gaya yang sama untuk beberapa halaman. Hemat waktu banget."
Ayu L.
Design Lead"Ringan, tanpa daftar akun, dan langsung jalan di HP. Simpel tapi hasilnya serius."
Pertanyaan yang sering diajukan
Hal yang paling sering ditanyakan sebelum memakai DesignSF.
Siap mencoba?
Gulir ke atas, tempel URL situs favorit Anda, dan dapatkan DESIGN.md-nya dalam hitungan detik.