COMERCIO ELECTRÓNICO · Claude Design · HTML

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

★★★★★4,9 2.944 descargas

Estudio creativo de diseño y venta de productos digitales Ideas que cobran forma.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia "Lúmina Atelier" (luminaatelier.com) usando solo HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. La web debe reproducir el diseño visual y la estructura de la plantilla analizada: 
- Paleta de colores: negro profundo #0a0a0a, gris carbón #212121, blanco puro #ffffff, acento azul eléctrico #2563eb, acento dorado #d4af37.
- Tipografía: encabezados con "Playfair Display" (serif), cuerpo con "Inter" (sans-serif).
- Header: barra superior con logo tipo texto "Lúmina Atelier", dirección ficticia "Madrid, España", hora estática "12:34:56", menú principal (Sobre Nosotros, Servicios, Tienda, Blog, Contacto) y botón de carrito con contador.
- Hero: sección a pantalla completa con imagen de fondo difuminada, título grande "Ideas que cobran forma" y subtítulo descriptivo, botón CTA "Explorar tienda".
- Sección Servicios: tres tarjetas horizontales con icono, título y breve descripción, efecto hover que eleva la tarjeta y cambia el color del borde a azul.
- Galería de proyectos: grid de 3 columnas en escritorio, 2 en tablet, 1 en móvil; cada ítem muestra una imagen y al pasar el ratón aparece una superposición con título y botón "Ver detalle".
- Testimonios: carrusel automático de 3 citas, indicadores de punto, texto centrado con nombre y foto pequeña.
- CTA tienda: barra con fondo azul, texto "Descubre nuestras creaciones" y botón "Ir a la tienda".
- Footer: fondo gris oscuro, columnas con enlaces (Empresa, Legal, Ayuda), iconos de redes sociales, y copia de derechos.
- Cada página interna (About, Services, Shop, Blog, Contact) debe reutilizar el mismo header y footer, y contener bloques descritos en la tabla. La página Shop incluye un grid de productos (imagen, nombre, precio, botón "Añadir") y un modal de carrito que muestra resumen, subtotal y botón "Continuar al checkout".
- Implementa interactividad con JavaScript: toggles de menú móvil, contador de carrito que se actualiza al añadir productos, apertura/cierre del modal del carrito, carrusel de testimonios y scroll suave para anclas.
- Todos los textos deben ser originales en español de España, sin copiar del original. No incluir datos reales ni precios concretos.
- El archivo debe comenzar con el DOCTYPE HTML, incluir los enlaces a Tailwind CDN y a Google Fonts, y terminar con scripts compactos al final. Asegura que el HTML sea válido y accesible (roles, aria-labels).

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, dirección, hora, menú principal y botón de carrito
1.2 Hero de portada con imagen de fondo y mensaje principal
1.3 Bloque de servicios con tarjetas de presentación
1.4 Galería de proyectos con grid responsive
1.5 Testimonios en carrusel
1.6 Llamada a la acción a la tienda
1.7 Footer con enlaces institucionales y redes sociales

ABOUT US

2.1 Cabecera idéntica a la home
2.2 Banner interior con título y subtítulo
2.3 Texto descriptivo del estudio y su misión
2.4 Equipo en tarjetas con foto y rol
2.5 CTA a contacto
2.6 Footer común

SERVICES

3.1 Cabecera idéntica
3.2 Lista de servicios en columnas con iconos
3.3 Detalle de cada servicio al hacer hover
3.4 CTA a tienda o proyecto
3.5 Footer común

SHOP

4.1 Cabecera con carrito activo
4.2 Grid de productos con imagen, nombre, precio y botón "Añadir"
4.3 Modal de carrito con resumen y checkout
4.4 Footer común

BLOG

5.1 Cabecera idéntica
5.2 Lista de artículos en tarjetas con imagen y extracto
5.3 Paginación inferior
5.4 Footer común

CONTACT

6.1 Cabecera idéntica
6.2 Formulario de contacto con campos nombre, email, mensaje
6.3 Mapa embebido
6.4 Footer común

PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmina Atelier
Sector: Estudio creativo de diseño y venta de productos digitales
Claim: Ideas que cobran forma

Bloques de la home

1.1 Cabecera con logo, dirección, hora, menú principal y botón de carrito
1.2 Hero de portada con imagen de fondo y mensaje principal
1.3 Bloque de servicios con tarjetas de presentación
1.4 Galería de proyectos con grid responsive
1.5 Testimonios en carrusel
1.6 Llamada a la acción a la tienda
1.7 Footer con enlaces institucionales y redes sociales

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