Cómo usar el diseño de cualquier web en v0, Lovable o Bolt
Stylepack convierte cualquier sitio web público en un paquete de diseño: DESIGN.md, BEHAVIOR.md, tokens de diseño, un tema de Tailwind y capturas. Así se lo entregas a v0, Lovable o Bolt para que lo que construya se vea y se comporte como el sitio que elegiste.
Pasos
Las rutas de abajo usan example.com. En la página de un paquete nombran el sitio que elegiste.
- Pega la dirección del sitio en Stylepack y descarga su paquete. Los paquetes de la galería están listos ahora mismo.
- Descomprime el paquete.
- En un proyecto nuevo, adjunta DESIGN.md y las capturas de la primera pantalla de escritorio y móvil a tu primer mensaje.
- Pega el prompt de abajo y completa lo que quieres construir. Si la herramienta te pide un tema, pega el contenido de tokens.css.
El prompt
El prompt se queda en inglés: nombra los archivos del paquete, y tu IA lo lee en cualquier idioma.
Use the attached design pack files 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 attached screenshot and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Style everything with the variables in tokens.css (or the Tailwind v4 theme in tailwind.css). 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.