COMERCIO ELECTRÓNICO · Claude Design · HTML

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

★★★★★4,8 3.636 descargas

Plataforma de venta online de productos de diseño Espacio donde el diseño se encuentra con la compra.

↓ 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** (lumina.com) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. El proyecto debe reproducir el diseño visual y la estructura del sitio de referencia, sin copiar texto ni imágenes originales. 

**ALCANCE**
- Página principal (home) con los bloques enumerados en la clave "secciones".
- Páginas internas: About, Works, Services, Blog, Contact, cada una con sus bloques según la tabla.
- Header fijo con logo SVG ficticio, menú horizontal (Home, About, Works, Services, Blog, Contact) y botón de carrito que abre un modal overlay.
- Modal de carrito: lista de productos simulada, subtotal, botones de eliminar y checkout (no funcional).
- Footer con tres columnas: Información de la empresa, enlaces rápidos, redes sociales (iconos SVG genéricos).

**PALETA DE COLORES**
- Primario: #1A202C (gris oscuro)
- Secundario: #3B82F6 (azul Tailwind 500)
- Accent: #10B981 (verde Tailwind 500)
- Fondo claro: #F9FAFB (gris muy claro)
- Texto principal: #111827 (casi negro)

**TIPOGRAFÍA**
- Fuente principal: "Inter", peso 400/600, importada via Google Fonts.
- Fuente secundaria (titulares): "Montserrat", peso 700, importada vía Google Fonts.

**HEADER**
- Container centrado max-w-7xl, flex entre logo y menú.
- Logo: SVG simple (círculo con letra L).
- Menú: enlaces con hover color primario, activo subrayado.
- Botón carrito: ícono de carrito + contador circular, fondo transparent, borde azul activo.

**HERO**
- Section con altura mínima 80vh, fondo degradado de #3B82F6 a #10B981.
- Texto centrado: h1 con Montserrat 4xl, p con Inter lg, botón CTA azul rounded-md.
- Animación suave de aparición (fade‑in) usando CSS @keyframes.

**SECCIONES INTERMEDIAS**
- Ventajas: grid 3 columnas (sm:grid-cols-1 md:grid-cols-3) con iconos SVG, título montserrat md, texto inter.
- Productos destacados: grid 4 cols (responsive a 2‑1), tarjetas con imagen placeholder (https://via.placeholder.com/300), nombre, precio, botón "Añadir" que actualiza el contador del carrito.
- Testimonios: carrusel simple con overflow‑x‑auto, tarjetas con foto placeholder, nombre y cita.
- CTA final: sección con fondo #1A202C, texto blanco, botón verde.

**FOOTER**
- Fondo #1A202C, texto gris claro, links en blanco con hover #3B82F6.
- Tres columnas: Sobre nosotros, Navegación, Social.

**INTERACTIVIDAD**
- Menú responsive: colapso en móvil (hamburger) usando Tailwind "hidden md:flex" y JS para toggle.
- Carrito modal: apertura/cierre con clase "hidden" y transición opacity‑scale.
- Botón "Añadir al carrito" incrementa contador en el header y muestra elemento ficticio en el modal.
- Carrusel de testimonios permite scroll horizontal con flechas.

**REQUISITOS TÉCNICOS**
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` y configuración de colores extendida.
- Importar fonts con `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Montserrat:wght@700&display=swap" rel="stylesheet">`.
- Todo el CSS personalizado dentro de `<style>` usando @layer utilities si es necesario.
- JavaScript al final del body, sin dependencias externas.
- Código bien indentado, comentarios explicativos y atributos aria para accesibilidad.
- No usar imágenes o textos reales del sitio origen; generar contenido ficticio coherente con la marca Lúmina.

Entregar el archivo `index.html` que contenga todas las páginas enlazadas mediante `<a href="about.html">`, etc., cada una con la misma estructura de header/footer y su contenido específico.

---

## 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>
```

3.892 caracteres · 73 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú y carrito
1.2 Hero con título, subtítulo y CTA
1.3 Bloque de ventajas (icono + texto) en 3 columnas
1.4 Grid de productos destacados (4 columnas responsive)
1.5 Testimonios con foto, nombre y comentario
1.6 CTA final con fondo contrastante
1.7 Footer con secciones de información y links

ABOUT

1.1 Header reutilizado
1.2 Imagen grande con texto descriptivo
1.3 Valores de la marca en tarjetas
1.4 Equipo en grid
1.5 CTA a contactar

WORKS

1.1 Header reutilizado
1.2 Galería filtrable de proyectos
1.3 Detalle de proyecto con imágenes y texto
1.4 CTA a ver más trabajos

SERVICES

1.1 Header reutilizado
1.2 Lista de servicios en tarjetas con icono
1.3 Sección de precios simplificada
1.4 Preguntas frecuentes en acordeón

BLOG

1.1 Header reutilizado
1.2 Lista de artículos en tarjetas
1.3 Sidebar con categorías y últimos posts

CONTACT

1.1 Header reutilizado
1.2 Formulario de contacto simple
1.3 Mapa embed y datos de contacto
1.4 CTA a suscribirse al newsletter

PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmina
Sector: Plataforma de venta online de productos de diseño
Claim: Espacio donde el diseño se encuentra con la compra

Bloques de la home

1.1 Header con logo, menú multienlace y botón de carrito modal
1.2 Hero con título, subtítulo y botón principal
1.3 Sección de ventajas con íconos y texto descriptivo
1.4 Galería de productos destacados en cuadrícula
1.5 Testimonios con carrusel sencillo
1.6 Llamado a la acción final con botón grande
1.7 Footer con enlaces de navegación, contacto 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