COMERCIO ELECTRÓNICO · Claude Design · HTML

Lúmina Arte — Prompt de diseño web para Claude AI

★★★★★4,6 830 descargas

Marketplace de productos de diseño independiente Ideas que cobran forma.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia Lúmina Arte, marketplace de productos de diseño independiente, usando únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo. Incluye las siguientes especificaciones:
- Paleta de colores: #1A1A1A (negro profundo), #F5F5F5 (gris claro), #E63946 (rojo vibrante), #A8DADC (azul pastel), #FFFFFF (blanco).
- Tipografía: Inter (google fonts) para cuerpo y títulos, peso 400/600/700 según necesidad.
- Header: barra sticky con logo a la izquierda, iconos sociales (Twitter, LinkedIn, Instagram, Dribbble) y botón de carrito que abre un modal. Incluye hamburguesa que despliega un menú lateral con enlaces: Inicio, Sobre nosotros, Colecciones, Blog, Contacto.
- Modal del carrito: lista de productos con miniatura, nombre, precio, selector de cantidad, botón eliminar, subtotal y botón "Continuar al checkout". Usa transiciones suaves.
- Home sections (en orden):
  1. Hero: fondo degradado azul pastel a rojo, título grande, subtítulo, dos botones CTA (Ver colecciones, Suscribirse).
  2. Colecciones destacadas: cuadrícula 3 columnas en desktop, 1 columna en móvil, tarjetas con imagen, overlay y nombre de la colección.
  3. Estadísticas: cuatro contadores animados (Productos, Diseñadores, Ventas, Reseñas) con iconos.
  4. Testimonios: carrusel horizontal de tarjetas con foto circular, nombre y comentario.
  5. Newsletter: campo de email y botón "Suscribirme" sobre fondo gris claro.
  6. Footer: columnas con enlaces (Empresa, Ayuda, Legal), redes sociales, pequeño formulario de contacto (email y mensaje) y copyright.
- Otras páginas: About, Collection, Product, Cart, Checkout – reutilizan header y footer y siguen la misma estética.
- Interactividad: menú hamburguesa abre/cierra con clase "hidden" toggle, carrusel de testimonios con simple JavaScript setInterval, contadores que se animan al entrar en viewport, formulario de newsletter con validación básica.
- Requisitos técnicos: usar Tailwind utility classes, evitar CSS custom files, incluir <script> al final para lógica de toggles, carrusel y contadores. Todo el código debe estar contenido en un único archivo index.html que funcione al abrirse directamente en el navegador.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.552 caracteres · 32 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera sticky con logo, iconos sociales y carrito modal
1.2 Menú hamburguesa lateral con enlaces de navegación
1.3 Hero principal con título, subtítulo y botones CTA
1.4 Bloque de colecciones destacadas en cuadrícula responsiva
1.5 Sección de estadísticas con contadores animados
1.6 Testimonios en carrusel horizontal
1.7 Formulario de suscripción al boletín
1.8 Footer con enlaces institucionales, redes sociales y formulario de contacto

ABOUT

2.1 Cabecera reutilizada
2.2 Hero interno con título "Sobre nosotros" y párrafo descriptivo
2.3 Equipo en tarjetas con foto y bio corta
2.4 Valores en iconos con texto
2.5 Footer reutilizado

COLLECTION

3.1 Cabecera reutilizada
3.2 Barra de filtros lateral
3.3 Grid de productos con imagen, nombre, precio y botón "Añadir"
3.4 Paginación inferior
3.5 Footer reutilizado

PRODUCT

4.1 Cabecera reutilizada
4.2 Galería de imágenes del producto
4.3 Detalle del producto: título, descripción, precio, selector de variantes, botón "Añadir al carrito"
4.4 Sección de productos relacionados en carrusel
4.5 Footer reutilizado

CART

5.1 Modal de carrito con lista de artículos, precios, cantidades editables y subtotal
5.2 Botón de checkout y opciones de pago rápido
5.3 Footer minimalista