COMERCIO ELECTRÓNICO · Claude Design · HTML

Lumenia Mercurio — Prompt de diseño web para Claude AI

★★★★★4,7 2.797 descargas

Tienda de productos de diseño y estilo de vida Objetos con historia en cada detalle.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web de comercio electrónico llamado **Lumenia Mercurio** con el siguiente alcance y stack: HTML estático en un solo archivo, Tailwind CSS vía CDN, y JavaScript vanilla para interacciones básicas (menú dropdown, carrito modal, carrusel de testimonios). Utiliza la paleta de colores: #1A1A1A (negro profundo), #F5F5F5 (gris muy claro), #E63946 (rojo vibrante para botones y acentos), #006D77 (verde azulado para enlaces). Tipografía: **Inter** para títulos (weight 600) y **Roboto** para cuerpo (weight 400). 

**Header**: barra fija con fondo negro, logo en SVG blanco/negro que cambia según scroll, enlaces de navegación (Home, Work, Services, About, Shop, Contact) con sub‑menú "Pages" que despliega una cuadrícula de enlaces (Demo, Home, Services, Work, About, Shop, Insights, etc.). Cada enlace muestra un sub‑rayo animado al hover. A la derecha, icono de carrito con contador circular rojo que abre un modal modal de carrito con lista de ítems, totales y botón de checkout.

**Home**: 
1. Hero a pantalla completa con fondo de imagen difusa, título grande en Inter 4xl, subtítulo en Roboto, botón principal en rojo con hover verde azulado.
2. Grid de 4 tarjetas de producto destacado, cada una con imagen, nombre, precio y botón ‘Añadir’. Hover: sombra ligera y escala 1.05.
3. Sección de testimonios con carrusel automático (JS simple) de 3 cards, fondo gris muy claro, texto centrado.
4. Bloque de suscripción al newsletter: fondo negro, input blanco con foco rojo, botón rojo.
5. Footer: fondo negro, columnas de enlaces (Empresa, Ayuda, Legal), iconos de redes sociales en blanco, nota de copyright y enlace a archivo Figma gratuito.

**Páginas internas** (productos, detalle, about, blog, contacto) deben seguir la misma estructura de header y footer, con contenidos adaptados (grid de productos, galería de imágenes, formulario de contacto, etc.). Todas las imágenes usan atributos `loading="lazy"`. El sitio debe ser totalmente responsivo: menú colapsa en móvil con icono hamburger, carrito modal ocupa pantalla completa en móvil, grid se adapta a 1‑2‑4 columnas según ancho.

**Requisitos técnicos**: código HTML semántico, clases Tailwind descriptivas, sin frameworks externos, accesibilidad básica (ARIA labels en menú y carrito), sin referencias a la web original. El archivo debe estar listo para abrirse en el navegador y mostrar el diseño completo.

---

## 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.722 caracteres · 31 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, enlaces principales y dropdown de páginas
1.2 Icono de carrito con contador
1.3 Hero con fondo a pantalla completa y título llamativo
1.4 Bloque de categorías o productos destacados en grid
1.5 Sección de testimonios con carrusel simple
1.6 Formulario de suscripción al boletín
1.7 Footer con información de la empresa, enlaces de navegación, redes sociales y notas legales

PRODUCTOS

1.1 Lista de productos en cuadrícula responsive
1.2 Filtros lateral izquierdo
1.3 Paginación al fondo

DETALLE PRODUCTO

1.1 Galería de imágenes del producto
1.2 Información del producto, precio y botón ‘Añadir al carrito’
1.3 Sección de productos relacionados

SOBRE NOSOTROS

1.1 Texto descriptivo de la marca y su historia
1.2 Equipo con fotos y breves biografías
1.3 Valores y misión

BLOG

1.1 Lista de artículos con imágenes y extractos
1.2 Sidebar con categorías y newsletter

CONTACTO

1.1 Formulario de contacto simple
1.2 Mapa incrustado y datos de contacto

PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumenia Mercurio
Sector: Tienda de productos de diseño y estilo de vida
Claim: Objetos con historia en cada detalle

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces principales y dropdown de páginas
1.2 Icono de carrito con contador
1.3 Hero con fondo a pantalla completa y título llamativo
1.4 Bloque de categorías o productos destacados en grid
1.5 Sección de testimonios con carrusel simple
1.6 Formulario de suscripción al boletín
1.7 Footer con información de la empresa, enlaces de navegación, redes sociales y notas legales

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada