Stylepack

Como usar o design de qualquer site em Gemini CLI

O Stylepack transforma qualquer site público em um pacote de design: DESIGN.md, BEHAVIOR.md, design tokens, um tema Tailwind e capturas de tela. Veja como entregar um a Gemini CLI para que a interface criada tenha o visual e o comportamento do site que você escolheu.

Passos

Os caminhos abaixo usam example.com. Na página de um pacote, eles trazem o nome do site que você escolheu.

  1. Cole o endereço do site no Stylepack e baixe o pacote. Os pacotes da galeria já estão prontos.
  2. Descompacte o pacote no seu projeto para que a pasta fique em design/example.com-design-pack/.
  3. Adicione esta linha ao GEMINI.md na raiz do projeto: "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. Cole o prompt abaixo e preencha com o que você quer criar.

O prompt

O prompt fica em inglês: ele cita os arquivos do pacote, e sua IA o entende em qualquer idioma.

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.
Extrair um design

Guias para outras ferramentas