NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Luminelle** (cosmética y cuidado personal) usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. El proyecto debe reproducir fielmente la estructura y estilo del sitio de referencia, sin copiar texto ni imágenes reales. Utiliza los siguientes requisitos:
- **Paleta de colores**: #1A1A1A (negro profundo), #FFFFFF (blanco), #F4C4D9 (rosa pastel), #E0E0E0 (gris claro), #7A4D7B (malva). Aplicar el negro al fondo principal, blanco a textos, rosa pastel a botones primarios y acentos, gris claro a fondos secundarios y malva a enlaces hover.
- **Tipografía**: Headings con *Playfair Display* (Google Font), body con *Inter* (Google Font). Tamaños: h1 48px, h2 36px, h3 24px, párrafos 16px.
- **Header**: barra de navegac
4.323 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.323 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ú y botón de carrito
- 1.2 Hero con imagen de fondo y llamado a la acción
- 1.3 Sección de categorías destacadas en cuadrícula
- 1.4 Carrusel de productos destacados
- 1.5 Bloque de testimonios con citas
- 1.6 Sección de newsletter con formulario
- 1.7 Footer con enlaces institucionales y redes sociales
ABOUT
- 2.1 Header con fondo sólido y breadcrumb
- 2.2 Texto de presentación de la marca y valores
- 2.3 Imagen ilustrativa a la derecha
- 2.4 Equipo en tarjetas con foto y breve bio
- 2.5 CTA a la tienda
- 2.6 Footer reutilizado
SHOP
- 3.1 Header con filtros laterales y barra de búsqueda
- 3.2 Grid de productos con tarjeta, foto, nombre, precio y botón añadir al carrito
- 3.3 Paginación inferior
- 3.4 Footer reutilizado
PRODUCT DETAIL
- 4.1 Galería de imágenes del producto
- 4.2 Título, descripción corta y precio
- 4.3 Selector de variantes y cantidad
- 4.4 Botón añadir al carrito
- 4.5 Sección de productos relacionados en carrusel
- 4.6 Footer reutilizado
CART
- 5.1 Modal emergente con lista de artículos, miniaturas y precios
- 5.2 Controles de cantidad y botón eliminar
- 5.3 Subtotal y botón de checkout
- 5.4 Mensaje vacío y gestión de errores
- 5.5 Footer oculto (no se muestra en modal)
CHECKOUT
- 6.1 Formulario de datos de envío y pago
- 6.2 Resumen de pedido y botón confirmar compra
- 6.3 Footer reutilizado
Imagen generada con OpenAI · gpt-image-2 · 09/06/2026
PROMPTS RELACIONADOS · BELLEZA / SPA
