COMERCIO ELECTRÓNICO · Claude Design · HTML

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

★★★★★4,6 3.013 descargas

Plataforma de venta online de productos de estilo de vida y decoración Conecta con lo esencial en cada detalle.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Diseña una web completa para la marca ficticia LúminaMarket, una tienda online de estilo de vida y decoración. Utiliza únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. 

**Paleta de colores**: #1F2937 (gris oscuro), #3F4C6B (azul grisáceo), #F3F4F6 (gris muy claro), #E11D48 (rojo coral para CTA), #FFFFFF (blanco). 
**Tipografía**: Inter, sans‑serif, tamaños base 16px, títulos H1‑H4 con pesos 700/600/500.

**Header**: barra fija, fondo blanco, logo a la izquierda (texto LúminaMarket), menú horizontal con enlaces "Inicio", "Sobre nosotros", "Productos", "Blog", "Contacto" y un dropdown "Recursos" con enlaces internos. Botón de carrito a la derecha con contador circular. En móvil colapsar a ícono hamburguesa.

**Footer**: fondo #1F2937, texto gris claro, cuatro columnas: Información (sobre, política), Navegación (enlaces principales), Recursos (enlaces dropdown), Contacto (email, redes sociales). Incluye copyright y enlace a política de privacidad.

**Home**: 
1. Hero: sección de ancho completo, fondo degradado azul‑gris, titulo grande "Descubre lo esencial", subtítulo breve, botón primario rojo "Explorar productos" que ancla a la sección de productos. Imagen ilustrativa a la derecha (placeholder). 
2. Características: 3‑columnas, cada una con icono SVG, título corto y texto explicativo. 
3. Productos destacados: grid responsive 4‑col en desktop, 2‑col en tablet, 1‑col en móvil; tarjetas con imagen, nombre, precio, botón "Añadir al carrito" rojo. 
4. Testimonios: carrusel simple con 3 testimonios, foto circular, nombre y comentario. 
5. Suscripción: barra con input email y botón "Suscribirme" verde claro. 

**Páginas internas**: replicar header/footer. About: historia con imagen y texto, equipo en tarjetas, valores en bloques icónicos. Products: filtro de categorías, barra de búsqueda, lista de tarjetas como en home, paginación simple. Blog: lista de artículos con extracto y sidebar de categorías y posts recientes. Contact: formulario con campos nombre, email, asunto, mensaje y botón enviar, mapa embed placeholder.

**Interactividad**: 
- Menú hamburguesa abre/ciñe panel lateral. 
- Dropdown recursos muestra/oculta lista. 
- Carrito modal muestra items añadidos, permite remover y actualizar cantidad. 
- Carrusel testimonios avanza automáticamente y con flechas. 
- Validación simple del formulario de contacto (required). 
- Scroll suave para anclas.

**Requisitos técnicos**: 
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` al inicio. 
- Todos los estilos deben usar clases Tailwind, sin CSS externo. 
- JavaScript en bloque `<script>` al final del body, sin dependencias externas. 
- Marcar elementos interactivos con atributos `data-` para facilitar la lógica. 
- Optimizar para SEO: etiquetas meta, headings jerárquicos, atributos alt en imágenes.

Genera el código completo listo para copiar y pegar.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con barra de navegación, logo, enlaces principales, dropdown y botón de carrito
1.2 Hero con título destacado, subtítulo y botón principal
1.3 Bloque de características con iconos y descripción breve
1.4 Grid de productos destacados con imagen, nombre y precio
1.5 Testimonios en carrusel simple
1.6 Llamada a suscripción al boletín
1.7 Footer con enlaces institucionales, redes y datos de contacto

ABOUT

1.1 Cabecera compartida
1.2 Sección de historia con texto e imagen
1.3 Equipo en tarjetas con foto y cargo
1.4 Valores en bloques icónicos
1.5 Footer

PRODUCTS

1.1 Cabecera compartida
1.2 Filtro de categorías y barra de búsqueda
1.3 Lista de productos en tarjetas con nombre, precio y botón añadir al carrito
1.4 Paginación
1.5 Footer

BLOG

1.1 Cabecera compartida
1.2 Lista de artículos con imagen, título y extracto
1.3 Sidebar con categorías y posts recientes
1.4 Footer

CONTACT

1.1 Cabecera compartida
1.2 Formulario de contacto con campos nombre, email, asunto y mensaje
1.3 Mapa incrustado (placeholder)
1.4 Footer

PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO

Otros prompts de la misma categoría

Ficha de marca

Nombre: LúminaMarket
Sector: Plataforma de venta online de productos de estilo de vida y decoración
Claim: Conecta con lo esencial en cada detalle

Bloques de la home

1.1 Cabecera con barra de navegación, logo, enlaces principales, dropdown y botón de carrito
1.2 Hero con título destacado, subtítulo y botón principal
1.3 Bloque de características con iconos y descripción breve
1.4 Grid de productos destacados con imagen, nombre y precio
1.5 Testimonios en carrusel simple
1.6 Llamada a suscripción al boletín
1.7 Footer con enlaces institucionales, redes y datos de contacto

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

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

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

PRODUCTS

BLOG

CONTACT

Otros prompts de la misma categoría

Línea Áurea

Línea Aurora

Lino & Cañamo

Lumenova