Stylepack

Cara memakai desain situs web mana pun di Gemini CLI

Stylepack mengubah situs web publik mana pun menjadi paket desain: DESIGN.md, BEHAVIOR.md, design token, tema Tailwind, dan screenshot. Begini cara menyerahkannya ke Gemini CLI agar hasil buatannya tampil dan berperilaku seperti situs yang Anda pilih.

Langkah

Path di bawah memakai example.com. Di halaman paket, path itu memuat nama situs yang Anda pilih.

  1. Tempel alamat situs ke Stylepack dan unduh paketnya. Paket di galeri sudah siap sekarang.
  2. Unzip paket ke dalam proyek Anda sehingga foldernya berada di design/example.com-design-pack/.
  3. Tambahkan baris ini ke GEMINI.md di root proyek: "For all UI work, follow design/example.com-design-pack/DESIGN.md and design/example.com-design-pack/BEHAVIOR.md, match design/example.com-design-pack/screenshots/, and use design/example.com-design-pack/tokens.css."
  4. Tempel prompt di bawah dan isi apa yang ingin Anda bangun.

Prompt-nya

Prompt tetap dalam bahasa Inggris: prompt itu menyebut nama file di dalam paket, dan AI Anda bisa membacanya dalam bahasa apa pun.

Use the design pack in `design/example.com-design-pack/` as the source of truth for how the UI looks and behaves. It was measured from https://example.com/.

1. Read DESIGN.md (colours, type, spacing, radii, shadows, components) and BEHAVIOR.md (hover, focus, tooltips, menus, motion, scrolling, forms, responsive rules, dark mode) before writing any code.
2. Look at every image in `design/example.com-design-pack/screenshots/` and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Style everything with `design/example.com-design-pack/tokens.css` (or `tailwind.css` if this project uses Tailwind v4). Do not invent colours, radii, shadows or font sizes that are not in the pack.
4. Load the fonts named in DESIGN.md. Where a font is not freely available, use the stand-in it names at the same sizes and weights.
5. Match the breakpoints and hover, focus and motion rules in BEHAVIOR.md. Build both themes.

Now build: [describe the page or app you want]

When you are done, compare the result with the screenshots at desktop and phone widths, fix the biggest visual difference first, and repeat.
Ekstrak desain

Panduan untuk alat lain