Stylepack
Gratis: 3 paket per hari, 10 dengan akun gratis

Ubah situs web apa pun jadi paket desain untuk AI Anda

Tempel URL. Stylepack mengukur halaman saat dirender (warna, tipografi, jarak, radius, bayangan, komponen) beserta perilakunya: hover dan fokus, menu dan tooltip, tema lainnya, serta empat lebar layar. Anda mendapatkan DESIGN.md, BEHAVIOR.md, token, tema Tailwind, SKILL.md, dan screenshot dalam satu zip.

Diukur, bukan ditebak

Setiap nilai diambil dari halaman yang sebenarnya, dibobot menurut apa yang benar-benar tampil di layar. Tidak menebak dari screenshot, tidak ada model yang mengarang kode hex.

Perilaku, bukan sekadar warna

State hover dan fokus, posisi tooltip dan durasi fade, menu, scroll reveal, elemen sticky, tabel, formulir, pembungkusan teks, mode gelap, dan setiap breakpoint.

Format siap untuk agen

DESIGN.md dari Google, SKILL.md, token W3C, variabel CSS, dan tema Tailwind v4. Letakkan foldernya di proyek Anda dan arahkan agen ke sana.

Ekstrak design system dari situs web mana pun

  1. Tempel URL

    Situs web publik apa pun, seperti stripe.com. Subdomain seperti docs.stripe.com dihitung sebagai situs tersendiri.

  2. Biarkan situsnya diukur

    Halaman dibuka di browser sungguhan, pada empat lebar layar dan di kedua tema. Kurang dari semenit kemudian, paketnya siap.

  3. Serahkan ke AI Anda

    Unduh zip-nya, taruh foldernya di proyek Anda, dan minta agen membaca DESIGN.md dan BEHAVIOR.md sebelum menulis kode apa pun.

Apa saja isi paketnya

Satu folder, siap untuk AI coding agent atau aplikasi chat apa pun.

DESIGN.md
Design system dalam format DESIGN.md dari Google: warna, tipografi, jarak, radius, bayangan, dan komponen.
BEHAVIOR.md
Hover, fokus, tooltip, menu, animasi, scrolling, tabel, formulir, pembungkusan teks, aturan responsif, dan mode gelap.
SKILL.md
Skill untuk Claude Code dan Cursor yang memandu agen menelusuri paket dengan urutan yang benar.
tokens.json
Design token W3C (DTCG) untuk Style Dictionary dan plugin token Figma.
tokens.css
Setiap nilai sebagai CSS custom property.
tailwind.css
Nilai yang sama sebagai blok @theme Tailwind v4.
screenshots/
Situs pada lebar 1440, 1024, 768, dan 390 piksel, plus tema lainnya bila ada.
README.md, PROMPT.md
Cara menyerahkan paket ke tiap alat AI, dan prompt untuk ditempel.

Bekerja dengan alat AI yang sudah Anda pakai

Panduan langkah demi langkah untuk masing-masing:

Contoh paket desain

Lihat seluruh galeri
Halaman beranda linear.app
linear.app
Inter Variable + Berkeley Mono
SaaS & produktivitasGelap + terang
Halaman beranda resend.com
resend.com
domaine + aBCFavorit
Alat developerGelap + terang
Halaman beranda figma.com
figma.com
figmaSans + figmaMono
Alat desainTerang
Halaman beranda framer.com
framer.com
GT Walsheim Medium + Inter Variable
Alat desainGelap
Halaman beranda apple.com
apple.com
SF Pro Text + SF Pro Display
Teknologi konsumenGelap + terang
Halaman beranda arc.net
arc.net
Marlin Soft SQ + -apple-system
Teknologi konsumenTerang

Pertanyaan

Apa itu Stylepack?

Stylepack (stylepack.ai) adalah alat web gratis yang mengubah situs web publik mana pun menjadi paket desain untuk AI coding agent: DESIGN.md, BEHAVIOR.md, SKILL.md, design token, tema Tailwind, dan screenshot, dalam satu zip.

Bagaimana cara menyalin desain sebuah situs web ke Cursor atau Claude Code?

Tempel alamat situs ke Stylepack lalu unduh paketnya. Taruh foldernya di proyek Anda, kemudian minta agen membaca DESIGN.md dan BEHAVIOR.md serta melihat screenshot sebelum membangun apa pun. Setiap halaman paket memuat langkah persisnya dan prompt untuk disalin.

Apa itu DESIGN.md?

DESIGN.md adalah format terbuka dari Google untuk mendeskripsikan identitas visual kepada coding agent dalam satu file Markdown: warna, tipografi, jarak, radius, bayangan, dan komponen. Stylepack membuatkannya untuk situs web publik mana pun.

Bagaimana cara mengekstrak design token dari sebuah situs web?

Tempel alamatnya ke Stylepack. Paket berisi tokens.json dalam format design token W3C (DTCG), nilai yang sama sebagai CSS custom property di tokens.css, serta tema Tailwind v4 di tailwind.css.

Apa saja yang dicakup BEHAVIOR.md?

Cara situs berperilaku, bukan hanya tampilannya: state hover dan fokus, tooltip, menu, animasi, scrolling, tabel, formulir, pembungkusan teks, tata letak pada lebar 1440, 1024, 768, dan 390 piksel, serta mode gelap.

Apakah gratis?

Ya. Anda mendapat 3 paket per hari tanpa akun dan 10 per hari dengan akun gratis. Paket yang sudah ada di galeri tidak dihitung.

Bisa dipakai dengan alat AI apa saja?

Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable, dan Bolt, atau alat lain apa pun yang bisa membaca Markdown dan CSS.

Apakah Stylepack berafiliasi dengan situs-situs di galeri?

Tidak. Sebuah paket menggambarkan desain publik suatu situs sebagai referensi. Logo, font, gambar, dan teks adalah milik pemiliknya masing-masing, dan memeriksa lisensi font menjadi tanggung jawab Anda.