ENTRETENIMIENTO · Claude Design · HTML

LumenArcade — Prompt de diseño web para Claude AI

★★★★★4,8 398 descargas

Tienda online de videojuegos y accesorios esports Juega, compra y comparte sin límites.

↓ 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 LumenArcade, una tienda online de videojuegos y accesorios esports. Utiliza una única página HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Reproduce fielmente la estructura y los patrones visuales del sitio de referencia: diseño oscuro (#0d0d0d, #1a1a1a, #2b2b2b, #ff6600 para acentos), tipografía principal "Inter" para textos y "Orbitron" para titulares, ambas cargadas desde Google Fonts. 

**Alcance**: Home, Página de Productos, Detalle de Producto, Esports, Streaming, Blog, Contacto, About Us, Footer, Header con barra superior, menú mega‑dropdown, carrito modal con contador, formularios de login/registro. Cada página debe estar representada como una sección dentro del mismo archivo HTML (usar IDs y enlaces de ancla). 

**Header**: barra superior con notificación "Nueva temporada próximamente...", enlaces Login y Register; logo SVG decorativo; menú de navegación con dropdowns (Home, Esports, Streaming, Games con sub‑menú Sidebar/Without Sidebar, Pages con mega‑menu que incluye About, Blog, Contact, CMS pages y Utility pages). Botón de carrito que abre un modal mostrando artículos (imagen, nombre, precio, opciones). 

**Home**: 
1. Hero oscuro con título grande (fuente Orbitron, color #ff6600) y botón CTA "Explora la tienda". 
2. Grid de 4 categorías destacadas en tarjetas con íconos y hover que cambia fondo a #2b2b2b. 
3. Carrusel horizontal de productos destacados (cards con imagen, nombre, precio, botón "Añadir al carrito"). 
4. Sección de streaming con video embed (iframe) y título "En directo ahora". 
5. Blog preview con 3 tarjetas horizontales (imagen, título, extracto, enlace "Leer más"). 
6. Footer con 3 columnas: Navegación, Redes sociales (iconos SVG en color #ff6600) y suscripción al boletín (campo email y botón). 

**Productos**: filtro lateral (checkboxes), lista de tarjetas responsive (4 columnas en desktop, 2 en tablet, 1 en móvil). Cada tarjeta muestra imagen, nombre, precio, botón "Comprar". 

**Detalle**: galería de imágenes a la izquierda, información a la derecha (título, descripción, precio, selector de SKU, botón "Añadir al carrito"), sección de reseñas con estrellas. 

**Esports**, **Streaming**, **Blog**, **Contacto**, **About Us**: seguir la misma estética oscura, usar contenedores con sombra ligera, tipografía Inter para cuerpo y Orbitron para encabezados, botones con fondo #ff6600 y hover #e65c00. 

**Interactividad**: 
- Menú dropdown y mega‑menu con transición fade/slide (CSS & JS). 
- Carrito modal que se abre/cierra al hacer clic en el botón del header (JS que actualiza contador). 
- Carrusel de productos (simple scroll horizontal con botones prev/next). 
- Formulario de suscripción (validación email). 
- Smooth scroll para anclajes. 

**Requisitos técnicos**: 
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` y configuración Tailwind para usar los colores personalizados. 
- Cargar fuentes con `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">`. 
- Todo el CSS debe estar en una etiqueta `<style>` generada por Tailwind (usar `@layer utilities` si es necesario). 
- JavaScript al final del body, sin dependencias externas. 
- Mantener el HTML semántico (header, nav, main, section, footer). 
- Añadir atributos ARIA donde correspondan (modal, dropdown). 

Genera el código completo listo para copiar‑pegar en un archivo `index.html` que reproduzca este diseño y funcionalidad.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra superior con notificación y enlaces de login/registro
1.2 Logo y forma decorativa
1.3 Menú de navegación con dropdowns y mega‑menu
1.4 Botón de carrito modal con contador
1.5 Hero principal con fondo oscuro y llamado a la acción
1.6 Sección de categorías destacadas en grid
1.7 Carrusel de productos destacados
1.8 Área de streaming en vivo con video embed
1.9 Últimas entradas del blog en formato tarjeta
1.10 Footer con enlaces de información, redes y suscripción

PRODUCTOS

1.1 Hero de categoría con filtro lateral
1.2 Lista de productos en tarjetas con opción de añadir al carrito
1.3 Paginación y barra de resultados

DETALLE DE PRODUCTO

1.1 Galería de imágenes del juego
1.2 Información descriptiva, precio y botón de compra
1.3 Sección de reseñas y puntuación

ESPORTS

1.1 Hero con video de fondo y llamado a torneos
1.2 Listado de eventos próximos en tarjetas
1.3 Calendario interactivo

STREAMING

1.1 Header con título y botón de seguir
1.2 Player incrustado (iframe) y chat lateral
1.3 Lista de streams recomendados

BLOG

1.1 Lista de artículos en tarjetas con imagen, título y excerpt
1.2 Sidebar con categorías y newsletter
1.3 Pagination

CONTACTO

1.1 Formulario de contacto con campos básicos
1.2 Mapa incrustado y datos de empresa

ABOUT US

1.1 Historia de la marca en secciones con imagen y texto
1.2 Equipo en tarjetas con foto y descripción

FOOTER

1.1 Enlaces de navegación rápido
1.2 Iconos de redes sociales
1.3 Suscripción al boletín con campo email

LOGIN / REGISTER

1.1 Formularios de acceso y registro con validación simple
1.2 Enlace a restaurar contraseña

PROMPTS RELACIONADOS · ENTRETENIMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenArcade
Sector: Tienda online de videojuegos y accesorios esports
Claim: Juega, compra y comparte sin límites

Bloques de la home

1.1 Barra superior con notificación y enlaces de login/registro
1.2 Logo y forma decorativa
1.3 Menú de navegación con dropdowns y mega‑menu
1.4 Botón de carrito modal con contador
1.5 Hero principal con fondo oscuro y llamado a la acción
1.6 Sección de categorías destacadas en grid
1.7 Carrusel de productos destacados
1.8 Área de streaming en vivo con video embed
1.9 Últimas entradas del blog en formato tarjeta
1.10 Footer con enlaces de información, redes y suscripción

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