NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **Belleza Rubí** (beauty & skincare ecommerce) usando **HTML**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. El sitio debe reproducir el diseño analizado:
- **Header**: barra fija con logo a la izquierda, menú hamburguesa que despliega un overlay con fondo morado difuso y enlaces (Home, Nuestra Historia, Tienda, Blog, Contacto, FAQ), buscador con icono y campo expandible, y carrito con icono y contador. Usa animaciones suaves al abrir/cerrar.
- **Paleta de colores**: #6A1B9A (violeta oscuro), #CE93D8 (violeta claro), #F3E5F5 (lavanda muy claro), #FFFFFF (blanco), #212121 (gris oscuro para texto).
- **Tipografía**: "DM Sans" (sans‑serif) para cuerpo y "Playfair Display" para encabezados, cargadas desde Google Font
3.735 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.735 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Barra de navegación fija con logo, menú desplegable, buscador y carrito
- 2.1 Hero principal con fondo difuminado y llamada a la acción
- 3.1 Sección de colecciones destacadas en tarjetas
- 4.1 Testimonios en carrusel suave
- 5.1 Últimas entradas del blog en grid
- 6.1 Footer con enlaces, redes y datos de contacto
OUR STORY
- 1.1 Header compartido
- 2.1 Imagen de cabecera con texto descriptivo
- 3.1 Línea de tiempo de la marca
- 4.1 Equipo en tarjetas
- 5.1 Footer compartido
SHOP
- 1.1 Header compartido
- 2.1 Filtros laterales y barra de búsqueda
- 3.1 Grid de productos con hover y botón "Añadir al carrito"
- 4.1 Paginación
- 5.1 Footer compartido
PRODUCT DETAIL
- 1.1 Header compartido
- 2.1 Galería de imágenes del producto con zoom
- 3.1 Información del producto, precio y selector de cantidad
- 4.1 Botón "Añadir al carrito" y reseñas
- 5.1 Footer compartido
BLOG
- 1.1 Header compartido
- 2.1 Lista de artículos con miniatura, título y extracto
- 3.1 Sidebar con categorías y etiquetas
- 4.1 Footer compartido
CONTACT
- 1.1 Header compartido
- 2.1 Formulario de contacto con campos nombre, email, asunto y mensaje
- 3.1 Mapa incrustado
- 4.1 Footer compartido
PROMPTS RELACIONADOS · BEAUTY / SPA
